Zoom in
This commit is contained in:
parent
3fa9cf2c94
commit
6fdd07cc14
@ -11,7 +11,7 @@
|
||||
</head>
|
||||
<body>
|
||||
<h1>Panorama Viewer</h1>
|
||||
<canvas id="viewer" width="800" height="800" style="border: 1px solid black;"></canvas>
|
||||
<canvas id="viewer" width="800" height="300" style="border: 1px solid black;"></canvas>
|
||||
<img id="image" height="400" width="800" src="Provo_River_Falls_360.JPG">
|
||||
</body>
|
||||
</html>
|
@ -72,11 +72,13 @@
|
||||
attribute vec2 textureCoord;
|
||||
|
||||
uniform mat4 modelMatrix;
|
||||
uniform mat4 projectionMatrix;
|
||||
// uniform mat4 viewMatrix;
|
||||
|
||||
varying highp vec2 vTextureCoord;
|
||||
|
||||
void main() {
|
||||
gl_Position = modelMatrix * vec4(position, 1);
|
||||
gl_Position = projectionMatrix * modelMatrix * vec4(position, 1);
|
||||
vTextureCoord = textureCoord;
|
||||
}
|
||||
`;
|
||||
@ -136,6 +138,8 @@
|
||||
let gl = viewer.getContext("webgl2");
|
||||
let program = initShaderProgram(gl);
|
||||
let modelMatrixLocation = gl.getUniformLocation(program, "modelMatrix");
|
||||
let projectionMatrixLocation = gl.getUniformLocation(program, "projectionMatrix");
|
||||
const viewMatrixLocation = gl.getUniformLocation(program, "viewMatrix");
|
||||
|
||||
// Set up mouse-panning state machine.
|
||||
let θy = 0;
|
||||
@ -202,11 +206,20 @@
|
||||
gl.useProgram(program);
|
||||
|
||||
// Create the transformation matrix.
|
||||
let modelMatrix = mat4.create();
|
||||
const modelMatrix = mat4.create();
|
||||
mat4.rotateX(modelMatrix, modelMatrix, θx);
|
||||
mat4.rotateY(modelMatrix, modelMatrix, θy);
|
||||
gl.uniformMatrix4fv(modelMatrixLocation, false, modelMatrix);
|
||||
|
||||
const aspect = gl.drawingBufferWidth / gl.drawingBufferHeight;
|
||||
// TODO find a minimum zoom that won't show the edges of the sphere.
|
||||
const zoom = 4;
|
||||
const projectionMatrix = mat4.ortho(mat4.create(), -aspect / zoom, aspect / zoom, -1 / zoom, 1 / zoom, -1, 1);
|
||||
gl.uniformMatrix4fv(projectionMatrixLocation, false, projectionMatrix);
|
||||
|
||||
// const viewMatrix = mat4.lookAt(mat4.create(), [0, 0, 0], [0, 0, 1], [0, 1, 0]);
|
||||
// gl.uniformMatrix4fv(viewMatrixLocation, false, viewMatrix);
|
||||
|
||||
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
|
||||
gl.enableVertexAttribArray(positionLocation);
|
||||
gl.vertexAttribPointer(positionLocation, 3, gl.FLOAT, false, cylinder.vertexStride, cylinder.positionOffset);
|
||||
|
Loading…
Reference in New Issue
Block a user