diff --git a/src/client/changeshader.ts b/src/client/init.ts similarity index 56% rename from src/client/changeshader.ts rename to src/client/init.ts index 931cfa4..afa040a 100644 --- a/src/client/changeshader.ts +++ b/src/client/init.ts @@ -1,27 +1,45 @@ -import {initShaderProgram, - unlinkShaderProgram} from './shaders'; +import $ from 'jquery'; /** - * + * Initialize the parameters * @param {any} context the program context - * @param {string} fsSource new fragment shader source - * @param {string} vsSource current vsSource */ -export function changeFragmentShader(context: any, - fsSource: string, - vsSource: string) { - [context.shaderProgram, context.fragmentShader] = - unlinkShaderProgram(context.gl, - context.fragmentShader, - context.shaderProgram); - initShaderProgram(context, vsSource, fsSource); +export function initParams(context: any) { + const distance: any = $('#distance').val(); + const distanceFine: any = $('#distancefine').val(); + + context.params = { + distance: parseFloat(distance) + parseFloat(distanceFine), + circleSize: $('#circlesize').val(), + fov: $('#fov').val(), + length: 0, + avg: { + x: 0, + y: 0, + z: 0, + }, + range: 0, + rot: { + x: $('#rotx').val(), + y: $('#roty').val(), + z: $('#rotz').val(), + }, + rotSpeed: $('#rotspeed').val(), + instanceNumber: $('#instance').val(), + squareRotation: 0, + }; +} + +/** + * Set the program info + * @param {any} context the program context + */ +export function setProgramInfo(context: any) { context.programInfo = { program: context.shaderProgram, attribLocations: { vertexPosition: context.gl.getAttribLocation(context.shaderProgram, 'aVertexPosition'), - vertexColor: context.gl.getAttribLocation(context.shaderProgram, - 'aVertexColor'), vertexNormal: context.gl.getAttribLocation(context.shaderProgram, 'aVertexNormal'), textureCoord: context.gl.getAttribLocation(context.shaderProgram, diff --git a/src/client/main.ts b/src/client/main.ts index 91af0a6..345e738 100644 --- a/src/client/main.ts +++ b/src/client/main.ts @@ -1,5 +1,3 @@ - -import $ from 'jquery'; import vsSource from './shaders/shader.vert'; import fsSource4 from './shaders/texture.frag'; @@ -7,6 +5,7 @@ import {fetchObj, updateObj} from './objutils'; import {initShaderProgram} from './shaders'; import {loadTexture} from './texture'; import {drawScene} from './draw'; +import {initParams, setProgramInfo} from './init'; import {uiUpdateParams, uiUpdateTexture, @@ -40,57 +39,11 @@ async function main() { } const data = await fetchObj('/static/objs/racer.obj'); - const distance: any = $('#distance').val(); - const distanceFine: any = $('#distancefine').val(); - const instanceNumber: any = $('#instance').val(); - context.params = { - distance: parseFloat(distance) + parseFloat(distanceFine), - circleSize: $('#circlesize').val(), - fov: $('#fov').val(), - length: 0, - avg: { - x: 0, - y: 0, - z: 0, - }, - range: 0, - rot: { - x: $('#rotx').val(), - y: $('#roty').val(), - z: $('#rotz').val(), - }, - rotSpeed: $('#rotspeed').val(), - instanceNumber: parseInt(instanceNumber), - squareRotation: 0, - }; - [context.buffers, context.params] = updateObj( - context.gl, data, context.buffers, context.params, true); - + initParams(context); + console.log(context.params); + updateObj(context, data, true); initShaderProgram(context, vsSource, fsSource4); - context.programInfo = { - program: context.shaderProgram, - attribLocations: { - vertexPosition: context.gl.getAttribLocation(context.shaderProgram, - 'aVertexPosition'), - vertexNormal: context.gl.getAttribLocation(context.shaderProgram, - 'aVertexNormal'), - textureCoord: context.gl.getAttribLocation(context.shaderProgram, - 'aTextureCoord'), - }, - uniformLocations: { - 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'), - }, - }; - + setProgramInfo(context); context.texture = loadTexture(context.gl, '/static/textures/racer.png'); let then = 0; let changed = false; diff --git a/src/client/objutils.ts b/src/client/objutils.ts index ceaeb22..f16bde7 100644 --- a/src/client/objutils.ts +++ b/src/client/objutils.ts @@ -15,18 +15,13 @@ export async function fetchObj(url: string) { /** * Pushes a new obj file to the gl buffer - * @param {any} gl the WebGL context + * @param {any} context the program 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} the updated buffers and params */ export function updateObj( - gl: any, + context: any, data: string, - buffers: any, - params: any, firstCall: boolean = false) { const [ positions, @@ -34,7 +29,7 @@ export function updateObj( uvs, indices, ] = convert(data); - params.length = indices.length; + context.params.length = indices.length; let x = 0; let y = 0; let z = 0; @@ -68,13 +63,12 @@ export function updateObj( 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); + context.params.range = Math.max(maxx - minx, maxy - miny, maxz - minz); + context.params.avg.x = x / (positions.length / 3); + context.params.avg.y = y / (positions.length / 3); + context.params.avg.z = z / (positions.length / 3); if (!firstCall) { - deleteBuffers(gl, buffers); + deleteBuffers(context.gl, context.buffers); } - buffers = initBuffers(gl, positions, indices, normals, uvs); - return [buffers, params]; + context.buffers = initBuffers(context.gl, positions, indices, normals, uvs); } diff --git a/src/client/shaders.ts b/src/client/shaders.ts index f02eac1..6fbca1b 100644 --- a/src/client/shaders.ts +++ b/src/client/shaders.ts @@ -1,15 +1,4 @@ -/** - * Initialize a shader program, so WebGL knows how to draw our data - * @param {any} gl the WebGL context - * @param {any} shader the shader to unlink - * @param {any} shaderProgram the existing shaderprogram - * @return {any} the shader program - */ -export function unlinkShaderProgram(gl: any, shader: any, shaderProgram: any) { - // Create the shader program - gl.deleteShader(shader); - return [shaderProgram, shader]; -} +import {setProgramInfo} from './init'; /** * Initialize a shader program, so WebGL knows how to draw our data @@ -62,3 +51,17 @@ export function loadShader(gl: any, type: any, source: string) { } return shader; } + +/** + * + * @param {any} context the program context + * @param {string} fsSource new fragment shader source + * @param {string} vsSource current vsSource + */ +export function changeFragmentShader(context: any, + fsSource: string, + vsSource: string) { + context.gl.deleteShader(context.fragmentShader); + initShaderProgram(context, vsSource, fsSource); + setProgramInfo(context); +} diff --git a/src/client/uijquery.ts b/src/client/uijquery.ts index f4d2c75..b1f5caf 100644 --- a/src/client/uijquery.ts +++ b/src/client/uijquery.ts @@ -1,7 +1,7 @@ import $ from 'jquery'; import {loadTexture} from './texture'; import {fetchObj, updateObj} from './objutils'; -import {changeFragmentShader} from './changeshader'; +import {changeFragmentShader} from './shaders'; import vsSource from './shaders/shader.vert'; import fsSource from './shaders/blackandwhite.frag'; @@ -94,38 +94,23 @@ export function uiUpdateTexture(context: any) { 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); + updateObj(context, data); }); $('#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); + updateObj(context, data); }); $('#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); + updateObj(context, data); }); $('#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); + updateObj(context, data); }); $('#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); + updateObj(context, data); }); }