diff --git a/src/client/draw.ts b/src/client/draw.ts index cccb880..549867c 100644 --- a/src/client/draw.ts +++ b/src/client/draw.ts @@ -34,7 +34,7 @@ export function drawScene(gl: any, projectionMatrix, viewMatrix, modelMatrix, - normalModelMatrix, + normalMatrix, ] = initMatrices(gl, params); for (let i = 0; i < params.instanceNumber; i++) { @@ -51,9 +51,9 @@ export function drawScene(gl: any, false, modelMatrix[i]); gl.uniformMatrix4fv( - programInfo.uniformLocations.normalModelMatrix, + programInfo.uniformLocations.normalMatrix, false, - normalModelMatrix[i]); + normalMatrix[i]); const vertexCount = params.len; const type = gl.UNSIGNED_SHORT; const offset = 0; diff --git a/src/client/init.ts b/src/client/init.ts index 4ecf8c1..cbaa63e 100644 --- a/src/client/init.ts +++ b/src/client/init.ts @@ -18,6 +18,16 @@ export function initParams(context: any) { y: parseFloat($('#roty').val()), z: parseFloat($('#rotz').val()), }, + pos: { + x: parseFloat($('#posx').val()), + y: parseFloat($('#posy').val()), + z: parseFloat($('#posz').val()), + }, + scale: { + x: parseFloat($('#scalex').val()), + y: parseFloat($('#scaley').val()), + z: parseFloat($('#scalez').val()), + }, rotSpeed: parseFloat($('#rotspeed').val()), instanceNumber: parseFloat($('#instance').val()), squareRotation: 0, @@ -81,8 +91,8 @@ export function setProgramInfo(context: any) { context.shaderProgram, 'uviewMatrix'), modelMatrix: context.gl.getUniformLocation( context.shaderProgram, 'umodelMatrix'), - normalModelMatrix: context.gl.getUniformLocation( - context.shaderProgram, 'unormalModelMatrix'), + normalMatrix: context.gl.getUniformLocation( + context.shaderProgram, 'unormalMatrix'), uSampler: context.gl.getUniformLocation( context.shaderProgram, 'uSampler'), time: context.gl.getUniformLocation( diff --git a/src/client/matrix.ts b/src/client/matrix.ts index 7ca1e61..69f5926 100644 --- a/src/client/matrix.ts +++ b/src/client/matrix.ts @@ -38,25 +38,13 @@ export function initMatrices(gl: any, params: any) { viewMatrix, viewMatrix, [0.0, 0.0, -params.distance]); - const normalModelMatrix = []; + const normalMatrix = []; const modelMatrix = []; for (let i = 0; i < params.instanceNumber; i++) { - const normalModelMatrixTemplate = mat4.create(); + const normalMatrixTemplate = mat4.create(); const modelMatrixTemplate = mat4.create(); let addx = 0; let addy = 0; - mat4.rotateY(normalModelMatrixTemplate, - normalModelMatrixTemplate, - params.rot.y); - mat4.rotateZ(normalModelMatrixTemplate, - normalModelMatrixTemplate, - params.rot.z); - mat4.rotateX(normalModelMatrixTemplate, - normalModelMatrixTemplate, - params.rot.x); - 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) { @@ -70,12 +58,35 @@ export function initMatrices(gl: any, params: any) { mat4.translate(modelMatrixTemplate, modelMatrixTemplate, [ - params.circleSize * Math.cos(params.squareRotation) + addx, - params.circleSize * Math.sin(params.squareRotation) + addy, - 0, + params.circleSize * Math.cos(params.squareRotation) + addx + + params.pos.x, + params.circleSize * Math.sin(params.squareRotation) + addy + + params.pos.y, + params.pos.z, ]); - normalModelMatrix.push(normalModelMatrixTemplate); + mat4.rotateY(modelMatrixTemplate, + modelMatrixTemplate, + params.rot.y); + mat4.rotateZ(modelMatrixTemplate, + modelMatrixTemplate, + params.rot.z); + mat4.rotateX(modelMatrixTemplate, + modelMatrixTemplate, + params.rot.x); + mat4.rotateY(modelMatrixTemplate, + modelMatrixTemplate, + params.squareRotation); + mat4.scale(modelMatrixTemplate, + modelMatrixTemplate, + [ + params.scale.x, + params.scale.y, + params.scale.z, + ]); + mat4.invert(normalMatrixTemplate, modelMatrixTemplate); + mat4.transpose(normalMatrixTemplate, normalMatrixTemplate); + normalMatrix.push(normalMatrixTemplate); modelMatrix.push(modelMatrixTemplate); } - return [projectionMatrix, viewMatrix, modelMatrix, normalModelMatrix]; + return [projectionMatrix, viewMatrix, modelMatrix, normalMatrix]; } diff --git a/src/client/shaders/shader.vert b/src/client/shaders/shader.vert index f06106e..a4199f9 100644 --- a/src/client/shaders/shader.vert +++ b/src/client/shaders/shader.vert @@ -5,7 +5,7 @@ attribute vec2 aTextureCoord; uniform mat4 uProjectionMatrix; uniform mat4 uviewMatrix; uniform mat4 umodelMatrix; -uniform mat4 unormalModelMatrix; +uniform mat4 unormalMatrix; varying highp vec4 vNormal; varying highp vec3 vPosition; @@ -16,9 +16,8 @@ void main() gl_Position = uProjectionMatrix * uviewMatrix * umodelMatrix * - unormalModelMatrix * aVertexPosition; vPosition = vec3(aVertexPosition); - vNormal = unormalModelMatrix * aVertexNormal; + vNormal = unormalMatrix * aVertexNormal; vTextureCoord = aTextureCoord; } \ No newline at end of file diff --git a/src/client/uijquery.ts b/src/client/uijquery.ts index f581a52..cc9f97d 100644 --- a/src/client/uijquery.ts +++ b/src/client/uijquery.ts @@ -39,6 +39,24 @@ export function uiUpdateParams(params: any) { $('#rotz').on('input', () => { params.rot.z = parseFloat($('#rotz').val()); }); + $('#posx').on('change', () => { + params.pos.x = parseFloat($('#posx').val()); + }); + $('#posy').on('change', () => { + params.pos.y = parseFloat($('#posy').val()); + }); + $('#posz').on('change', () => { + params.pos.z = parseFloat($('#posz').val()); + }); + $('#scalex').on('change', () => { + params.scale.x = parseFloat($('#scalex').val()); + }); + $('#scaley').on('change', () => { + params.scale.y = parseFloat($('#scaley').val()); + }); + $('#scalez').on('change', () => { + params.scale.z = parseFloat($('#scalez').val()); + }); $('#rotspeed').on('input', () => { params.rotSpeed = parseFloat($('#rotspeed').val()); }); diff --git a/views/index.ejs b/views/index.ejs index 46916e1..2593a53 100644 --- a/views/index.ejs +++ b/views/index.ejs @@ -59,6 +59,24 @@
Z:
+
+
Change scale:
+
X:
+ +
Y:
+ +
Z:
+ +
+
+
Translate:
+
X:
+ +
Y:
+ +
Z:
+ +
Change object: