gbrochar
/
webgl
1
1
Fork 0
Code Issues Pull Requests Releases Wiki Activity

basic camera control, uiUpdateParams and initParams simplified

This commit is contained in:
gbrochar 2020-11-27 11:53:59 +01:00
parent cad3d7705d
commit 414c3263ea
5 changed files with 123 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
src/client/init.ts
View File

@ -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(<string>$('#distance').val()) +
parseFloat(<string>$('#distancefine').val()),
circleSize: parseFloat(<string>$('#circlesize').val()),
fov: parseFloat(<string>$('#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(<string>$('#rotx').val()),
y: parseFloat(<string>$('#roty').val()),
z: parseFloat(<string>$('#rotz').val()),
},
rotSpeed: $('#rotspeed').val(),
instanceNumber: $('#instance').val(),
rotSpeed: parseFloat(<string>$('#rotspeed').val()),
instanceNumber: parseFloat(<string>$('#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,
},
};
}

14
src/client/main.ts
View File

@ -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);
}

19
src/client/matrix.ts
View File

@ -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) {

32
src/client/uijquery.ts
View File

@ -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(<string>$('#distance').val()) +
parseFloat(<string>$('#distancefine').val());
});
$('#distancefine').on('input', () => {
const distance: any = $('#distance').val();
const distanceFine: any = $('#distancefine').val();
params.distance = parseFloat(distance) + parseFloat(distanceFine);
params.distance = parseFloat(<string>$('#distance').val()) +
parseFloat(<string>$('#distancefine').val());
});
$('#circlesize').on('input', () => {
const circleSize: any = $('#circlesize').val();
params.circleSize = parseFloat(circleSize);
params.circleSize = parseFloat(<string>$('#circlesize').val());
});
$('#instance').on('input', () => {
const instance: any = $('#instance').val();
params.instanceNumber = parseInt(instance);
params.instanceNumber = parseFloat(<string>$('#instance').val());
});
$('#rotx').on('input', () => {
const rotx: any = $('#rotx').val();
params.rot.x = parseFloat(rotx);
params.rot.x = parseFloat(<string>$('#rotx').val());
});
$('#roty').on('input', () => {
const roty: any = $('#roty').val();
params.rot.y = parseFloat(roty);
params.rot.y = parseFloat(<string>$('#roty').val());
});
$('#rotz').on('input', () => {
const rotz: any = $('#rotz').val();
params.rot.z = parseFloat(rotz);
params.rot.z = parseFloat(<string>$('#rotz').val());
});
$('#rotspeed').on('input', () => {
console.log('salut');
const rotSpeed: any = $('#rotspeed').val();
params.rotSpeed = parseFloat(rotSpeed);
params.rotSpeed = parseFloat(<string>$('#rotspeed').val());
});
$('#fov').on('input', () => {
const fov: any = $('#fov').val();
params.fov = parseFloat(fov);
params.fov = parseFloat(<string>$('#fov').val());
});
}

58
src/client/ux.ts Normal file
View File

@ -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;
}
});
}