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

Move vertex data out of the render loop

Browse Source
This commit is contained in:
Brandon Dyck 2022-10-23 09:56:44 -06:00
parent 03fc64b7eb
commit b91ab4b547
1 changed files with 17 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
panorama-viewer.js
View File

@ -106,9 +106,20 @@
viewer.addEventListener("mouseover", runPanState); viewer.addEventListener("mouseover", runPanState);
viewer.addEventListener("mousemove", runPanState); viewer.addEventListener("mousemove", runPanState);
gl.useProgram(program);
let vertexBuffer = gl.createBuffer();
let vertices = new Float32Array([
0, 0, 0,
1, 0, 0,
1, 1, 0,
]);
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
const positionLocation = gl.getAttribLocation(program, "position");
// Load texture // Load texture
let image = document.getElementById("image"); let image = document.getElementById("image");
let texture = loadTexture(gl, image); loadTexture(gl, image);
gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true); gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
let textureCoordBuffer = gl.createBuffer(); let textureCoordBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, textureCoordBuffer); gl.bindBuffer(gl.ARRAY_BUFFER, textureCoordBuffer);
@ -119,32 +130,25 @@
]); ]);
gl.bufferData(gl.ARRAY_BUFFER, textureCoords, gl.STATIC_DRAW); gl.bufferData(gl.ARRAY_BUFFER, textureCoords, gl.STATIC_DRAW);
const textureCoordLocation = gl.getAttribLocation(program, "textureCoord"); const textureCoordLocation = gl.getAttribLocation(program, "textureCoord");
gl.enableVertexAttribArray(textureCoordLocation);
gl.vertexAttribPointer(textureCoordLocation, 3, gl.FLOAT, false, 4 * 2, 0);
const render = () => { const render = () => {
gl.useProgram(program); gl.useProgram(program);
let vertexBuffer = gl.createBuffer();
let vertices = new Float32Array([
0, 0, 0,
1, 0, 0,
1, 1, 0,
]);
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
// Create the transformation matrix. // Create the transformation matrix.
let modelMatrix = mat4.create(); let 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);
let positionLocation = gl.getAttribLocation(program, "position"); gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.enableVertexAttribArray(positionLocation); gl.enableVertexAttribArray(positionLocation);
gl.vertexAttribPointer(positionLocation, 3, gl.FLOAT, false, 4 * 3, 0); gl.vertexAttribPointer(positionLocation, 3, gl.FLOAT, false, 4 * 3, 0);
gl.drawArrays(gl.TRIANGLES, 0, 3); gl.drawArrays(gl.TRIANGLES, 0, 3);
gl.bindBuffer(gl.ARRAY_BUFFER, textureCoordBuffer);
gl.enableVertexAttribArray(textureCoordLocation);
gl.vertexAttribPointer(textureCoordLocation, 3, gl.FLOAT, false, 4 * 2, 0);
requestAnimationFrame(render); requestAnimationFrame(render);
}; };