webgl/src/client/uijquery.ts

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),
			fragmentShader: _.cloneDeep(context.fragmentShader),
			vertexShader: _.cloneDeep(context.vertexShader),
		});
	});
}

/**
 * UI block for updating parameters
 * @param {any} params the parameters to be tweaked
 */
export function uiUpdateParams(params: any) {
	$('#distance').on('input', () => {
		params.distance = parseFloat(<string>$('#distance').val()) +
			parseFloat(<string>$('#distancefine').val());
	});
	$('#distancefine').on('input', () => {
		params.distance = parseFloat(<string>$('#distance').val()) +
			parseFloat(<string>$('#distancefine').val());
	});
	$('#circlesize').on('input', () => {
		params.circleSize = parseFloat(<string>$('#circlesize').val());
	});
	$('#instance').on('input', () => {
		if ($('input[name=instance]:checked', '#instanceoptions').val() ==
			'normal') {
			params.instanceNumber = parseFloat(<string>$('#instance').val());
		}
	});
	$('#rotx').on('input', () => {
		params.rot.x = parseFloat(<string>$('#rotx').val());
	});
	$('#roty').on('input', () => {
		params.rot.y = parseFloat(<string>$('#roty').val());
	});
	$('#rotz').on('input', () => {
		params.rot.z = parseFloat(<string>$('#rotz').val());
	});
	$('#posx').on('change', () => {
		params.pos.x = parseFloat(<string>$('#posx').val());
	});
	$('#posy').on('change', () => {
		params.pos.y = parseFloat(<string>$('#posy').val());
	});
	$('#posz').on('change', () => {
		params.pos.z = parseFloat(<string>$('#posz').val());
	});
	$('#scalex').on('change', () => {
		params.scale.x = parseFloat(<string>$('#scalex').val());
	});
	$('#scaley').on('change', () => {
		params.scale.y = parseFloat(<string>$('#scaley').val());
	});
	$('#scalez').on('change', () => {
		params.scale.z = parseFloat(<string>$('#scalez').val());
	});
	$('#rotspeed').on('input', () => {
		params.rotSpeed = parseFloat(<string>$('#rotspeed').val());
	});
	$('#fov').on('input', () => {
		params.fov = parseFloat(<string>$('#fov').val());
	});
	$('#instanceoptions input').on('change', () => {
		if ($('input[name=instance]:checked', '#instanceoptions').val() ==
			'normal') {
			params.instanceNumber = parseFloat(<string>$('#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);
		}
		loadObjBuffers(context, context.cache.objs.sphere);
		context.params.len = context.cache.objs.sphere.indices.length;
		context.params.range = context.cache.objs.sphere.range;
	});
	$('#o_teapot').on('click', async function() {
		if (context.cache.objs.teapot == null) {
			const data = await fetchObj('/static/objs/teapot.obj');
			context.cache.objs.teapot = loadObj(data);
		}
		loadObjBuffers(context, context.cache.objs.teapot);
		context.params.len = context.cache.objs.teapot.indices.length;
		context.params.range = context.cache.objs.teapot.range;
	});
	$('#o_fox').on('click', async function() {
		if (context.cache.objs.fox == null) {
			const data = await fetchObj('/static/objs/fox.obj');
			context.cache.objs.fox = loadObj(data);
		}
		loadObjBuffers(context, context.cache.objs.fox);
		context.params.len = context.cache.objs.fox.indices.length;
		context.params.range = context.cache.objs.fox.range;
	});
	$('#o_mecha').on('click', async function() {
		if (context.cache.objs.mecha == null) {
			const data = await fetchObj('/static/objs/mecha.obj');
			context.cache.objs.mecha = loadObj(data);
		}
		loadObjBuffers(context, context.cache.objs.mecha);
		context.params.len = context.cache.objs.mecha.indices.length;
		context.params.range = context.cache.objs.mecha.range;
	});
	$('#o_racer').on('click', async function() {
		if (context.cache.objs.racer == null) {
			const data = await fetchObj('/static/objs/racer.obj');
			context.cache.objs.racer = loadObj(data);
		}
		loadObjBuffers(context, 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() {
		changeFragmentShader(context, blackandwhite, vsSource);
	});
	$('#s_color').on('click', function() {
		changeFragmentShader(context, colored, vsSource);
	});
	$('#s_grey').on('click', function() {
		changeFragmentShader(context, grey, vsSource);
	});
	$('#s_texture').on('click', function() {
		changeFragmentShader(context, texture, vsSource);
	});
	$('#s_sobel').on('click', function() {
		changeFragmentShader(context, sobel, vsSource);
	});
	$('#s_fractal').on('click', function() {
		changeFragmentShader(context, fractal, vsSource);
	});
}