diff --git a/index.html b/index.html index fe62ffc..86800bb 100644 --- a/index.html +++ b/index.html @@ -11,7 +11,7 @@

Panorama Viewer

- - + + \ No newline at end of file diff --git a/panorama-viewer.js b/panorama-viewer.js index 098d79f..9f09a4e 100644 --- a/panorama-viewer.js +++ b/panorama-viewer.js @@ -3,17 +3,24 @@ const initShaderProgram = (gl) => { const vShaderSrc = ` attribute vec3 position; + attribute vec2 textureCoord; - uniform mat4 viewMatrix; + uniform mat4 modelMatrix; + + varying highp vec2 vTextureCoord; void main() { - gl_Position = viewMatrix * vec4(position, 1); + gl_Position = modelMatrix * vec4(position, 1); + vTextureCoord = textureCoord; } `; const fShaderSrc = ` + varying highp vec2 vTextureCoord; + uniform sampler2D sampler; + void main() { - gl_FragColor = vec4(0.5, 0.5, 0, 1); + gl_FragColor = texture2D(sampler, vTextureCoord); } `; @@ -23,7 +30,7 @@ gl.compileShader(shader); let success = gl.getShaderParameter(shader, gl.COMPILE_STATUS); if (!success) { - throw gl.getShaderInfoLog(vShader); + throw gl.getShaderInfoLog(shader); } return shader; } @@ -42,10 +49,26 @@ return program; }; + const loadTexture = (gl, image, textureUnit = 0) => { + const textureUnitName = `TEXTURE${textureUnit}` + const texture = gl.createTexture(); + const samplerLocation = gl.getUniformLocation(program, "sampler"); + image.addEventListener("load", () => { + gl.activeTexture(gl[textureUnitName]); + gl.bindTexture(gl.TEXTURE_2D, texture); + gl.uniform1i(samplerLocation, textureUnit); + gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR); + }); + return texture; + }; + let viewer = document.getElementById("viewer"); let gl = viewer.getContext("webgl2"); let program = initShaderProgram(gl); - let viewMatrixLocation = gl.getUniformLocation(program, "viewMatrix"); + let modelMatrixLocation = gl.getUniformLocation(program, "modelMatrix"); // Set up mouse-panning state machine. let θy = 0; @@ -83,6 +106,22 @@ viewer.addEventListener("mouseover", runPanState); viewer.addEventListener("mousemove", runPanState); + // Load texture + let image = document.getElementById("image"); + let texture = 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"); + gl.enableVertexAttribArray(textureCoordLocation); + gl.vertexAttribPointer(textureCoordLocation, 3, gl.FLOAT, false, 4 * 2, 0); + const render = () => { gl.useProgram(program); @@ -96,10 +135,10 @@ gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW); // Create the transformation matrix. - let viewMatrix = mat4.create(); - mat4.rotateX(viewMatrix, viewMatrix, θx); - mat4.rotateY(viewMatrix, viewMatrix, θy); - gl.uniformMatrix4fv(viewMatrixLocation, false, viewMatrix); + 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.enableVertexAttribArray(positionLocation);