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
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

49
panorama-viewer.js
View File

@ -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);
};