From fec20645ce4594e3c0460d8731dc5167ca171562 Mon Sep 17 00:00:00 2001 From: gbrochar Date: Tue, 24 Nov 2020 13:53:30 +0100 Subject: [PATCH] obj selector, a bit of code clearing --- src/client/buffers.ts | 7 +- src/client/main.ts | 215 +++++++++++++++++++++++++----------------- views/index.ejs | 5 + 3 files changed, 140 insertions(+), 87 deletions(-) diff --git a/src/client/buffers.ts b/src/client/buffers.ts index 7ab285a..4f3bed7 100644 --- a/src/client/buffers.ts +++ b/src/client/buffers.ts @@ -85,7 +85,8 @@ export function initBuffers( * @param {any} buffers the buffers to delete */ export function deleteBuffers(gl: any, buffers: any) { - for (const buffer of Object.entries(buffers)) { - gl.deleteBuffer(buffer); - } + gl.deleteBuffer(buffers.color); + gl.deleteBuffer(buffers.position); + gl.deleteBuffer(buffers.normals); + gl.deleteBuffer(buffers.indices); } diff --git a/src/client/main.ts b/src/client/main.ts index 5a9e65d..479361c 100644 --- a/src/client/main.ts +++ b/src/client/main.ts @@ -4,7 +4,7 @@ import mat4 from 'gl-mat4'; import convert from './objparser'; import $ from 'jquery'; -import {initBuffers} from './buffers'; +import {initBuffers, deleteBuffers} from './buffers'; import {initShaderProgram} from './shaders'; import {changeFragmentShader} from './changeshader'; @@ -15,7 +15,7 @@ main(); /** * The program purpose is encapsulated in a main function */ -function main() { +async function main() { const canvas: any = document.querySelector('#glCanvas')!; const gl = canvas.getContext('webgl'); @@ -83,10 +83,10 @@ function main() { reflect(n, vNormal.xyz), normalize(vec3(0., 0., -50.) - vPosition)), 0.), 10.); - vec3 tmp = extremize(mod(vPosition.xyz + vec3(100.), vec3(3.)), 3.); - float texture = (tmp.x + tmp.y + tmp.z) / 9.; + vec3 tmp = extremize(mod(vPosition.xyz + vec3(1000.), vec3(2.)), 2.); + float texture = (tmp.x + tmp.y + tmp.z) / 6.; if (abs(vNormal.x) + abs(vNormal.y) + abs(vNormal.z) > 0.01) { - gl_FragColor = vec4((texture * diffuse * 0.9) + (texture * vec3(0.1)) + (specular * vec3(1.)), 1.0); + gl_FragColor = vec4((texture * diffuse * 0.8) + (texture * vec3(0.2)) + (specular * vec3(1.)), 1.0); } else { gl_FragColor = vec4((texture * vec3(1.)), 1.0); } @@ -123,10 +123,9 @@ function main() { reflect(n, vNormal.xyz), normalize(vec3(0., 0., -50.) - vPosition)), 0.), 10.); - vec3 tmp = extremize(mod(vPosition.xyz + vec3(100.), vec3(3.)), 3.); - vec3 texture = vec3(tmp.x / 3., tmp.y / 3., tmp.z / 3.); + vec3 texture = extremize(mod(vPosition.xyz + vec3(1000.), vec3(2.)), 2.) / vec3(2); if (abs(vNormal.x) + abs(vNormal.y) + abs(vNormal.z) > 0.01) { - gl_FragColor = vec4((texture * diffuse * 0.9) + (texture * vec3(0.1)) + (specular * vec3(1.)), 1.0); + gl_FragColor = vec4((texture * diffuse * 0.8) + (texture * vec3(0.2)) + (specular * vec3(1.)), 1.0); } else { gl_FragColor = vec4((texture * vec3(1.)), 1.0); } @@ -134,88 +133,136 @@ function main() { /* eslint-enable */ - fetch('/static/objs/teapot_normals.obj').then((response) => { - return response.text(); - }).then((data: any) => { - let distance: any = $('#input1').val(); - distance = parseFloat(distance); - const [ - positions, - normals, - uvs, - indices, - ] = convert(data); - console.log(uvs); - let [shaderProgram, fragmentShader]: any = initShaderProgram(gl, - vsSource, - fsSource); + /** + * 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; + } - let programInfo: any = { - program: shaderProgram, - attribLocations: { - vertexPosition: gl.getAttribLocation(shaderProgram, - 'aVertexPosition'), - vertexColor: gl.getAttribLocation(shaderProgram, - 'aVertexColor'), - vertexNormal: gl.getAttribLocation(shaderProgram, - 'aVertexNormal'), - }, - uniformLocations: { - projectionMatrix: gl.getUniformLocation( - shaderProgram, 'uProjectionMatrix'), - viewMatrix: gl.getUniformLocation( - shaderProgram, 'uviewMatrix'), - modelMatrix: gl.getUniformLocation( - shaderProgram, 'umodelMatrix'), - }, - }; + const data = await getObj('/static/objs/teapot_normals.obj'); + let distance: any = $('#input1').val(); + distance = parseFloat(distance); + const [ + positions, + normals, + uvs, + indices, + ] = convert(data); + let length = indices.length; + console.log(uvs); + let [shaderProgram, fragmentShader]: any = initShaderProgram(gl, + vsSource, + fsSource); - const buffers = initBuffers(gl, positions, indices, normals); - let then = 0; - let changed = false; + let programInfo: any = { + program: shaderProgram, + attribLocations: { + vertexPosition: gl.getAttribLocation(shaderProgram, + 'aVertexPosition'), + vertexColor: gl.getAttribLocation(shaderProgram, + 'aVertexColor'), + vertexNormal: gl.getAttribLocation(shaderProgram, + 'aVertexNormal'), + }, + uniformLocations: { + projectionMatrix: gl.getUniformLocation( + shaderProgram, 'uProjectionMatrix'), + viewMatrix: gl.getUniformLocation( + shaderProgram, 'uviewMatrix'), + modelMatrix: gl.getUniformLocation( + shaderProgram, 'umodelMatrix'), + }, + }; - /** - * Draws the scene repeatedly - * @param {number} now the current time - */ - function render(now: any) { - now *= 0.001; - const deltaTime = now - then; - if (now >= 1 && changed == false) { - changed = true; - } - then = now; - drawScene(gl, - programInfo, - buffers, - deltaTime, - indices.length, - distance); - requestAnimationFrame(render); + let buffers = initBuffers(gl, positions, indices, normals); + let then = 0; + let changed = false; + + /** + * Draws the scene repeatedly + * @param {number} now the current time + */ + function render(now: any) { + now *= 0.001; + const deltaTime = now - then; + if (now >= 1 && changed == false) { + changed = true; } - - $(function() { - $('#input1').on('keypress', function(event: any) { - if (event.which === 13) { - event.preventDefault(); - $('#button3').click(); - } - }); - $('#button1').on('click', function() { - [programInfo, fragmentShader] = changeFragmentShader(gl, - shaderProgram, fragmentShader, fsSource, vsSource); - }); - $('#button2').on('click', function() { - [programInfo, fragmentShader] = changeFragmentShader(gl, - shaderProgram, fragmentShader, fsSource2, vsSource); - }); - $('#button3').on('click', function() { - distance = $('#input1').val(); - distance = parseFloat(distance); - }); - }); + then = now; + drawScene(gl, + programInfo, + buffers, + deltaTime, + length, + distance); requestAnimationFrame(render); + } + + $(function() { + $('#input1').on('keypress', function(event: any) { + if (event.which === 13) { + event.preventDefault(); + $('#button3').click(); + } + }); + $('#button1').on('click', function() { + [programInfo, fragmentShader] = changeFragmentShader(gl, + shaderProgram, fragmentShader, fsSource, vsSource); + }); + $('#button2').on('click', function() { + [programInfo, fragmentShader] = changeFragmentShader(gl, + shaderProgram, fragmentShader, fsSource2, vsSource); + }); + $('#button3').on('click', function() { + distance = $('#input1').val(); + distance = parseFloat(distance); + }); + $('#sphere').on('click', async function() { + const data = await getObj('/static/objs/sphere.obj'); + const [ + positions, + normals, + uvs, + indices, + ] = convert(data); + console.log(uvs); + length = indices.length; + deleteBuffers(gl, buffers); + buffers = initBuffers(gl, positions, indices, normals); + }); + $('#teapot_normals').on('click', async function() { + const data = await getObj('/static/objs/teapot_normals.obj'); + const [ + positions, + normals, + uvs, + indices, + ] = convert(data); + console.log(uvs); + length = indices.length; + deleteBuffers(gl, buffers); + buffers = initBuffers(gl, positions, indices, normals); + }); + $('#teapot').on('click', async function() { + const data = await getObj('/static/objs/teapot.obj'); + const [ + positions, + normals, + uvs, + indices, + ] = convert(data); + console.log(uvs); + length = indices.length; + deleteBuffers(gl, buffers); + buffers = initBuffers(gl, positions, indices, normals); + }); }); + requestAnimationFrame(render); } diff --git a/views/index.ejs b/views/index.ejs index e48a1da..990e0f9 100644 --- a/views/index.ejs +++ b/views/index.ejs @@ -23,6 +23,11 @@
Max distance is 150
+
+ + + +