diff --git a/TODO.txt b/TODO.txt index e8f9883..71aa7ed 100644 --- a/TODO.txt +++ b/TODO.txt @@ -16,6 +16,3 @@ Add licenses Add instructions Fix up code locality Give the uniforms simpler names -Delete the defunct view matrix -Rename the model matrix as the view matrix, because that's really what it is. -Consider better names for the angle variables diff --git a/panorama-viewer.js b/panorama-viewer.js index 9a75c76..559c52e 100644 --- a/panorama-viewer.js +++ b/panorama-viewer.js @@ -1,6 +1,6 @@ "use strict"; (() => { - const makeCylinder = (meridians = 3, parallels = 3) => { + const makeSphere = (meridians = 3, parallels = 3) => { // The number of meridians dividing the sphere's surface. // Two meridians would make an XZ plane. if (meridians < 3) { @@ -71,14 +71,13 @@ attribute vec3 position; attribute vec2 textureCoord; - uniform mat4 modelMatrix; + uniform mat4 viewMatrix; uniform mat4 projectionMatrix; - // uniform mat4 viewMatrix; varying highp vec2 vTextureCoord; void main() { - gl_Position = projectionMatrix * modelMatrix * vec4(position, 1); + gl_Position = projectionMatrix * viewMatrix * vec4(position, 1); vTextureCoord = textureCoord; } `; @@ -137,13 +136,12 @@ let viewer = document.getElementById("viewer"); let gl = viewer.getContext("webgl2"); let program = initShaderProgram(gl); - let modelMatrixLocation = gl.getUniformLocation(program, "modelMatrix"); + let viewMatrixLocation = gl.getUniformLocation(program, "viewMatrix"); let projectionMatrixLocation = gl.getUniformLocation(program, "projectionMatrix"); - const viewMatrixLocation = gl.getUniformLocation(program, "viewMatrix"); // Set up mouse-panning state machine. - let θy = 0; - let θx = 0; + let yaw = 0; + let pitch = 0; const PanState = Object.freeze({ idle: (event) => { if (event.type === "mousedown") { @@ -161,12 +159,12 @@ } break; case "mousemove": - θy += event.movementX * 0.005; - θx += event.movementY * 0.005; - if (θx < -Math.PI / 2) { - θx = -Math.PI / 2; - } else if (θx > Math.PI / 2) { - θx = Math.PI / 2; + yaw += event.movementX * 0.005; + pitch += event.movementY * 0.005; + if (pitch < -Math.PI / 2) { + pitch = -Math.PI / 2; + } else if (pitch > Math.PI / 2) { + pitch = Math.PI / 2; } break } @@ -191,17 +189,17 @@ }); gl.useProgram(program); - const cylinder = makeCylinder(24, 24); + const sphere = makeSphere(24, 24); let vertexBuffer = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer); - gl.bufferData(gl.ARRAY_BUFFER, cylinder.vertices, gl.STATIC_DRAW); + gl.bufferData(gl.ARRAY_BUFFER, sphere.vertices, gl.STATIC_DRAW); const positionLocation = gl.getAttribLocation(program, "position"); const textureCoordLocation = gl.getAttribLocation(program, "textureCoord"); let indexBuffer = gl.createBuffer(); gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer); - gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, cylinder.indices, gl.STATIC_DRAW); + gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, sphere.indices, gl.STATIC_DRAW); gl.enable(gl.CULL_FACE); @@ -214,26 +212,23 @@ gl.useProgram(program); // Create the transformation matrix. - const modelMatrix = mat4.create(); - mat4.rotateX(modelMatrix, modelMatrix, θx); - mat4.rotateY(modelMatrix, modelMatrix, θy); - gl.uniformMatrix4fv(modelMatrixLocation, false, modelMatrix); + const viewMatrix = mat4.create(); + mat4.rotateX(viewMatrix, viewMatrix, pitch); + mat4.rotateY(viewMatrix, viewMatrix, yaw); + gl.uniformMatrix4fv(viewMatrixLocation, false, viewMatrix); const aspect = gl.drawingBufferWidth / gl.drawingBufferHeight; const projectionMatrix = mat4.ortho(mat4.create(), -aspect / zoom, aspect / zoom, -1 / zoom, 1 / zoom, -1, 1); gl.uniformMatrix4fv(projectionMatrixLocation, false, projectionMatrix); - // const viewMatrix = mat4.lookAt(mat4.create(), [0, 0, 0], [0, 0, 1], [0, 1, 0]); - // gl.uniformMatrix4fv(viewMatrixLocation, false, viewMatrix); - gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer); gl.enableVertexAttribArray(positionLocation); - gl.vertexAttribPointer(positionLocation, 3, gl.FLOAT, false, cylinder.vertexStride, cylinder.positionOffset); + gl.vertexAttribPointer(positionLocation, 3, gl.FLOAT, false, sphere.vertexStride, sphere.positionOffset); gl.enableVertexAttribArray(textureCoordLocation); - gl.vertexAttribPointer(textureCoordLocation, 2, gl.FLOAT, false, cylinder.vertexStride, cylinder.textureCoordOffset); + gl.vertexAttribPointer(textureCoordLocation, 2, gl.FLOAT, false, sphere.vertexStride, sphere.textureCoordOffset); gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer); - gl.drawElements(gl.TRIANGLES, cylinder.indices.length, gl.UNSIGNED_SHORT, 0); + gl.drawElements(gl.TRIANGLES, sphere.indices.length, gl.UNSIGNED_SHORT, 0); requestAnimationFrame(render); };