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

Fixed the broken texturing

Browse Source
This commit is contained in:
Brandon Dyck 2022-10-23 16:21:08 -06:00
parent 8f59344b7d
commit f4468349b7
1 changed files with 29 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

81
panorama-viewer.js
View File

@ -13,38 +13,39 @@
// throw "parallels must be ≥ 3"; // throw "parallels must be ≥ 3";
} }
const radius = 1; const radius = 0.67;
const positions = new Float32Array(meridians * parallels * 3); // The seam needs two of each vertex so we can map the texture correctly.
let positionsIdx = 0; const vertices = new Float32Array((meridians + 1) * parallels * 5);
const vertexStride = 5 * vertices.constructor.BYTES_PER_ELEMENT;
const positionOffset = 0;
const textureCoordOffset = 3 * vertices.constructor.BYTES_PER_ELEMENT;
let verticesIdx = 0;
for (let p = 0; p < parallels; p++) { for (let p = 0; p < parallels; p++) {
const y = p * 2 * radius / (parallels - 1) - radius; const y = p * 2 * radius / (parallels - 1) - radius;
for (let m = 0; m <= meridians; m++) { for (let m = 0; m < meridians + 1; m++) {
const θ = m * 2 * Math.PI / meridians; const θ = m * 2 * Math.PI / meridians;
const x = Math.sin(θ) * radius; const x = Math.sin(θ) * radius;
const z = Math.cos(θ) * radius; const z = Math.cos(θ) * radius;
const u = m / meridians;
const v = p / (parallels - 1);
const currPosition = [ vertices[verticesIdx++] = x;
Math.sin(θ) * radius, vertices[verticesIdx++] = y;
y, vertices[verticesIdx++] = z;
Math.cos(θ) * radius, vertices[verticesIdx++] = u;
]; vertices[verticesIdx++] = v;
for (const coord of currPosition) {
positions[positionsIdx++] = coord;
}
} }
} }
const indices = new Uint16Array(meridians * (parallels - 1) * 6); const indices = new Uint16Array(meridians * (parallels - 1) * 6);
const textureCoords = new Float32Array(meridians * (parallels - 1) * 12);
let indicesIdx = 0; let indicesIdx = 0;
let textureCoordsIdx = 0;
for (let p = 0; p < parallels - 1; p++) { for (let p = 0; p < parallels - 1; p++) {
for (let m = 0; m < meridians; m++) { for (let m = 0; m < meridians; m++) {
const lowerLeft = p * meridians + m; const lowerLeft = p * (meridians + 1) + m;
const lowerRight = p * meridians + (m + 1) % meridians; const lowerRight = p * (meridians + 1) + (m + 1);
const upperLeft = (p + 1) * meridians + m; const upperLeft = (p + 1) * (meridians + 1) + m;
const upperRight = (p + 1) * meridians + (m + 1) % meridians; const upperRight = (p + 1) * (meridians + 1) + (m + 1);
const currIndices = [ const currIndices = [
// Lower triangle // Lower triangle
lowerLeft, lowerRight, upperRight, lowerLeft, lowerRight, upperRight,
@ -55,31 +56,14 @@
for (const index of currIndices) { for (const index of currIndices) {
indices[indicesIdx++] = index; indices[indicesIdx++] = index;
} }
const currTextureCoords = [
// Lower triangle
m / meridians, p / (parallels - 1),
(m + 1) / meridians, p / (parallels - 1),
(m + 1) / meridians, (p + 1) / (parallels - 1),
// Upper triangle
m / meridians, p / (parallels - 1),
(m + 1) / meridians, (p + 1) / (parallels - 1),
m / meridians, (p + 1) / (parallels - 1),
];
for (const coord of currTextureCoords) {
textureCoords[textureCoordsIdx++] = coord;
}
} }
} }
return { return {
positions, textureCoords, indices, vertices, indices,
positionStride: 3 * positions.constructor.BYTES_PER_ELEMENT, vertexStride, positionOffset, textureCoordOffset,
textureCoordStride: 2 * textureCoords.constructor.BYTES_PER_ELEMENT,
}; };
} }
// console.log(makeCylinder());
const initShaderProgram = (gl) => { const initShaderProgram = (gl) => {
const vShaderSrc = ` const vShaderSrc = `
@ -194,17 +178,12 @@
viewer.addEventListener("mousemove", runPanState); viewer.addEventListener("mousemove", runPanState);
gl.useProgram(program); gl.useProgram(program);
const cylinder = makeCylinder(3, 3); const cylinder = makeCylinder(24, 12);
console.log(cylinder);
let positionBuffer = gl.createBuffer(); let vertexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer); gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, cylinder.positions, gl.STATIC_DRAW); gl.bufferData(gl.ARRAY_BUFFER, cylinder.vertices, gl.STATIC_DRAW);
const positionLocation = gl.getAttribLocation(program, "position"); const positionLocation = gl.getAttribLocation(program, "position");
let textureCoordBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, textureCoordBuffer);
gl.bufferData(gl.ARRAY_BUFFER, cylinder.textureCoords, gl.STATIC_DRAW);
const textureCoordLocation = gl.getAttribLocation(program, "textureCoord"); const textureCoordLocation = gl.getAttribLocation(program, "textureCoord");
let indexBuffer = gl.createBuffer(); let indexBuffer = gl.createBuffer();
@ -227,16 +206,14 @@
mat4.rotateY(modelMatrix, modelMatrix, θy); mat4.rotateY(modelMatrix, modelMatrix, θy);
gl.uniformMatrix4fv(modelMatrixLocation, false, modelMatrix); gl.uniformMatrix4fv(modelMatrixLocation, false, modelMatrix);
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer); gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.enableVertexAttribArray(positionLocation); gl.enableVertexAttribArray(positionLocation);
gl.vertexAttribPointer(positionLocation, 3, gl.FLOAT, false, 0, 0); gl.vertexAttribPointer(positionLocation, 3, gl.FLOAT, false, cylinder.vertexStride, cylinder.positionOffset);
gl.bindBuffer(gl.ARRAY_BUFFER, textureCoordBuffer);
gl.enableVertexAttribArray(textureCoordLocation); gl.enableVertexAttribArray(textureCoordLocation);
gl.vertexAttribPointer(textureCoordLocation, 2, gl.FLOAT, false, 0, 0); gl.vertexAttribPointer(textureCoordLocation, 2, gl.FLOAT, false, cylinder.vertexStride, cylinder.textureCoordOffset);
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer); gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);
gl.drawElements(gl.TRIANGLES, 12, gl.UNSIGNED_SHORT, 0); gl.drawElements(gl.TRIANGLES, cylinder.indices.length, gl.UNSIGNED_SHORT, 0);
requestAnimationFrame(render); requestAnimationFrame(render);
}; };