Draw a sphere instead of a cylinder
This commit is contained in:
parent
f4468349b7
commit
0175d964b3
@ -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>
|
@ -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);
|
||||||
|
Loading…
Reference in New Issue
Block a user