From 414c3263ea8aec8158758a7fcfb75a58e9a3ab6b Mon Sep 17 00:00:00 2001 From: gbrochar Date: Fri, 27 Nov 2020 11:53:59 +0100 Subject: [PATCH] basic camera control, uiUpdateParams and initParams simplified --- src/client/init.ts | 40 +++++++++++++++++++++-------- src/client/main.ts | 14 ++++++++++ src/client/matrix.ts | 19 ++++++++------ src/client/uijquery.ts | 32 ++++++++--------------- src/client/ux.ts | 58 ++++++++++++++++++++++++++++++++++++++++++ 5 files changed, 123 insertions(+), 40 deletions(-) create mode 100644 src/client/ux.ts diff --git a/src/client/init.ts b/src/client/init.ts index afa040a..764d2f2 100644 --- a/src/client/init.ts +++ b/src/client/init.ts @@ -5,13 +5,11 @@ import $ from 'jquery'; * @param {any} context the program context */ export function initParams(context: any) { - const distance: any = $('#distance').val(); - const distanceFine: any = $('#distancefine').val(); - context.params = { - distance: parseFloat(distance) + parseFloat(distanceFine), - circleSize: $('#circlesize').val(), - fov: $('#fov').val(), + distance: parseFloat($('#distance').val()) + + parseFloat($('#distancefine').val()), + circleSize: parseFloat($('#circlesize').val()), + fov: parseFloat($('#fov').val()), length: 0, avg: { x: 0, @@ -20,13 +18,33 @@ export function initParams(context: any) { }, range: 0, rot: { - x: $('#rotx').val(), - y: $('#roty').val(), - z: $('#rotz').val(), + x: parseFloat($('#rotx').val()), + y: parseFloat($('#roty').val()), + z: parseFloat($('#rotz').val()), }, - rotSpeed: $('#rotspeed').val(), - instanceNumber: $('#instance').val(), + rotSpeed: parseFloat($('#rotspeed').val()), + instanceNumber: parseFloat($('#instance').val()), squareRotation: 0, + camRot: { + x: 0, + y: 0, + }, + camPos: { + x: 0, + y: 0, + z: 0, + }, + mousePrev: { + x: null, + y: null, + }, + keyboard: { + w: false, + a: false, + s: false, + d: false, + shift: false, + }, }; } diff --git a/src/client/main.ts b/src/client/main.ts index 345e738..8dc19e2 100644 --- a/src/client/main.ts +++ b/src/client/main.ts @@ -11,6 +11,7 @@ import {uiUpdateParams, uiUpdateTexture, uiUpdateObject, uiUpdateShader} from './uijquery'; +import {initUX} from './ux'; main(); @@ -60,6 +61,18 @@ async function main() { changed = true; } then = now; + if (context.params.keyboard.w) { + context.params.camPos.z += 1.; + } + if (context.params.keyboard.s) { + context.params.camPos.z -= 1.; + } + if (context.params.keyboard.a) { + context.params.camPos.x += 1.; + } + if (context.params.keyboard.d) { + context.params.camPos.x -= 1.; + } drawScene(context.gl, context.programInfo, context.buffers, @@ -71,5 +84,6 @@ async function main() { uiUpdateTexture(context); uiUpdateObject(context); uiUpdateShader(context); + initUX(context); requestAnimationFrame(render); } diff --git a/src/client/matrix.ts b/src/client/matrix.ts index f1cb07e..af97a00 100644 --- a/src/client/matrix.ts +++ b/src/client/matrix.ts @@ -20,14 +20,14 @@ export function initMatrices(gl: any, params: any) { aspect, zNear, zFar); + const viewMatrix = mat4.create(); + mat4.rotateY(viewMatrix, viewMatrix, params.camRot.y); + mat4.rotateX(viewMatrix, viewMatrix, params.camRot.x); mat4.translate( viewMatrix, - viewMatrix, [ - Math.cos(params.squareRotation) * params.circleSize, - Math.sin(params.squareRotation) * params.circleSize, - 0, - ]); + viewMatrix, + [params.camPos.x, params.camPos.y, params.camPos.z]); mat4.translate( viewMatrix, viewMatrix, @@ -40,15 +40,15 @@ export function initMatrices(gl: any, params: any) { 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.rotateX(normalModelMatrixTemplate, + normalModelMatrixTemplate, + params.rot.x); mat4.rotateY(normalModelMatrixTemplate, normalModelMatrixTemplate, params.squareRotation); @@ -57,6 +57,9 @@ export function initMatrices(gl: any, params: any) { } else if (i % 3 == 2) { addx = -Math.floor(i / 9 + 1) * params.range * 1.5; } + if (i % 9 == 0) { + addx = 5000; + } if (i % 9 > 5) { addy = Math.floor(i / 9 + 1) * params.range * 1.5; } else if (i % 9 > 2 && i % 9 < 6) { diff --git a/src/client/uijquery.ts b/src/client/uijquery.ts index b1f5caf..6529d6d 100644 --- a/src/client/uijquery.ts +++ b/src/client/uijquery.ts @@ -16,43 +16,33 @@ import fsSource5 from './shaders/sobel.frag'; */ export function uiUpdateParams(params: any) { $('#distance').on('input', () => { - const distance: any = $('#distance').val(); - const distanceFine: any = $('#distancefine').val(); - params.distance = parseFloat(distance) + parseFloat(distanceFine); + params.distance = parseFloat($('#distance').val()) + + parseFloat($('#distancefine').val()); }); $('#distancefine').on('input', () => { - const distance: any = $('#distance').val(); - const distanceFine: any = $('#distancefine').val(); - params.distance = parseFloat(distance) + parseFloat(distanceFine); + params.distance = parseFloat($('#distance').val()) + + parseFloat($('#distancefine').val()); }); $('#circlesize').on('input', () => { - const circleSize: any = $('#circlesize').val(); - params.circleSize = parseFloat(circleSize); + params.circleSize = parseFloat($('#circlesize').val()); }); $('#instance').on('input', () => { - const instance: any = $('#instance').val(); - params.instanceNumber = parseInt(instance); + params.instanceNumber = parseFloat($('#instance').val()); }); $('#rotx').on('input', () => { - const rotx: any = $('#rotx').val(); - params.rot.x = parseFloat(rotx); + params.rot.x = parseFloat($('#rotx').val()); }); $('#roty').on('input', () => { - const roty: any = $('#roty').val(); - params.rot.y = parseFloat(roty); + params.rot.y = parseFloat($('#roty').val()); }); $('#rotz').on('input', () => { - const rotz: any = $('#rotz').val(); - params.rot.z = parseFloat(rotz); + params.rot.z = parseFloat($('#rotz').val()); }); $('#rotspeed').on('input', () => { - console.log('salut'); - const rotSpeed: any = $('#rotspeed').val(); - params.rotSpeed = parseFloat(rotSpeed); + params.rotSpeed = parseFloat($('#rotspeed').val()); }); $('#fov').on('input', () => { - const fov: any = $('#fov').val(); - params.fov = parseFloat(fov); + params.fov = parseFloat($('#fov').val()); }); } diff --git a/src/client/ux.ts b/src/client/ux.ts new file mode 100644 index 0000000..06b1446 --- /dev/null +++ b/src/client/ux.ts @@ -0,0 +1,58 @@ +import $ from 'jquery'; + +/** + * UI block to update object + * @param {any} context the program context + */ +export function initUX(context: any) { + $('#glCanvas').mousemove((event) => { + if (context.params.mousePrev.x == null) { + context.params.mousePrev.x = event.pageX; + context.params.mousePrev.y = event.pageY; + } + context.params.camRot.y += + (context.params.mousePrev.x - event.pageX) / 100; + context.params.camRot.x += + (context.params.mousePrev.y - event.pageY) / 100; + context.params.mousePrev.x = event.pageX; + context.params.mousePrev.y = event.pageY; + }); + $('#glCanvas').mouseenter((event) => { + context.params.mousePrev.x = event.pageX; + context.params.mousePrev.y = event.pageY; + }); + $(document).keydown((event) => { + if (event.key == 'Shift') { + context.params.keyboard.shift = true; + } + if (event.key == 'w') { + context.params.keyboard.w = true; + } + if (event.key == 's') { + context.params.keyboard.s = true; + } + if (event.key == 'a') { + context.params.keyboard.a = true; + } + if (event.key == 'd') { + context.params.keyboard.d = true; + } + }); + $(document).keyup((event) => { + if (event.key == 'Shift') { + context.params.keyboard.shift = false; + } + if (event.key == 'w') { + context.params.keyboard.w = false; + } + if (event.key == 's') { + context.params.keyboard.s = false; + } + if (event.key == 'a') { + context.params.keyboard.a = false; + } + if (event.key == 'd') { + context.params.keyboard.d = false; + } + }); +}