diff --git a/panorama-viewer.js b/panorama-viewer.js index 9f09a4e..1e2e691 100644 --- a/panorama-viewer.js +++ b/panorama-viewer.js @@ -106,9 +106,20 @@ viewer.addEventListener("mouseover", 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 let image = document.getElementById("image"); - let texture = loadTexture(gl, image); + loadTexture(gl, image); gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true); let textureCoordBuffer = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, textureCoordBuffer); @@ -119,32 +130,25 @@ ]); gl.bufferData(gl.ARRAY_BUFFER, textureCoords, gl.STATIC_DRAW); const textureCoordLocation = gl.getAttribLocation(program, "textureCoord"); - gl.enableVertexAttribArray(textureCoordLocation); - gl.vertexAttribPointer(textureCoordLocation, 3, gl.FLOAT, false, 4 * 2, 0); const render = () => { 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. let modelMatrix = mat4.create(); mat4.rotateX(modelMatrix, modelMatrix, θx); mat4.rotateY(modelMatrix, modelMatrix, θy); gl.uniformMatrix4fv(modelMatrixLocation, false, modelMatrix); - let positionLocation = gl.getAttribLocation(program, "position"); + gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer); gl.enableVertexAttribArray(positionLocation); gl.vertexAttribPointer(positionLocation, 3, gl.FLOAT, false, 4 * 3, 0); 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); };