From af51dece9b12e4334627f853364aec5b4769bdc0 Mon Sep 17 00:00:00 2001 From: gbrochar Date: Sat, 28 Nov 2020 16:37:16 +0100 Subject: [PATCH] cache textures, next update scene editor --- src/client/init.ts | 23 ++++++++--- src/client/main.ts | 6 +-- src/client/uijquery.ts | 92 +++++++++++++++++++++++++----------------- 3 files changed, 76 insertions(+), 45 deletions(-) diff --git a/src/client/init.ts b/src/client/init.ts index 6b143ea..7faf2fe 100644 --- a/src/client/init.ts +++ b/src/client/init.ts @@ -1,5 +1,6 @@ import $ from 'jquery'; import {fetchObj, loadObj} from './objutils'; +import {loadTexture} from './texture'; /** * Initialize the parameters @@ -66,15 +67,27 @@ export function initParams(context: any) { export async function initCache(context: any) { const racerData = await fetchObj('/static/objs/racer.obj'); const racerObj = loadObj(racerData); + const racerTexture = loadTexture(context.gl, '/static/textures/racer.png'); context.cache = { - fox: null, - mecha: null, - racer: racerObj, - sphere: null, - teapot: null, + objs: { + fox: null, + mecha: null, + racer: racerObj, + 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.range = racerObj.range; + context.texture = racerTexture; } /** diff --git a/src/client/main.ts b/src/client/main.ts index 67f39c0..0c4edc2 100644 --- a/src/client/main.ts +++ b/src/client/main.ts @@ -3,7 +3,7 @@ import texture from './shaders/texture.frag'; import {loadObjBuffers} from './objutils'; import {initShaderProgram} from './shaders'; -import {loadTexture} from './texture'; +// import {loadTexture} from './texture'; import {drawScene} from './draw'; import {initCache, initParams, setProgramInfo} from './init'; @@ -43,10 +43,10 @@ async function main() { initParams(context); await initCache(context); - loadObjBuffers(context, context.cache.racer); + loadObjBuffers(context, context.cache.objs.racer); initShaderProgram(context, vsSource, texture); setProgramInfo(context); - context.texture = loadTexture(context.gl, '/static/textures/racer.png'); + // context.texture = loadTexture(context.gl, '/static/textures/racer.png'); let then = 0; let changed = false; diff --git a/src/client/uijquery.ts b/src/client/uijquery.ts index e087e05..e74856f 100644 --- a/src/client/uijquery.ts +++ b/src/client/uijquery.ts @@ -86,28 +86,46 @@ export function uiUpdateParams(params: any) { */ export function uiUpdateTexture(context: any) { $('#t_wall').on('click', () => { - context.texture = loadTexture(context.gl, - '/static/textures/wall.png'); + if (context.cache.textures.wall == null) { + context.cache.textures.wall = loadTexture(context.gl, + '/static/textures/wall.png'); + } + context.texture = context.cache.textures.wall; }); $('#t_ice').on('click', () => { - context.texture = loadTexture(context.gl, - '/static/textures/ice.png'); + if (context.cache.textures.ice == null) { + context.cache.textures.ice = loadTexture(context.gl, + '/static/textures/ice.png'); + } + context.texture = context.cache.textures.ice; }); $('#t_noise').on('click', () => { - context.texture = loadTexture(context.gl, - '/static/textures/noise.png'); + if (context.cache.textures.noise == null) { + context.cache.textures.noise = loadTexture(context.gl, + '/static/textures/noise.png'); + } + context.texture = context.cache.textures.noise; }); $('#t_fox').on('click', () => { - context.texture = loadTexture(context.gl, - '/static/textures/fox.png'); + if (context.cache.textures.fox == null) { + context.cache.textures.fox = loadTexture(context.gl, + '/static/textures/fox.png'); + } + context.texture = context.cache.textures.fox; }); $('#t_racer').on('click', () => { - context.texture = loadTexture(context.gl, - '/static/textures/racer.png'); + if (context.cache.textures.racer == null) { + context.cache.textures.racer = loadTexture(context.gl, + '/static/textures/racer.png'); + } + context.texture = context.cache.textures.racer; }); $('#t_racer_wireframe').on('click', () => { - context.texture = loadTexture(context.gl, - '/static/textures/racer_wireframe.png'); + if (context.cache.textures.racerWireframe == null) { + 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) { $('#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'); - context.cache.sphere = loadObj(data); + context.cache.objs.sphere = loadObj(data); } - loadObjBuffers(context, context.cache.sphere); - context.params.len = context.cache.sphere.indices.length; - context.params.range = context.cache.sphere.range; + loadObjBuffers(context, context.cache.objs.sphere); + context.params.len = context.cache.objs.sphere.indices.length; + context.params.range = context.cache.objs.sphere.range; }); $('#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'); - context.cache.teapot = loadObj(data); + context.cache.objs.teapot = loadObj(data); } - loadObjBuffers(context, context.cache.teapot); - context.params.len = context.cache.teapot.indices.length; - context.params.range = context.cache.teapot.range; + loadObjBuffers(context, context.cache.objs.teapot); + context.params.len = context.cache.objs.teapot.indices.length; + context.params.range = context.cache.objs.teapot.range; }); $('#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'); - context.cache.fox = loadObj(data); + context.cache.objs.fox = loadObj(data); } - loadObjBuffers(context, context.cache.fox); - context.params.len = context.cache.fox.indices.length; - context.params.range = context.cache.fox.range; + loadObjBuffers(context, context.cache.objs.fox); + context.params.len = context.cache.objs.fox.indices.length; + context.params.range = context.cache.objs.fox.range; }); $('#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'); - context.cache.mecha = loadObj(data); + context.cache.objs.mecha = loadObj(data); } - loadObjBuffers(context, context.cache.mecha); - context.params.len = context.cache.mecha.indices.length; - context.params.range = context.cache.mecha.range; + loadObjBuffers(context, context.cache.objs.mecha); + context.params.len = context.cache.objs.mecha.indices.length; + context.params.range = context.cache.objs.mecha.range; }); $('#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'); - context.cache.racer = loadObj(data); + context.cache.objs.racer = loadObj(data); } - loadObjBuffers(context, context.cache.racer); - context.params.len = context.cache.racer.indices.length; - context.params.range = context.cache.racer.range; + loadObjBuffers(context, context.cache.objs.racer); + context.params.len = context.cache.objs.racer.indices.length; + context.params.range = context.cache.objs.racer.range; }); }