feat(WebGL): Add WebGL renderer (#935)

src/core/InternalMeshAttributeBuffer.js

@@ -374,6 +374,13 @@ export class InternalMeshAttributeBuffer {
 		this.#onBufferChangedCbs.add(cb);
 	}
 
+	/**
+	 * @param {() => void} cb
+	 */
+	removeOnBufferChanged(cb) {
+		this.#onBufferChangedCbs.delete(cb);
+	}
+
 	#fireBufferChanged() {
 		for (const cb of this.#onBufferChangedCbs) {
 			cb();

src/core/Mesh.js

@@ -508,6 +508,14 @@ export class Mesh {
 		this.#onIndexBufferChangeCbs.add(cb);
 	}
 
+	/**
+	 * Unregisters an {@linkcode onIndexBufferChange} callback.
+	 * @param {OnIndexBufferChangeCallback} cb
+	 */
+	removeOnIndexBufferChange(cb) {
+		this.#onIndexBufferChangeCbs.delete(cb);
+	}
+
 	/**
 	 * Call this after making a change to the underlying index buffer.
 	 * This notifies users of the mesh such as renderers that the mesh has changed

src/core/MeshAttributeBuffer.js

@@ -30,6 +30,13 @@ export class MeshAttributeBuffer {
 		this.#internalAttributeBuffer.onBufferChanged(cb);
 	}
 
+	/**
+	 * @param {() => void} cb
+	 */
+	removeOnBufferChanged(cb) {
+		this.#internalAttributeBuffer.removeOnBufferChanged(cb);
+	}
+
 	/**
 	 * An attribute buffer is 'unused' when it's attribute type is not configured in the
 	 * `VertexState` of a mesh. The `VertexState` describes how attribute data is stored in the

src/rendering/CustomMaterialData.js

@@ -40,6 +40,22 @@ export class CustomMaterialData {
 	 */
 
 	/**
+	 * You can register different callbacks for each renderer you want to support.
+	 *
+	 * ## Usage
+	 * ```js
+	 * const webGpuRenderer = new WebGpuRenderer(engineAssetsManager);
+	 * const webGlRenderer = new WebGlRenderer();
+	 * const customData = new CustomMaterialData();
+	 * customData.registerCallback(webGpuRenderer, (group) => {
+	 * 	// ...
+	 * });
+	 * customData.registerCallback(webGlRenderer, (gl, location) => {
+	 * 	// ...
+	 * });
+	 * ```
+	 * Consult the documentation of `_customMaterialDataSignature` on the renderer that you use for
+	 * more info on what your callback should look like.
 	 * @template {ObjectWithSignature} T
 	 * @param {T} renderer
 	 * @param {T["_customMaterialDataSignature"]} callback

src/rendering/mod.js

@@ -10,6 +10,5 @@ export { ShaderSource } from "./ShaderSource.js";
 export { VertexState } from "./VertexState.js";
 export { VertexStateAttribute } from "./VertexStateAttribute.js";
 export { VertexStateBuffer } from "./VertexStateBuffer.js";
-export { WebGlShader } from "./WebGlShader.js";
 export { CustomMaterialData } from "./CustomMaterialData.js";
 export * from "./renderers/mod.js";

src/rendering/renderers/mod.js

@@ -1,2 +1,3 @@
 export { Renderer } from "./Renderer.js";
 export * from "./webGpu/mod.js";
+export * from "./webGl/mod.js";

src/rendering/renderers/webGl/CachedMaterialData.js

@@ -0,0 +1,26 @@
+import { WebGlMaterialMapType } from "./WebGlMaterialMapType.js";
+
+export class CachedMaterialData {
+	#material;
+	/** @type {import("./WebGlMaterialConfig.js").WebGlMaterialConfig?} */
+	#materialConfig = null;
+
+	/**
+	 * @param {import("../../Material.js").Material} material
+	 */
+	constructor(material) {
+		this.#material = material;
+	}
+
+	getMaterialConfig() {
+		if (this.#materialConfig) return this.#materialConfig;
+
+		if (!this.#material.materialMap) return null;
+		const webGlMap = this.#material.materialMap.getMapTypeInstance(WebGlMaterialMapType);
+		if (!webGlMap) return null;
+		const config = webGlMap.materialConfig;
+
+		this.#materialConfig = config;
+		return config;
+	}
+}