Give some things better names
This commit is contained in:
parent
62aa9edc14
commit
bf1856c84c
3
TODO.txt
3
TODO.txt
@ -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
|
|
||||||
|
@ -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);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user