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),
});
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 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
*/
export function uiUpdateParams(params: any) {
$('#distance').on('input', () => {
params.distance = parseFloat($('#distance').val()) +
parseFloat($('#distancefine').val());
});
$('#distancefine').on('input', () => {
params.distance = parseFloat($('#distance').val()) +
parseFloat($('#distancefine').val());
});
$('#circlesize').on('input', () => {
params.circleSize = parseFloat($('#circlesize').val());
});
$('#instance').on('input', () => {
if ($('input[name=instance]:checked', '#instanceoptions').val() ==
'normal') {
params.instanceNumber = parseFloat($('#instance').val());
}
});
$('#rotx').on('input', () => {
params.rot.x = parseFloat($('#rotx').val());
});
$('#roty').on('input', () => {
params.rot.y = parseFloat($('#roty').val());
});
$('#rotz').on('input', () => {
params.rot.z = parseFloat($('#rotz').val());
});
$('#posx').on('change', () => {
params.pos.x = parseFloat($('#posx').val());
});
$('#posy').on('change', () => {
params.pos.y = parseFloat($('#posy').val());
});
$('#posz').on('change', () => {
params.pos.z = parseFloat($('#posz').val());
});
$('#scalex').on('change', () => {
params.scale.x = parseFloat($('#scalex').val());
});
$('#scaley').on('change', () => {
params.scale.y = parseFloat($('#scaley').val());
});
$('#scalez').on('change', () => {
params.scale.z = parseFloat($('#scalez').val());
});
$('#rotspeed').on('input', () => {
params.rotSpeed = parseFloat($('#rotspeed').val());
});
$('#fov').on('input', () => {
params.fov = parseFloat($('#fov').val());
});
$('#instanceoptions input').on('change', () => {
if ($('input[name=instance]:checked', '#instanceoptions').val() ==
'normal') {
params.instanceNumber = parseFloat($('#instance').val());
} else if (
($('input[name=instance]:checked', '#instanceoptions').val() ==
'one')) {
params.instanceNumber = 1;
} else {
params.instanceNumber = 0;
}
});
}
/**
* UI block to update texture
* @param {any} context the program context
*/
export function uiUpdateTexture(context: any) {
$('#t_wall').on('click', () => {
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', () => {
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', () => {
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', () => {
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', () => {
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', () => {
if (context.cache.textures.racerWireframe == null) {
context.cache.textures.racerWireframe = loadTexture(context.gl,
'/static/textures/racer_wireframe.png');
}
context.texture = context.cache.textures.racerWireframe;
});
}
/**
* UI block to update object
* @param {any} context the program context
*/
export function uiUpdateObject(context: any) {
$('#o_sphere').on('click', async function() {
if (context.cache.objs.sphere == null) {
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.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.objs.teapot == null) {
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.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.objs.fox == null) {
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.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.objs.mecha == null) {
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.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.objs.racer == null) {
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.params.len = context.cache.objs.racer.indices.length;
context.params.range = context.cache.objs.racer.range;
});
}
/**
* UI block to update shader
* @param {any} context the program context
*/
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);
});
$('#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);
});
$('#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);
});
$('#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);
});
$('#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);
});
$('#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);
});
}