gbrochar
/
webgl
1
1
Fork 0
Code Issues Pull Requests Releases Wiki Activity

refacto : refacto ui and add env variable context

This commit is contained in:
gbrochar 2020-11-26 14:07:15 +01:00
parent a63d807856
commit c4f3c75154
7 changed files with 324 additions and 255 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
config/webpack.client.dev.js
View File

@ -3,7 +3,7 @@ const { merge } = require('webpack-merge');
const common = require('./webpack.client.common.js'); const common = require('./webpack.client.common.js');
module.exports = merge(common, { module.exports = merge(common, {
devtool: 'eval-cheap-module-source-map', devtool: 'source-map',
mode: 'development', mode: 'development',
watch: true watch: true
}); });

53
src/client/changeshader.ts
View File

@ -3,48 +3,41 @@ import {initShaderProgram,
/** /**
* *
* @param {any} gl the gl context * @param {any} context the program context
* @param {any} shaderProgram the shader program
* @param {any} fragmentShader the current fragment shader
* @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 {any} the program info object
*/ */
export function changeFragmentShader(gl: any, export function changeFragmentShader(context: any,
shaderProgram: any,
fragmentShader: any,
fsSource: string, fsSource: string,
vsSource: string) { vsSource: string) {
[shaderProgram, fragmentShader] = unlinkShaderProgram(gl, [context.shaderProgram, context.fragmentShader] =
fragmentShader, unlinkShaderProgram(context.gl,
shaderProgram); context.fragmentShader,
[shaderProgram, fragmentShader] = initShaderProgram(gl, context.shaderProgram);
vsSource, initShaderProgram(context, vsSource, fsSource);
fsSource)!; context.programInfo = {
const programInfo: any = { program: context.shaderProgram,
program: shaderProgram,
attribLocations: { attribLocations: {
vertexPosition: gl.getAttribLocation(shaderProgram, vertexPosition: context.gl.getAttribLocation(context.shaderProgram,
'aVertexPosition'), 'aVertexPosition'),
vertexColor: gl.getAttribLocation(shaderProgram, vertexColor: context.gl.getAttribLocation(context.shaderProgram,
'aVertexColor'), 'aVertexColor'),
vertexNormal: gl.getAttribLocation(shaderProgram, vertexNormal: context.gl.getAttribLocation(context.shaderProgram,
'aVertexNormal'), 'aVertexNormal'),
textureCoord: gl.getAttribLocation(shaderProgram, textureCoord: context.gl.getAttribLocation(context.shaderProgram,
'aTextureCoord'), 'aTextureCoord'),
}, },
uniformLocations: { uniformLocations: {
projectionMatrix: gl.getUniformLocation( projectionMatrix: context.gl.getUniformLocation(
shaderProgram, 'uProjectionMatrix'), context.shaderProgram, 'uProjectionMatrix'),
viewMatrix: gl.getUniformLocation( viewMatrix: context.gl.getUniformLocation(
shaderProgram, 'uviewMatrix'), context.shaderProgram, 'uviewMatrix'),
modelMatrix: gl.getUniformLocation( modelMatrix: context.gl.getUniformLocation(
shaderProgram, 'umodelMatrix'), context.shaderProgram, 'umodelMatrix'),
normalModelMatrix: gl.getUniformLocation( normalModelMatrix: context.gl.getUniformLocation(
shaderProgram, 'unormalModelMatrix'), context.shaderProgram, 'unormalModelMatrix'),
uSampler: gl.getUniformLocation( uSampler: context.gl.getUniformLocation(
shaderProgram, 'uSampler'), context.shaderProgram, 'uSampler'),
}, },
}; };
return [programInfo, fragmentShader];
} }

262
src/client/main.ts
View File

@ -1,55 +1,54 @@
// @ts-ignore
import {convert} from './objparser';
import $ from 'jquery'; import $ from 'jquery';
import vsSource from './shaders/shader.vert'; 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 fsSource4 from './shaders/texture.frag';
import fsSource5 from './shaders/sobel.frag';
import {initBuffers, deleteBuffers} from './buffers'; import {fetchObj, updateObj} from './objutils';
import {initShaderProgram} from './shaders'; import {initShaderProgram} from './shaders';
import {changeFragmentShader} from './changeshader';
import {loadTexture} from './texture'; import {loadTexture} from './texture';
import {initMatrices} from './matrix'; import {initMatrices} from './matrix';
import {initVertexAttribs} from './vertexattrib'; import {initVertexAttribs} from './vertexattrib';
import {uiUpdateParams,
uiUpdateTexture,
uiUpdateObject,
uiUpdateShader} from './uijquery';
main(); main();
/** /**
* The program purpose is encapsulated in a main function * The program purpose is encapsulated in a main function
*/ */
async function main() { async function main() {
const context: any = {
gl: null,
texture: null,
params: null,
buffers: null,
programInfo: null,
shaderProgram: null,
fragmentShader: null,
vertexShader: null,
};
const canvas: any = document.querySelector('#glCanvas')!; const canvas: any = document.querySelector('#glCanvas')!;
const gl = canvas.getContext('webgl'); context.gl = canvas.getContext('webgl');
if (gl == null) { if (context.gl == null) {
canvas.parentNode.removeChild(canvas); canvas.parentNode.removeChild(canvas);
document.getElementById('root')!.insertAdjacentHTML('beforeend', document.getElementById('root')!.insertAdjacentHTML('beforeend',
`<p>Unable to initialize WebGL. Your browser or machine may not `<p>Unable to initialize WebGL. Your browser or machine may not
support it.</p>`); support it.</p>`);
} }
/** const data = await fetchObj('/static/objs/racer.obj');
* Fetch an obj file
* @param {string} url the url to fetch the object from
* @return {string} the raw data of the obj file
*/
async function getObj(url: string) {
const response = await fetch(url);
const data = await response.text();
return data;
}
const data = await getObj('/static/objs/racer.obj');
const distance: any = $('#distance').val(); const distance: any = $('#distance').val();
const distanceFine: any = $('#distancefine').val(); const distanceFine: any = $('#distancefine').val();
const instanceNumber: any = $('#instance').val(); const instanceNumber: any = $('#instance').val();
const params: any = { context.params = {
distance: parseFloat(distance) + parseFloat(distanceFine), distance: parseFloat(distance) + parseFloat(distanceFine),
circleSize: $('#circlesize').val(), circleSize: $('#circlesize').val(),
fov: $('#fov').val(), fov: $('#fov').val(),
length: 0,
avg: { avg: {
x: 0, x: 0,
y: 0, y: 0,
@ -65,38 +64,35 @@ async function main() {
instanceNumber: parseInt(instanceNumber), instanceNumber: parseInt(instanceNumber),
squareRotation: 0, squareRotation: 0,
}; };
let length: number = 0; [context.buffers, context.params] = updateObj(
let buffers: any; context.gl, data, context.buffers, context.params, true);
updateObj(data, true);
let [shaderProgram, fragmentShader]: any = initShaderProgram(gl, initShaderProgram(context, vsSource, fsSource4);
vsSource, context.programInfo = {
fsSource4); program: context.shaderProgram,
let programInfo: any = {
program: shaderProgram,
attribLocations: { attribLocations: {
vertexPosition: gl.getAttribLocation(shaderProgram, vertexPosition: context.gl.getAttribLocation(context.shaderProgram,
'aVertexPosition'), 'aVertexPosition'),
vertexNormal: gl.getAttribLocation(shaderProgram, vertexNormal: context.gl.getAttribLocation(context.shaderProgram,
'aVertexNormal'), 'aVertexNormal'),
textureCoord: gl.getAttribLocation(shaderProgram, textureCoord: context.gl.getAttribLocation(context.shaderProgram,
'aTextureCoord'), 'aTextureCoord'),
}, },
uniformLocations: { uniformLocations: {
projectionMatrix: gl.getUniformLocation( projectionMatrix: context.gl.getUniformLocation(
shaderProgram, 'uProjectionMatrix'), context.shaderProgram, 'uProjectionMatrix'),
viewMatrix: gl.getUniformLocation( viewMatrix: context.gl.getUniformLocation(
shaderProgram, 'uviewMatrix'), context.shaderProgram, 'uviewMatrix'),
modelMatrix: gl.getUniformLocation( modelMatrix: context.gl.getUniformLocation(
shaderProgram, 'umodelMatrix'), context.shaderProgram, 'umodelMatrix'),
normalModelMatrix: gl.getUniformLocation( normalModelMatrix: context.gl.getUniformLocation(
shaderProgram, 'unormalModelMatrix'), context.shaderProgram, 'unormalModelMatrix'),
uSampler: gl.getUniformLocation( uSampler: context.gl.getUniformLocation(
shaderProgram, 'uSampler'), context.shaderProgram, 'uSampler'),
}, },
}; };
let texture = loadTexture(gl, '/static/textures/racer.png'); context.texture = loadTexture(context.gl, '/static/textures/racer.png');
let then = 0; let then = 0;
let changed = false; let changed = false;
@ -107,174 +103,22 @@ async function main() {
function render(now: any) { function render(now: any) {
now *= 0.001; now *= 0.001;
const deltaTime = now - then; const deltaTime = now - then;
params.squareRotation += deltaTime; context.params.squareRotation += deltaTime * context.params.rotSpeed;
if (now >= 1 && changed == false) { if (now >= 1 && changed == false) {
changed = true; changed = true;
} }
then = now; then = now;
drawScene(gl, drawScene(context.gl,
programInfo, context.programInfo,
buffers, context.buffers,
length, context.params,
params, context.texture);
texture);
requestAnimationFrame(render); requestAnimationFrame(render);
} }
uiUpdateParams(context.params);
/** uiUpdateTexture(context);
* Pushes a new obj file to the gl buffer uiUpdateObject(context);
* @param {string} data the obj file to push uiUpdateShader(context);
* @param {boolean} firstCall is it first object updated ?
*/
function updateObj(data: string, firstCall: boolean = false) {
const [
positions,
normals,
uvs,
indices,
] = convert(data);
length = indices.length;
let x = 0;
let y = 0;
let z = 0;
let maxx = positions[0];
let maxy = positions[1];
let maxz = positions[2];
let minx = positions[0];
let miny = positions[1];
let minz = positions[2];
for (let i = 0; i < positions.length; i++) {
if (i % 3 == 0) {
if (positions[i] > maxx) {
maxx = positions[i];
} else if (positions[i] < minx) {
minx = positions[i];
}
x += positions[i];
} else if (i % 3 == 1) {
if (positions[i] > maxy) {
maxy = positions[i];
} else if (positions[i] < miny) {
miny = positions[i];
}
y += positions[i];
} else {
if (positions[i] > maxz) {
maxz = positions[i];
} else if (positions[i] < minz) {
minz = positions[i];
}
z += positions[i];
}
}
params.range = Math.max(maxx - minx, maxy - miny, maxz - minz);
params.avg.x = x / (positions.length / 3);
params.avg.y = y / (positions.length / 3);
params.avg.z = z / (positions.length / 3);
if (!firstCall) {
deleteBuffers(gl, buffers);
}
buffers = initBuffers(gl, positions, indices, normals, uvs);
}
$(function() {
$('#distance').on('input', function() {
const distance: any = $('#distance').val();
const distanceFine: any = $('#distancefine').val();
params.distance = parseFloat(distance) + parseFloat(distanceFine);
});
$('#distancefine').on('input', function() {
const distance: any = $('#distance').val();
const distanceFine: any = $('#distancefine').val();
params.distance = parseFloat(distance) + parseFloat(distanceFine);
});
$('#circlesize').on('input', function() {
const circleSize: any = $('#circlesize').val();
params.circleSize = parseFloat(circleSize);
});
$('#instance').on('input', function() {
const instance: any = $('#instance').val();
params.instanceNumber = parseInt(instance);
});
$('#rotx').on('input', function() {
const rotx: any = $('#rotx').val();
params.rot.x = parseFloat(rotx);
});
$('#roty').on('input', function() {
const roty: any = $('#roty').val();
params.rot.y = parseFloat(roty);
});
$('#rotz').on('input', function() {
const rotz: any = $('#rotz').val();
params.rot.z = parseFloat(rotz);
});
$('#rotspeed').on('input', function() {
const rotSpeed: any = $('#rotspeed').val();
params.rotSpeed = parseFloat(rotSpeed);
});
$('#fov').on('input', function() {
const fov: any = $('#fov').val();
params.fov = parseFloat(fov);
});
$('#s_blackandwhite').on('click', function() {
[programInfo, fragmentShader] = changeFragmentShader(gl,
shaderProgram, fragmentShader, fsSource, vsSource);
});
$('#s_color').on('click', function() {
[programInfo, fragmentShader] = changeFragmentShader(gl,
shaderProgram, fragmentShader, fsSource2, vsSource);
});
$('#s_grey').on('click', function() {
[programInfo, fragmentShader] = changeFragmentShader(gl,
shaderProgram, fragmentShader, fsSource3, vsSource);
});
$('#s_texture').on('click', function() {
[programInfo, fragmentShader] = changeFragmentShader(gl,
shaderProgram, fragmentShader, fsSource4, vsSource);
});
$('#s_sobel').on('click', function() {
[programInfo, fragmentShader] = changeFragmentShader(gl,
shaderProgram, fragmentShader, fsSource5, vsSource);
});
$('#o_sphere').on('click', async function() {
const data = await getObj('/static/objs/sphere.obj');
updateObj(data);
});
$('#o_teapot').on('click', async function() {
const data = await getObj('/static/objs/teapot.obj');
updateObj(data);
});
$('#o_fox').on('click', async function() {
const data = await getObj('/static/objs/fox.obj');
updateObj(data);
});
$('#o_mecha').on('click', async function() {
const data = await getObj('/static/objs/mecha.obj');
updateObj(data);
});
$('#o_racer').on('click', async function() {
const data = await getObj('/static/objs/racer.obj');
updateObj(data);
});
$('#t_wall').on('click', async function() {
texture = loadTexture(gl, '/static/textures/wall.png');
});
$('#t_ice').on('click', async function() {
texture = loadTexture(gl, '/static/textures/ice.png');
});
$('#t_noise').on('click', async function() {
texture = loadTexture(gl, '/static/textures/noise.png');
});
$('#t_fox').on('click', async function() {
texture = loadTexture(gl, '/static/textures/fox.png');
});
$('#t_racer').on('click', async function() {
texture = loadTexture(gl, '/static/textures/racer.png');
});
$('#t_racer_wireframe').on('click', async function() {
texture = loadTexture(gl, '/static/textures/racer_wireframe.png');
});
});
requestAnimationFrame(render); requestAnimationFrame(render);
} }
@ -283,14 +127,12 @@ async function main() {
* @param {any} gl the WebGL context * @param {any} gl the WebGL context
* @param {any} programInfo WebGL program information * @param {any} programInfo WebGL program information
* @param {any} buffers the buffers to draw * @param {any} buffers the buffers to draw
* @param {number} length the index buffer length
* @param {number} params various parameterss * @param {number} params various parameterss
* @param {any} texture the texture to load * @param {any} texture the texture to load
*/ */
function drawScene(gl: any, function drawScene(gl: any,
programInfo: any, programInfo: any,
buffers: any, buffers: any,
length: number,
params: any, params: any,
texture: any) { texture: any) {
gl.clearColor(0.0, 0.0, 0.0, 1.0); gl.clearColor(0.0, 0.0, 0.0, 1.0);
@ -330,7 +172,7 @@ function drawScene(gl: any,
programInfo.uniformLocations.normalModelMatrix, programInfo.uniformLocations.normalModelMatrix,
false, false,
normalModelMatrix[i]); normalModelMatrix[i]);
const vertexCount = length; const vertexCount = params.length;
const type = gl.UNSIGNED_SHORT; const type = gl.UNSIGNED_SHORT;
const offset = 0; const offset = 0;
gl.drawElements(gl.TRIANGLES, vertexCount, type, offset); gl.drawElements(gl.TRIANGLES, vertexCount, type, offset);

80
src/client/objutils.ts Normal file
View File

@ -0,0 +1,80 @@
// @ts-ignore
import {convert} from './objparser';
import {initBuffers, deleteBuffers} from './buffers';
/**
* Fetch an obj file
* @param {string} url the url to fetch the object from
* @return {string} the raw data of the obj file
*/
export async function fetchObj(url: string) {
const response = await fetch(url);
const data = await response.text();
return data;
}
/**
* Pushes a new obj file to the gl buffer
* @param {any} gl the WebGL context
* @param {string} data the obj file to push
* @param {any} buffers the buffers to be updated
* @param {any} params the params to be updated
* @param {boolean} firstCall is it first object updated ?
* @return {Array<any>} the updated buffers and params
*/
export function updateObj(
gl: any,
data: string,
buffers: any,
params: any,
firstCall: boolean = false) {
const [
positions,
normals,
uvs,
indices,
] = convert(data);
params.length = indices.length;
let x = 0;
let y = 0;
let z = 0;
let maxx = positions[0];
let maxy = positions[1];
let maxz = positions[2];
let minx = positions[0];
let miny = positions[1];
let minz = positions[2];
for (let i = 0; i < positions.length; i++) {
if (i % 3 == 0) {
if (positions[i] > maxx) {
maxx = positions[i];
} else if (positions[i] < minx) {
minx = positions[i];
}
x += positions[i];
} else if (i % 3 == 1) {
if (positions[i] > maxy) {
maxy = positions[i];
} else if (positions[i] < miny) {
miny = positions[i];
}
y += positions[i];
} else {
if (positions[i] > maxz) {
maxz = positions[i];
} else if (positions[i] < minz) {
minz = positions[i];
}
z += positions[i];
}
}
params.range = Math.max(maxx - minx, maxy - miny, maxz - minz);
params.avg.x = x / (positions.length / 3);
params.avg.y = y / (positions.length / 3);
params.avg.z = z / (positions.length / 3);
if (!firstCall) {
deleteBuffers(gl, buffers);
}
buffers = initBuffers(gl, positions, indices, normals, uvs);
return [buffers, params];
}

29
src/client/shaders.ts
View File

@ -13,28 +13,31 @@ export function unlinkShaderProgram(gl: any, shader: any, shaderProgram: any) {
/** /**
* 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} gl the WebGL context * @param {any} context the program context
* @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 shader program
*/ */
export function initShaderProgram(gl: any, vsSource: string, fsSource: string) { export function initShaderProgram(context: any,
const vertexShader = loadShader(gl, gl.VERTEX_SHADER, vsSource); vsSource: string,
const fragmentShader = loadShader(gl, gl.FRAGMENT_SHADER, fsSource); fsSource: string) {
context.vertexShader = loadShader(context.gl,
context.gl.VERTEX_SHADER, vsSource);
context.fragmentShader = loadShader(context.gl,
context.gl.FRAGMENT_SHADER, fsSource);
// Create the shader program // Create the shader program
const shaderProgram = gl.createProgram(); context.shaderProgram = context.gl.createProgram();
gl.attachShader(shaderProgram, vertexShader); context.gl.attachShader(context.shaderProgram, context.vertexShader);
gl.attachShader(shaderProgram, fragmentShader); context.gl.attachShader(context.shaderProgram, context.fragmentShader);
gl.linkProgram(shaderProgram); context.gl.linkProgram(context.shaderProgram);
// If creating the shader program failed, alert // If creating the shader program failed, alert
if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) { if (!context.gl.getProgramParameter(context.shaderProgram,
context.gl.LINK_STATUS)) {
alert('Unable to initialize the shader program: ' + alert('Unable to initialize the shader program: ' +
gl.getProgramInfoLog(shaderProgram)); context.gl.getProgramInfoLog(context.shaderProgram));
return null; context.shaderProgram = null;
} }
return [shaderProgram, fragmentShader];
} }
/** /**

1
src/client/texture.ts
View File

@ -24,7 +24,6 @@ export function loadTexture(gl: any, url: any) {
gl.texImage2D(gl.TEXTURE_2D, level, internalFormat, gl.texImage2D(gl.TEXTURE_2D, level, internalFormat,
width, height, border, srcFormat, srcType, width, height, border, srcFormat, srcType,
pixel); pixel);
const image = new Image(); const image = new Image();
image.onload = function() { image.onload = function() {
gl.bindTexture(gl.TEXTURE_2D, texture); gl.bindTexture(gl.TEXTURE_2D, texture);

152
src/client/uijquery.ts Normal file
View File

@ -0,0 +1,152 @@
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);
});
}