Detach the GL context state to a separate module.

packages/renderer-debugger/source/App.vue

@@ -4,23 +4,25 @@
 
 <script lang="ts" setup>
     import { ref, onMounted } from "vue";
-    import { WebGLCanvas, EventEmitter } from "@ray-lab/renderer-webgl";
+    import { WebGLRenderer } from "@ray-lab/renderer-webgl";
 
     const contentRef = ref<HTMLDivElement>();
     const canvasEle = document.createElement("canvas");
 
     onMounted(() => {
-        const c = new WebGLCanvas({
+        const renderer = new WebGLRenderer({
             canvas: canvasEle,
             container: contentRef.value,
             autoResize: true,
             width: 800,
             height: 600
         });
-        // c.on("resize", () => { console.log(c.canvas.width, c.canvas.height) });
+
         if (contentRef.value) {
             contentRef.value.appendChild(canvasEle);
         }
+
+        console.log(renderer);
     })
 </script>
 

packages/renderer-webgl/source/renderer/WebGLRenderer.ts

@@ -1,7 +1,22 @@
+import { WebGLCanvas } from "state/WebGLCanvas";
+import { WebGLState } from "state/WebGLState";
+import type { WebGLCanvasOption } from "state/WebGLCanvas";
+
+type WebGLRendererOption = WebGLCanvasOption;
 
 class WebGLRenderer {
 
-    public constructor() {}
+    public canvas: WebGLCanvas;
+
+    public state: WebGLState;
+
+    public constructor(option: WebGLRendererOption) {
+
+        this.canvas = new WebGLCanvas(option);
+
+        this.state = new WebGLState();
+        this.state.bindCanvas(this.canvas);
+    }
 }
 
 export { WebGLRenderer };

packages/renderer-webgl/source/state/WebGLCanvas.ts

@@ -1,5 +1,5 @@
 import { ResizeObserver as ResizeObserverPolyfill } from '@juggle/resize-observer';
-import { EventEmitter } from "./EventEmitter";
+import { EventEmitter } from "kernel/EventEmitter";
 
 const ResizeObserver = window.ResizeObserver || ResizeObserverPolyfill;
 
@@ -61,7 +61,7 @@ type WebGLCanvasEventMap = {
 
 class WebGLCanvas extends EventEmitter<WebGLCanvasEventMap> {
 
-    public readonly canvas: HTMLCanvasElement | OffscreenCanvas;
+    public readonly element: HTMLCanvasElement | OffscreenCanvas;
 
     public readonly context: WebGLRenderingContext | WebGL2RenderingContext;
 
@@ -214,7 +214,7 @@ class WebGLCanvas extends EventEmitter<WebGLCanvasEventMap> {
             }
         }
 
-        this.canvas = targetCanvas;
+        this.element = targetCanvas;
         this.context = targetContext;
         this.glVersion = targetGLVersion;
         this.isOffScreen = targetIsOffScreen;
@@ -238,12 +238,12 @@ class WebGLCanvas extends EventEmitter<WebGLCanvasEventMap> {
         let hasResized = false;
 
         if (width !== void 0) {
-            this.canvas.width = width;
+            this.element.width = width;
             hasResized = true;
         }
 
         if (height !== void 0) {
-            this.canvas.height = height;
+            this.element.height = height;
             hasResized = true;
         }
 
@@ -280,8 +280,8 @@ class WebGLCanvas extends EventEmitter<WebGLCanvasEventMap> {
             }
         }
 
-        if (targetcontainer === null && this.canvas instanceof HTMLCanvasElement) {
-            targetcontainer = this.canvas.parentElement;
+        if (targetcontainer === null && this.element instanceof HTMLCanvasElement) {
+            targetcontainer = this.element.parentElement;
         }
 
         if (targetcontainer === null) {
@@ -307,11 +307,11 @@ class WebGLCanvas extends EventEmitter<WebGLCanvasEventMap> {
     
             this.resizeObserver = resizeObserver;
 
-            if (this.canvas instanceof HTMLElement) {
-                this.canvas.style.width = "100%";
-                this.canvas.style.height = "100%";
-                this.canvas.style.boxSizing = "border-box";
-                this.canvas.style.display = "block";
+            if (this.element instanceof HTMLElement) {
+                this.element.style.width = "100%";
+                this.element.style.height = "100%";
+                this.element.style.boxSizing = "border-box";
+                this.element.style.display = "block";
             }
             
             resizeObserver.observe(targetcontainer);

packages/renderer-webgl/source/state/WebGLState.ts

@@ -0,0 +1,37 @@
+import type { WebGLCanvas } from "./WebGLCanvas";
+import { WebGLStateAbstract } from "./WebGLStateAbstract";
+
+class WebGLState extends WebGLStateAbstract {
+
+    private statePool: Array<WebGLStateAbstract> = [];
+
+    private registerState(state: WebGLStateAbstract) {
+        this.statePool.push(state);
+    }
+
+    public override contextWillBind(newcanvas: WebGLCanvas) {
+        for (const state of this.statePool) {
+            state.bindCanvas(newcanvas);
+        }
+    }
+
+    public override contextLost() {
+        for (const state of this.statePool) {
+            state.contextLost();
+        }
+    }
+
+    public override resetState() {
+        for (const state of this.statePool) {
+            state.resetState();
+        }
+    }
+
+    public override destroy() {
+        for (const state of this.statePool) {
+            state.destroy();
+        }
+    }
+}
+
+export { WebGLState };

packages/renderer-webgl/source/state/WebGLStateAbstract.ts

@@ -0,0 +1,56 @@
+import type { WebGLCanvas } from "./WebGLCanvas";
+
+/**
+ * Used for management, caching, encapsulation, WebGL context.
+ */
+abstract class WebGLStateAbstract {
+
+    private _canvas: WebGLCanvas | undefined;
+
+    /**
+     * binded canvas.
+     */
+    public get canvas(): WebGLCanvas {
+        if (this._canvas) {
+            return this._canvas;
+        }
+        else {
+            throw new Error(
+                "[ray-lab WebGLStateBasic] Please get canvas instance after context binding."
+            );
+        }
+    };
+
+    /**
+     * Bind new WebGLCanvas.
+     */
+    public bindCanvas(canvas: WebGLCanvas) {
+        this.contextWillBind(canvas);
+        this._canvas = canvas;
+    };
+
+    /**
+     * Life cycle hook function.
+     * Triggered when the context is rebound.
+     * @param newcanvas - New canvas object to be bound.
+     */
+    public abstract contextWillBind(newcanvas: WebGLCanvas): any;
+
+    /**
+     * Life cycle hook function.
+     * Triggered when the context is lost.
+     */
+    public abstract contextLost(): any;
+
+    /**
+     * Reset all states.
+     */
+    public abstract resetState(): any;
+
+    /**
+     * Triggered when destroyed.
+     */
+    public abstract destroy(): any;
+}
+
+export { WebGLStateAbstract };

packages/renderer-webgl/source/webgl-renderer.ts

@@ -1,3 +1,3 @@
-export * from "kernel/WebGLCanvas";
+export * from "state/WebGLCanvas";
 export * from "kernel/EventEmitter";
 export * from "renderer/WebGLRenderer";

packages/renderer-webgl/tsconfig.json

@@ -13,7 +13,8 @@
         ],
         "paths": {
             "kernel/*": ["./source/kernel/*"],
-            "renderer/*": ["./source/renderer/*"]
+            "renderer/*": ["./source/renderer/*"],
+            "state/*": ["./source/state/*"]
         }
     }
 }