Detach the GL context state to a separate module.

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;
 

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