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

Load a texture badly

Browse Source
This commit is contained in:
Brandon Dyck 2022-10-23 09:10:11 -06:00
parent bc5f24352b
commit 03fc64b7eb
2 changed files with 50 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
index.html
View File

@ -11,7 +11,7 @@
</head> </head>
<body> <body>
<h1>Panorama Viewer</h1> <h1>Panorama Viewer</h1>
<canvas id="viewer"></canvas> <canvas id="viewer" width="800" height="400" style="border: 1px solid black;"></canvas>
<img height="400" width="800" src="Provo_River_Falls_360.JPG"> <img id="image" height="400" width="800" src="Provo_River_Falls_360.JPG">
</body> </body>
</html> </html>

57
panorama-viewer.js
View File

@ -3,17 +3,24 @@
const initShaderProgram = (gl) => { const initShaderProgram = (gl) => {
const vShaderSrc = ` const vShaderSrc = `
attribute vec3 position; attribute vec3 position;
attribute vec2 textureCoord;
uniform mat4 viewMatrix; uniform mat4 modelMatrix;
varying highp vec2 vTextureCoord;
void main() { void main() {
gl_Position = viewMatrix * vec4(position, 1); gl_Position = modelMatrix * vec4(position, 1);
vTextureCoord = textureCoord;
} }
`; `;
const fShaderSrc = ` const fShaderSrc = `
varying highp vec2 vTextureCoord;
uniform sampler2D sampler;
void main() { void main() {
gl_FragColor = vec4(0.5, 0.5, 0, 1); gl_FragColor = texture2D(sampler, vTextureCoord);
} }
`; `;
@ -23,7 +30,7 @@
gl.compileShader(shader); gl.compileShader(shader);
let success = gl.getShaderParameter(shader, gl.COMPILE_STATUS); let success = gl.getShaderParameter(shader, gl.COMPILE_STATUS);
if (!success) { if (!success) {
throw gl.getShaderInfoLog(vShader); throw gl.getShaderInfoLog(shader);
} }
return shader; return shader;
} }
@ -42,10 +49,26 @@
return program; 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 viewer = document.getElementById("viewer");
let gl = viewer.getContext("webgl2"); let gl = viewer.getContext("webgl2");
let program = initShaderProgram(gl); let program = initShaderProgram(gl);
let viewMatrixLocation = gl.getUniformLocation(program, "viewMatrix"); let modelMatrixLocation = gl.getUniformLocation(program, "modelMatrix");
// Set up mouse-panning state machine. // Set up mouse-panning state machine.
let θy = 0; let θy = 0;
@ -83,6 +106,22 @@
viewer.addEventListener("mouseover", runPanState); viewer.addEventListener("mouseover", runPanState);
viewer.addEventListener("mousemove", 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 = () => { const render = () => {
gl.useProgram(program); gl.useProgram(program);
@ -96,10 +135,10 @@
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW); gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
// Create the transformation matrix. // Create the transformation matrix.
let viewMatrix = mat4.create(); let modelMatrix = mat4.create();
mat4.rotateX(viewMatrix, viewMatrix, θx); mat4.rotateX(modelMatrix, modelMatrix, θx);
mat4.rotateY(viewMatrix, viewMatrix, θy); mat4.rotateY(modelMatrix, modelMatrix, θy);
gl.uniformMatrix4fv(viewMatrixLocation, false, viewMatrix); gl.uniformMatrix4fv(modelMatrixLocation, false, modelMatrix);
let positionLocation = gl.getAttribLocation(program, "position"); let positionLocation = gl.getAttribLocation(program, "position");
gl.enableVertexAttribArray(positionLocation); gl.enableVertexAttribArray(positionLocation);