2020-11-25 20:07:21 +00:00
|
|
|
import vsSource from './shaders/shader.vert';
|
2020-11-27 16:11:28 +00:00
|
|
|
import texture from './shaders/texture.frag';
|
2020-11-24 11:10:57 +00:00
|
|
|
|
2020-11-28 11:44:52 +00:00
|
|
|
import {loadObjBuffers} from './objutils';
|
2020-11-24 11:10:57 +00:00
|
|
|
import {initShaderProgram} from './shaders';
|
2020-11-28 15:37:16 +00:00
|
|
|
// import {loadTexture} from './texture';
|
2020-11-26 14:15:55 +00:00
|
|
|
import {drawScene} from './draw';
|
2020-11-28 11:44:52 +00:00
|
|
|
import {initCache, initParams, setProgramInfo} from './init';
|
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-27 10:53:59 +00:00
|
|
|
import {initUX} from './ux';
|
2020-11-27 12:12:24 +00:00
|
|
|
import {updateCamera} from './camera';
|
2020-11-26 13:07:15 +00:00
|
|
|
|
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-28 11:44:52 +00:00
|
|
|
cache: null,
|
2020-11-26 13:07:15 +00:00
|
|
|
};
|
2020-11-22 14:09:28 +00:00
|
|
|
const canvas: any = document.querySelector('#glCanvas')!;
|
2020-11-27 16:11:28 +00:00
|
|
|
context.gl = canvas.getContext('webgl2');
|
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 14:52:28 +00:00
|
|
|
initParams(context);
|
2020-11-28 11:44:52 +00:00
|
|
|
await initCache(context);
|
2020-11-28 15:37:16 +00:00
|
|
|
loadObjBuffers(context, context.cache.objs.racer);
|
2020-11-27 16:11:28 +00:00
|
|
|
initShaderProgram(context, vsSource, texture);
|
2020-11-26 14:52:28 +00:00
|
|
|
setProgramInfo(context);
|
2020-11-28 15:37:16 +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-27 12:12:24 +00:00
|
|
|
updateCamera(context);
|
2020-11-26 13:07:15 +00:00
|
|
|
drawScene(context.gl,
|
|
|
|
context.programInfo,
|
|
|
|
context.buffers,
|
|
|
|
context.params,
|
2020-11-27 17:55:43 +00:00
|
|
|
context.texture,
|
|
|
|
now);
|
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-27 11:13:53 +00:00
|
|
|
initUX(context, canvas);
|
2020-11-24 12:53:30 +00:00
|
|
|
requestAnimationFrame(render);
|
2020-11-22 14:09:28 +00:00
|
|
|
}
|