10000_triangles.html [plain text]

<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>