Jump to content

WebGL:Test

From Apogea Wiki
// Simple test scene - rotating triangle
scene.init = function (gl, canvas) {
    var vsSource = `
          attribute vec4 aPosition;
          attribute vec3 aColor;
          uniform float uTime;
          varying vec3 vColor;
          void main() {
              float c = cos(uTime);
              float s = sin(uTime);
              mat2 rot = mat2(c, -s, s, c);
              vec2 pos = rot * aPosition.xy;
              gl_Position = vec4(pos, 0.0, 1.0);
              vColor = aColor;
          }
      `;

    var fsSource = `
          precision mediump float;
          varying vec3 vColor;
          void main() {
              gl_FragColor = vec4(vColor, 1.0);
          }
      `;

    function compileShader(type, source) {
        var shader = gl.createShader(type);
        gl.shaderSource(shader, source);
        gl.compileShader(shader);
        return shader;
    }

    var vs = compileShader(gl.VERTEX_SHADER, vsSource);
    var fs = compileShader(gl.FRAGMENT_SHADER, fsSource);

    scene.program = gl.createProgram();
    gl.attachShader(scene.program, vs);
    gl.attachShader(scene.program, fs);
    gl.linkProgram(scene.program);

    var vertices = new Float32Array([
        0.0, 0.5, 1.0, 0.0, 0.0,
        -0.5, -0.5, 0.0, 1.0, 0.0,
        0.5, -0.5, 0.0, 0.0, 1.0
    ]);

    scene.vao = gl.createVertexArray();
    gl.bindVertexArray(scene.vao);

    var buffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
    gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);

    var aPosition = gl.getAttribLocation(scene.program, 'aPosition');
    gl.enableVertexAttribArray(aPosition);
    gl.vertexAttribPointer(aPosition, 2, gl.FLOAT, false, 20, 0);

    var aColor = gl.getAttribLocation(scene.program, 'aColor');
    gl.enableVertexAttribArray(aColor);
    gl.vertexAttribPointer(aColor, 3, gl.FLOAT, false, 20, 8);

    scene.uTime = gl.getUniformLocation(scene.program, 'uTime');
    gl.clearColor(0.1, 0.1, 0.15, 1.0);
};

scene.render = function (gl, time) {
    gl.clear(gl.COLOR_BUFFER_BIT);
    gl.useProgram(scene.program);
    gl.bindVertexArray(scene.vao);
    gl.uniform1f(scene.uTime, time);
    gl.drawArrays(gl.TRIANGLES, 0, 3);
};

scene.resize = function (gl, width, height) {
    gl.viewport(0, 0, width, height);
};