diff --git a/src/client/main.ts b/src/client/main.ts index 4806fee..a27663c 100644 --- a/src/client/main.ts +++ b/src/client/main.ts @@ -47,8 +47,8 @@ async function main() { { gl_Position = uProjectionMatrix * uviewMatrix * - unormalModelMatrix * umodelMatrix * + unormalModelMatrix * aVertexPosition; vPosition = vec3(aVertexPosition); vNormal = unormalModelMatrix * aVertexNormal; @@ -82,7 +82,7 @@ async function main() { } void main() { - vec3 n = normalize(vec3(-50000., 100000., 50000.) - vPosition); + vec3 n = normalize(vec3(-50., 100., 50.) - vPosition); float diffuse = max(dot(normalize(vNormal.xyz), n), 0.); float specular = pow( max(dot( @@ -120,7 +120,7 @@ async function main() { } void main() { - vec3 n = normalize(vec3(-50000., 100000., 50000.) - vPosition); + vec3 n = normalize(vec3(-50., 100., 50.) - vPosition); float diffuse = max(dot(normalize(vNormal.xyz), n), 0.); float specular = pow( max(dot( @@ -141,7 +141,7 @@ async function main() { uniform sampler2D uSampler; void main() { - vec3 n = normalize(vec3(-50000., 100000., 50000.) - vPosition); + vec3 n = normalize(vec3(-50., 100., 50.) - vPosition); float diffuse = max(dot(normalize(vNormal.xyz), n), 0.); float specular = pow( max(dot( @@ -162,7 +162,7 @@ async function main() { void main() { highp vec4 texelColor = texture2D(uSampler, vTextureCoord); - vec3 n = normalize(vec3(-50000., 100000., 50000.) - vPosition); + vec3 n = normalize(vec3(-50., 100., 50.) - vPosition); float diffuse = max(dot(normalize(vNormal.xyz), n), 0.); float specular = pow( max(dot( @@ -209,7 +209,7 @@ async function main() { if ((1. - sobel.r) + (1. - sobel.g) + (1. - sobel.b) < 2.5) gl_FragColor = vec4(1.0 - sobel.rgb, 1.0 ); else { - vec3 n = normalize(vec3(-50000., 100000., 50000.) - vPosition); + vec3 n = normalize(vec3(-50., 100., 50.) - vPosition); float diffuse = max(dot(normalize(vNormal.xyz), n), 0.); float specular = pow( max(dot( @@ -236,6 +236,7 @@ async function main() { const data = await getObj('/static/objs/racer.obj'); const distance: any = $('#distance').val(); const distanceFine: any = $('#distancefine').val(); + const instanceNumber: any = $('#instance').val(); const params: any = { distance: parseFloat(distance) + parseFloat(distanceFine), circleSize: $('#circlesize').val(), @@ -245,12 +246,14 @@ async function main() { y: 0, z: 0, }, + range: 0, rot: { x: $('#rotx').val(), y: $('#roty').val(), z: $('#rotz').val(), }, rotSpeed: $('#rotspeed').val(), + instanceNumber: parseInt(instanceNumber), }; const [ @@ -262,15 +265,37 @@ async function main() { let x = 0; let y = 0; let z = 0; + let maxx = positions[0]; + let maxy = positions[1]; + let maxz = positions[2]; + let minx = positions[0]; + let miny = positions[1]; + let minz = positions[2]; for (let i = 0; i < positions.length; i++) { if (i % 3 == 0) { + if (positions[i] > maxx) { + maxx = positions[i]; + } else if (positions[i] < minx) { + minx = positions[i]; + } x += positions[i]; } else if (i % 3 == 1) { + if (positions[i] > maxy) { + maxy = positions[i]; + } else if (positions[i] < miny) { + miny = positions[i]; + } y += positions[i]; } else { + if (positions[i] > maxz) { + maxz = positions[i]; + } else if (positions[i] < minz) { + minz = positions[i]; + } z += positions[i]; } } + params.range = Math.max(maxx - minx, maxy - miny, maxz - minz); params.avg.x = x / (positions.length / 3); params.avg.y = y / (positions.length / 3); params.avg.z = z / (positions.length / 3); @@ -344,15 +369,37 @@ async function main() { let x = 0; let y = 0; let z = 0; + let maxx = positions[0]; + let maxy = positions[1]; + let maxz = positions[2]; + let minx = positions[0]; + let miny = positions[1]; + let minz = positions[2]; for (let i = 0; i < positions.length; i++) { if (i % 3 == 0) { + if (positions[i] > maxx) { + maxx = positions[i]; + } else if (positions[i] < minx) { + minx = positions[i]; + } x += positions[i]; } else if (i % 3 == 1) { + if (positions[i] > maxy) { + maxy = positions[i]; + } else if (positions[i] < miny) { + miny = positions[i]; + } y += positions[i]; } else { + if (positions[i] > maxz) { + maxz = positions[i]; + } else if (positions[i] < minz) { + minz = positions[i]; + } z += positions[i]; } } + params.range = Math.max(maxx - minx, maxy - miny, maxz - minz); params.avg.x = x / (positions.length / 3); params.avg.y = y / (positions.length / 3); params.avg.z = z / (positions.length / 3); @@ -375,6 +422,10 @@ async function main() { const circleSize: any = $('#circlesize').val(); params.circleSize = parseFloat(circleSize); }); + $('#instance').on('input', function() { + const instance: any = $('#instance').val(); + params.instanceNumber = parseInt(instance); + }); $('#rotx').on('input', function() { const rotx: any = $('#rotx').val(); params.rot.x = parseFloat(rotx); @@ -503,30 +554,6 @@ function drawScene(gl: any, zFar); - const normalModelMatrix = mat4.create(); - - mat4.rotateX(normalModelMatrix, - normalModelMatrix, - params.rot.x); - mat4.rotateY(normalModelMatrix, - normalModelMatrix, - params.rot.y); - mat4.rotateZ(normalModelMatrix, - normalModelMatrix, - params.rot.z); - mat4.rotateY(normalModelMatrix, - normalModelMatrix, - squareRotation); - - const modelMatrix = mat4.create(); - mat4.translate(modelMatrix, - modelMatrix, - [ - -params.avg.x, - -params.avg.y, - -params.avg.z, - ]); - // Set the drawing position to the "identity" point, which is // the center of the scene. const viewMatrix = mat4.create(); @@ -605,23 +632,6 @@ function drawScene(gl: any, // Tell WebGL to use our program when drawing gl.useProgram(programInfo.program); - // Set the shader uniforms - gl.uniformMatrix4fv( - programInfo.uniformLocations.projectionMatrix, - false, - projectionMatrix); - gl.uniformMatrix4fv( - programInfo.uniformLocations.viewMatrix, - false, - viewMatrix); - gl.uniformMatrix4fv( - programInfo.uniformLocations.modelMatrix, - false, - modelMatrix); - gl.uniformMatrix4fv( - programInfo.uniformLocations.normalModelMatrix, - false, - normalModelMatrix); // Tell WebGL we want to affect texture unit 0 gl.activeTexture(gl.TEXTURE0); @@ -630,11 +640,70 @@ function drawScene(gl: any, // 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); + } + + for (let i = 0; i < params.instanceNumber; i++) { + // Set the shader uniforms + gl.uniformMatrix4fv( + programInfo.uniformLocations.projectionMatrix, + false, + projectionMatrix); + gl.uniformMatrix4fv( + programInfo.uniformLocations.viewMatrix, + false, + viewMatrix); + gl.uniformMatrix4fv( + programInfo.uniformLocations.modelMatrix, + false, + modelMatrix[i]); + gl.uniformMatrix4fv( + 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/views/index.ejs b/views/index.ejs index 23bba07..4ba454c 100644 --- a/views/index.ejs +++ b/views/index.ejs @@ -24,9 +24,9 @@
Change distance :
Fine:
- +
Coarse:
- +
Change circle size :
@@ -40,6 +40,10 @@
Change base rotation speed :
+
+
Change instances number :
+ +
Change rotation :
X: