refact : move renderer in app

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(<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();

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));
     }
 };

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);