diff --git a/index.html b/index.html index 5f42803..79f414e 100644 --- a/index.html +++ b/index.html @@ -11,7 +11,7 @@

Panorama Viewer

- + \ No newline at end of file diff --git a/panorama-viewer.js b/panorama-viewer.js index 458abcc..96839dd 100644 --- a/panorama-viewer.js +++ b/panorama-viewer.js @@ -72,11 +72,13 @@ attribute vec2 textureCoord; uniform mat4 modelMatrix; + uniform mat4 projectionMatrix; + // uniform mat4 viewMatrix; varying highp vec2 vTextureCoord; void main() { - gl_Position = modelMatrix * vec4(position, 1); + gl_Position = projectionMatrix * modelMatrix * vec4(position, 1); vTextureCoord = textureCoord; } `; @@ -136,6 +138,8 @@ let gl = viewer.getContext("webgl2"); let program = initShaderProgram(gl); let modelMatrixLocation = gl.getUniformLocation(program, "modelMatrix"); + let projectionMatrixLocation = gl.getUniformLocation(program, "projectionMatrix"); + const viewMatrixLocation = gl.getUniformLocation(program, "viewMatrix"); // Set up mouse-panning state machine. let θy = 0; @@ -202,11 +206,20 @@ gl.useProgram(program); // Create the transformation matrix. - let modelMatrix = mat4.create(); + const modelMatrix = mat4.create(); mat4.rotateX(modelMatrix, modelMatrix, θx); mat4.rotateY(modelMatrix, modelMatrix, θy); gl.uniformMatrix4fv(modelMatrixLocation, false, modelMatrix); + const aspect = gl.drawingBufferWidth / gl.drawingBufferHeight; + // TODO find a minimum zoom that won't show the edges of the sphere. + const zoom = 4; + 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);