1 <html> 2 <body style="margin: 0"> 3 <canvas width="1000" height="1000"></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 = []; 32 var seedX = -1.0; 33 var seedY = 1.0; 34 for (var i = 1; i <= 10000; ++i) { 35 vertices.push(seedX); 36 vertices.push(seedY); 37 vertices.push(0); 38 seedX += 0.01; 39 vertices.push(seedX); 40 vertices.push(seedY - 0.02); 41 vertices.push(0); 42 seedX += 0.01; 43 vertices.push(seedX); 44 vertices.push(seedY); 45 vertices.push(0); 46 if (!(i % 100)) { 47 seedX = -1.0; 48 seedY -= 0.02; 49 } 50 } 51 gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW); 52 53 54 gl.vertexAttribPointer(0, 3, gl.FLOAT, false, 0, 0); 55 gl.enableVertexAttribArray(0); 56 gl.clear(gl.COLOR_BUFFER_BIT); 57 gl.drawArrays(gl.TRIANGLES, 0, 30000); 58 gl.flush(); 59 </script> 60
