| <html> |
| <head> |
| <style> |
| div { |
| width:200px; |
| height:200px; |
| border:2px solid black; |
| content: -webkit-canvas(triangle); |
| } |
| </style> |
| |
| <script id="vertexShader" type="x-shader/x-vertex"> |
| attribute vec4 vPosition; |
| |
| void main() { |
| gl_Position = vPosition; |
| } |
| </script> |
| |
| <script id="fragmentShader" type="x-shader/x-fragment"> |
| void main() { |
| gl_FragColor = vec4(0.8, 0.7, 0, 1.0); |
| } |
| </script> |
| |
| <script type="application/x-javascript"> |
| function getFragmentShader() |
| { |
| var shaderNode = document.getElementById("fragmentShader"); // fragmentShader has been defined at the top |
| var shaderSource = getShaderSource(shaderNode); |
| |
| var shader = gl.createShader(gl.FRAGMENT_SHADER); |
| gl.shaderSource(shader, shaderSource); |
| gl.compileShader(shader); |
| |
| return shader; |
| } |
| |
| function getShaderSource(shaderNode) |
| { |
| var shaderSource = ""; |
| var node = shaderNode.firstChild; |
| while (node) { |
| if (node.nodeType == 3) // Node.TEXT_NODE |
| shaderSource += node.textContent; |
| node = node.nextSibling; |
| } |
| |
| return shaderSource; |
| } |
| |
| function getVertexShader() |
| { |
| var shaderNode = document.getElementById("vertexShader"); |
| var shaderSource = getShaderSource(shaderNode); |
| |
| var shader = gl.createShader(gl.VERTEX_SHADER); |
| gl.shaderSource(shader, shaderSource); |
| gl.compileShader(shader); |
| |
| return shader; |
| } |
| |
| function initialize() |
| { |
| gl = document.getCSSCanvasContext("experimental-webgl", "triangle", 200, 200); |
| |
| var vertexShader = getVertexShader(); |
| var fragmentShader = getFragmentShader(); |
| |
| var shaderProgram = gl.createProgram(); |
| gl.attachShader(shaderProgram, vertexShader); |
| gl.attachShader(shaderProgram, fragmentShader); |
| gl.bindAttribLocation(shaderProgram, 0, "vPosition"); // vPosition has been defined at the top |
| gl.linkProgram(shaderProgram); |
| |
| gl.useProgram(shaderProgram); |
| |
| var buffer = gl.createBuffer(); |
| gl.bindBuffer(gl.ARRAY_BUFFER, buffer); |
| } |
| |
| function draw(r, g, b) |
| { |
| var vertices = [ 0.0, 0.8, 0.0, |
| -0.8, -0.8, 0.0, |
| 0.8, -0.8, 0.0 ]; |
| gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW); |
| |
| gl.vertexAttribPointer(0, 3, gl.FLOAT, false, 0, 0); // Load the vertex data |
| gl.enableVertexAttribArray(0); |
| gl.clearColor(r, g, b, 1); |
| gl.clear(gl.COLOR_BUFFER_BIT); |
| gl.drawArrays(gl.TRIANGLES, 0, 3); |
| } |
| |
| initialize(); |
| draw(0, 0.5, 0); |
| </script> |
| </head> |
| <body> |
| <div></div> |
| </body> |
| </html> |
