diff --git a/panorama-viewer.js b/panorama-viewer.js index 1e2e691..25142e3 100644 --- a/panorama-viewer.js +++ b/panorama-viewer.js @@ -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); };