128 lines
3.8 KiB
TypeScript
128 lines
3.8 KiB
TypeScript
import $ from 'jquery';
|
|
import {loadTexture} from './texture';
|
|
import {fetchObj, updateObj} from './objutils';
|
|
import {changeFragmentShader} from './shaders';
|
|
|
|
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', () => {
|
|
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', () => {
|
|
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());
|
|
});
|
|
$('#rotspeed').on('input', () => {
|
|
params.rotSpeed = parseFloat(<string>$('#rotspeed').val());
|
|
});
|
|
$('#fov').on('input', () => {
|
|
params.fov = parseFloat(<string>$('#fov').val());
|
|
});
|
|
}
|
|
|
|
/**
|
|
* 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');
|
|
updateObj(context, data);
|
|
});
|
|
$('#o_teapot').on('click', async function() {
|
|
const data = await fetchObj('/static/objs/teapot.obj');
|
|
updateObj(context, data);
|
|
});
|
|
$('#o_fox').on('click', async function() {
|
|
const data = await fetchObj('/static/objs/fox.obj');
|
|
updateObj(context, data);
|
|
});
|
|
$('#o_mecha').on('click', async function() {
|
|
const data = await fetchObj('/static/objs/mecha.obj');
|
|
updateObj(context, data);
|
|
});
|
|
$('#o_racer').on('click', async function() {
|
|
const data = await fetchObj('/static/objs/racer.obj');
|
|
updateObj(context, data);
|
|
});
|
|
}
|
|
|
|
/**
|
|
* 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);
|
|
});
|
|
}
|