From e18a2412891ec3ae8901d9c94ecc93c622f1530c Mon Sep 17 00:00:00 2001 From: gbrochar Date: Sun, 29 Nov 2020 09:31:26 +0100 Subject: [PATCH] core done need to add css --- src/client/init.ts | 2 + src/client/main.ts | 17 +- src/client/objutils.ts | 2 + src/client/shaders.ts | 24 ++- src/client/uijquery.ts | 353 +++++++---------------------------------- src/client/uiscene.ts | 299 ++++++++++++++++++++++++++++++++++ 6 files changed, 389 insertions(+), 308 deletions(-) create mode 100644 src/client/uiscene.ts diff --git a/src/client/init.ts b/src/client/init.ts index 861cd82..1538cb0 100644 --- a/src/client/init.ts +++ b/src/client/init.ts @@ -99,6 +99,8 @@ export async function initCache(context: any) { /** * Set the program info * @param {any} context the program context + * @param {any} shaderProgram the shaderProgram needing info to be set + * @return {any} the set program info */ export function setProgramInfo(context: any, shaderProgram: any) { diff --git a/src/client/main.ts b/src/client/main.ts index d7da37e..75a2b0e 100644 --- a/src/client/main.ts +++ b/src/client/main.ts @@ -3,15 +3,14 @@ import texture from './shaders/texture.frag'; import {loadObjBuffers} from './objutils'; import {initShaderProgram} from './shaders'; -// import {loadTexture} from './texture'; import {drawScene} from './draw'; import {initCache, initParams, setProgramInfo} from './init'; import {uiUpdateParams, uiUpdateTexture, uiUpdateObject, - uiUpdateShader, - uiUpdateScene} from './uijquery'; + uiUpdateShader} from './uijquery'; +import {uiUpdateScene} from './uiscene'; import {initUX} from './ux'; import {updateCamera} from './camera'; @@ -48,10 +47,16 @@ async function main() { initParams(context); await initCache(context); - context.buffers = loadObjBuffers(context, context.buffers, context.cache.objs.racer); - [context.shaderProgram, context.shaders.vert, context.shaders.frag] = initShaderProgram(context, context.shaderProgram, context.shaders.frag, context.shaders.vert, vsSource, texture); + context.buffers = loadObjBuffers(context, + context.buffers, + context.cache.objs.racer); + context.shaderProgram = initShaderProgram(context, + context.shaderProgram, + context.shaders.frag, + context.shaders.vert, + vsSource, + texture); context.programInfo = setProgramInfo(context, context.shaderProgram); - // context.texture = loadTexture(context.gl, '/static/textures/racer.png'); let then = 0; let changed = false; diff --git a/src/client/objutils.ts b/src/client/objutils.ts index e702381..b71ef6b 100644 --- a/src/client/objutils.ts +++ b/src/client/objutils.ts @@ -30,7 +30,9 @@ export function pushBuffersToScene( /** * Pushes a new obj file to the gl buffer * @param {any} context the program context + * @param {any} buffers the buffers to be deleted if needed * @param {any} obj the obj file to push + * @return {any} the new obj buffers */ export function loadObjBuffers( context: any, diff --git a/src/client/shaders.ts b/src/client/shaders.ts index 4cd76c4..014d34f 100644 --- a/src/client/shaders.ts +++ b/src/client/shaders.ts @@ -3,8 +3,12 @@ import {setProgramInfo} from './init'; /** * Initialize a shader program, so WebGL knows how to draw our data * @param {any} context the program context + * @param {any} shaderProgram reference to the shader program to init + * @param {any} fragmentShader fragment shader object reference + * @param {any} vertexShader vertex shader object reference * @param {string} vsSource the vertex shader source * @param {string} fsSource the fragment shader source + * @return {any} the new shader program */ export function initShaderProgram(context: any, shaderProgram: any, @@ -30,7 +34,7 @@ export function initShaderProgram(context: any, context.gl.getProgramInfoLog(shaderProgram)); shaderProgram = null; } - return [shaderProgram, vertexShader, fragmentShader]; + return shaderProgram; } /** @@ -59,18 +63,26 @@ export function loadShader(gl: any, type: any, source: string) { /** * * @param {any} context the program context + * @param {any} programInfo programInfo reference to update + * @param {any} shaderProgram shaderProgram reference to update + * @param {any} shaders the current shaders reference * @param {string} fsSource new fragment shader source * @param {string} vsSource current vsSource + * @return {Array} the updated programInfo and shaderProgram */ export function changeFragmentShader(context: any, programInfo: any, shaderProgram: any, - fragmentShader: any, - vertexShader: any, + shaders: any, fsSource: string, vsSource: string) { - context.gl.deleteShader(fragmentShader); - [shaderProgram, vertexShader, fragmentShader] = initShaderProgram(context, shaderProgram, fragmentShader, vertexShader, vsSource, fsSource); + context.gl.deleteShader(shaders.frag); + shaderProgram = initShaderProgram(context, + shaderProgram, + shaders.frag, + shaders.vert, + vsSource, + fsSource); programInfo = setProgramInfo(context, shaderProgram); - return [programInfo, shaderProgram, vertexShader, fragmentShader]; + return [programInfo, shaderProgram]; } diff --git a/src/client/uijquery.ts b/src/client/uijquery.ts index b0d120a..c42eb18 100644 --- a/src/client/uijquery.ts +++ b/src/client/uijquery.ts @@ -1,9 +1,7 @@ import $ from 'jquery'; -import _ from 'lodash'; import {loadTexture} from './texture'; import {fetchObj, loadObj, loadObjBuffers} from './objutils'; import {changeFragmentShader} from './shaders'; -import {initBuffers} from './buffers'; import vsSource from './shaders/shader.vert'; import blackandwhite from './shaders/blackandwhite.frag'; @@ -13,289 +11,6 @@ import texture from './shaders/texture.frag'; import sobel from './shaders/sobel.frag'; import fractal from './shaders/fractal.frag'; -/** - * UI block to update scene - * @param {any} context the program context - */ -export function uiUpdateScene(context: any) { - $('#pushtoscene').on('click', () => { - context.scene.push({ - buffers: initBuffers(context.gl, - context.obj.positions, - context.obj.indices, - context.obj.normals, - context.obj.uvs), - texture: context.texture, - params: _.cloneDeep(context.params), - programInfo: _.cloneDeep(context.programInfo), - shaderProgram: _.cloneDeep(context.shaderProgram), - shaders: _.cloneDeep(context.shaders), - }); - let instanceRadioString; - if ($('input[name=instance]:checked', '#instanceoptions').val() == - 'normal') { - instanceRadioString = ` - - - - - `; - } else if ( - ($('input[name=instance]:checked', '#instanceoptions').val() == - 'one')) { - instanceRadioString = ` - - - - - `; - } else { - instanceRadioString = ` - - - - - `; - } - $('.scene-block').append(` -
-
Change shader:
- - - - - - -
-
-
Change instances number:
- -
-
-
` + instanceRadioString + `
-
-
-
Change rotation:
-
X:
- -
Y:
- -
Z:
- -
-
-
Change scale:
-
X:
- -
Y:
- -
Z:
- -
-
-
Translate:
-
X:
- -
Y:
- -
Z:
- -
-
-
Change object:
- - - - - -
-
-
Change texture:
- - - - - - -
`); - $('#' + context.scene.length + 't_wall').on('click', (event) => { - const n = parseInt(event.target.id.split('t')[0]); - if (context.cache.textures.wall == null) { - context.cache.textures.wall = loadTexture(context.gl, - '/static/textures/wall.png'); - } - context.scene[n - 1].texture = context.cache.textures.wall; - }); - $('#' + context.scene.length + 't_ice').on('click', (event) => { - const n = parseInt(event.target.id.split('t')[0]); - if (context.cache.textures.ice == null) { - context.cache.textures.ice = loadTexture(context.gl, - '/static/textures/ice.png'); - } - context.scene[n - 1].texture = context.cache.textures.ice; - }); - $('#' + context.scene.length + 't_fox').on('click', (event) => { - const n = parseInt(event.target.id.split('t')[0]); - if (context.cache.textures.fox == null) { - context.cache.textures.fox = loadTexture(context.gl, - '/static/textures/fox.png'); - } - context.scene[n - 1].texture = context.cache.textures.fox; - }); - $('#' + context.scene.length + 't_racer').on('click', (event) => { - const n = parseInt(event.target.id.split('t')[0]); - if (context.cache.textures.racer == null) { - context.cache.textures.racer = loadTexture(context.gl, - '/static/textures/racer.png'); - } - context.scene[n - 1].texture = context.cache.textures.racer; - }); - $('#' + context.scene.length + 't_racer_wireframe').on('click', - (event) => { - const n = parseInt(event.target.id.split('t')[0]); - if (context.cache.textures.racerWireframe == null) { - context.cache.textures.racerWireframe = loadTexture( - context.gl, - '/static/textures/racer_wireframe.png'); - } - context.scene[n - 1].texture = context.cache.textures.racerWireframe; - }); - $('#' + context.scene.length + 'instanceoptions input').on('change', (event) => { - const n = parseInt(event.target.attributes[2].nodeValue!.split('instance')[0]); - if ($('input[name=' + n + 'instance]:checked', '#' + n + 'instanceoptions').val() == - 'normal') { - context.scene[n - 1].params.instanceNumber = parseFloat($('#' + n + 'instance').val()); - } else if ( - ($('input[name=' + n + 'instance]:checked', '#' + n + 'instanceoptions').val() == - 'one')) { - context.scene[n - 1].params.instanceNumber = 1; - } else { - context.scene[n - 1].params.instanceNumber = 0; - } - }); - $('#' + context.scene.length + 'instance').on('input', (event) => { - const n = parseInt(event.target.id.split('instance')[0]); - if ($('input[name=' + n + 'instance]:checked', '#' + n + 'instanceoptions').val() == - 'normal') { - context.scene[n - 1].params.instanceNumber = parseFloat($('#' + n + 'instance').val()); - } - }); - $('#' + context.scene.length + 'rotx').on('input', (event) => { - const n = parseInt(event.target.id.split('rot')[0]); - console.log(n); - context.scene[n - 1].params.rot.x = parseFloat($('#' + n + 'rotx').val()); - }); - $('#' + context.scene.length + 'roty').on('input', (event) => { - const n = parseInt(event.target.id.split('rot')[0]); - context.scene[n - 1].params.rot.y = parseFloat($('#' + n + 'roty').val()); - }); - $('#' + context.scene.length + 'rotz').on('input', (event) => { - const n = parseInt(event.target.id.split('rot')[0]); - context.scene[n - 1].params.rot.z = parseFloat($('#' + n + 'rotz').val()); - }); - $('#' + context.scene.length + 'posx').on('input', (event) => { - const n = parseInt(event.target.id.split('pos')[0]); - context.scene[n - 1].params.pos.x = parseFloat($('#' + n + 'posx').val()); - }); - $('#' + context.scene.length + 'posy').on('input', (event) => { - const n = parseInt(event.target.id.split('pos')[0]); - context.scene[n - 1].params.pos.y = parseFloat($('#' + n + 'posy').val()); - }); - $('#' + context.scene.length + 'posz').on('input', (event) => { - const n = parseInt(event.target.id.split('pos')[0]); - context.scene[n - 1].params.pos.z = parseFloat($('#' + n + 'posz').val()); - }); - $('#' + context.scene.length + 'scalex').on('input', (event) => { - const n = parseInt(event.target.id.split('scale')[0]); - console.log(n); - console.log(parseFloat($('#' + n + 'scalex').val())); - context.scene[n - 1].params.scale.x = parseFloat($('#' + n + 'scalex').val()); - }); - $('#' + context.scene.length + 'scaley').on('input', (event) => { - const n = parseInt(event.target.id.split('scale')[0]); - context.scene[n - 1].params.scale.y = parseFloat($('#' + n + 'scaley').val()); - }); - $('#' + context.scene.length + 'scalez').on('input', (event) => { - const n = parseInt(event.target.id.split('scale')[0]); - context.scene[n - 1].params.scale.z = parseFloat($('#' + n + 'scalez').val()); - }); - $('#' + context.scene.length + 's_blackandwhite').on('click', function(event) { - const n = parseInt(event.target.id.split('s')[0]); - [context.scene[n - 1].programInfo, context.scene[n - 1].shaderProgram, context.scene[n - 1].shaders.vert, context.scene[n - 1].shaders.frag] = changeFragmentShader(context, context.scene[n - 1].programInfo, context.scene[n - 1].shaderProgram, context.scene[n - 1].shaders.frag, context.scene[n - 1].shaders.vert, blackandwhite, vsSource); - }); - $('#' + context.scene.length + 's_color').on('click', function(event) { - const n = parseInt(event.target.id.split('s')[0]); - [context.scene[n - 1].programInfo, context.scene[n - 1].shaderProgram, context.scene[n - 1].shaders.vert, context.scene[n - 1].shaders.frag] = changeFragmentShader(context, context.scene[n - 1].programInfo, context.scene[n - 1].shaderProgram, context.scene[n - 1].shaders.frag, context.scene[n - 1].shaders.vert, colored, vsSource); - }); - $('#' + context.scene.length + 's_grey').on('click', function(event) { - const n = parseInt(event.target.id.split('s')[0]); - [context.scene[n - 1].programInfo, context.scene[n - 1].shaderProgram, context.scene[n - 1].shaders.vert, context.scene[n - 1].shaders.frag] = changeFragmentShader(context, context.scene[n - 1].programInfo, context.scene[n - 1].shaderProgram, context.scene[n - 1].shaders.frag, context.scene[n - 1].shaders.vert, grey, vsSource); - }); - $('#' + context.scene.length + 's_texture').on('click', function(event) { - const n = parseInt(event.target.id.split('s')[0]); - [context.scene[n - 1].programInfo, context.scene[n - 1].shaderProgram, context.scene[n - 1].shaders.vert, context.scene[n - 1].shaders.frag] = changeFragmentShader(context, context.scene[n - 1].programInfo, context.scene[n - 1].shaderProgram, context.scene[n - 1].shaders.frag, context.scene[n - 1].shaders.vert, texture, vsSource); - }); - $('#' + context.scene.length + 's_sobel').on('click', function(event) { - const n = parseInt(event.target.id.split('s')[0]); - [context.scene[n - 1].programInfo, context.scene[n - 1].shaderProgram, context.scene[n - 1].shaders.vert, context.scene[n - 1].shaders.frag] = changeFragmentShader(context, context.scene[n - 1].programInfo, context.scene[n - 1].shaderProgram, context.scene[n - 1].shaders.frag, context.scene[n - 1].shaders.vert, sobel, vsSource); - }); - $('#' + context.scene.length + 's_fractal').on('click', function(event) { - const n = parseInt(event.target.id.split('s')[0]); - [context.scene[n - 1].programInfo, context.scene[n - 1].shaderProgram, context.scene[n - 1].shaders.vert, context.scene[n - 1].shaders.frag] = changeFragmentShader(context, context.scene[n - 1].programInfo, context.scene[n - 1].shaderProgram, context.scene[n - 1].shaders.frag, context.scene[n - 1].shaders.vert, fractal, vsSource); - }); - $('#' + context.scene.length + 'o_sphere').on('click', async function(event) { - const n = parseInt(event.target.id.split('o')[0]); - if (context.cache.objs.sphere == null) { - const data = await fetchObj('/static/objs/sphere.obj'); - context.cache.objs.sphere = loadObj(data); - } - context.scene[n - 1].buffers = loadObjBuffers(context, context.scene[n - 1].buffers, context.cache.objs.sphere); - context.scene[n - 1].params.len = context.cache.objs.sphere.indices.length; - context.scene[n - 1].params.range = context.cache.objs.sphere.range; - }); - $('#' + context.scene.length + 'o_teapot').on('click', async function(event) { - const n = parseInt(event.target.id.split('o')[0]); - if (context.cache.objs.teapot == null) { - const data = await fetchObj('/static/objs/teapot.obj'); - context.cache.objs.teapot = loadObj(data); - } - context.scene[n - 1].buffers = loadObjBuffers(context, context.scene[n - 1].buffers, context.cache.objs.teapot); - context.scene[n - 1].params.len = context.cache.objs.teapot.indices.length; - context.scene[n - 1].params.range = context.cache.objs.teapot.range; - }); - $('#' + context.scene.length + 'o_fox').on('click', async function(event) { - const n = parseInt(event.target.id.split('o')[0]); - if (context.cache.objs.fox == null) { - const data = await fetchObj('/static/objs/fox.obj'); - context.cache.objs.fox = loadObj(data); - } - context.scene[n - 1].buffers = loadObjBuffers(context, context.scene[n - 1].buffers, context.cache.objs.fox); - context.scene[n - 1].params.len = context.cache.objs.fox.indices.length; - context.scene[n - 1].params.range = context.cache.objs.fox.range; - }); - $('#' + context.scene.length + 'o_mecha').on('click', async function(event) { - const n = parseInt(event.target.id.split('o')[0]); - if (context.cache.objs.mecha == null) { - const data = await fetchObj('/static/objs/mecha.obj'); - context.cache.objs.mecha = loadObj(data); - } - context.scene[n - 1].buffers = loadObjBuffers(context, context.scene[n - 1].buffers, context.cache.objs.mecha); - context.scene[n - 1].params.len = context.cache.objs.mecha.indices.length; - context.scene[n - 1].params.range = context.cache.objs.mecha.range; - }); - $('#' + context.scene.length + 'o_racer').on('click', async function(event) { - const n = parseInt(event.target.id.split('o')[0]); - if (context.cache.objs.racer == null) { - const data = await fetchObj('/static/objs/racer.obj'); - context.cache.objs.racer = loadObj(data); - } - context.scene[n - 1].buffers = loadObjBuffers(context, context.scene[n - 1].buffers, context.cache.objs.racer); - context.scene[n - 1].params.len = context.cache.objs.racer.indices.length; - context.scene[n - 1].params.range = context.cache.objs.racer.range; - }); - }); -} - /** * UI block for updating parameters * @param {any} params the parameters to be tweaked @@ -424,7 +139,9 @@ export function uiUpdateObject(context: any) { const data = await fetchObj('/static/objs/sphere.obj'); context.cache.objs.sphere = loadObj(data); } - context.buffers = loadObjBuffers(context, context.buffers, context.cache.objs.sphere); + context.buffers = loadObjBuffers(context, + context.buffers, + context.cache.objs.sphere); context.params.len = context.cache.objs.sphere.indices.length; context.params.range = context.cache.objs.sphere.range; }); @@ -433,7 +150,9 @@ export function uiUpdateObject(context: any) { const data = await fetchObj('/static/objs/teapot.obj'); context.cache.objs.teapot = loadObj(data); } - context.buffers = loadObjBuffers(context, context.buffers, context.cache.objs.teapot); + context.buffers = loadObjBuffers(context, + context.buffers, + context.cache.objs.teapot); context.params.len = context.cache.objs.teapot.indices.length; context.params.range = context.cache.objs.teapot.range; }); @@ -442,7 +161,9 @@ export function uiUpdateObject(context: any) { const data = await fetchObj('/static/objs/fox.obj'); context.cache.objs.fox = loadObj(data); } - context.buffers = loadObjBuffers(context, context.buffers, context.cache.objs.fox); + context.buffers = loadObjBuffers(context, + context.buffers, + context.cache.objs.fox); context.params.len = context.cache.objs.fox.indices.length; context.params.range = context.cache.objs.fox.range; }); @@ -451,7 +172,9 @@ export function uiUpdateObject(context: any) { const data = await fetchObj('/static/objs/mecha.obj'); context.cache.objs.mecha = loadObj(data); } - context.buffers = loadObjBuffers(context, context.buffers, context.cache.objs.mecha); + context.buffers = loadObjBuffers(context, + context.buffers, + context.cache.objs.mecha); context.params.len = context.cache.objs.mecha.indices.length; context.params.range = context.cache.objs.mecha.range; }); @@ -460,7 +183,9 @@ export function uiUpdateObject(context: any) { const data = await fetchObj('/static/objs/racer.obj'); context.cache.objs.racer = loadObj(data); } - context.buffers = loadObjBuffers(context, context.buffers, context.cache.objs.racer); + context.buffers = loadObjBuffers(context, + context.buffers, + context.cache.objs.racer); context.params.len = context.cache.objs.racer.indices.length; context.params.range = context.cache.objs.racer.range; }); @@ -472,21 +197,57 @@ export function uiUpdateObject(context: any) { */ export function uiUpdateShader(context: any) { $('#s_blackandwhite').on('click', function() { - [context.programInfo, context.shaderProgram, context.shaders.vert, context.shaders.frag] = changeFragmentShader(context, context.programInfo, context.shaderProgram, context.shaders.frag, context.shaders.vert, blackandwhite, vsSource); + [context.programInfo, context.shaderProgram] = + changeFragmentShader(context, + context.programInfo, + context.shaderProgram, + context.shaders, + blackandwhite, + vsSource); }); $('#s_color').on('click', function() { - [context.programInfo, context.shaderProgram, context.shaders.vert, context.shaders.frag] = changeFragmentShader(context, context.programInfo, context.shaderProgram, context.shaders.frag, context.shaders.vert, colored, vsSource); + [context.programInfo, context.shaderProgram] = + changeFragmentShader(context, + context.programInfo, + context.shaderProgram, + context.shaders, + colored, + vsSource); }); $('#s_grey').on('click', function() { - [context.programInfo, context.shaderProgram, context.shaders.vert, context.shaders.frag] = changeFragmentShader(context, context.programInfo, context.shaderProgram, context.shaders.frag, context.shaders.vert, grey, vsSource); + [context.programInfo, context.shaderProgram] = + changeFragmentShader(context, + context.programInfo, + context.shaderProgram, + context.shaders, + grey, + vsSource); }); $('#s_texture').on('click', function() { - [context.programInfo, context.shaderProgram, context.shaders.vert, context.shaders.frag] = changeFragmentShader(context, context.programInfo, context.shaderProgram, context.shaders.frag, context.shaders.vert, texture, vsSource); + [context.programInfo, context.shaderProgram] = + changeFragmentShader(context, + context.programInfo, + context.shaderProgram, + context.shaders, + texture, + vsSource); }); $('#s_sobel').on('click', function() { - [context.programInfo, context.shaderProgram, context.shaders.vert, context.shaders.frag] = changeFragmentShader(context, context.programInfo, context.shaderProgram, context.shaders.frag, context.shaders.vert, sobel, vsSource); + [context.programInfo, context.shaderProgram] = + changeFragmentShader(context, + context.programInfo, + context.shaderProgram, + context.shaders, + sobel, + vsSource); }); $('#s_fractal').on('click', function() { - [context.programInfo, context.shaderProgram, context.shaders.vert, context.shaders.frag] = changeFragmentShader(context, context.programInfo, context.shaderProgram, context.shaders.frag, context.shaders.vert, fractal, vsSource); + [context.programInfo, context.shaderProgram] = + changeFragmentShader(context, + context.programInfo, + context.shaderProgram, + context.shaders, + fractal, + vsSource); }); } diff --git a/src/client/uiscene.ts b/src/client/uiscene.ts new file mode 100644 index 0000000..39d3d15 --- /dev/null +++ b/src/client/uiscene.ts @@ -0,0 +1,299 @@ +import $ from 'jquery'; +import _ from 'lodash'; +import {loadTexture} from './texture'; +import {fetchObj, loadObj, loadObjBuffers} from './objutils'; +import {changeFragmentShader} from './shaders'; +import {initBuffers} from './buffers'; + +import vsSource from './shaders/shader.vert'; +import blackandwhite from './shaders/blackandwhite.frag'; +import colored from './shaders/colored.frag'; +import grey from './shaders/grey.frag'; +import texture from './shaders/texture.frag'; +import sobel from './shaders/sobel.frag'; +import fractal from './shaders/fractal.frag'; + +/** + * UI block to update scene + * @param {any} context the program context + */ +export function uiUpdateScene(context: any) { + $('#pushtoscene').on('click', () => { + context.scene.push({ + buffers: initBuffers(context.gl, + context.obj.positions, + context.obj.indices, + context.obj.normals, + context.obj.uvs), + texture: context.texture, + params: _.cloneDeep(context.params), + programInfo: _.cloneDeep(context.programInfo), + shaderProgram: _.cloneDeep(context.shaderProgram), + shaders: _.cloneDeep(context.shaders), + }); + /* eslint-disable */ + let instanceRadioString; + if ($('input[name=instance]:checked', '#instanceoptions').val() == + 'normal') { + instanceRadioString = ` + + + + + `; + } else if ( + ($('input[name=instance]:checked', '#instanceoptions').val() == + 'one')) { + instanceRadioString = ` + + + + + `; + } else { + instanceRadioString = ` + + + + + `; + } + $('.scene-block').append(` +
+
Change shader:
+ + + + + + +
+
+
Change instances number:
+ +
+
+
` + instanceRadioString + `
+
+
+
Change rotation:
+
X:
+ +
Y:
+ +
Z:
+ +
+
+
Change scale:
+
X:
+ +
Y:
+ +
Z:
+ +
+
+
Translate:
+
X:
+ +
Y:
+ +
Z:
+ +
+
+
Change object:
+ + + + + +
+
+
Change texture:
+ + + + + + +
`); + $('#' + context.scene.length + 't_wall').on('click', (event) => { + const n = parseInt(event.target.id.split('t')[0]); + if (context.cache.textures.wall == null) { + context.cache.textures.wall = loadTexture(context.gl, + '/static/textures/wall.png'); + } + context.scene[n - 1].texture = context.cache.textures.wall; + }); + $('#' + context.scene.length + 't_ice').on('click', (event) => { + const n = parseInt(event.target.id.split('t')[0]); + if (context.cache.textures.ice == null) { + context.cache.textures.ice = loadTexture(context.gl, + '/static/textures/ice.png'); + } + context.scene[n - 1].texture = context.cache.textures.ice; + }); + $('#' + context.scene.length + 't_fox').on('click', (event) => { + const n = parseInt(event.target.id.split('t')[0]); + if (context.cache.textures.fox == null) { + context.cache.textures.fox = loadTexture(context.gl, + '/static/textures/fox.png'); + } + context.scene[n - 1].texture = context.cache.textures.fox; + }); + $('#' + context.scene.length + 't_racer').on('click', (event) => { + const n = parseInt(event.target.id.split('t')[0]); + if (context.cache.textures.racer == null) { + context.cache.textures.racer = loadTexture(context.gl, + '/static/textures/racer.png'); + } + context.scene[n - 1].texture = context.cache.textures.racer; + }); + $('#' + context.scene.length + 't_racer_wireframe').on('click', + (event) => { + const n = parseInt(event.target.id.split('t')[0]); + if (context.cache.textures.racerWireframe == null) { + context.cache.textures.racerWireframe = loadTexture( + context.gl, + '/static/textures/racer_wireframe.png'); + } + context.scene[n - 1].texture = context.cache.textures.racerWireframe; + }); + $('#' + context.scene.length + 'instanceoptions input').on('change', (event) => { + const n = parseInt(event.target.attributes[2].nodeValue!.split('instance')[0]); + if ($('input[name=' + n + 'instance]:checked', '#' + n + 'instanceoptions').val() == + 'normal') { + context.scene[n - 1].params.instanceNumber = parseFloat($('#' + n + 'instance').val()); + } else if ( + ($('input[name=' + n + 'instance]:checked', '#' + n + 'instanceoptions').val() == + 'one')) { + context.scene[n - 1].params.instanceNumber = 1; + } else { + context.scene[n - 1].params.instanceNumber = 0; + } + }); + $('#' + context.scene.length + 'instance').on('input', (event) => { + const n = parseInt(event.target.id.split('instance')[0]); + if ($('input[name=' + n + 'instance]:checked', '#' + n + 'instanceoptions').val() == + 'normal') { + context.scene[n - 1].params.instanceNumber = parseFloat($('#' + n + 'instance').val()); + } + }); + $('#' + context.scene.length + 'rotx').on('input', (event) => { + const n = parseInt(event.target.id.split('rot')[0]); + console.log(n); + context.scene[n - 1].params.rot.x = parseFloat($('#' + n + 'rotx').val()); + }); + $('#' + context.scene.length + 'roty').on('input', (event) => { + const n = parseInt(event.target.id.split('rot')[0]); + context.scene[n - 1].params.rot.y = parseFloat($('#' + n + 'roty').val()); + }); + $('#' + context.scene.length + 'rotz').on('input', (event) => { + const n = parseInt(event.target.id.split('rot')[0]); + context.scene[n - 1].params.rot.z = parseFloat($('#' + n + 'rotz').val()); + }); + $('#' + context.scene.length + 'posx').on('input', (event) => { + const n = parseInt(event.target.id.split('pos')[0]); + context.scene[n - 1].params.pos.x = parseFloat($('#' + n + 'posx').val()); + }); + $('#' + context.scene.length + 'posy').on('input', (event) => { + const n = parseInt(event.target.id.split('pos')[0]); + context.scene[n - 1].params.pos.y = parseFloat($('#' + n + 'posy').val()); + }); + $('#' + context.scene.length + 'posz').on('input', (event) => { + const n = parseInt(event.target.id.split('pos')[0]); + context.scene[n - 1].params.pos.z = parseFloat($('#' + n + 'posz').val()); + }); + $('#' + context.scene.length + 'scalex').on('input', (event) => { + const n = parseInt(event.target.id.split('scale')[0]); + console.log(n); + console.log(parseFloat($('#' + n + 'scalex').val())); + context.scene[n - 1].params.scale.x = parseFloat($('#' + n + 'scalex').val()); + }); + $('#' + context.scene.length + 'scaley').on('input', (event) => { + const n = parseInt(event.target.id.split('scale')[0]); + context.scene[n - 1].params.scale.y = parseFloat($('#' + n + 'scaley').val()); + }); + $('#' + context.scene.length + 'scalez').on('input', (event) => { + const n = parseInt(event.target.id.split('scale')[0]); + context.scene[n - 1].params.scale.z = parseFloat($('#' + n + 'scalez').val()); + }); + $('#' + context.scene.length + 's_blackandwhite').on('click', function(event) { + const n = parseInt(event.target.id.split('s')[0]); + [context.scene[n - 1].programInfo, context.scene[n - 1].shaderProgram] = changeFragmentShader(context, context.scene[n - 1].programInfo, context.scene[n - 1].shaderProgram, context.scene[n - 1].shaders, blackandwhite, vsSource); + }); + $('#' + context.scene.length + 's_color').on('click', function(event) { + const n = parseInt(event.target.id.split('s')[0]); + [context.scene[n - 1].programInfo, context.scene[n - 1].shaderProgram] = changeFragmentShader(context, context.scene[n - 1].programInfo, context.scene[n - 1].shaderProgram, context.scene[n - 1].shaders, colored, vsSource); + }); + $('#' + context.scene.length + 's_grey').on('click', function(event) { + const n = parseInt(event.target.id.split('s')[0]); + [context.scene[n - 1].programInfo, context.scene[n - 1].shaderProgram] = changeFragmentShader(context, context.scene[n - 1].programInfo, context.scene[n - 1].shaderProgram, context.scene[n - 1].shaders, grey, vsSource); + }); + $('#' + context.scene.length + 's_texture').on('click', function(event) { + const n = parseInt(event.target.id.split('s')[0]); + [context.scene[n - 1].programInfo, context.scene[n - 1].shaderProgram] = changeFragmentShader(context, context.scene[n - 1].programInfo, context.scene[n - 1].shaderProgram, context.scene[n - 1].shaders, texture, vsSource); + }); + $('#' + context.scene.length + 's_sobel').on('click', function(event) { + const n = parseInt(event.target.id.split('s')[0]); + [context.scene[n - 1].programInfo, context.scene[n - 1].shaderProgram] = changeFragmentShader(context, context.scene[n - 1].programInfo, context.scene[n - 1].shaderProgram, context.scene[n - 1].shaders, sobel, vsSource); + }); + $('#' + context.scene.length + 's_fractal').on('click', function(event) { + const n = parseInt(event.target.id.split('s')[0]); + [context.scene[n - 1].programInfo, context.scene[n - 1].shaderProgram] = changeFragmentShader(context, context.scene[n - 1].programInfo, context.scene[n - 1].shaderProgram, context.scene[n - 1].shaders, fractal, vsSource); + }); + $('#' + context.scene.length + 'o_sphere').on('click', async function(event) { + const n = parseInt(event.target.id.split('o')[0]); + if (context.cache.objs.sphere == null) { + const data = await fetchObj('/static/objs/sphere.obj'); + context.cache.objs.sphere = loadObj(data); + } + context.scene[n - 1].buffers = loadObjBuffers(context, context.scene[n - 1].buffers, context.cache.objs.sphere); + context.scene[n - 1].params.len = context.cache.objs.sphere.indices.length; + context.scene[n - 1].params.range = context.cache.objs.sphere.range; + }); + $('#' + context.scene.length + 'o_teapot').on('click', async function(event) { + const n = parseInt(event.target.id.split('o')[0]); + if (context.cache.objs.teapot == null) { + const data = await fetchObj('/static/objs/teapot.obj'); + context.cache.objs.teapot = loadObj(data); + } + context.scene[n - 1].buffers = loadObjBuffers(context, context.scene[n - 1].buffers, context.cache.objs.teapot); + context.scene[n - 1].params.len = context.cache.objs.teapot.indices.length; + context.scene[n - 1].params.range = context.cache.objs.teapot.range; + }); + $('#' + context.scene.length + 'o_fox').on('click', async function(event) { + const n = parseInt(event.target.id.split('o')[0]); + if (context.cache.objs.fox == null) { + const data = await fetchObj('/static/objs/fox.obj'); + context.cache.objs.fox = loadObj(data); + } + context.scene[n - 1].buffers = loadObjBuffers(context, context.scene[n - 1].buffers, context.cache.objs.fox); + context.scene[n - 1].params.len = context.cache.objs.fox.indices.length; + context.scene[n - 1].params.range = context.cache.objs.fox.range; + }); + $('#' + context.scene.length + 'o_mecha').on('click', async function(event) { + const n = parseInt(event.target.id.split('o')[0]); + if (context.cache.objs.mecha == null) { + const data = await fetchObj('/static/objs/mecha.obj'); + context.cache.objs.mecha = loadObj(data); + } + context.scene[n - 1].buffers = loadObjBuffers(context, context.scene[n - 1].buffers, context.cache.objs.mecha); + context.scene[n - 1].params.len = context.cache.objs.mecha.indices.length; + context.scene[n - 1].params.range = context.cache.objs.mecha.range; + }); + $('#' + context.scene.length + 'o_racer').on('click', async function(event) { + const n = parseInt(event.target.id.split('o')[0]); + if (context.cache.objs.racer == null) { + const data = await fetchObj('/static/objs/racer.obj'); + context.cache.objs.racer = loadObj(data); + } + context.scene[n - 1].buffers = loadObjBuffers(context, context.scene[n - 1].buffers, context.cache.objs.racer); + context.scene[n - 1].params.len = context.cache.objs.racer.indices.length; + context.scene[n - 1].params.range = context.cache.objs.racer.range; + }); + /* eslint-enable */ + }); +}