2020-11-26 13:07:15 +00:00
|
|
|
|
2020-11-24 11:10:57 +00:00
|
|
|
import $ from 'jquery';
|
2020-11-25 20:07:21 +00:00
|
|
|
import vsSource from './shaders/shader.vert';
|
|
|
|
import fsSource4 from './shaders/texture.frag';
|
2020-11-24 11:10:57 +00:00
|
|
|
|
2020-11-26 13:07:15 +00:00
|
|
|
import {fetchObj, updateObj} from './objutils';
|
2020-11-24 11:10:57 +00:00
|
|
|
import {initShaderProgram} from './shaders';
|
2020-11-24 18:18:45 +00:00
|
|
|
import {loadTexture} from './texture';
|
2020-11-26 08:11:02 +00:00
|
|
|
import {initMatrices} from './matrix';
|
2020-11-26 08:35:37 +00:00
|
|
|
import {initVertexAttribs} from './vertexattrib';
|
2020-11-22 14:16:08 +00:00
|
|
|
|
2020-11-26 13:07:15 +00:00
|
|
|
import {uiUpdateParams,
|
|
|
|
uiUpdateTexture,
|
|
|
|
uiUpdateObject,
|
|
|
|
uiUpdateShader} from './uijquery';
|
|
|
|
|
2020-11-22 14:09:28 +00:00
|
|
|
main();
|
|
|
|
|
|
|
|
/**
|
|
|
|
* The program purpose is encapsulated in a main function
|
|
|
|
*/
|
2020-11-24 12:53:30 +00:00
|
|
|
async function main() {
|
2020-11-26 13:07:15 +00:00
|
|
|
const context: any = {
|
|
|
|
gl: null,
|
|
|
|
texture: null,
|
|
|
|
params: null,
|
|
|
|
buffers: null,
|
|
|
|
programInfo: null,
|
|
|
|
shaderProgram: null,
|
|
|
|
fragmentShader: null,
|
|
|
|
vertexShader: null,
|
|
|
|
};
|
2020-11-22 14:09:28 +00:00
|
|
|
const canvas: any = document.querySelector('#glCanvas')!;
|
2020-11-26 13:07:15 +00:00
|
|
|
context.gl = canvas.getContext('webgl');
|
2020-11-22 14:09:28 +00:00
|
|
|
|
2020-11-26 13:07:15 +00:00
|
|
|
if (context.gl == null) {
|
2020-11-22 14:09:28 +00:00
|
|
|
canvas.parentNode.removeChild(canvas);
|
|
|
|
document.getElementById('root')!.insertAdjacentHTML('beforeend',
|
|
|
|
`<p>Unable to initialize WebGL. Your browser or machine may not
|
|
|
|
support it.</p>`);
|
|
|
|
}
|
|
|
|
|
2020-11-26 13:07:15 +00:00
|
|
|
const data = await fetchObj('/static/objs/racer.obj');
|
2020-11-25 12:51:39 +00:00
|
|
|
const distance: any = $('#distance').val();
|
|
|
|
const distanceFine: any = $('#distancefine').val();
|
2020-11-25 17:58:49 +00:00
|
|
|
const instanceNumber: any = $('#instance').val();
|
2020-11-26 13:07:15 +00:00
|
|
|
context.params = {
|
2020-11-25 12:51:39 +00:00
|
|
|
distance: parseFloat(distance) + parseFloat(distanceFine),
|
2020-11-24 21:12:32 +00:00
|
|
|
circleSize: $('#circlesize').val(),
|
|
|
|
fov: $('#fov').val(),
|
2020-11-26 13:07:15 +00:00
|
|
|
length: 0,
|
2020-11-24 21:12:32 +00:00
|
|
|
avg: {
|
|
|
|
x: 0,
|
|
|
|
y: 0,
|
|
|
|
z: 0,
|
|
|
|
},
|
2020-11-25 17:58:49 +00:00
|
|
|
range: 0,
|
2020-11-25 11:43:13 +00:00
|
|
|
rot: {
|
|
|
|
x: $('#rotx').val(),
|
|
|
|
y: $('#roty').val(),
|
|
|
|
z: $('#rotz').val(),
|
|
|
|
},
|
2020-11-25 12:45:25 +00:00
|
|
|
rotSpeed: $('#rotspeed').val(),
|
2020-11-25 17:58:49 +00:00
|
|
|
instanceNumber: parseInt(instanceNumber),
|
2020-11-26 08:11:02 +00:00
|
|
|
squareRotation: 0,
|
2020-11-24 21:12:32 +00:00
|
|
|
};
|
2020-11-26 13:07:15 +00:00
|
|
|
[context.buffers, context.params] = updateObj(
|
|
|
|
context.gl, data, context.buffers, context.params, true);
|
2020-11-24 21:12:32 +00:00
|
|
|
|
2020-11-26 13:07:15 +00:00
|
|
|
initShaderProgram(context, vsSource, fsSource4);
|
|
|
|
context.programInfo = {
|
|
|
|
program: context.shaderProgram,
|
2020-11-24 12:53:30 +00:00
|
|
|
attribLocations: {
|
2020-11-26 13:07:15 +00:00
|
|
|
vertexPosition: context.gl.getAttribLocation(context.shaderProgram,
|
2020-11-24 12:53:30 +00:00
|
|
|
'aVertexPosition'),
|
2020-11-26 13:07:15 +00:00
|
|
|
vertexNormal: context.gl.getAttribLocation(context.shaderProgram,
|
2020-11-24 12:53:30 +00:00
|
|
|
'aVertexNormal'),
|
2020-11-26 13:07:15 +00:00
|
|
|
textureCoord: context.gl.getAttribLocation(context.shaderProgram,
|
2020-11-24 18:18:45 +00:00
|
|
|
'aTextureCoord'),
|
2020-11-24 12:53:30 +00:00
|
|
|
},
|
|
|
|
uniformLocations: {
|
2020-11-26 13:07:15 +00:00
|
|
|
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'),
|
2020-11-24 12:53:30 +00:00
|
|
|
},
|
|
|
|
};
|
|
|
|
|
2020-11-26 13:07:15 +00:00
|
|
|
context.texture = loadTexture(context.gl, '/static/textures/racer.png');
|
2020-11-24 12:53:30 +00:00
|
|
|
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;
|
2020-11-26 13:07:15 +00:00
|
|
|
context.params.squareRotation += deltaTime * context.params.rotSpeed;
|
2020-11-24 12:53:30 +00:00
|
|
|
if (now >= 1 && changed == false) {
|
|
|
|
changed = true;
|
2020-11-22 14:09:28 +00:00
|
|
|
}
|
2020-11-24 12:53:30 +00:00
|
|
|
then = now;
|
2020-11-26 13:07:15 +00:00
|
|
|
drawScene(context.gl,
|
|
|
|
context.programInfo,
|
|
|
|
context.buffers,
|
|
|
|
context.params,
|
|
|
|
context.texture);
|
2020-11-24 12:53:30 +00:00
|
|
|
requestAnimationFrame(render);
|
|
|
|
}
|
2020-11-26 13:07:15 +00:00
|
|
|
uiUpdateParams(context.params);
|
|
|
|
uiUpdateTexture(context);
|
|
|
|
uiUpdateObject(context);
|
|
|
|
uiUpdateShader(context);
|
2020-11-24 12:53:30 +00:00
|
|
|
requestAnimationFrame(render);
|
2020-11-22 14:09:28 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Draw a webgl scene
|
|
|
|
* @param {any} gl the WebGL context
|
|
|
|
* @param {any} programInfo WebGL program information
|
|
|
|
* @param {any} buffers the buffers to draw
|
2020-11-24 21:12:32 +00:00
|
|
|
* @param {number} params various parameterss
|
2020-11-24 18:18:45 +00:00
|
|
|
* @param {any} texture the texture to load
|
2020-11-22 14:09:28 +00:00
|
|
|
*/
|
2020-11-23 12:47:44 +00:00
|
|
|
function drawScene(gl: any,
|
|
|
|
programInfo: any,
|
|
|
|
buffers: any,
|
2020-11-24 21:12:32 +00:00
|
|
|
params: any,
|
2020-11-24 18:18:45 +00:00
|
|
|
texture: any) {
|
2020-11-22 14:09:28 +00:00
|
|
|
gl.clearColor(0.0, 0.0, 0.0, 1.0);
|
|
|
|
gl.clearDepth(1.0);
|
|
|
|
gl.enable(gl.DEPTH_TEST);
|
|
|
|
gl.depthFunc(gl.LEQUAL);
|
|
|
|
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
|
|
|
|
|
2020-11-26 08:35:37 +00:00
|
|
|
initVertexAttribs(gl, programInfo, buffers);
|
2020-11-22 19:56:56 +00:00
|
|
|
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, buffers.indices);
|
2020-11-22 14:09:28 +00:00
|
|
|
gl.useProgram(programInfo.program);
|
2020-11-24 18:44:32 +00:00
|
|
|
gl.activeTexture(gl.TEXTURE0);
|
|
|
|
gl.bindTexture(gl.TEXTURE_2D, texture);
|
|
|
|
gl.uniform1i(programInfo.uniformLocations.uSampler, 0);
|
|
|
|
|
2020-11-26 08:11:02 +00:00
|
|
|
const [
|
|
|
|
projectionMatrix,
|
|
|
|
viewMatrix,
|
|
|
|
modelMatrix,
|
|
|
|
normalModelMatrix,
|
|
|
|
] = initMatrices(gl, params);
|
2020-11-25 17:58:49 +00:00
|
|
|
|
|
|
|
for (let i = 0; i < params.instanceNumber; i++) {
|
|
|
|
gl.uniformMatrix4fv(
|
|
|
|
programInfo.uniformLocations.projectionMatrix,
|
|
|
|
false,
|
|
|
|
projectionMatrix);
|
|
|
|
gl.uniformMatrix4fv(
|
|
|
|
programInfo.uniformLocations.viewMatrix,
|
|
|
|
false,
|
|
|
|
viewMatrix);
|
|
|
|
gl.uniformMatrix4fv(
|
|
|
|
programInfo.uniformLocations.modelMatrix,
|
|
|
|
false,
|
|
|
|
modelMatrix[i]);
|
|
|
|
gl.uniformMatrix4fv(
|
|
|
|
programInfo.uniformLocations.normalModelMatrix,
|
|
|
|
false,
|
|
|
|
normalModelMatrix[i]);
|
2020-11-26 13:07:15 +00:00
|
|
|
const vertexCount = params.length;
|
2020-11-22 19:56:56 +00:00
|
|
|
const type = gl.UNSIGNED_SHORT;
|
|
|
|
const offset = 0;
|
|
|
|
gl.drawElements(gl.TRIANGLES, vertexCount, type, offset);
|
|
|
|
}
|
2020-11-22 14:09:28 +00:00
|
|
|
}
|