added cache, fix circle size instances bug

src/client/draw.ts

@@ -54,7 +54,7 @@ export function drawScene(gl: any,
 			programInfo.uniformLocations.normalModelMatrix,
 			false,
 			normalModelMatrix[i]);
-		const vertexCount = params.length;
+		const vertexCount = params.len;
 		const type = gl.UNSIGNED_SHORT;
 		const offset = 0;
 		gl.drawElements(gl.TRIANGLES, vertexCount, type, offset);

src/client/init.ts

@@ -1,4 +1,5 @@
 import $ from 'jquery';
+import {fetchObj, loadObj} from './objutils';
 
 /**
  * Initialize the parameters
@@ -10,12 +11,7 @@ export function initParams(context: any) {
 			parseFloat(<string>$('#distancefine').val()),
 		circleSize: parseFloat(<string>$('#circlesize').val()),
 		fov: parseFloat(<string>$('#fov').val()),
-		length: 0,
+		len: 0,
-		avg: {
-			x: 0,
-			y: 0,
-			z: 0,
-		},
 		range: 0,
 		rot: {
 			x: parseFloat(<string>$('#rotx').val()),
@@ -45,6 +41,24 @@ export function initParams(context: any) {
 	};
 }
 
+/**
+ * Initialize the cache with an object
+ * @param {any} context the program context
+ */
+export async function initCache(context: any) {
+	const racerData = await fetchObj('/static/objs/racer.obj');
+	const racerObj = loadObj(racerData);
+	context.cache = {
+		fox: null,
+		mecha: null,
+		racer: racerObj,
+		sphere: null,
+		teapot: null,
+	};
+	context.params.len = racerObj.indices.length;
+	context.params.range = racerObj.range;
+}
+
 /**
  * Set the program info
  * @param {any} context the program context

src/client/main.ts

@@ -1,11 +1,11 @@
 import vsSource from './shaders/shader.vert';
 import texture from './shaders/texture.frag';
 
-import {fetchObj, updateObj} from './objutils';
+import {loadObjBuffers} from './objutils';
 import {initShaderProgram} from './shaders';
 import {loadTexture} from './texture';
 import {drawScene} from './draw';
-import {initParams, setProgramInfo} from './init';
+import {initCache, initParams, setProgramInfo} from './init';
 
 import {uiUpdateParams,
 	uiUpdateTexture,
@@ -29,6 +29,7 @@ async function main() {
 		shaderProgram: null,
 		fragmentShader: null,
 		vertexShader: null,
+		cache: null,
 	};
 	const canvas: any = document.querySelector('#glCanvas')!;
 	context.gl = canvas.getContext('webgl2');
@@ -40,9 +41,9 @@ async function main() {
 			support it.</p>`);
 	}
 
-	const data = await fetchObj('/static/objs/racer.obj');
 	initParams(context);
-	updateObj(context, data, true);
+	await initCache(context);
+	loadObjBuffers(context, context.cache.racer);
 	initShaderProgram(context, vsSource, texture);
 	setProgramInfo(context);
 	context.texture = loadTexture(context.gl, '/static/textures/racer.png');

src/client/matrix.ts

@@ -38,7 +38,6 @@ export function initMatrices(gl: any, params: any) {
 		viewMatrix,
 		viewMatrix,
 		[0.0, 0.0, -params.distance]);
-
 	const normalModelMatrix = [];
 	const modelMatrix = [];
 	for (let i = 0; i < params.instanceNumber; i++) {
@@ -58,14 +57,6 @@ export function initMatrices(gl: any, params: any) {
 		mat4.rotateY(normalModelMatrixTemplate,
 			normalModelMatrixTemplate,
 			params.squareRotation);
-		mat4.translate(
-			viewMatrix,
-			viewMatrix,
-			[
-				params.circleSize * Math.cos(params.squareRotation),
-				params.circleSize * Math.sin(params.squareRotation),
-				0,
-			]);
 		if (i % 3 == 1) {
 			addx = Math.floor(i / 9 + 1) * params.range * 1.5;
 		} else if (i % 3 == 2) {
@@ -79,9 +70,9 @@ export function initMatrices(gl: any, params: any) {
 		mat4.translate(modelMatrixTemplate,
 			modelMatrixTemplate,
 			[
-				-params.avg.x + addx,
+				params.circleSize * Math.cos(params.squareRotation) + addx,
-				-params.avg.y + addy,
+				params.circleSize * Math.sin(params.squareRotation) + addy,
-				-params.avg.z,
+				0,
 			]);
 		normalModelMatrix.push(normalModelMatrixTemplate);
 		modelMatrix.push(modelMatrixTemplate);

src/client/objutils.ts

@@ -16,20 +16,31 @@ export async function fetchObj(url: string) {
 /**
  * Pushes a new obj file to the gl buffer
  * @param {any} context the program context
- * @param {string} data the obj file to push
+ * @param {any} obj the obj file to push
- * @param {boolean} firstCall is it first object updated ?
  */
-export function updateObj(
+export function loadObjBuffers(
 	context: any,
-	data: string,
+	obj: any) {
-	firstCall: boolean = false) {
+	if (context.buffers != null) {
+		deleteBuffers(context.gl, context.buffers);
+	}
+	context.buffers = initBuffers(context.gl,
+		obj.positions, obj.indices, obj.normals, obj.uvs);
+}
+
+/**
+ * Load a new obj file to the cache
+ * @param {string} data the obj file to push
+ * @return {any} the obj file loaded
+ */
+export function loadObj(
+	data: string) {
 	const [
 		positions,
 		normals,
 		uvs,
 		indices,
 	] = convert(data);
-	context.params.length = indices.length;
 	let x = 0;
 	let y = 0;
 	let z = 0;
@@ -63,12 +74,23 @@ export function updateObj(
 			z += positions[i];
 		}
 	}
-	context.params.range = Math.max(maxx - minx, maxy - miny, maxz - minz);
+	const avgx = x / (positions.length / 3);
-	context.params.avg.x = x / (positions.length / 3);
+	const avgy = y / (positions.length / 3);
-	context.params.avg.y = y / (positions.length / 3);
+	const avgz = z / (positions.length / 3);
-	context.params.avg.z = z / (positions.length / 3);
+	for (let i = 0; i < positions.length; i++) {
-	if (!firstCall) {
+		if (i % 3 == 0) {
-		deleteBuffers(context.gl, context.buffers);
+			positions[i] -= avgx;
+		} else if (i % 3 == 1) {
+			positions[i] -= avgy;
+		} else {
+			positions[i] -= avgz;
+		}
 	}
-	context.buffers = initBuffers(context.gl, positions, indices, normals, uvs);
+	return {
+		positions: positions,
+		indices: indices,
+		normals: normals,
+		uvs: uvs,
+		range: Math.max(maxx - minx, maxy - miny, maxz - minz),
+	};
 }

src/client/uijquery.ts

@@ -1,6 +1,6 @@
 import $ from 'jquery';
 import {loadTexture} from './texture';
-import {fetchObj, updateObj} from './objutils';
+import {fetchObj, loadObj, loadObjBuffers} from './objutils';
 import {changeFragmentShader} from './shaders';
 
 import vsSource from './shaders/shader.vert';
@@ -84,24 +84,49 @@ export function uiUpdateTexture(context: any) {
  */
 export function uiUpdateObject(context: any) {
 	$('#o_sphere').on('click', async function() {
-		const data = await fetchObj('/static/objs/sphere.obj');
+		if (context.cache.sphere == null) {
-		updateObj(context, data);
+			const data = await fetchObj('/static/objs/sphere.obj');
+			context.cache.sphere = loadObj(data);
+		}
+		loadObjBuffers(context, context.cache.sphere);
+		context.params.len = context.cache.sphere.indices.length;
+		context.params.range = context.cache.sphere.range;
 	});
 	$('#o_teapot').on('click', async function() {
-		const data = await fetchObj('/static/objs/teapot.obj');
+		if (context.cache.teapot == null) {
-		updateObj(context, data);
+			const data = await fetchObj('/static/objs/teapot.obj');
+			context.cache.teapot = loadObj(data);
+		}
+		loadObjBuffers(context, context.cache.teapot);
+		context.params.len = context.cache.teapot.indices.length;
+		context.params.range = context.cache.teapot.range;
 	});
 	$('#o_fox').on('click', async function() {
-		const data = await fetchObj('/static/objs/fox.obj');
+		if (context.cache.fox == null) {
-		updateObj(context, data);
+			const data = await fetchObj('/static/objs/fox.obj');
+			context.cache.fox = loadObj(data);
+		}
+		loadObjBuffers(context, context.cache.fox);
+		context.params.len = context.cache.fox.indices.length;
+		context.params.range = context.cache.fox.range;
 	});
 	$('#o_mecha').on('click', async function() {
-		const data = await fetchObj('/static/objs/mecha.obj');
+		if (context.cache.mecha == null) {
-		updateObj(context, data);
+			const data = await fetchObj('/static/objs/mecha.obj');
+			context.cache.mecha = loadObj(data);
+		}
+		loadObjBuffers(context, context.cache.mecha);
+		context.params.len = context.cache.mecha.indices.length;
+		context.params.range = context.cache.mecha.range;
 	});
 	$('#o_racer').on('click', async function() {
-		const data = await fetchObj('/static/objs/racer.obj');
+		if (context.cache.racer == null) {
-		updateObj(context, data);
+			const data = await fetchObj('/static/objs/racer.obj');
+			context.cache.racer = loadObj(data);
+		}
+		loadObjBuffers(context, context.cache.racer);
+		context.params.len = context.cache.racer.indices.length;
+		context.params.range = context.cache.racer.range;
 	});
 }
 

views/index.ejs

@@ -36,7 +36,7 @@
 				</div>
 				<div class='ui-block'>
 					<div style='display: inline;'>Change circle size: </div>
-					<input type="range" min="0" max="5" value="0.5" step='0.001' class="slider" id="circlesize">
+					<input type="range" min="0" max="30" value="0.5" step='0.001' class="slider" id="circlesize">
 				</div>
 				<div class='ui-block'>
 					<div style='display: inline;'>Change fov: </div>