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

Give some things better names

Browse Source
This commit is contained in:
Brandon Dyck 2024-07-22 16:01:28 -06:00
parent 62aa9edc14
commit bf1856c84c
2 changed files with 22 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
TODO.txt
View File

@ -16,6 +16,3 @@ Add licenses
Add instructions Add instructions
Fix up code locality Fix up code locality
Give the uniforms simpler names 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

49
panorama-viewer.js
View File

@ -1,6 +1,6 @@
"use strict"; "use strict";
(() => { (() => {
const makeCylinder = (meridians = 3, parallels = 3) => { const makeSphere = (meridians = 3, parallels = 3) => {
// The number of meridians dividing the sphere's surface. // The number of meridians dividing the sphere's surface.
// Two meridians would make an XZ plane. // Two meridians would make an XZ plane.
if (meridians < 3) { if (meridians < 3) {
@ -71,14 +71,13 @@
attribute vec3 position; attribute vec3 position;
attribute vec2 textureCoord; attribute vec2 textureCoord;
uniform mat4 modelMatrix; uniform mat4 viewMatrix;
uniform mat4 projectionMatrix; uniform mat4 projectionMatrix;
// uniform mat4 viewMatrix;
varying highp vec2 vTextureCoord; varying highp vec2 vTextureCoord;
void main() { void main() {
gl_Position = projectionMatrix * modelMatrix * vec4(position, 1); gl_Position = projectionMatrix * viewMatrix * vec4(position, 1);
vTextureCoord = textureCoord; vTextureCoord = textureCoord;
} }
`; `;
@ -137,13 +136,12 @@
let viewer = document.getElementById("viewer"); let viewer = document.getElementById("viewer");
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 viewMatrixLocation = gl.getUniformLocation(program, "viewMatrix");
let projectionMatrixLocation = gl.getUniformLocation(program, "projectionMatrix"); 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 yaw = 0;
let θx = 0; let pitch = 0;
const PanState = Object.freeze({ const PanState = Object.freeze({
idle: (event) => { idle: (event) => {
if (event.type === "mousedown") { if (event.type === "mousedown") {
@ -161,12 +159,12 @@
} }
break; break;
case "mousemove": case "mousemove":
θy += event.movementX * 0.005; yaw += event.movementX * 0.005;
θx += event.movementY * 0.005; pitch += event.movementY * 0.005;
if (θx < -Math.PI / 2) { if (pitch < -Math.PI / 2) {
θx = -Math.PI / 2; pitch = -Math.PI / 2;
} else if (θx > Math.PI / 2) { } else if (pitch > Math.PI / 2) {
θx = Math.PI / 2; pitch = Math.PI / 2;
} }
break break
} }
@ -191,17 +189,17 @@
}); });
gl.useProgram(program); gl.useProgram(program);
const cylinder = makeCylinder(24, 24); const sphere = makeSphere(24, 24);
let vertexBuffer = gl.createBuffer(); let vertexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer); 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 positionLocation = gl.getAttribLocation(program, "position");
const textureCoordLocation = gl.getAttribLocation(program, "textureCoord"); const textureCoordLocation = gl.getAttribLocation(program, "textureCoord");
let indexBuffer = gl.createBuffer(); let indexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer); 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); gl.enable(gl.CULL_FACE);
@ -214,26 +212,23 @@
gl.useProgram(program); gl.useProgram(program);
// Create the transformation matrix. // Create the transformation matrix.
const modelMatrix = mat4.create(); const viewMatrix = mat4.create();
mat4.rotateX(modelMatrix, modelMatrix, θx); mat4.rotateX(viewMatrix, viewMatrix, pitch);
mat4.rotateY(modelMatrix, modelMatrix, θy); mat4.rotateY(viewMatrix, viewMatrix, yaw);
gl.uniformMatrix4fv(modelMatrixLocation, false, modelMatrix); gl.uniformMatrix4fv(viewMatrixLocation, false, viewMatrix);
const aspect = gl.drawingBufferWidth / gl.drawingBufferHeight; const aspect = gl.drawingBufferWidth / gl.drawingBufferHeight;
const projectionMatrix = mat4.ortho(mat4.create(), -aspect / zoom, aspect / zoom, -1 / zoom, 1 / zoom, -1, 1); const projectionMatrix = mat4.ortho(mat4.create(), -aspect / zoom, aspect / zoom, -1 / zoom, 1 / zoom, -1, 1);
gl.uniformMatrix4fv(projectionMatrixLocation, false, projectionMatrix); 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, sphere.vertexStride, sphere.positionOffset);
gl.enableVertexAttribArray(textureCoordLocation); 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.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); requestAnimationFrame(render);
}; };