1 <html> 2 <body style="margin: 0"> 3 <canvas width="100" height="100"></canvas> 4 </body> 5 </html> 6 <script> 7 var canvas = document.getElementsByTagName("canvas")[0]; 8 gl = canvas.getContext("experimental-webgl"); 9 gl.clearColor(0.0, 1.0, 0.0, 1.0); 10 gl.viewport(0, 0, canvas.width, canvas.height); 11 12 var vertexShader = gl.createShader(gl.VERTEX_SHADER); 13 gl.shaderSource(vertexShader, "attribute vec4 vPosition;\nvoid main() { gl_Position = vPosition; }"); 14 gl.compileShader(vertexShader); 15 16 var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER); 17 gl.shaderSource(fragmentShader, "void main() { gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); }"); 18 gl.compileShader(fragmentShader); 19 20 var shaderProgram = gl.createProgram(); 21 gl.attachShader(shaderProgram, vertexShader); 22 gl.attachShader(shaderProgram, fragmentShader); 23 gl.bindAttribLocation(shaderProgram, 0, "vPosition"); 24 gl.linkProgram(shaderProgram); 25 26 gl.useProgram(shaderProgram); 27 28 var buffer = gl.createBuffer(); 29 gl.bindBuffer(gl.ARRAY_BUFFER, buffer); 30 31 var vertices = [-1.0, -1.0, 32 0.0, 0.0, 33 -1.0, 1.0]; 34 var seedX = -1.0; 35 var seedY = 1.0; 36 vertices 37 gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW); 38 39 40 gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0); 41 gl.enableVertexAttribArray(0); 42 gl.clear(gl.COLOR_BUFFER_BIT); 43 gl.drawArrays(gl.TRIANGLES, 0, 3); 44 gl.flush(); 45 </script> 46
