computer-graphics-study/index.tsx

66 lines
1.9 KiB
TypeScript

import { Drawer2D } from './src/drawer2D';
import React from 'react';
import ReactDOM from 'react-dom';
import { MenuBar } from "./src/menu";
import { TriangleDrawer } from './src/triangle_drawer';
import {CanvasApp} from "./src/app"
function findCanvas(){
const canvas = document.querySelector("canvas");
if(canvas === null){
console.error("couldn't find canvas");
throw new Error("canvas is null");
}
return canvas;
}
function getGLContext(canvas : HTMLCanvasElement){
const gl = canvas.getContext("webgl2") as any as WebGL2RenderingContext|null;
if(gl === null){
console.error("webgl2 is not supported!");
throw new Error("webgl2 not supported");
}
return gl;
}
function setupButton(){
let toggle = false;
const button = document.querySelector("#drawer-button") as HTMLDivElement;
const drawer = document.querySelector("#drawer") as HTMLDivElement;
button.addEventListener("click",()=>{
toggle = !toggle;
if(toggle){
drawer.style.right = "0px";
}
else{
drawer.style.right = "";
}
});
}
function main(){
setupButton();
const canvas = findCanvas();
const gl = getGLContext(canvas);
const app = new CanvasApp(gl);
if(!app.intialize()){
console.log("app initialize failed!!!");
return;
}
ReactDOM.render(<MenuBar u={app.renderer.uniforms}
onUniformChange={(u)=>{app.renderer.setUniform(u);
}} />
,document.getElementById("drawer"));
window.addEventListener("resize",(e)=>{
e.preventDefault();
canvas.width = document.body.clientWidth;
canvas.height = document.body.clientHeight;
});
canvas.width = document.body.clientWidth;
canvas.height = document.body.clientHeight;
app.startRun();
app.startDraw();
}
main();