| <html> |
| <body style="margin: 0"> |
| <canvas width="1000" height="1000"></canvas> |
| </body> |
| </html> |
| <script> |
| var canvas = document.getElementsByTagName("canvas")[0]; |
| gl = canvas.getContext("experimental-webgl"); |
| gl.clearColor(0.0, 1.0, 0.0, 1.0); |
| gl.viewport(0, 0, canvas.width, canvas.height); |
| |
| var vertexShader = gl.createShader(gl.VERTEX_SHADER); |
| gl.shaderSource(vertexShader, "attribute vec4 vPosition;\nvoid main() { gl_Position = vPosition; }"); |
| gl.compileShader(vertexShader); |
| |
| var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER); |
| gl.shaderSource(fragmentShader, "void main() { gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); }"); |
| gl.compileShader(fragmentShader); |
| |
| var shaderProgram = gl.createProgram(); |
| gl.attachShader(shaderProgram, vertexShader); |
| gl.attachShader(shaderProgram, fragmentShader); |
| gl.bindAttribLocation(shaderProgram, 0, "vPosition"); |
| gl.linkProgram(shaderProgram); |
| |
| gl.useProgram(shaderProgram); |
| |
| var buffer = gl.createBuffer(); |
| gl.bindBuffer(gl.ARRAY_BUFFER, buffer); |
| |
| var vertices = []; |
| var seedX = -1.0; |
| var seedY = 1.0; |
| for (var i = 1; i <= 10000; ++i) { |
| vertices.push(seedX); |
| vertices.push(seedY); |
| vertices.push(0); |
| seedX += 0.01; |
| vertices.push(seedX); |
| vertices.push(seedY - 0.02); |
| vertices.push(0); |
| seedX += 0.01; |
| vertices.push(seedX); |
| vertices.push(seedY); |
| vertices.push(0); |
| if (!(i % 100)) { |
| seedX = -1.0; |
| seedY -= 0.02; |
| } |
| } |
| gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW); |
| |
| |
| gl.vertexAttribPointer(0, 3, gl.FLOAT, false, 0, 0); |
| gl.enableVertexAttribArray(0); |
| gl.clear(gl.COLOR_BUFFER_BIT); |
| gl.drawArrays(gl.TRIANGLES, 0, 30000); |
| gl.flush(); |
| </script> |
