b/panorama-viewer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Zoom in

Browse Source
This commit is contained in:
Brandon Dyck 2022-10-23 23:30:15 -06:00
parent 3fa9cf2c94
commit 6fdd07cc14
2 changed files with 16 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@ -11,7 +11,7 @@
</head> </head>
<body> <body>
<h1>Panorama Viewer</h1> <h1>Panorama Viewer</h1>
<canvas id="viewer" width="800" height="800" style="border: 1px solid black;"></canvas> <canvas id="viewer" width="800" height="300" style="border: 1px solid black;"></canvas>
<img id="image" height="400" width="800" src="Provo_River_Falls_360.JPG"> <img id="image" height="400" width="800" src="Provo_River_Falls_360.JPG">
</body> </body>
</html> </html>

17
panorama-viewer.js
View File

@ -72,11 +72,13 @@
attribute vec2 textureCoord; attribute vec2 textureCoord;
uniform mat4 modelMatrix; uniform mat4 modelMatrix;
uniform mat4 projectionMatrix;
// uniform mat4 viewMatrix;
varying highp vec2 vTextureCoord; varying highp vec2 vTextureCoord;
void main() { void main() {
gl_Position = modelMatrix * vec4(position, 1); gl_Position = projectionMatrix * modelMatrix * vec4(position, 1);
vTextureCoord = textureCoord; vTextureCoord = textureCoord;
} }
`; `;
@ -136,6 +138,8 @@
let gl = viewer.getContext("webgl2"); let gl = viewer.getContext("webgl2");
let program = initShaderProgram(gl); let program = initShaderProgram(gl);
let modelMatrixLocation = gl.getUniformLocation(program, "modelMatrix"); let modelMatrixLocation = gl.getUniformLocation(program, "modelMatrix");
let projectionMatrixLocation = gl.getUniformLocation(program, "projectionMatrix");
const viewMatrixLocation = gl.getUniformLocation(program, "viewMatrix");
// Set up mouse-panning state machine. // Set up mouse-panning state machine.
let θy = 0; let θy = 0;
@ -202,11 +206,20 @@
gl.useProgram(program); gl.useProgram(program);
// Create the transformation matrix. // Create the transformation matrix.
let modelMatrix = mat4.create(); const modelMatrix = mat4.create();
mat4.rotateX(modelMatrix, modelMatrix, θx); mat4.rotateX(modelMatrix, modelMatrix, θx);
mat4.rotateY(modelMatrix, modelMatrix, θy); mat4.rotateY(modelMatrix, modelMatrix, θy);
gl.uniformMatrix4fv(modelMatrixLocation, false, modelMatrix); 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.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.enableVertexAttribArray(positionLocation); gl.enableVertexAttribArray(positionLocation);
gl.vertexAttribPointer(positionLocation, 3, gl.FLOAT, false, cylinder.vertexStride, cylinder.positionOffset); gl.vertexAttribPointer(positionLocation, 3, gl.FLOAT, false, cylinder.vertexStride, cylinder.positionOffset);