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

Draw a sphere instead of a cylinder

Browse Source
This commit is contained in:
Brandon Dyck 2022-10-23 18:51:27 -06:00
parent f4468349b7
commit 0175d964b3
2 changed files with 11 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@ -11,7 +11,7 @@
</head> </head>
<body> <body>
<h1>Panorama Viewer</h1> <h1>Panorama Viewer</h1>
<canvas id="viewer" width="800" height="400" style="border: 1px solid black;"></canvas> <canvas id="viewer" width="800" height="800" style="border: 1px solid black;"></canvas>
<img id="image" 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>

24
panorama-viewer.js
View File

@ -13,7 +13,7 @@
// throw "parallels must be ≥ 3"; // throw "parallels must be ≥ 3";
} }
const radius = 0.67; const radius = 1;
// The seam needs two of each vertex so we can map the texture correctly. // The seam needs two of each vertex so we can map the texture correctly.
const vertices = new Float32Array((meridians + 1) * parallels * 5); const vertices = new Float32Array((meridians + 1) * parallels * 5);
@ -22,11 +22,12 @@
const textureCoordOffset = 3 * vertices.constructor.BYTES_PER_ELEMENT; const textureCoordOffset = 3 * vertices.constructor.BYTES_PER_ELEMENT;
let verticesIdx = 0; 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 lat = Math.PI * (p / (parallels - 1) - 0.5);
const y = Math.sin(lat);
for (let m = 0; m < meridians + 1; m++) { for (let m = 0; m < meridians + 1; m++) {
const θ = m * 2 * Math.PI / meridians; const long = m * 2 * Math.PI / meridians;
const x = Math.sin(θ) * radius; const x = Math.cos(lat) * Math.sin(long) * radius;
const z = Math.cos(θ) * radius; const z = Math.cos(lat) * Math.cos(long) * radius;
const u = m / meridians; const u = m / meridians;
const v = p / (parallels - 1); const v = p / (parallels - 1);
@ -85,12 +86,7 @@
uniform sampler2D sampler; uniform sampler2D sampler;
void main() { void main() {
if (gl_FrontFacing) { gl_FragColor = texture2D(sampler, vTextureCoord);
gl_FragColor = texture2D(sampler, vTextureCoord);
} else {
gl_FragColor = vec4(0.5,0,0,1);
}
} }
`; `;
@ -161,8 +157,8 @@
} }
break; break;
case "mousemove": case "mousemove":
θy += event.movementX * 0.025; θy += event.movementX * 0.005;
θx += event.movementY * 0.025; θx += event.movementY * 0.005;
break break
} }
return PanState.panning; return PanState.panning;
@ -178,7 +174,7 @@
viewer.addEventListener("mousemove", runPanState); viewer.addEventListener("mousemove", runPanState);
gl.useProgram(program); gl.useProgram(program);
const cylinder = makeCylinder(24, 12); const cylinder = makeCylinder(24, 24);
let vertexBuffer = gl.createBuffer(); let vertexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer); gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);