diff --git a/index.html b/index.html index 86800bb..5f42803 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 e375c06..c74d46b 100644 --- a/panorama-viewer.js +++ b/panorama-viewer.js @@ -13,7 +13,7 @@ // 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. const vertices = new Float32Array((meridians + 1) * parallels * 5); @@ -22,11 +22,12 @@ const textureCoordOffset = 3 * vertices.constructor.BYTES_PER_ELEMENT; let verticesIdx = 0; 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++) { - const θ = m * 2 * Math.PI / meridians; - const x = Math.sin(θ) * radius; - const z = Math.cos(θ) * radius; + const long = m * 2 * Math.PI / meridians; + const x = Math.cos(lat) * Math.sin(long) * radius; + const z = Math.cos(lat) * Math.cos(long) * radius; const u = m / meridians; const v = p / (parallels - 1); @@ -85,12 +86,7 @@ uniform sampler2D sampler; void main() { - if (gl_FrontFacing) { - gl_FragColor = texture2D(sampler, vTextureCoord); - } else { - gl_FragColor = vec4(0.5,0,0,1); - } - + gl_FragColor = texture2D(sampler, vTextureCoord); } `; @@ -161,8 +157,8 @@ } break; case "mousemove": - θy += event.movementX * 0.025; - θx += event.movementY * 0.025; + θy += event.movementX * 0.005; + θx += event.movementY * 0.005; break } return PanState.panning; @@ -178,7 +174,7 @@ viewer.addEventListener("mousemove", runPanState); gl.useProgram(program); - const cylinder = makeCylinder(24, 12); + const cylinder = makeCylinder(24, 24); let vertexBuffer = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);