From 7f2b135bdd28f878a611b719616a5c63aa16419a Mon Sep 17 00:00:00 2001 From: gbrochar Date: Tue, 24 Nov 2020 22:12:32 +0100 Subject: [PATCH] put sliders and average object position --- src/client/main.ts | 98 ++++++++++++++++++++++++++++++---------------- views/index.ejs | 13 +++--- 2 files changed, 73 insertions(+), 38 deletions(-) diff --git a/src/client/main.ts b/src/client/main.ts index d8b25b6..c47c310 100644 --- a/src/client/main.ts +++ b/src/client/main.ts @@ -192,16 +192,38 @@ async function main() { } const data = await getObj('/static/objs/fox.obj'); - let distance: any = $('#input1').val(); - let circleSize: any = $('#input2').val(); - distance = parseFloat(distance); - circleSize = parseFloat(circleSize); + const params: any = { + distance: $('#distance').val(), + circleSize: $('#circlesize').val(), + fov: $('#fov').val(), + avg: { + x: 0, + y: 0, + z: 0, + }, + }; + const [ positions, normals, uvs, indices, ] = convert(data); + let x = 0; + let y = 0; + let z = 0; + for (let i = 0; i < positions.length; i++) { + if (i % 3 == 0) { + x += positions[i]; + } else if (i % 3 == 1) { + y += positions[i]; + } else { + z += positions[i]; + } + } + params.avg.x = x / (positions.length / 3); + params.avg.y = y / (positions.length / 3); + params.avg.z = z / (positions.length / 3); let length = indices.length; let [shaderProgram, fragmentShader]: any = initShaderProgram(gl, vsSource, @@ -250,8 +272,7 @@ async function main() { buffers, deltaTime, length, - distance, - circleSize, + params, texture); requestAnimationFrame(render); } @@ -268,22 +289,37 @@ async function main() { indices, ] = convert(data); length = indices.length; + let x = 0; + let y = 0; + let z = 0; + for (let i = 0; i < positions.length; i++) { + if (i % 3 == 0) { + x += positions[i]; + } else if (i % 3 == 1) { + y += positions[i]; + } else { + z += positions[i]; + } + } + params.avg.x = x / (positions.length / 3); + params.avg.y = y / (positions.length / 3); + params.avg.z = z / (positions.length / 3); deleteBuffers(gl, buffers); buffers = initBuffers(gl, positions, indices, normals, uvs); } $(function() { - $('#input1').on('keypress', function(event: any) { - if (event.which === 13) { - event.preventDefault(); - $('#changedistance').click(); - } + $('#distance').on('input', function() { + const distance: any = $('#distance').val(); + params.distance = parseFloat(distance); }); - $('#input2').on('keypress', function(event: any) { - if (event.which === 13) { - event.preventDefault(); - $('#changecirclesize').click(); - } + $('#circlesize').on('input', function() { + const circleSize: any = $('#circlesize').val(); + params.circleSize = parseFloat(circleSize); + }); + $('#fov').on('input', function() { + const fov: any = $('#fov').val(); + params.fov = parseFloat(fov); }); $('#s_blackandwhite').on('click', function() { [programInfo, fragmentShader] = changeFragmentShader(gl, @@ -301,14 +337,6 @@ async function main() { [programInfo, fragmentShader] = changeFragmentShader(gl, shaderProgram, fragmentShader, fsSource4, vsSource); }); - $('#changedistance').on('click', function() { - distance = $('#input1').val(); - distance = parseFloat(distance); - }); - $('#changecirclesize').on('click', function() { - circleSize = $('#input2').val(); - circleSize = parseFloat(circleSize); - }); $('#o_sphere').on('click', async function() { const data = await getObj('/static/objs/sphere.obj'); updateObj(data); @@ -344,8 +372,7 @@ async function main() { * @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} distance distance of camera - * @param {number} circleSize size of circle the object is rotating around + * @param {number} params various parameterss * @param {any} texture the texture to load */ function drawScene(gl: any, @@ -353,8 +380,7 @@ function drawScene(gl: any, buffers: any, deltaTime: number, length: number, - distance: number, - circleSize: number, + params: any, texture: any) { gl.clearColor(0.0, 0.0, 0.0, 1.0); gl.clearDepth(1.0); @@ -369,7 +395,7 @@ function drawScene(gl: any, // 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 = 45 * Math.PI / 180; + const fieldOfView = params.fov * Math.PI / 180; const aspect = gl.canvas.clientWidth / gl.canvas.clientHeight; const zNear = 0.1; const zFar = 1000.0; @@ -400,19 +426,25 @@ function drawScene(gl: any, // the center of the scene. const viewMatrix = mat4.create(); - + mat4.translate(viewMatrix, + viewMatrix, + [ + -params.avg.x, + -params.avg.y, + -params.avg.z, + ]); mat4.translate( viewMatrix, viewMatrix, [ - Math.cos(squareRotation) * circleSize, - Math.sin(squareRotation) * circleSize, + Math.cos(squareRotation) * params.circleSize, + Math.sin(squareRotation) * params.circleSize, 0, ]); mat4.translate( viewMatrix, viewMatrix, - [0.0, 0.0, -distance]); + [0.0, 0.0, -params.distance]); // Tell WebGL how to pull out the positions from the position // buffer into the vertexPosition attribute. diff --git a/views/index.ejs b/views/index.ejs index b5b56ec..3ef359d 100644 --- a/views/index.ejs +++ b/views/index.ejs @@ -21,13 +21,16 @@
- - -
Max distance is 1000
+
Change distance :
+
- - +
Change circle size :
+ +
+
+
Change fov :
+