core done need to add css
This commit is contained in:
parent
562b99607d
commit
e18a241289
|
|
@ -99,6 +99,8 @@ export async function initCache(context: any) {
|
||||||
/**
|
/**
|
||||||
* Set the program info
|
* Set the program info
|
||||||
* @param {any} context the program context
|
* @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,
|
export function setProgramInfo(context: any,
|
||||||
shaderProgram: any) {
|
shaderProgram: any) {
|
||||||
|
|
|
||||||
|
|
@ -3,15 +3,14 @@ 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 {drawScene} from './draw';
|
import {drawScene} from './draw';
|
||||||
import {initCache, initParams, setProgramInfo} from './init';
|
import {initCache, initParams, setProgramInfo} from './init';
|
||||||
|
|
||||||
import {uiUpdateParams,
|
import {uiUpdateParams,
|
||||||
uiUpdateTexture,
|
uiUpdateTexture,
|
||||||
uiUpdateObject,
|
uiUpdateObject,
|
||||||
uiUpdateShader,
|
uiUpdateShader} from './uijquery';
|
||||||
uiUpdateScene} from './uijquery';
|
import {uiUpdateScene} from './uiscene';
|
||||||
import {initUX} from './ux';
|
import {initUX} from './ux';
|
||||||
import {updateCamera} from './camera';
|
import {updateCamera} from './camera';
|
||||||
|
|
||||||
|
|
@ -48,10 +47,16 @@ async function main() {
|
||||||
|
|
||||||
initParams(context);
|
initParams(context);
|
||||||
await initCache(context);
|
await initCache(context);
|
||||||
context.buffers = loadObjBuffers(context, context.buffers, context.cache.objs.racer);
|
context.buffers = loadObjBuffers(context,
|
||||||
[context.shaderProgram, context.shaders.vert, context.shaders.frag] = initShaderProgram(context, context.shaderProgram, context.shaders.frag, context.shaders.vert, vsSource, texture);
|
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.programInfo = setProgramInfo(context, context.shaderProgram);
|
||||||
// context.texture = loadTexture(context.gl, '/static/textures/racer.png');
|
|
||||||
let then = 0;
|
let then = 0;
|
||||||
let changed = false;
|
let changed = false;
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -30,7 +30,9 @@ export function pushBuffersToScene(
|
||||||
/**
|
/**
|
||||||
* Pushes a new obj file to the gl buffer
|
* Pushes a new obj file to the gl buffer
|
||||||
* @param {any} context the program context
|
* @param {any} context the program context
|
||||||
|
* @param {any} buffers the buffers to be deleted if needed
|
||||||
* @param {any} obj the obj file to push
|
* @param {any} obj the obj file to push
|
||||||
|
* @return {any} the new obj buffers
|
||||||
*/
|
*/
|
||||||
export function loadObjBuffers(
|
export function loadObjBuffers(
|
||||||
context: any,
|
context: any,
|
||||||
|
|
|
||||||
|
|
@ -3,8 +3,12 @@ import {setProgramInfo} from './init';
|
||||||
/**
|
/**
|
||||||
* Initialize a shader program, so WebGL knows how to draw our data
|
* Initialize a shader program, so WebGL knows how to draw our data
|
||||||
* @param {any} context the program context
|
* @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} vsSource the vertex shader source
|
||||||
* @param {string} fsSource the fragment shader source
|
* @param {string} fsSource the fragment shader source
|
||||||
|
* @return {any} the new shader program
|
||||||
*/
|
*/
|
||||||
export function initShaderProgram(context: any,
|
export function initShaderProgram(context: any,
|
||||||
shaderProgram: any,
|
shaderProgram: any,
|
||||||
|
|
@ -30,7 +34,7 @@ export function initShaderProgram(context: any,
|
||||||
context.gl.getProgramInfoLog(shaderProgram));
|
context.gl.getProgramInfoLog(shaderProgram));
|
||||||
shaderProgram = null;
|
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} 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} fsSource new fragment shader source
|
||||||
* @param {string} vsSource current vsSource
|
* @param {string} vsSource current vsSource
|
||||||
|
* @return {Array<any>} the updated programInfo and shaderProgram
|
||||||
*/
|
*/
|
||||||
export function changeFragmentShader(context: any,
|
export function changeFragmentShader(context: any,
|
||||||
programInfo: any,
|
programInfo: any,
|
||||||
shaderProgram: any,
|
shaderProgram: any,
|
||||||
fragmentShader: any,
|
shaders: any,
|
||||||
vertexShader: any,
|
|
||||||
fsSource: string,
|
fsSource: string,
|
||||||
vsSource: string) {
|
vsSource: string) {
|
||||||
context.gl.deleteShader(fragmentShader);
|
context.gl.deleteShader(shaders.frag);
|
||||||
[shaderProgram, vertexShader, fragmentShader] = initShaderProgram(context, shaderProgram, fragmentShader, vertexShader, vsSource, fsSource);
|
shaderProgram = initShaderProgram(context,
|
||||||
|
shaderProgram,
|
||||||
|
shaders.frag,
|
||||||
|
shaders.vert,
|
||||||
|
vsSource,
|
||||||
|
fsSource);
|
||||||
programInfo = setProgramInfo(context, shaderProgram);
|
programInfo = setProgramInfo(context, shaderProgram);
|
||||||
return [programInfo, shaderProgram, vertexShader, fragmentShader];
|
return [programInfo, shaderProgram];
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,9 +1,7 @@
|
||||||
import $ from 'jquery';
|
import $ from 'jquery';
|
||||||
import _ from 'lodash';
|
|
||||||
import {loadTexture} from './texture';
|
import {loadTexture} from './texture';
|
||||||
import {fetchObj, loadObj, loadObjBuffers} from './objutils';
|
import {fetchObj, loadObj, loadObjBuffers} from './objutils';
|
||||||
import {changeFragmentShader} from './shaders';
|
import {changeFragmentShader} from './shaders';
|
||||||
import {initBuffers} from './buffers';
|
|
||||||
|
|
||||||
import vsSource from './shaders/shader.vert';
|
import vsSource from './shaders/shader.vert';
|
||||||
import blackandwhite from './shaders/blackandwhite.frag';
|
import blackandwhite from './shaders/blackandwhite.frag';
|
||||||
|
|
@ -13,289 +11,6 @@ import texture from './shaders/texture.frag';
|
||||||
import sobel from './shaders/sobel.frag';
|
import sobel from './shaders/sobel.frag';
|
||||||
import fractal from './shaders/fractal.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 = `<input type="radio" id="normal" name="` + context.scene.length + `instance" value="normal" checked>
|
|
||||||
<label for="normal">Use instance slider</label>
|
|
||||||
<input type="radio" id="one" name="` + context.scene.length + `instance" value="one">
|
|
||||||
<label for="one">Lock to one instance</label>
|
|
||||||
<input type="radio" id="zero" name="` + context.scene.length + `instance" value="zero">
|
|
||||||
<label for="zero">Do not show object</label>`;
|
|
||||||
} else if (
|
|
||||||
($('input[name=instance]:checked', '#instanceoptions').val() ==
|
|
||||||
'one')) {
|
|
||||||
instanceRadioString = `<input type="radio" id="normal" name="` + context.scene.length + `instance" value="normal">
|
|
||||||
<label for="normal">Use instance slider</label>
|
|
||||||
<input type="radio" id="one" name="` + context.scene.length + `instance" value="one" checked>
|
|
||||||
<label for="one">Lock to one instance</label>
|
|
||||||
<input type="radio" id="zero" name="` + context.scene.length + `instance" value="zero">
|
|
||||||
<label for="zero">Do not show object</label>`;
|
|
||||||
} else {
|
|
||||||
instanceRadioString = `<input type="radio" id="normal" name="` + context.scene.length + `instance" value="normal">
|
|
||||||
<label for="normal">Use instance slider</label>
|
|
||||||
<input type="radio" id="one" name="` + context.scene.length + `instance" value="one">
|
|
||||||
<label for="one">Lock to one instance</label>
|
|
||||||
<input type="radio" id="zero" name="` + context.scene.length + `instance" value="zero" checked>
|
|
||||||
<label for="zero">Do not show object</label>`;
|
|
||||||
}
|
|
||||||
$('.scene-block').append(`
|
|
||||||
<div class='ui-block'>
|
|
||||||
<div style='display: inline;'>Change shader: </div>
|
|
||||||
<button id='` + context.scene.length + `s_blackandwhite'>Black & White</button>
|
|
||||||
<button id='` + context.scene.length + `s_color'>Colored</button>
|
|
||||||
<button id='` + context.scene.length + `s_grey'>No texture</button>
|
|
||||||
<button id='` + context.scene.length + `s_texture'>Texture</button>
|
|
||||||
<button id='` + context.scene.length + `s_sobel'>Sobel Edge Detection</button>
|
|
||||||
<button id='` + context.scene.length + `s_fractal'>Fractal</button>
|
|
||||||
</div>
|
|
||||||
<div class='ui-block'>
|
|
||||||
<div style='display: inline;'>Change instances number: </div>
|
|
||||||
<input type="range" min="1" max="180" value="` + $('#instance').val() + `" step='1' class="slider" id="` + context.scene.length + `instance">
|
|
||||||
</div>
|
|
||||||
<div class='ui-block'>
|
|
||||||
<form id="` + context.scene.length + `instanceoptions">` + instanceRadioString + `</form>
|
|
||||||
</div>
|
|
||||||
<div class='ui-block'>
|
|
||||||
<div style='display: inline;'>Change rotation: </div>
|
|
||||||
<div style='display: inline;'>X: </div>
|
|
||||||
<input type="range" min="0" max="6.2830" value="` + $('#rotx').val() + `" step='0.0001' class="slider" id="` + context.scene.length + `rotx">
|
|
||||||
<div style='display: inline;'>Y: </div>
|
|
||||||
<input type="range" min="0" max="6.2830" value="` + $('#roty').val() + `" step='0.0001' class="slider" id="` + context.scene.length + `roty">
|
|
||||||
<div style='display: inline;'>Z: </div>
|
|
||||||
<input type="range" min="0" max="6.2830" value="` + $('#rotz').val() + `" step='0.0001' class="slider" id="` + context.scene.length + `rotz">
|
|
||||||
</div>
|
|
||||||
<div class='ui-block'>
|
|
||||||
<div style='display: inline;'>Change scale: </div>
|
|
||||||
<div style='display: inline;'>X: </div>
|
|
||||||
<input type="number" value="` + $('#scalex').val() + `" min="0" step='0.00001' id="` + context.scene.length + `scalex">
|
|
||||||
<div style='display: inline;'>Y: </div>
|
|
||||||
<input type="number" value="` + $('#scaley').val() + `" min="0" step='0.00001' id="` + context.scene.length + `scaley">
|
|
||||||
<div style='display: inline;'>Z: </div>
|
|
||||||
<input type="number" value="` + $('#scalez').val() + `" min="0" step='0.00001' id="` + context.scene.length + `scalez">
|
|
||||||
</div>
|
|
||||||
<div class='ui-block'>
|
|
||||||
<div style='display: inline;'>Translate: </div>
|
|
||||||
<div style='display: inline;'>X: </div>
|
|
||||||
<input type="number" value="` + $('#posx').val() + `" step='0.00001' id="` + context.scene.length + `posx">
|
|
||||||
<div style='display: inline;'>Y: </div>
|
|
||||||
<input type="number" value="` + $('#posy').val() + `" step='0.00001' id="` + context.scene.length + `posy">
|
|
||||||
<div style='display: inline;'>Z: </div>
|
|
||||||
<input type="number" value="` + $('#posz').val() + `" step='0.00001' id="` + context.scene.length + `posz">
|
|
||||||
</div>
|
|
||||||
<div class='ui-block'>
|
|
||||||
<div style='display: inline;'>Change object: </div>
|
|
||||||
<button id='` + context.scene.length + `o_sphere'>Sphere</button>
|
|
||||||
<button id='` + context.scene.length + `o_teapot'>Teapot</button>
|
|
||||||
<button id='` + context.scene.length + `o_fox'>Fox</button>
|
|
||||||
<button id='` + context.scene.length + `o_mecha'>Mecha</button>
|
|
||||||
<button id='` + context.scene.length + `o_racer'>Racer</button>
|
|
||||||
</div>
|
|
||||||
<div class='ui-block'>
|
|
||||||
<div style='display: inline;'>Change texture: </div>
|
|
||||||
<button id='` + context.scene.length + `t_wall'>Wall</button>
|
|
||||||
<button id='` + context.scene.length + `t_ice'>Ice</button>
|
|
||||||
<button id='` + context.scene.length + `t_noise'>Noise</button>
|
|
||||||
<button id='` + context.scene.length + `t_fox'>Fox</button>
|
|
||||||
<button id='` + context.scene.length + `t_racer'>Racer</button>
|
|
||||||
<button id='` + context.scene.length + `t_racer_wireframe'>Racer Wireframe</button>
|
|
||||||
</div>`);
|
|
||||||
$('#' + 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(<string>$('#' + 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(<string>$('#' + 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(<string>$('#' + 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(<string>$('#' + 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(<string>$('#' + 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(<string>$('#' + 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(<string>$('#' + 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(<string>$('#' + 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(<string>$('#' + n + 'scalex').val()));
|
|
||||||
context.scene[n - 1].params.scale.x = parseFloat(<string>$('#' + 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(<string>$('#' + 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(<string>$('#' + 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
|
* UI block for updating parameters
|
||||||
* @param {any} params the parameters to be tweaked
|
* @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');
|
const data = await fetchObj('/static/objs/sphere.obj');
|
||||||
context.cache.objs.sphere = loadObj(data);
|
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.len = context.cache.objs.sphere.indices.length;
|
||||||
context.params.range = context.cache.objs.sphere.range;
|
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');
|
const data = await fetchObj('/static/objs/teapot.obj');
|
||||||
context.cache.objs.teapot = loadObj(data);
|
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.len = context.cache.objs.teapot.indices.length;
|
||||||
context.params.range = context.cache.objs.teapot.range;
|
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');
|
const data = await fetchObj('/static/objs/fox.obj');
|
||||||
context.cache.objs.fox = loadObj(data);
|
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.len = context.cache.objs.fox.indices.length;
|
||||||
context.params.range = context.cache.objs.fox.range;
|
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');
|
const data = await fetchObj('/static/objs/mecha.obj');
|
||||||
context.cache.objs.mecha = loadObj(data);
|
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.len = context.cache.objs.mecha.indices.length;
|
||||||
context.params.range = context.cache.objs.mecha.range;
|
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');
|
const data = await fetchObj('/static/objs/racer.obj');
|
||||||
context.cache.objs.racer = loadObj(data);
|
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.len = context.cache.objs.racer.indices.length;
|
||||||
context.params.range = context.cache.objs.racer.range;
|
context.params.range = context.cache.objs.racer.range;
|
||||||
});
|
});
|
||||||
|
|
@ -472,21 +197,57 @@ export function uiUpdateObject(context: any) {
|
||||||
*/
|
*/
|
||||||
export function uiUpdateShader(context: any) {
|
export function uiUpdateShader(context: any) {
|
||||||
$('#s_blackandwhite').on('click', function() {
|
$('#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() {
|
$('#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() {
|
$('#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() {
|
$('#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() {
|
$('#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() {
|
$('#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);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -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 = `<input type="radio" id="normal" name="` + context.scene.length + `instance" value="normal" checked>
|
||||||
|
<label for="normal">Use instance slider</label>
|
||||||
|
<input type="radio" id="one" name="` + context.scene.length + `instance" value="one">
|
||||||
|
<label for="one">Lock to one instance</label>
|
||||||
|
<input type="radio" id="zero" name="` + context.scene.length + `instance" value="zero">
|
||||||
|
<label for="zero">Do not show object</label>`;
|
||||||
|
} else if (
|
||||||
|
($('input[name=instance]:checked', '#instanceoptions').val() ==
|
||||||
|
'one')) {
|
||||||
|
instanceRadioString = `<input type="radio" id="normal" name="` + context.scene.length + `instance" value="normal">
|
||||||
|
<label for="normal">Use instance slider</label>
|
||||||
|
<input type="radio" id="one" name="` + context.scene.length + `instance" value="one" checked>
|
||||||
|
<label for="one">Lock to one instance</label>
|
||||||
|
<input type="radio" id="zero" name="` + context.scene.length + `instance" value="zero">
|
||||||
|
<label for="zero">Do not show object</label>`;
|
||||||
|
} else {
|
||||||
|
instanceRadioString = `<input type="radio" id="normal" name="` + context.scene.length + `instance" value="normal">
|
||||||
|
<label for="normal">Use instance slider</label>
|
||||||
|
<input type="radio" id="one" name="` + context.scene.length + `instance" value="one">
|
||||||
|
<label for="one">Lock to one instance</label>
|
||||||
|
<input type="radio" id="zero" name="` + context.scene.length + `instance" value="zero" checked>
|
||||||
|
<label for="zero">Do not show object</label>`;
|
||||||
|
}
|
||||||
|
$('.scene-block').append(`
|
||||||
|
<div class='ui-block'>
|
||||||
|
<div style='display: inline;'>Change shader: </div>
|
||||||
|
<button id='` + context.scene.length + `s_blackandwhite'>Black & White</button>
|
||||||
|
<button id='` + context.scene.length + `s_color'>Colored</button>
|
||||||
|
<button id='` + context.scene.length + `s_grey'>No texture</button>
|
||||||
|
<button id='` + context.scene.length + `s_texture'>Texture</button>
|
||||||
|
<button id='` + context.scene.length + `s_sobel'>Sobel Edge Detection</button>
|
||||||
|
<button id='` + context.scene.length + `s_fractal'>Fractal</button>
|
||||||
|
</div>
|
||||||
|
<div class='ui-block'>
|
||||||
|
<div style='display: inline;'>Change instances number: </div>
|
||||||
|
<input type="range" min="1" max="180" value="` + $('#instance').val() + `" step='1' class="slider" id="` + context.scene.length + `instance">
|
||||||
|
</div>
|
||||||
|
<div class='ui-block'>
|
||||||
|
<form id="` + context.scene.length + `instanceoptions">` + instanceRadioString + `</form>
|
||||||
|
</div>
|
||||||
|
<div class='ui-block'>
|
||||||
|
<div style='display: inline;'>Change rotation: </div>
|
||||||
|
<div style='display: inline;'>X: </div>
|
||||||
|
<input type="range" min="0" max="6.2830" value="` + $('#rotx').val() + `" step='0.0001' class="slider" id="` + context.scene.length + `rotx">
|
||||||
|
<div style='display: inline;'>Y: </div>
|
||||||
|
<input type="range" min="0" max="6.2830" value="` + $('#roty').val() + `" step='0.0001' class="slider" id="` + context.scene.length + `roty">
|
||||||
|
<div style='display: inline;'>Z: </div>
|
||||||
|
<input type="range" min="0" max="6.2830" value="` + $('#rotz').val() + `" step='0.0001' class="slider" id="` + context.scene.length + `rotz">
|
||||||
|
</div>
|
||||||
|
<div class='ui-block'>
|
||||||
|
<div style='display: inline;'>Change scale: </div>
|
||||||
|
<div style='display: inline;'>X: </div>
|
||||||
|
<input type="number" value="` + $('#scalex').val() + `" min="0" step='0.00001' id="` + context.scene.length + `scalex">
|
||||||
|
<div style='display: inline;'>Y: </div>
|
||||||
|
<input type="number" value="` + $('#scaley').val() + `" min="0" step='0.00001' id="` + context.scene.length + `scaley">
|
||||||
|
<div style='display: inline;'>Z: </div>
|
||||||
|
<input type="number" value="` + $('#scalez').val() + `" min="0" step='0.00001' id="` + context.scene.length + `scalez">
|
||||||
|
</div>
|
||||||
|
<div class='ui-block'>
|
||||||
|
<div style='display: inline;'>Translate: </div>
|
||||||
|
<div style='display: inline;'>X: </div>
|
||||||
|
<input type="number" value="` + $('#posx').val() + `" step='0.00001' id="` + context.scene.length + `posx">
|
||||||
|
<div style='display: inline;'>Y: </div>
|
||||||
|
<input type="number" value="` + $('#posy').val() + `" step='0.00001' id="` + context.scene.length + `posy">
|
||||||
|
<div style='display: inline;'>Z: </div>
|
||||||
|
<input type="number" value="` + $('#posz').val() + `" step='0.00001' id="` + context.scene.length + `posz">
|
||||||
|
</div>
|
||||||
|
<div class='ui-block'>
|
||||||
|
<div style='display: inline;'>Change object: </div>
|
||||||
|
<button id='` + context.scene.length + `o_sphere'>Sphere</button>
|
||||||
|
<button id='` + context.scene.length + `o_teapot'>Teapot</button>
|
||||||
|
<button id='` + context.scene.length + `o_fox'>Fox</button>
|
||||||
|
<button id='` + context.scene.length + `o_mecha'>Mecha</button>
|
||||||
|
<button id='` + context.scene.length + `o_racer'>Racer</button>
|
||||||
|
</div>
|
||||||
|
<div class='ui-block'>
|
||||||
|
<div style='display: inline;'>Change texture: </div>
|
||||||
|
<button id='` + context.scene.length + `t_wall'>Wall</button>
|
||||||
|
<button id='` + context.scene.length + `t_ice'>Ice</button>
|
||||||
|
<button id='` + context.scene.length + `t_noise'>Noise</button>
|
||||||
|
<button id='` + context.scene.length + `t_fox'>Fox</button>
|
||||||
|
<button id='` + context.scene.length + `t_racer'>Racer</button>
|
||||||
|
<button id='` + context.scene.length + `t_racer_wireframe'>Racer Wireframe</button>
|
||||||
|
</div>`);
|
||||||
|
$('#' + 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(<string>$('#' + 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(<string>$('#' + 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(<string>$('#' + 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(<string>$('#' + 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(<string>$('#' + 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(<string>$('#' + 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(<string>$('#' + 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(<string>$('#' + 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(<string>$('#' + n + 'scalex').val()));
|
||||||
|
context.scene[n - 1].params.scale.x = parseFloat(<string>$('#' + 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(<string>$('#' + 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(<string>$('#' + 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 */
|
||||||
|
});
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue