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

Combine vertex buffers

Browse Source
This commit is contained in:
Brandon Dyck 2022-10-23 10:03:32 -06:00
parent b91ab4b547
commit 54ff9106db
1 changed files with 10 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
panorama-viewer.js
View File

@ -109,27 +109,23 @@
gl.useProgram(program);
let vertexBuffer = gl.createBuffer();
let vertices = new Float32Array([
0, 0, 0,
1, 0, 0,
1, 1, 0,
// x, y, z, u, v
0, 0, 0, 0, 0,
1, 0, 0, 1, 0,
1, 1, 0, 1, 1,
]);
const vertexStride = 4 * 5;
const positionOffset = 0;
const textureCoordOffset = 4 * 3;
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
const positionLocation = gl.getAttribLocation(program, "position");
const textureCoordLocation = gl.getAttribLocation(program, "textureCoord");
// Load texture
let image = document.getElementById("image");
loadTexture(gl, image);
gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
let textureCoordBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, textureCoordBuffer);
const textureCoords = new Float32Array([
0, 1,
1, 0,
1, 1,
]);
gl.bufferData(gl.ARRAY_BUFFER, textureCoords, gl.STATIC_DRAW);
const textureCoordLocation = gl.getAttribLocation(program, "textureCoord");
const render = () => {
gl.useProgram(program);
@ -142,12 +138,11 @@
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.enableVertexAttribArray(positionLocation);
gl.vertexAttribPointer(positionLocation, 3, gl.FLOAT, false, 4 * 3, 0);
gl.vertexAttribPointer(positionLocation, 3, gl.FLOAT, false, vertexStride, positionOffset);
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);
gl.vertexAttribPointer(textureCoordLocation, 2, gl.FLOAT, false, vertexStride, textureCoordOffset);
requestAnimationFrame(render);
};