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>
<body>
<h1>Panorama Viewer</h1>
<canvas id="viewer"></canvas>
<img height="400" width="800" src="Provo_River_Falls_360.JPG">
<canvas id="viewer" width="800" height="400" style="border: 1px solid black;"></canvas>
<img id="image" height="400" width="800" src="Provo_River_Falls_360.JPG">
</body>
</html>

57
panorama-viewer.js
View File

@ -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);