bg2e-js 2.3.11 → 2.3.13

package/src/render/webgl/MaterialRenderer.ts

@@ -1,113 +1,113 @@
-import Texture, { TextureChannel, TextureTargetName } from "../../base/Texture";
-import Material from "../../base/Material";
-import MaterialRenderer from "../MaterialRenderer";
-import WebGLTextureRenderer from "./TextureRenderer";
-import TextureMerger from "../TextureMergerRenderer";
-import ShaderProgram from "./ShaderProgram";
-import Renderer from "../Renderer";
-import { whiteTexture, createWhiteTexture, blackTexture, createBlackTexture } from "../../tools/TextureResourceDatabase";
-
-export default class WebGLMaterialRenderer extends MaterialRenderer {
-    protected _whiteTexture: WebGLTextureRenderer;
-    protected _blackTexture: WebGLTextureRenderer;
-    protected _textureMerger: TextureMerger;
-
-    static async InitResources(renderer: Renderer) {
-        await createWhiteTexture(renderer);
-        await createBlackTexture(renderer);
-    }
-
-    constructor(renderer: Renderer, material: Material) {
-        super(renderer, material);
-        if (material.renderer) {
-            throw new Error("Duplicate material renderer set to material. Please, use the Renderer factory to get material renderer instance.");
-        }
-        // Link this material renderer to the material. This property is internal but should be accessed from the renderer
-        // The use of 'as any' is to provide access to the internal property like a friend class in C++
-        (material as any)._renderer = this;
-
-        this._whiteTexture = renderer.factory.texture(whiteTexture(renderer)) as WebGLTextureRenderer;
-        this._blackTexture = renderer.factory.texture(blackTexture(renderer)) as WebGLTextureRenderer;
-        this._textureMerger = renderer.factory.textureMerger();
-    }
-
-    mergeTextures() {
-        if (this.material.dirty) {
-            const getTexture = (att: keyof Material, fallbackTexture = this._whiteTexture) => {
-                if (this.material[att] instanceof Texture) {
-                    return this.material[att];
-                }
-                else {
-                    return fallbackTexture.texture;
-                }
-            }
-
-            this._textureMerger.setTexture(getTexture('metalnessTexture'), TextureChannel.R, TextureChannel.R + this.material.metalnessChannel);
-            this._textureMerger.setTexture(getTexture('roughnessTexture'), TextureChannel.G, TextureChannel.R + this.material.roughnessChannel);
-            this._textureMerger.setTexture(getTexture('lightEmission', this._blackTexture), TextureChannel.B, TextureChannel.R + this.material.lightEmissionChannel);
-            this._textureMerger.setTexture(getTexture('ambientOcclussion'), TextureChannel.A, TextureChannel.R + this.material.ambientOcclussionChannel);
-            this._textureMerger.update();
-            this.material.dirty = false;
-        }
-    }
-
-    get metalnessRoughnessHeightAOTexture() {
-        return this._textureMerger.mergedTexture;
-    }
-
-    destroy() {
-        console.log("Destroy material renderer");
-        if (this.material) {
-            // The use of 'as any' is to provide access to the internal property like a friend class in C++
-            (this.material as any)._renderer = null;
-        }
-    }
-
-    // Bind the metalness, roughness, height and ambient occlussion combined texture
-    bindMetalnessRoughnessHeightAOTexture(shaderProgram: ShaderProgram, uniformName: string, textureUnit: number): boolean {
-        const texRenderer = this.renderer.factory.texture(this.metalnessRoughnessHeightAOTexture) as WebGLTextureRenderer;
-        shaderProgram.bindTexture(uniformName, texRenderer, textureUnit);
-        return true;
-    }
-
-    // Binds the property to the uniformName  uniform of the shader program, if the
-    // material property ies a texture. If not, it binds the fallbackTexture. If the fallbackTexture
-    // value is null, it binds a 2x2 px white texture
-    bindTexture(shaderProgram: ShaderProgram, property: keyof Material, uniformName: string, textureUnit: number, fallbackTexture: Texture | null = null) {
-        if (this.material[property] instanceof Texture) {
-            shaderProgram.bindTexture(uniformName, this.getTextureRenderer(property) as WebGLTextureRenderer, textureUnit);
-            return true;
-        }
-        else if (fallbackTexture instanceof Texture) {
-            const texRenderer = this.renderer.factory.texture(fallbackTexture) as WebGLTextureRenderer;
-            shaderProgram.bindTexture(uniformName, texRenderer, textureUnit);
-            return false;
-        }
-        else {
-            shaderProgram.bindTexture(uniformName, this._whiteTexture, textureUnit);
-            return false;
-        }
-    }
-
-    // Bind the property to the uniformName uniform of the shader program, if the
-    // material property is a color. If not, it binds the fallbackColor vector
-    bindColor(shaderProgram: ShaderProgram, property: keyof Material, uniformName: string, fallbackColor = [1, 1, 1, 1]) {
-        if (this.material[property].length>=4) {
-            shaderProgram.uniform4fv(uniformName, this.material[property]);
-        }
-        else {
-            shaderProgram.uniform4fv(uniformName, fallbackColor);
-        }
-    }
-
-    // Bind the property to the uniformName uniform of the shader program, if the
-    // material property is a number. If not, it binds the fallbackValue value
-    bindValue(shaderProgram: ShaderProgram, property: keyof Material, uniformName: string, fallbackValue = 1) {
-        if (typeof(this.material[property]) === "number") {
-            shaderProgram.uniform1f(uniformName, this.material[property]);
-        }
-        else {
-            shaderProgram.uniform1f(uniformName, fallbackValue);
-        }
-    }
+import Texture, { TextureChannel, TextureTargetName } from "../../base/Texture";
+import Material from "../../base/Material";
+import MaterialRenderer from "../MaterialRenderer";
+import WebGLTextureRenderer from "./TextureRenderer";
+import TextureMerger from "../TextureMergerRenderer";
+import ShaderProgram from "./ShaderProgram";
+import Renderer from "../Renderer";
+import { whiteTexture, createWhiteTexture, blackTexture, createBlackTexture } from "../../tools/TextureResourceDatabase";
+
+export default class WebGLMaterialRenderer extends MaterialRenderer {
+    protected _whiteTexture: WebGLTextureRenderer;
+    protected _blackTexture: WebGLTextureRenderer;
+    protected _textureMerger: TextureMerger;
+
+    static async InitResources(renderer: Renderer) {
+        await createWhiteTexture(renderer);
+        await createBlackTexture(renderer);
+    }
+
+    constructor(renderer: Renderer, material: Material) {
+        super(renderer, material);
+        if (material.renderer) {
+            throw new Error("Duplicate material renderer set to material. Please, use the Renderer factory to get material renderer instance.");
+        }
+        // Link this material renderer to the material. This property is internal but should be accessed from the renderer
+        // The use of 'as any' is to provide access to the internal property like a friend class in C++
+        (material as any)._renderer = this;
+
+        this._whiteTexture = renderer.factory.texture(whiteTexture(renderer)) as WebGLTextureRenderer;
+        this._blackTexture = renderer.factory.texture(blackTexture(renderer)) as WebGLTextureRenderer;
+        this._textureMerger = renderer.factory.textureMerger();
+    }
+
+    mergeTextures() {
+        if (this.material.dirty) {
+            const getTexture = (att: keyof Material, fallbackTexture = this._whiteTexture) => {
+                if (this.material[att] instanceof Texture) {
+                    return this.material[att];
+                }
+                else {
+                    return fallbackTexture.texture;
+                }
+            }
+
+            this._textureMerger.setTexture(getTexture('metalnessTexture'), TextureChannel.R, TextureChannel.R + this.material.metalnessChannel);
+            this._textureMerger.setTexture(getTexture('roughnessTexture'), TextureChannel.G, TextureChannel.R + this.material.roughnessChannel);
+            this._textureMerger.setTexture(getTexture('lightEmission', this._blackTexture), TextureChannel.B, TextureChannel.R + this.material.lightEmissionChannel);
+            this._textureMerger.setTexture(getTexture('ambientOcclussion'), TextureChannel.A, TextureChannel.R + this.material.ambientOcclussionChannel);
+            this._textureMerger.update();
+            this.material.dirty = false;
+        }
+    }
+
+    get metalnessRoughnessHeightAOTexture() {
+        return this._textureMerger.mergedTexture;
+    }
+
+    destroy() {
+        console.log("Destroy material renderer");
+        if (this.material) {
+            // The use of 'as any' is to provide access to the internal property like a friend class in C++
+            (this.material as any)._renderer = null;
+        }
+    }
+
+    // Bind the metalness, roughness, height and ambient occlussion combined texture
+    bindMetalnessRoughnessHeightAOTexture(shaderProgram: ShaderProgram, uniformName: string, textureUnit: number): boolean {
+        const texRenderer = this.renderer.factory.texture(this.metalnessRoughnessHeightAOTexture) as WebGLTextureRenderer;
+        shaderProgram.bindTexture(uniformName, texRenderer, textureUnit);
+        return true;
+    }
+
+    // Binds the property to the uniformName  uniform of the shader program, if the
+    // material property ies a texture. If not, it binds the fallbackTexture. If the fallbackTexture
+    // value is null, it binds a 2x2 px white texture
+    bindTexture(shaderProgram: ShaderProgram, property: keyof Material, uniformName: string, textureUnit: number, fallbackTexture: Texture | null = null) {
+        if (this.material[property] instanceof Texture) {
+            shaderProgram.bindTexture(uniformName, this.getTextureRenderer(property) as WebGLTextureRenderer, textureUnit);
+            return true;
+        }
+        else if (fallbackTexture instanceof Texture) {
+            const texRenderer = this.renderer.factory.texture(fallbackTexture) as WebGLTextureRenderer;
+            shaderProgram.bindTexture(uniformName, texRenderer, textureUnit);
+            return false;
+        }
+        else {
+            shaderProgram.bindTexture(uniformName, this._whiteTexture, textureUnit);
+            return false;
+        }
+    }
+
+    // Bind the property to the uniformName uniform of the shader program, if the
+    // material property is a color. If not, it binds the fallbackColor vector
+    bindColor(shaderProgram: ShaderProgram, property: keyof Material, uniformName: string, fallbackColor = [1, 1, 1, 1]) {
+        if (this.material[property].length>=4) {
+            shaderProgram.uniform4fv(uniformName, this.material[property]);
+        }
+        else {
+            shaderProgram.uniform4fv(uniformName, fallbackColor);
+        }
+    }
+
+    // Bind the property to the uniformName uniform of the shader program, if the
+    // material property is a number. If not, it binds the fallbackValue value
+    bindValue(shaderProgram: ShaderProgram, property: keyof Material, uniformName: string, fallbackValue = 1) {
+        if (typeof(this.material[property]) === "number") {
+            shaderProgram.uniform1f(uniformName, this.material[property]);
+        }
+        else {
+            shaderProgram.uniform1f(uniformName, fallbackValue);
+        }
+    }
 }

package/src/render/webgl/Pipeline.ts

@@ -1,89 +1,89 @@
-
-import Pipeline, { BlendEquation, BlendFunction } from "../Pipeline";
-
-const getBlendEquation = (gl: WebGLRenderingContext, blendEquation: BlendEquation): number => {
-    switch (blendEquation) {
-    case BlendEquation.ADD:
-        return gl.FUNC_ADD; 
-    case BlendEquation.SUBTRACT:
-        return gl.FUNC_SUBTRACT; 
-    case BlendEquation.REVERSE_SUBTRACT:
-        return gl.FUNC_REVERSE_SUBTRACT; 
-    }
-    throw new Error(`Invalid blend equation specified in WebGLPipeline: ${ blendEquation }`);
-}
-
-const getBlendFunc = (gl: WebGLRenderingContext, blendFunc: BlendFunction): number | null => {
-    switch (blendFunc) {
-    case BlendFunction.NULL:
-        return null;
-    case BlendFunction.ZERO:
-        return gl.ZERO;
-    case BlendFunction.ONE:
-        return gl.ONE;
-    case BlendFunction.SRC_COLOR:
-        return gl.SRC_COLOR;
-    case BlendFunction.ONE_MINUS_SRC_COLOR:
-        return gl.ONE_MINUS_SRC_COLOR;
-    case BlendFunction.DST_COLOR:
-        return gl.DST_COLOR;
-    case BlendFunction.ONE_MINUS_DST_COLOR:
-        return gl.ONE_MINUS_DST_COLOR;
-    case BlendFunction.SRC_ALPHA:
-        return gl.SRC_ALPHA;
-    case BlendFunction.ONE_MINUS_SRC_ALPHA:
-        return gl.ONE_MINUS_SRC_ALPHA;
-    case BlendFunction.DST_ALPHA:
-        return gl.DST_ALPHA;
-    case BlendFunction.ONE_MINUS_DST_ALPHA:
-        return gl.ONE_MINUS_DST_ALPHA;
-    }
-    throw new Error(`Invalid blend function specified in WebGLPipeline: ${ blendFunc }`);
-}
-
-export default class WebGLPipeline extends Pipeline {
-    private _blendEquation!: number;
-    private _blendFuncSrcColor!: number | null;
-    private _blendFuncSrcAlpha!: number | null;
-    private _blendFuncDstColor!: number | null;
-    private _blendFuncDstAlpha!: number | null;
-    private _blendFunc!: (a: number | null, b: number | null, c?: number | null, d?: number | null) => void;
-
-    create(): void {
-        const { gl } = this.renderer;
-
-        // Set the webgl equivalent values
-        this._blendEquation = getBlendEquation(gl, this.blendState.blendEquation);
-        this._blendFuncSrcColor = getBlendFunc(gl, this.blendState.blendFuncSrc);
-        this._blendFuncSrcAlpha = getBlendFunc(gl, this.blendState.blendFuncSrcAlpha);
-        this._blendFuncDstColor = getBlendFunc(gl, this.blendState.blendFuncDst);
-        this._blendFuncDstAlpha = getBlendFunc(gl, this.blendState.blendFuncDstAlpha);
-        if ((this._blendFuncDstAlpha === null && this._blendFuncSrcAlpha !== null) ||
-            (this._blendFuncDstAlpha !== null && this._blendFuncSrcAlpha === null))
-        {
-            throw new Error("WebGLPipeline.create(): Invalid values of blendFuncDstAlpha and blendFuncSrcAlpha");
-        }
-        this._blendFunc = this._blendFuncDstAlpha !== null ? (a,b) => gl.blendFunc(a,b) : (a,b,c,d) => gl.blendFuncSeparate(a,b,c,d);
-    }
-
-    activate(): void {
-        const { gl, state } = this.renderer;
-        this.blendState.enabled ? gl.enable(gl.BLEND) : gl.disable(gl.BLEND);
-        gl.blendEquation(this._blendEquation);
-        this._blendFunc(
-            this._blendFuncSrcColor,
-            this._blendFuncDstColor,
-            this._blendFuncSrcAlpha,
-            this._blendFuncDstAlpha
-        );
-
-        state.depthTestEnabled = this.depthTest;
-
-        if (this.cullFace) {
-            gl.enable(gl.CULL_FACE);
-        }
-        else {
-            gl.disable(gl.CULL_FACE);
-        }
-    }
+
+import Pipeline, { BlendEquation, BlendFunction } from "../Pipeline";
+
+const getBlendEquation = (gl: WebGLRenderingContext, blendEquation: BlendEquation): number => {
+    switch (blendEquation) {
+    case BlendEquation.ADD:
+        return gl.FUNC_ADD; 
+    case BlendEquation.SUBTRACT:
+        return gl.FUNC_SUBTRACT; 
+    case BlendEquation.REVERSE_SUBTRACT:
+        return gl.FUNC_REVERSE_SUBTRACT; 
+    }
+    throw new Error(`Invalid blend equation specified in WebGLPipeline: ${ blendEquation }`);
+}
+
+const getBlendFunc = (gl: WebGLRenderingContext, blendFunc: BlendFunction): number | null => {
+    switch (blendFunc) {
+    case BlendFunction.NULL:
+        return null;
+    case BlendFunction.ZERO:
+        return gl.ZERO;
+    case BlendFunction.ONE:
+        return gl.ONE;
+    case BlendFunction.SRC_COLOR:
+        return gl.SRC_COLOR;
+    case BlendFunction.ONE_MINUS_SRC_COLOR:
+        return gl.ONE_MINUS_SRC_COLOR;
+    case BlendFunction.DST_COLOR:
+        return gl.DST_COLOR;
+    case BlendFunction.ONE_MINUS_DST_COLOR:
+        return gl.ONE_MINUS_DST_COLOR;
+    case BlendFunction.SRC_ALPHA:
+        return gl.SRC_ALPHA;
+    case BlendFunction.ONE_MINUS_SRC_ALPHA:
+        return gl.ONE_MINUS_SRC_ALPHA;
+    case BlendFunction.DST_ALPHA:
+        return gl.DST_ALPHA;
+    case BlendFunction.ONE_MINUS_DST_ALPHA:
+        return gl.ONE_MINUS_DST_ALPHA;
+    }
+    throw new Error(`Invalid blend function specified in WebGLPipeline: ${ blendFunc }`);
+}
+
+export default class WebGLPipeline extends Pipeline {
+    private _blendEquation!: number;
+    private _blendFuncSrcColor!: number | null;
+    private _blendFuncSrcAlpha!: number | null;
+    private _blendFuncDstColor!: number | null;
+    private _blendFuncDstAlpha!: number | null;
+    private _blendFunc!: (a: number | null, b: number | null, c?: number | null, d?: number | null) => void;
+
+    create(): void {
+        const { gl } = this.renderer;
+
+        // Set the webgl equivalent values
+        this._blendEquation = getBlendEquation(gl, this.blendState.blendEquation);
+        this._blendFuncSrcColor = getBlendFunc(gl, this.blendState.blendFuncSrc);
+        this._blendFuncSrcAlpha = getBlendFunc(gl, this.blendState.blendFuncSrcAlpha);
+        this._blendFuncDstColor = getBlendFunc(gl, this.blendState.blendFuncDst);
+        this._blendFuncDstAlpha = getBlendFunc(gl, this.blendState.blendFuncDstAlpha);
+        if ((this._blendFuncDstAlpha === null && this._blendFuncSrcAlpha !== null) ||
+            (this._blendFuncDstAlpha !== null && this._blendFuncSrcAlpha === null))
+        {
+            throw new Error("WebGLPipeline.create(): Invalid values of blendFuncDstAlpha and blendFuncSrcAlpha");
+        }
+        this._blendFunc = this._blendFuncDstAlpha !== null ? (a,b) => gl.blendFunc(a,b) : (a,b,c,d) => gl.blendFuncSeparate(a,b,c,d);
+    }
+
+    activate(): void {
+        const { gl, state } = this.renderer;
+        this.blendState.enabled ? gl.enable(gl.BLEND) : gl.disable(gl.BLEND);
+        gl.blendEquation(this._blendEquation);
+        this._blendFunc(
+            this._blendFuncSrcColor,
+            this._blendFuncDstColor,
+            this._blendFuncSrcAlpha,
+            this._blendFuncDstAlpha
+        );
+
+        state.depthTestEnabled = this.depthTest;
+
+        if (this.cullFace) {
+            gl.enable(gl.CULL_FACE);
+        }
+        else {
+            gl.disable(gl.CULL_FACE);
+        }
+    }
 }