let gl; let theta = 0; let phi = 0; let radius = 1; let near = -2; let far = 2; let left = -2; let right = 2; let ytop = 2; let bottom = -2; let modelViewMatrix, projectionMatrix; let modelViewMatrixLoc, projectionMatrixLoc; let numPositions = 0; function init() { let canvas = document.getElementById("gl-canvas"); gl = WebGLUtils.setupWebGL(canvas); if (!gl) { alert("WebGL isn't available"); } // Load colors let colors = [ vec4(0.0, 0.0, 0.0, 1.0), vec4(1.0, 0.0, 0.0, 1.0), vec4(1.0, 1.0, 0.0, 1.0), vec4(0.0, 1.0, 0.0, 1.0), vec4(0.0, 0.0, 1.0, 1.0), vec4(1.0, 0.0, 1.0, 1.0), vec4(1.0, 1.0, 1.0, 1.0), vec4(0.0, 1.0, 1.0, 1.0) ]; // Load positions let positions = [ vec4(0.0, 0.0, 1.0, 1.0), vec4(0.0, 0.942809, -0.333333, 1.0), vec4(-0.816497, -0.471405, -0.333333, 1.0), vec4(0.816497, -0.471405, -0.333333, 1.0) ]; // Load indices let indices = [ 0, 1, 2, 1, 0, 3, 2, 3, 0, 3, 2, 1 ]; // Configure viewport gl.viewport(0, 0, canvas.width, canvas.height); gl.clearColor(1.0, 1.0, 1.0, 1.0); gl.enable(gl.DEPTH_TEST); // Create shaders let vertexShader = gl.createShader(gl.VERTEX_SHADER); let fragmentShader = gl.createShader(gl.FRAGMENT_SHADER); let vShaderSource = ` in vec4 aPosition; in vec4 aColor; out vec4 vColor; uniform mat4 uModelViewMatrix; uniform mat4 uProjectionMatrix; void main() { vColor = aColor; gl_Position = uProjectionMatrix * uModelViewMatrix * aPosition; } `; let fShaderSource = ` in vec4 vColor; out vec4 fColor; void main() { fColor = vColor; } `; gl.shaderSource(vertexShader, vShaderSource); gl.shaderSource(fragmentShader, fShaderSource); gl.compileShader(vertexShader); gl.compileShader(fragmentShader); if (!gl.getShaderParameter(vertexShader, gl.COMPILE_STATUS)) { alert("Error compiling vertex shader: " + gl.getShaderInfoLog(vertexShader)); } if (!gl.getShaderParameter(fragmentShader, gl.COMPILE_STATUS)) { alert("Error compiling fragment shader: " + gl.getShaderInfoLog(fragmentShader)); } let program = gl.createProgram(); gl.attachShader(program, vertexShader); gl.attachShader(program, fragmentShader); gl.linkProgram(program); if (!gl.getProgramParameter(program, gl.LINK_STATUS)) { alert("Unable to initialize the shader program."); } gl.useProgram(program); // Load colors let cBuffer = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, cBuffer); gl.bufferData(gl.ARRAY_BUFFER, flatten(colors), gl.STATIC_DRAW); let vColor = gl.getAttribLocation(program, "aColor"); gl.vertexAttribPointer(vColor, 4, gl.FLOAT, false, 0, 0); gl.enableVertexAttribArray(vColor); // Load positions let vBuffer = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, vBuffer); gl.bufferData(gl.ARRAY_BUFFER, flatten(positions), gl.STATIC_DRAW); let vPosition = gl.getAttribLocation(program, "aPosition"); gl.vertexAttribPointer(vPosition, 4, gl.FLOAT, false, 0, 0); gl.enableVertexAttribArray(vPosition); // Load indices let iBuffer = gl.createBuffer(); gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, iBuffer); gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint8Array(indices), gl.STATIC_DRAW); numPositions = indices.length; // Get handles for uniform variables modelViewMatrixLoc = gl.getUniformLocation(program, "uModelViewMatrix"); projectionMatrixLoc = gl.getUniformLocation(program, "uProjectionMatrix"); // Set up event handlers for the sliders document.getElementById("thetaSlider").onchange = function() { theta = event.target.value * Math.PI / 180; }; document.getElementById("phiSlider").onchange = function() { phi = event.target.value * Math.PI / 180; }; document.getElementById("radiusSlider").onchange = function() { radius = event.target.value; }; document.getElementById("depthSlider").onchange = function() { far = event.target.value / 2; near = -event.target.value / 2; }; render(); } // Render the scene function render() { gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); let eye = vec3( radius * Math.sin(theta) * Math.cos(phi), radius * Math.sin(theta) * Math.sin(phi), radius * Math.cos(theta) ); const at = vec3(0.0, 0.0, 0.0); const up = vec3(0.0, 1.0, 0.0); let modelViewMatrix = lookAt(eye, at, up); let projectionMatrix = ortho(left, right, bottom, ytop, near, far); gl.uniformMatrix4fv(modelViewMatrixLoc, false, flatten(modelViewMatrix)); gl.uniformMatrix4fv(projectionMatrixLoc, false, flatten(projectionMatrix)); gl.drawElements(gl.TRIANGLES, numPositions, gl.UNSIGNED_BYTE, 0); requestAnimationFrame(render); } I cannot this code to compile correctly. Please fix the code, to it will work properly.