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

View File

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

View File

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

View File

@ -1,55 +1,54 @@
// @ts-ignore
import {convert} from './objparser';
import $ from 'jquery';
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';
import {initBuffers, deleteBuffers} from './buffers';
import {fetchObj, updateObj} from './objutils';
import {initShaderProgram} from './shaders';
import {changeFragmentShader} from './changeshader';
import {loadTexture} from './texture';
import {initMatrices} from './matrix';
import {initVertexAttribs} from './vertexattrib';
import {uiUpdateParams,
uiUpdateTexture,
uiUpdateObject,
uiUpdateShader} from './uijquery';
main();
/**
* The program purpose is encapsulated in a main function
*/
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 gl = canvas.getContext('webgl');
context.gl = canvas.getContext('webgl');
if (gl == null) {
if (context.gl == null) {
canvas.parentNode.removeChild(canvas);
document.getElementById('root')!.insertAdjacentHTML('beforeend',
`<p>Unable to initialize WebGL. Your browser or machine may not
support it.</p>`);
}
/**
* 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 data = await fetchObj('/static/objs/racer.obj');
const distance: any = $('#distance').val();
const distanceFine: any = $('#distancefine').val();
const instanceNumber: any = $('#instance').val();
const params: any = {
context.params = {
distance: parseFloat(distance) + parseFloat(distanceFine),
circleSize: $('#circlesize').val(),
fov: $('#fov').val(),
length: 0,
avg: {
x: 0,
y: 0,
@ -65,38 +64,35 @@ async function main() {
instanceNumber: parseInt(instanceNumber),
squareRotation: 0,
};
let length: number = 0;
let buffers: any;
updateObj(data, true);
[context.buffers, context.params] = updateObj(
context.gl, data, context.buffers, context.params, true);
let [shaderProgram, fragmentShader]: any = initShaderProgram(gl,
vsSource,
fsSource4);
let programInfo: any = {
program: shaderProgram,
initShaderProgram(context, vsSource, fsSource4);
context.programInfo = {
program: context.shaderProgram,
attribLocations: {
vertexPosition: gl.getAttribLocation(shaderProgram,
vertexPosition: context.gl.getAttribLocation(context.shaderProgram,
'aVertexPosition'),
vertexNormal: gl.getAttribLocation(shaderProgram,
vertexNormal: context.gl.getAttribLocation(context.shaderProgram,
'aVertexNormal'),
textureCoord: gl.getAttribLocation(shaderProgram,
textureCoord: context.gl.getAttribLocation(context.shaderProgram,
'aTextureCoord'),
},
uniformLocations: {
projectionMatrix: gl.getUniformLocation(
shaderProgram, 'uProjectionMatrix'),
viewMatrix: gl.getUniformLocation(
shaderProgram, 'uviewMatrix'),
modelMatrix: gl.getUniformLocation(
shaderProgram, 'umodelMatrix'),
normalModelMatrix: gl.getUniformLocation(
shaderProgram, 'unormalModelMatrix'),
uSampler: gl.getUniformLocation(
shaderProgram, 'uSampler'),
projectionMatrix: context.gl.getUniformLocation(
context.shaderProgram, 'uProjectionMatrix'),
viewMatrix: context.gl.getUniformLocation(
context.shaderProgram, 'uviewMatrix'),
modelMatrix: context.gl.getUniformLocation(
context.shaderProgram, 'umodelMatrix'),
normalModelMatrix: context.gl.getUniformLocation(
context.shaderProgram, 'unormalModelMatrix'),
uSampler: context.gl.getUniformLocation(
context.shaderProgram, 'uSampler'),
},
};
let texture = loadTexture(gl, '/static/textures/racer.png');
context.texture = loadTexture(context.gl, '/static/textures/racer.png');
let then = 0;
let changed = false;
@ -107,174 +103,22 @@ async function main() {
function render(now: any) {
now *= 0.001;
const deltaTime = now - then;
params.squareRotation += deltaTime;
context.params.squareRotation += deltaTime * context.params.rotSpeed;
if (now >= 1 && changed == false) {
changed = true;
}
then = now;
drawScene(gl,
programInfo,
buffers,
length,
params,
texture);
drawScene(context.gl,
context.programInfo,
context.buffers,
context.params,
context.texture);
requestAnimationFrame(render);
}
/**
* Pushes a new obj file to the gl buffer
* @param {string} data the obj file to push
* @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');
});
});
uiUpdateParams(context.params);
uiUpdateTexture(context);
uiUpdateObject(context);
uiUpdateShader(context);
requestAnimationFrame(render);
}
@ -283,14 +127,12 @@ async function main() {
* @param {any} gl the WebGL context
* @param {any} programInfo WebGL program information
* @param {any} buffers the buffers to draw
* @param {number} length the index buffer length
* @param {number} params various parameterss
* @param {any} texture the texture to load
*/
function drawScene(gl: any,
programInfo: any,
buffers: any,
length: number,
params: any,
texture: any) {
gl.clearColor(0.0, 0.0, 0.0, 1.0);
@ -330,7 +172,7 @@ function drawScene(gl: any,
programInfo.uniformLocations.normalModelMatrix,
false,
normalModelMatrix[i]);
const vertexCount = length;
const vertexCount = params.length;
const type = gl.UNSIGNED_SHORT;
const offset = 0;
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];
}

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
* @param {any} gl the WebGL context
* @param {any} context the program context
* @param {string} vsSource the vertex shader source
* @param {string} fsSource the fragment shader source
* @return {any} the shader program
*/
export function initShaderProgram(gl: any, vsSource: string, fsSource: string) {
const vertexShader = loadShader(gl, gl.VERTEX_SHADER, vsSource);
const fragmentShader = loadShader(gl, gl.FRAGMENT_SHADER, fsSource);
export function initShaderProgram(context: any,
vsSource: string,
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
const shaderProgram = gl.createProgram();
gl.attachShader(shaderProgram, vertexShader);
gl.attachShader(shaderProgram, fragmentShader);
gl.linkProgram(shaderProgram);
context.shaderProgram = context.gl.createProgram();
context.gl.attachShader(context.shaderProgram, context.vertexShader);
context.gl.attachShader(context.shaderProgram, context.fragmentShader);
context.gl.linkProgram(context.shaderProgram);
// 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: ' +
gl.getProgramInfoLog(shaderProgram));
return null;
context.gl.getProgramInfoLog(context.shaderProgram));
context.shaderProgram = null;
}
return [shaderProgram, fragmentShader];
}
/**

View File

@ -24,7 +24,6 @@ export function loadTexture(gl: any, url: any) {
gl.texImage2D(gl.TEXTURE_2D, level, internalFormat,
width, height, border, srcFormat, srcType,
pixel);
const image = new Image();
image.onload = function() {
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);
});
}