webgl/src/client/uijquery.ts

import $ from 'jquery';
import {loadTexture} from './texture';
import {fetchObj, updateObj} from './objutils';
import {changeFragmentShader} from './changeshader';

import vsSource from './shaders/shader.vert';
import fsSource from './shaders/blackandwhite.frag';
import fsSource2 from './shaders/colored.frag';
import fsSource3 from './shaders/grey.frag';
import fsSource4 from './shaders/texture.frag';
import fsSource5 from './shaders/sobel.frag';

/**
 * UI block for updating parameters
 * @param {any} params the parameters to be tweaked
 */
export function uiUpdateParams(params: any) {
	$('#distance').on('input', () => {
		const distance: any = $('#distance').val();
		const distanceFine: any = $('#distancefine').val();
		params.distance = parseFloat(distance) + parseFloat(distanceFine);
	});
	$('#distancefine').on('input', () => {
		const distance: any = $('#distance').val();
		const distanceFine: any = $('#distancefine').val();
		params.distance = parseFloat(distance) + parseFloat(distanceFine);
	});
	$('#circlesize').on('input', () => {
		const circleSize: any = $('#circlesize').val();
		params.circleSize = parseFloat(circleSize);
	});
	$('#instance').on('input', () => {
		const instance: any = $('#instance').val();
		params.instanceNumber = parseInt(instance);
	});
	$('#rotx').on('input', () => {
		const rotx: any = $('#rotx').val();
		params.rot.x = parseFloat(rotx);
	});
	$('#roty').on('input', () => {
		const roty: any = $('#roty').val();
		params.rot.y = parseFloat(roty);
	});
	$('#rotz').on('input', () => {
		const rotz: any = $('#rotz').val();
		params.rot.z = parseFloat(rotz);
	});
	$('#rotspeed').on('input', () => {
		console.log('salut');
		const rotSpeed: any = $('#rotspeed').val();
		params.rotSpeed = parseFloat(rotSpeed);
	});
	$('#fov').on('input', () => {
		const fov: any = $('#fov').val();
		params.fov = parseFloat(fov);
	});
}

/**
 * UI block to update texture
 * @param {any} context the program context
 */
export function uiUpdateTexture(context: any) {
	$('#t_wall').on('click', () => {
		context.texture = loadTexture(context.gl,
			'/static/textures/wall.png');
	});
	$('#t_ice').on('click', () => {
		context.texture = loadTexture(context.gl,
			'/static/textures/ice.png');
	});
	$('#t_noise').on('click', () => {
		context.texture = loadTexture(context.gl,
			'/static/textures/noise.png');
	});
	$('#t_fox').on('click', () => {
		context.texture = loadTexture(context.gl,
			'/static/textures/fox.png');
	});
	$('#t_racer').on('click', () => {
		context.texture = loadTexture(context.gl,
			'/static/textures/racer.png');
	});
	$('#t_racer_wireframe').on('click', () => {
		context.texture = loadTexture(context.gl,
			'/static/textures/racer_wireframe.png');
	});
}

/**
 * UI block to update object
 * @param {any} context the program context
 */
export function uiUpdateObject(context: any) {
	$('#o_sphere').on('click', async function() {
		const data = await fetchObj('/static/objs/sphere.obj');
		[context.buffers, context.params] = updateObj(context.gl,
			data,
			context.buffers,
			context.params);
	});
	$('#o_teapot').on('click', async function() {
		const data = await fetchObj('/static/objs/teapot.obj');
		[context.buffers, context.params] = updateObj(context.gl,
			data,
			context.buffers,
			context.params);
	});
	$('#o_fox').on('click', async function() {
		const data = await fetchObj('/static/objs/fox.obj');
		[context.buffers, context.params] = updateObj(context.gl,
			data,
			context.buffers,
			context.params);
	});
	$('#o_mecha').on('click', async function() {
		const data = await fetchObj('/static/objs/mecha.obj');
		[context.buffers, context.params] = updateObj(context.gl,
			data,
			context.buffers,
			context.params);
	});
	$('#o_racer').on('click', async function() {
		const data = await fetchObj('/static/objs/racer.obj');
		[context.buffers, context.params] = updateObj(context.gl,
			data,
			context.buffers,
			context.params);
	});
}

/**
 * UI block to update shader
 * @param {any} context the program context
 */
export function uiUpdateShader(context: any) {
	$('#s_blackandwhite').on('click', function() {
		changeFragmentShader(context, fsSource, vsSource);
	});
	$('#s_color').on('click', function() {
		changeFragmentShader(context, fsSource2, vsSource);
	});
	$('#s_grey').on('click', function() {
		changeFragmentShader(context, fsSource3, vsSource);
	});
	$('#s_texture').on('click', function() {
		changeFragmentShader(context, fsSource4, vsSource);
	});
	$('#s_sobel').on('click', function() {
		changeFragmentShader(context, fsSource5, vsSource);
	});
}