diff --git a/src/client/main.ts b/src/client/main.ts index 3995b15..526d24b 100644 --- a/src/client/main.ts +++ b/src/client/main.ts @@ -1,6 +1,4 @@ // @ts-ignore -import mat4 from 'gl-mat4'; -// @ts-ignore import {convert} from './objparser'; import $ from 'jquery'; import vsSource from './shaders/shader.vert'; @@ -14,8 +12,7 @@ import {initBuffers, deleteBuffers} from './buffers'; import {initShaderProgram} from './shaders'; import {changeFragmentShader} from './changeshader'; import {loadTexture} from './texture'; - -let squareRotation = 0.0; +import {initMatrices} from './matrix'; main(); @@ -65,6 +62,7 @@ async function main() { }, rotSpeed: $('#rotspeed').val(), instanceNumber: parseInt(instanceNumber), + squareRotation: 0, }; const [ @@ -151,6 +149,7 @@ async function main() { function render(now: any) { now *= 0.001; const deltaTime = now - then; + params.squareRotation += deltaTime; if (now >= 1 && changed == false) { changed = true; } @@ -158,7 +157,6 @@ async function main() { drawScene(gl, programInfo, buffers, - deltaTime, length, params, texture); @@ -324,7 +322,6 @@ async function main() { * @param {any} gl the WebGL context * @param {any} programInfo WebGL program information * @param {any} buffers the buffers to draw - * @param {number} deltaTime the difference in time since last call * @param {number} length the index buffer length * @param {number} params various parameterss * @param {any} texture the texture to load @@ -332,7 +329,6 @@ async function main() { function drawScene(gl: any, programInfo: any, buffers: any, - deltaTime: number, length: number, params: any, texture: any) { @@ -340,50 +336,9 @@ function drawScene(gl: any, gl.clearDepth(1.0); gl.enable(gl.DEPTH_TEST); gl.depthFunc(gl.LEQUAL); - // Clear the canvas before we start drawing on it. gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); - // Create a perspective matrix, a special matrix that is - // used to simulate the distortion of perspective in a camera. - // Our field of view is 45 degrees, with a width/height - // ratio that matches the display size of the canvas - // and we only want to see objects between 0.1 units - // and 100 units away from the camera. - const fieldOfView = params.fov * Math.PI / 180; - const aspect = gl.canvas.clientWidth / gl.canvas.clientHeight; - const zNear = 0.1; - const zFar = 1000.0; - const projectionMatrix = mat4.create(); - // note: glmatrix.js always has the first argument - // as the destination to receive the result. - mat4.perspective( - projectionMatrix, - fieldOfView, - aspect, - zNear, - zFar); - - - // Set the drawing position to the "identity" point, which is - // the center of the scene. - const viewMatrix = mat4.create(); - - mat4.translate( - viewMatrix, - viewMatrix, [ - Math.cos(squareRotation) * params.circleSize, - Math.sin(squareRotation) * params.circleSize, - 0, - ]); - - mat4.translate( - viewMatrix, - viewMatrix, - [0.0, 0.0, -params.distance]); - - // Tell WebGL how to pull out the positions from the position - // buffer into the vertexPosition attribute. { const numComponents = 3; const type = gl.FLOAT; @@ -401,8 +356,6 @@ function drawScene(gl: any, gl.enableVertexAttribArray( programInfo.attribLocations.vertexPosition); } - - { const numComponents = 3; const type = gl.FLOAT; @@ -420,17 +373,15 @@ function drawScene(gl: any, gl.enableVertexAttribArray( programInfo.attribLocations.vertexNormal); } - - // tell webgl how to pull out the texture coordinates from buffer { - const num = 2; // every coordinate composed of 2 values - const type = gl.FLOAT; // the data in the buffer is 32 bit float - const normalize = false; // don't normalize - const stride = 0; // how many bytes to get from one set to the next - const offset = 0; // how many bytes inside the buffer to start from + const numComponents = 2; + const type = gl.FLOAT; + const normalize = false; + const stride = 0; + const offset = 0; gl.bindBuffer(gl.ARRAY_BUFFER, buffers.uvs); gl.vertexAttribPointer(programInfo.attribLocations.textureCoord, - num, + numComponents, type, normalize, stride, @@ -438,61 +389,20 @@ function drawScene(gl: any, gl.enableVertexAttribArray(programInfo.attribLocations.textureCoord); } - // Tell WebGL which indices to use to index the vertices gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, buffers.indices); - - // Tell WebGL to use our program when drawing gl.useProgram(programInfo.program); - - // Tell WebGL we want to affect texture unit 0 gl.activeTexture(gl.TEXTURE0); - // Bind the texture to texture unit 0 gl.bindTexture(gl.TEXTURE_2D, texture); - // Tell the shader we bound the texture to texture unit 0 gl.uniform1i(programInfo.uniformLocations.uSampler, 0); - const normalModelMatrix = []; - const modelMatrix = []; - for (let i = 0; i < params.instanceNumber; i++) { - const normalModelMatrixTemplate = mat4.create(); - const modelMatrixTemplate = mat4.create(); - let addx = 0; - let addy = 0; - mat4.rotateX(normalModelMatrixTemplate, - normalModelMatrixTemplate, - params.rot.x); - mat4.rotateY(normalModelMatrixTemplate, - normalModelMatrixTemplate, - params.rot.y); - mat4.rotateZ(normalModelMatrixTemplate, - normalModelMatrixTemplate, - params.rot.z); - mat4.rotateY(normalModelMatrixTemplate, - normalModelMatrixTemplate, - squareRotation); - if (i % 3 == 1) { - addx = Math.floor(i / 9 + 1) * params.range * 1.5; - } else if (i % 3 == 2) { - addx = -Math.floor(i / 9 + 1) * params.range * 1.5; - } - if (i % 9 > 5) { - addy = Math.floor(i / 9 + 1) * params.range * 1.5; - } else if (i % 9 > 2 && i % 9 < 6) { - addy = -Math.floor(i / 9 + 1) * params.range * 1.5; - } - mat4.translate(modelMatrixTemplate, - modelMatrixTemplate, - [ - -params.avg.x + addx, - -params.avg.y + addy, - -params.avg.z, - ]); - normalModelMatrix.push(normalModelMatrixTemplate); - modelMatrix.push(modelMatrixTemplate); - } + const [ + projectionMatrix, + viewMatrix, + modelMatrix, + normalModelMatrix, + ] = initMatrices(gl, params); for (let i = 0; i < params.instanceNumber; i++) { - // Set the shader uniforms gl.uniformMatrix4fv( programInfo.uniformLocations.projectionMatrix, false, @@ -509,13 +419,9 @@ function drawScene(gl: any, programInfo.uniformLocations.normalModelMatrix, false, normalModelMatrix[i]); - const vertexCount = length; const type = gl.UNSIGNED_SHORT; const offset = 0; gl.drawElements(gl.TRIANGLES, vertexCount, type, offset); - // gl.drawArrays(gl.TRIANGLES, offset, vertexCount); } - - squareRotation += deltaTime * params.rotSpeed; } diff --git a/src/client/matrix.ts b/src/client/matrix.ts new file mode 100644 index 0000000..f1cb07e --- /dev/null +++ b/src/client/matrix.ts @@ -0,0 +1,76 @@ +// @ts-ignore +import mat4 from 'gl-mat4'; + +/** + * Initializes matrices for the scene + * @param {any} gl the WebGL context + * @param {any} params various parameters + * @return {Array} the matrices + */ +export function initMatrices(gl: any, params: any) { + const fieldOfView = params.fov * Math.PI / 180; + const aspect = gl.canvas.clientWidth / gl.canvas.clientHeight; + const zNear = 0.1; + const zFar = 1000.0; + const projectionMatrix = mat4.create(); + + mat4.perspective( + projectionMatrix, + fieldOfView, + aspect, + zNear, + zFar); + const viewMatrix = mat4.create(); + mat4.translate( + viewMatrix, + viewMatrix, [ + Math.cos(params.squareRotation) * params.circleSize, + Math.sin(params.squareRotation) * params.circleSize, + 0, + ]); + mat4.translate( + viewMatrix, + viewMatrix, + [0.0, 0.0, -params.distance]); + + const normalModelMatrix = []; + const modelMatrix = []; + for (let i = 0; i < params.instanceNumber; i++) { + const normalModelMatrixTemplate = mat4.create(); + const modelMatrixTemplate = mat4.create(); + let addx = 0; + let addy = 0; + mat4.rotateX(normalModelMatrixTemplate, + normalModelMatrixTemplate, + params.rot.x); + mat4.rotateY(normalModelMatrixTemplate, + normalModelMatrixTemplate, + params.rot.y); + mat4.rotateZ(normalModelMatrixTemplate, + normalModelMatrixTemplate, + params.rot.z); + mat4.rotateY(normalModelMatrixTemplate, + normalModelMatrixTemplate, + params.squareRotation); + if (i % 3 == 1) { + addx = Math.floor(i / 9 + 1) * params.range * 1.5; + } else if (i % 3 == 2) { + addx = -Math.floor(i / 9 + 1) * params.range * 1.5; + } + if (i % 9 > 5) { + addy = Math.floor(i / 9 + 1) * params.range * 1.5; + } else if (i % 9 > 2 && i % 9 < 6) { + addy = -Math.floor(i / 9 + 1) * params.range * 1.5; + } + mat4.translate(modelMatrixTemplate, + modelMatrixTemplate, + [ + -params.avg.x + addx, + -params.avg.y + addy, + -params.avg.z, + ]); + normalModelMatrix.push(normalModelMatrixTemplate); + modelMatrix.push(modelMatrixTemplate); + } + return [projectionMatrix, viewMatrix, modelMatrix, normalModelMatrix]; +}