"use strict"; (() => { const initShaderProgram = (gl) => { const vShaderSrc = ` attribute vec3 position; uniform mat4 viewMatrix; void main() { gl_Position = viewMatrix * vec4(position, 1); } `; const fShaderSrc = ` void main() { gl_FragColor = vec4(0.5, 0.5, 0, 1); } `; const compileShader = (src, type) => { let shader = gl.createShader(type); gl.shaderSource(shader, src); gl.compileShader(shader); let success = gl.getShaderParameter(shader, gl.COMPILE_STATUS); if (!success) { throw gl.getShaderInfoLog(vShader); } return shader; } let vShader = compileShader(vShaderSrc, gl.VERTEX_SHADER); let fShader = compileShader(fShaderSrc, gl.FRAGMENT_SHADER); let program = gl.createProgram(); gl.attachShader(program, vShader); gl.attachShader(program, fShader); gl.linkProgram(program); let success = gl.getProgramParameter(program, gl.LINK_STATUS); if (!success) { throw gl.getProgramInfoLog(program); } return program; }; let viewer = document.getElementById("viewer"); let gl = viewer.getContext("webgl2"); let program = initShaderProgram(gl); let viewMatrixLocation = gl.getUniformLocation(program, "viewMatrix"); let rotation = 0; let then = 0; const render = (now) => { const Δtime = (now - then) * 0.001; then = now; gl.useProgram(program); let vertexBuffer = gl.createBuffer(); let vertices = new Float32Array([ 0, 0, 0, 1, 0, 0, 1, 1, 0, ]); gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer); gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW); // Create the transformation matrix. let viewMatrix = mat4.create(); mat4.rotateX(viewMatrix, viewMatrix, 0.25); mat4.rotateY(viewMatrix, viewMatrix, rotation); gl.uniformMatrix4fv(viewMatrixLocation, false, viewMatrix); let positionLocation = gl.getAttribLocation(program, "position"); gl.enableVertexAttribArray(positionLocation); gl.vertexAttribPointer(positionLocation, 3, gl.FLOAT, false, 4*3, 0); gl.drawArrays(gl.TRIANGLES, 0, 3); rotation += Δtime; requestAnimationFrame(render); }; requestAnimationFrame(render); })();