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

cache textures, next update scene editor

This commit is contained in:
gbrochar 2020-11-28 16:37:16 +01:00
parent 1dd40d0584
commit af51dece9b
3 changed files with 76 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
src/client/init.ts
View File

@ -1,5 +1,6 @@
import $ from 'jquery'; import $ from 'jquery';
import {fetchObj, loadObj} from './objutils'; import {fetchObj, loadObj} from './objutils';
import {loadTexture} from './texture';
/** /**
* Initialize the parameters * Initialize the parameters
@ -66,15 +67,27 @@ export function initParams(context: any) {
export async function initCache(context: any) { export async function initCache(context: any) {
const racerData = await fetchObj('/static/objs/racer.obj'); const racerData = await fetchObj('/static/objs/racer.obj');
const racerObj = loadObj(racerData); const racerObj = loadObj(racerData);
const racerTexture = loadTexture(context.gl, '/static/textures/racer.png');
context.cache = { context.cache = {
fox: null, objs: {
mecha: null, fox: null,
racer: racerObj, mecha: null,
sphere: null, racer: racerObj,
teapot: null, sphere: null,
teapot: null,
},
textures: {
fox: null,
ice: null,
noise: null,
racerWireframe: null,
racer: racerTexture,
wall: null,
},
}; };
context.params.len = racerObj.indices.length; context.params.len = racerObj.indices.length;
context.params.range = racerObj.range; context.params.range = racerObj.range;
context.texture = racerTexture;
} }
/** /**

6
src/client/main.ts
View File

@ -3,7 +3,7 @@ import texture from './shaders/texture.frag';
import {loadObjBuffers} from './objutils'; import {loadObjBuffers} from './objutils';
import {initShaderProgram} from './shaders'; import {initShaderProgram} from './shaders';
import {loadTexture} from './texture'; // import {loadTexture} from './texture';
import {drawScene} from './draw'; import {drawScene} from './draw';
import {initCache, initParams, setProgramInfo} from './init'; import {initCache, initParams, setProgramInfo} from './init';
@ -43,10 +43,10 @@ async function main() {
initParams(context); initParams(context);
await initCache(context); await initCache(context);
loadObjBuffers(context, context.cache.racer); loadObjBuffers(context, context.cache.objs.racer);
initShaderProgram(context, vsSource, texture); initShaderProgram(context, vsSource, texture);
setProgramInfo(context); setProgramInfo(context);
context.texture = loadTexture(context.gl, '/static/textures/racer.png'); // context.texture = loadTexture(context.gl, '/static/textures/racer.png');
let then = 0; let then = 0;
let changed = false; let changed = false;

92
src/client/uijquery.ts
View File

@ -86,28 +86,46 @@ export function uiUpdateParams(params: any) {
*/ */
export function uiUpdateTexture(context: any) { export function uiUpdateTexture(context: any) {
$('#t_wall').on('click', () => { $('#t_wall').on('click', () => {
context.texture = loadTexture(context.gl, if (context.cache.textures.wall == null) {
'/static/textures/wall.png'); context.cache.textures.wall = loadTexture(context.gl,
'/static/textures/wall.png');
}
context.texture = context.cache.textures.wall;
}); });
$('#t_ice').on('click', () => { $('#t_ice').on('click', () => {
context.texture = loadTexture(context.gl, if (context.cache.textures.ice == null) {
'/static/textures/ice.png'); context.cache.textures.ice = loadTexture(context.gl,
'/static/textures/ice.png');
}
context.texture = context.cache.textures.ice;
}); });
$('#t_noise').on('click', () => { $('#t_noise').on('click', () => {
context.texture = loadTexture(context.gl, if (context.cache.textures.noise == null) {
'/static/textures/noise.png'); context.cache.textures.noise = loadTexture(context.gl,
'/static/textures/noise.png');
}
context.texture = context.cache.textures.noise;
}); });
$('#t_fox').on('click', () => { $('#t_fox').on('click', () => {
context.texture = loadTexture(context.gl, if (context.cache.textures.fox == null) {
'/static/textures/fox.png'); context.cache.textures.fox = loadTexture(context.gl,
'/static/textures/fox.png');
}
context.texture = context.cache.textures.fox;
}); });
$('#t_racer').on('click', () => { $('#t_racer').on('click', () => {
context.texture = loadTexture(context.gl, if (context.cache.textures.racer == null) {
'/static/textures/racer.png'); context.cache.textures.racer = loadTexture(context.gl,
'/static/textures/racer.png');
}
context.texture = context.cache.textures.racer;
}); });
$('#t_racer_wireframe').on('click', () => { $('#t_racer_wireframe').on('click', () => {
context.texture = loadTexture(context.gl, if (context.cache.textures.racerWireframe == null) {
'/static/textures/racer_wireframe.png'); context.cache.textures.racerWireframe = loadTexture(context.gl,
'/static/textures/racer_wireframe.png');
}
context.texture = context.cache.textures.racerWireframe;
}); });
} }
@ -117,49 +135,49 @@ export function uiUpdateTexture(context: any) {
*/ */
export function uiUpdateObject(context: any) { export function uiUpdateObject(context: any) {
$('#o_sphere').on('click', async function() { $('#o_sphere').on('click', async function() {
if (context.cache.sphere == null) { if (context.cache.objs.sphere == null) {
const data = await fetchObj('/static/objs/sphere.obj'); const data = await fetchObj('/static/objs/sphere.obj');
context.cache.sphere = loadObj(data); context.cache.objs.sphere = loadObj(data);
} }
loadObjBuffers(context, context.cache.sphere); loadObjBuffers(context, context.cache.objs.sphere);
context.params.len = context.cache.sphere.indices.length; context.params.len = context.cache.objs.sphere.indices.length;
context.params.range = context.cache.sphere.range; context.params.range = context.cache.objs.sphere.range;
}); });
$('#o_teapot').on('click', async function() { $('#o_teapot').on('click', async function() {
if (context.cache.teapot == null) { if (context.cache.objs.teapot == null) {
const data = await fetchObj('/static/objs/teapot.obj'); const data = await fetchObj('/static/objs/teapot.obj');
context.cache.teapot = loadObj(data); context.cache.objs.teapot = loadObj(data);
} }
loadObjBuffers(context, context.cache.teapot); loadObjBuffers(context, context.cache.objs.teapot);
context.params.len = context.cache.teapot.indices.length; context.params.len = context.cache.objs.teapot.indices.length;
context.params.range = context.cache.teapot.range; context.params.range = context.cache.objs.teapot.range;
}); });
$('#o_fox').on('click', async function() { $('#o_fox').on('click', async function() {
if (context.cache.fox == null) { if (context.cache.objs.fox == null) {
const data = await fetchObj('/static/objs/fox.obj'); const data = await fetchObj('/static/objs/fox.obj');
context.cache.fox = loadObj(data); context.cache.objs.fox = loadObj(data);
} }
loadObjBuffers(context, context.cache.fox); loadObjBuffers(context, context.cache.objs.fox);
context.params.len = context.cache.fox.indices.length; context.params.len = context.cache.objs.fox.indices.length;
context.params.range = context.cache.fox.range; context.params.range = context.cache.objs.fox.range;
}); });
$('#o_mecha').on('click', async function() { $('#o_mecha').on('click', async function() {
if (context.cache.mecha == null) { if (context.cache.objs.mecha == null) {
const data = await fetchObj('/static/objs/mecha.obj'); const data = await fetchObj('/static/objs/mecha.obj');
context.cache.mecha = loadObj(data); context.cache.objs.mecha = loadObj(data);
} }
loadObjBuffers(context, context.cache.mecha); loadObjBuffers(context, context.cache.objs.mecha);
context.params.len = context.cache.mecha.indices.length; context.params.len = context.cache.objs.mecha.indices.length;
context.params.range = context.cache.mecha.range; context.params.range = context.cache.objs.mecha.range;
}); });
$('#o_racer').on('click', async function() { $('#o_racer').on('click', async function() {
if (context.cache.racer == null) { if (context.cache.objs.racer == null) {
const data = await fetchObj('/static/objs/racer.obj'); const data = await fetchObj('/static/objs/racer.obj');
context.cache.racer = loadObj(data); context.cache.objs.racer = loadObj(data);
} }
loadObjBuffers(context, context.cache.racer); loadObjBuffers(context, context.cache.objs.racer);
context.params.len = context.cache.racer.indices.length; context.params.len = context.cache.objs.racer.indices.length;
context.params.range = context.cache.racer.range; context.params.range = context.cache.objs.racer.range;
}); });
} }