basic camera control, uiUpdateParams and initParams simplified

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

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

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, [
+		viewMatrix,
-			Math.cos(params.squareRotation) * params.circleSize,
+		[params.camPos.x, params.camPos.y, params.camPos.z]);
-			Math.sin(params.squareRotation) * params.circleSize,
-			0,
-		]);
 	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) {

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

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