From 6ac30925d0bc18f7d3cb8a49ea7479ddedd1f0b2 Mon Sep 17 00:00:00 2001 From: monoid Date: Sat, 2 Oct 2021 20:19:15 +0900 Subject: [PATCH] refact : move renderer in app --- index.tsx | 32 +++++++++++++++----------------- src/app.ts | 19 ++++++++++++++----- src/renderer.ts | 15 +++++---------- 3 files changed, 34 insertions(+), 32 deletions(-) diff --git a/index.tsx b/index.tsx index 6fef68c..9916434 100644 --- a/index.tsx +++ b/index.tsx @@ -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({renderer.settingUniform(u); renderer.draw(); - trenderer.draw(gl); + const app = new CanvasApp(gl); + if(!app.intialize()){ + console.log("app initialize failed!!!"); + return; + } + ReactDOM.render({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); - }); + 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; - renderer.draw(); - trenderer.draw(gl); + app.startRun(); + app.startDraw(); } main(); \ No newline at end of file diff --git a/src/app.ts b/src/app.ts index 3b58496..d951f2c 100644 --- a/src/app.ts +++ b/src/app.ts @@ -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)); } }; \ No newline at end of file diff --git a/src/renderer.ts b/src/renderer.ts index 309c15b..273579d 100644 --- a/src/renderer.ts +++ b/src/renderer.ts @@ -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);