refact : move renderer in app

This commit is contained in:
monoid 2021-10-02 20:19:15 +09:00
parent 0630970a84
commit 6ac30925d0
3 changed files with 34 additions and 32 deletions

View File

@ -5,6 +5,7 @@ import ReactDOM from 'react-dom';
import { MenuBar } from "./src/menu";
import { TriangleRenderer } from './src/triangle_renderer';
import {CanvasApp} from "./src/app"
function findCanvas(){
const canvas = document.querySelector("canvas");
@ -43,26 +44,23 @@ function main(){
setupButton();
const canvas = findCanvas();
const gl = getGLContext(canvas);
const renderer = new Renderer2D(gl);
const trenderer = new TriangleRenderer(gl);
renderer.prepare();
trenderer.prepare(gl);
ReactDOM.render(<MenuBar u={renderer.uniforms}
onUniformChange={(u)=>{renderer.settingUniform(u); renderer.draw();
trenderer.draw(gl);
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;
renderer.draw();
trenderer.draw(gl);
});
canvas.width = document.body.clientWidth;
canvas.height = document.body.clientHeight;
renderer.draw();
trenderer.draw(gl);
app.startRun();
app.startDraw();
}
main();

View File

@ -1,33 +1,42 @@
import { Renderer2D } from "./renderer";
import { TriangleRenderer } from "./triangle_renderer";
export class CanvasApp{
readonly gl: WebGL2RenderingContext;
renderer: Renderer2D;
trenderer : TriangleRenderer;
constructor(gl: WebGL2RenderingContext){
this.gl = gl;
this.renderer = new Renderer2D(gl);
this.trenderer = new TriangleRenderer(gl);
}
intialize():boolean{
this.renderer.prepare();
this.trenderer.prepare(this.gl);
return true;
}
run(){
startRun(){
const current = new Date();
this.loop();
const delta = (new Date().getMilliseconds()) - current.getMilliseconds();
const delay = (delta < 16) ? (16 - delta) : 1;
setTimeout((()=>{
this.run();
this.startRun();
}).bind(this),delay);
this.drawScene();
}
loop(){
}
startDraw(){
this.drawScene();
}
drawScene(){
this.gl.viewport(0,0,this.gl.canvas.width,this.gl.canvas.height);
this.gl.clearColor(0,0,0,0);
this.gl.clear(this.gl.COLOR_BUFFER_BIT);
this.renderer.draw();
this.renderer.draw(this.gl);
this.trenderer.draw(this.gl);
requestAnimationFrame(this.drawScene.bind(this));
}
};

View File

@ -56,25 +56,20 @@ export class Renderer2D implements RenderProgram{
this.indexBuffer = G.createIndexBuffer(gl,index);
this.indexBuffer.bind(gl);
this.settingUniform(this.uniforms);
this.setUniform(this.uniforms);
}
useProgram(){
this.program.use(this.gl);
}
settingUniform(u:UniformSet){
const gl = this.gl;
setUniform(u:UniformSet){
this.uniforms = u;
}
draw(gl:WebGL2RenderingContext){
this.useProgram();
const location = this.program.getUniformLocation(gl,"u_color");//u_color 변수 위치를 참조
gl.uniform4f(location, this.uniforms.redcolor, 0.3, 0.8, 1.0); //해당 위치에 0.2, 0.3, 0.8, 1.0 데이터를 전달
}
draw(){
const gl = this.gl;
gl.clearColor(0,0,0,0);
gl.clear(gl.COLOR_BUFFER_BIT);
gl.viewport(0,0,gl.canvas.width,gl.canvas.height);
this.useProgram();
gl.bindVertexArray(this.vao);
this.indexBuffer.bind(gl);
gl.drawElements(gl.TRIANGLES,this.indexBuffer.count,gl.UNSIGNED_SHORT,0);