obj selector, a bit of code clearing
This commit is contained in:
parent
31ec733bda
commit
fec20645ce
|
|
@ -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);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -23,6 +23,11 @@
|
|||
<button id='button3'>Change camera distance</button>
|
||||
<div style='display: inline'>Max distance is 150</div>
|
||||
</div>
|
||||
<div class='ui-block'>
|
||||
<button id='sphere'>Set obj to sphere</button>
|
||||
<button id='teapot_normals'>Set obj to teapot with normals</button>
|
||||
<button id='teapot'>Set obj to teapot</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script src="js/bundle.js"></script>
|
||||
|
|
|
|||
Loading…
Reference in New Issue