@zephyr3d/scene 0.1.1 → 0.2.0

package/dist/material/mixins/pbr/specularglossness.js

@@ -0,0 +1,104 @@
+import { applyMaterialMixins } from '../../meshmaterial.js';
+import { mixinTextureProps } from '../texture.js';
+import { mixinPBRCommon } from './common.js';
+import { Vector4 } from '@zephyr3d/base';
+import { mixinLight } from '../lit.js';
+
+function mixinPBRSpecularGlossness(BaseCls) {
+    if (BaseCls.pbrSpecularGlossnessMixed) {
+        return BaseCls;
+    }
+    const S = applyMaterialMixins(BaseCls, mixinPBRCommon, mixinLight, mixinTextureProps('specular'));
+    return class extends S {
+        static pbrSpecularGlossnessMixed = true;
+        _specularFactor;
+        _glossinessFactor;
+        constructor(){
+            super();
+            this._specularFactor = Vector4.one();
+            this._glossinessFactor = 1;
+        }
+        get specularFactor() {
+            return this._specularFactor;
+        }
+        set specularFactor(val) {
+            if (!val.equalsTo(this._specularFactor)) {
+                this._specularFactor.set(val);
+                this.optionChanged(true);
+            }
+        }
+        get glossinessFactor() {
+            return this._glossinessFactor;
+        }
+        set glossinessFactor(val) {
+            if (val !== this._glossinessFactor) {
+                this._glossinessFactor = val;
+                this.optionChanged(false);
+            }
+        }
+        fragmentShader(scope) {
+            super.fragmentShader(scope);
+            if (this.needFragmentColor()) {
+                const pb = scope.$builder;
+                scope.zSpecularFactor = pb.vec4().uniform(2);
+                scope.zGlossinessFactor = pb.float().uniform(2);
+            }
+        }
+        applyUniformValues(bindGroup, ctx, pass) {
+            super.applyUniformValues(bindGroup, ctx, pass);
+            if (this.needFragmentColor(ctx)) {
+                bindGroup.setValue('zSpecularFactor', this._specularFactor);
+                bindGroup.setValue('zGlossinessFactor', this._glossinessFactor);
+            }
+        }
+        PBRLight(scope, normal, TBN, viewVec, albedo) {
+            const pb = scope.$builder;
+            const funcName = 'z_PBRLight';
+            const that = this;
+            pb.func(funcName, [
+                pb.vec3('normal'),
+                pb.mat3('TBN'),
+                pb.vec3('viewVec'),
+                pb.vec4('albedo')
+            ], function() {
+                this.$l.pbrData = that.getCommonData(this, this.albedo, this.viewVec, this.TBN);
+                this.$l.lightingColor = pb.vec3(0);
+                this.$l.emissiveColor = that.calculateEmissiveColor(this);
+                that.indirectLighting(this, this.normal, this.viewVec, this.pbrData, this.lightingColor);
+                that.forEachLight(this, function(type, posRange, dirCutoff, colorIntensity, shadow) {
+                    this.$l.diffuse = pb.vec3();
+                    this.$l.specular = pb.vec3();
+                    this.$l.lightAtten = that.calculateLightAttenuation(this, type, posRange, dirCutoff);
+                    this.$l.lightDir = that.calculateLightDirection(this, type, posRange, dirCutoff);
+                    this.$l.NoL = pb.clamp(pb.dot(this.normal, this.lightDir), 0, 1);
+                    this.$l.lightColor = pb.mul(colorIntensity.rgb, colorIntensity.a, this.lightAtten, this.NoL);
+                    if (shadow) {
+                        this.lightColor = pb.mul(this.lightColor, that.calculateShadow(this, this.NoL));
+                    }
+                    that.directLighting(this, this.lightDir, this.lightColor, this.normal, this.viewVec, this.pbrData, this.lightingColor);
+                });
+                this.$return(pb.add(this.lightingColor, this.emissiveColor));
+            });
+            return pb.getGlobalScope()[funcName](normal, TBN, viewVec, albedo);
+        }
+        calculateCommonData(scope, albedo, viewVec, TBN, data) {
+            super.calculateCommonData(scope, albedo, viewVec, TBN, data);
+            const pb = scope.$builder;
+            if (this.specularTexture) {
+                scope.$l.specularTextureSample = this.sampleSpecularTexture(scope);
+                data.roughness = pb.sub(1, pb.mul(scope.zGlossinessFactor, scope.specularTextureSample.a));
+                data.f0 = pb.vec4(pb.mul(scope.specularTextureSample.rgb, scope.zSpecularFactor.rgb), this.getF0(scope).a);
+            } else {
+                data.roughness = pb.sub(1, scope.zGlossinessFactor);
+                data.f0 = pb.vec4(scope.zSpecularFactor.rgb, this.getF0(scope).a);
+            }
+            data.metallic = pb.max(pb.max(data.f0.r, data.f0.g), data.f0.b);
+            data.diffuse = pb.vec4(pb.mul(albedo.rgb, pb.sub(1, data.metallic)), albedo.a);
+            data.specularWeight = 1;
+            data.f90 = pb.vec3(1);
+        }
+    };
+}
+
+export { mixinPBRSpecularGlossness };
+//# sourceMappingURL=specularglossness.js.map

package/dist/material/mixins/pbr/specularglossness.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"specularglossness.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/material/mixins/texture.js

@@ -0,0 +1,157 @@
+/**
+ * Texture property mixin
+ * @param name - Texture name
+ * @returns Texture mixin
+ *
+ * @public
+ */ function mixinTextureProps(name) {
+    return function(BaseCls, vertex = false) {
+        const capName = `${name[0].toUpperCase()}${name.slice(1)}`;
+        const id = `mixinTexture${capName}`;
+        let feature = 0;
+        let featureTexIndex = 0;
+        let featureTexMatrix = 0;
+        if (BaseCls[id]) {
+            return BaseCls;
+        }
+        const cls = class extends BaseCls {
+            constructor(...args){
+                super(...args);
+            }
+            vertexShader(scope) {
+                super.vertexShader(scope);
+                if (vertex || this.needFragmentColor()) {
+                    const pb = scope.$builder;
+                    const that = this;
+                    if (this.featureUsed(feature)) {
+                        const texCoordIndex = that[`${name}TexCoordIndex`];
+                        if (texCoordIndex >= 0) {
+                            const semantic = `texCoord${that[`${name}TexCoordIndex`]}`;
+                            if (!scope.$getVertexAttrib(semantic)) {
+                                scope.$inputs[semantic] = pb.vec2().attrib(semantic);
+                            }
+                            if (this.featureUsed(featureTexMatrix)) {
+                                scope[`z${capName}TextureMatrix`] = pb.mat4().uniform(2);
+                                if (!vertex) {
+                                    scope.$outputs[`z${capName}TexCoord`] = pb.mul(scope[`z${capName}TextureMatrix`], pb.vec4(scope.$inputs[semantic], 0, 1)).xy;
+                                }
+                            } else if (!vertex) {
+                                scope.$outputs[`z${capName}TexCoord`] = scope.$inputs[semantic];
+                            }
+                        }
+                    }
+                }
+            }
+            fragmentShader(scope) {
+                super.fragmentShader(scope);
+                if (this.needFragmentColor()) {
+                    const pb = scope.$builder;
+                    if (this.featureUsed(feature)) {
+                        scope[`z${capName}Tex`] = pb.tex2D().uniform(2);
+                    }
+                }
+            }
+            applyUniformValues(bindGroup, ctx, pass) {
+                super.applyUniformValues(bindGroup, ctx, pass);
+                if (this.needFragmentColor(ctx)) {
+                    if (this.featureUsed(feature)) {
+                        const that = this;
+                        bindGroup.setTexture(`z${capName}Tex`, that[`${name}Texture`], that[`${name}TextureSampler`]);
+                        if (this.featureUsed(featureTexMatrix)) {
+                            bindGroup.setValue(`z${capName}TextureMatrix`, that[`${name}TexCoordMatrix`]);
+                        }
+                    }
+                }
+            }
+        };
+        feature = cls.defineFeature();
+        featureTexIndex = cls.defineFeature();
+        featureTexMatrix = cls.defineFeature();
+        const proto = cls.prototype;
+        const propTexture = `__${name}Texture`;
+        const propSampler = `__${name}Sampler`;
+        const propTexCoord = `__${name}TexCoordIndex`;
+        const propMatrix = `__${name}TexMatrix`;
+        proto[propTexture] = null;
+        proto[propSampler] = null;
+        proto[propTexCoord] = 0;
+        proto[propMatrix] = null;
+        proto[`sample${capName}Texture`] = function(scope, texCoord) {
+            const tex = this[`get${capName}TextureUniform`](scope);
+            const coord = texCoord ?? this[`get${capName}TexCoord`](scope);
+            return scope.$builder.textureSample(tex, coord);
+        };
+        proto[`get${capName}TextureUniform`] = function(scope) {
+            return scope.$builder.shaderKind === 'fragment' ? scope[`z${capName}Tex`] : null;
+        };
+        proto[`get${capName}TexCoord`] = function(scope) {
+            if (proto[propTexCoord] < 0) {
+                return null;
+            }
+            const pb = scope.$builder;
+            if (pb.shaderKind === 'vertex' !== !!vertex) {
+                throw new Error(`mixinTextureProps.get${capName}TexCoord(): must be called in ${vertex ? 'vertex' : 'fragment'} stage`);
+            }
+            return scope.$builder.shaderKind === 'fragment' ? scope.$inputs[`z${capName}TexCoord`] : this.featureUsed(featureTexMatrix) ? pb.mul(scope[`z${capName}TextureMatrix`], pb.vec4(scope.$inputs[`texCoord${proto[propTexCoord]}`], 0, 1)).xy : scope.$inputs[`texCoord${proto[propTexCoord]}`];
+        };
+        Object.defineProperty(proto, `${name}Texture`, {
+            get: function() {
+                return this[propTexture];
+            },
+            set: function(newValue) {
+                if (this[propTexture] !== newValue) {
+                    this[propTexture] = newValue ?? null;
+                    this.useFeature(feature, !!this[propTexture]);
+                    if (this[propTexture]) {
+                        this.useFeature(featureTexIndex, this[propTexCoord]);
+                        this.useFeature(featureTexMatrix, !!this[propMatrix]);
+                        this.uniformChanged();
+                    }
+                }
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(proto, `${name}TextureSampler`, {
+            get: function() {
+                return this[propSampler];
+            },
+            set: function(newValue) {
+                this[propSampler] = newValue;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(proto, `${name}TexCoordMatrix`, {
+            get: function() {
+                return this[propMatrix];
+            },
+            set: function(newValue) {
+                if (this[propMatrix] !== newValue) {
+                    this[propMatrix] = newValue;
+                    this.useFeature(featureTexMatrix, !!this[propMatrix]);
+                }
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(proto, `${name}TexCoordIndex`, {
+            get: function() {
+                return this[propTexCoord];
+            },
+            set: function(newValue) {
+                if (this[propTexCoord] !== newValue) {
+                    this[propTexCoord] = newValue;
+                    this.useFeature(featureTexIndex, this[propTexCoord]);
+                }
+            },
+            enumerable: true,
+            configurable: true
+        });
+        cls[id] = true;
+        return cls;
+    };
+}
+
+export { mixinTextureProps };
+//# sourceMappingURL=texture.js.map

package/dist/material/mixins/texture.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"texture.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/material/mixins/vertexcolor.js

@@ -1,24 +1,27 @@
-import { RENDER_PASS_TYPE_FORWARD } from '../../values.js';
-
-function mixinVertexColor(BaseCls) {
+/**
+ * Vertex color mixin
+ *
+ * @param BaseCls - Base class to mix in
+ * @returns Mixed class
+ */ function mixinVertexColor(BaseCls) {
     if (BaseCls.vertexColorMixed) {
         return BaseCls;
     }
-    const FEATURE_VERTEX_COLOR = 'z-feature-vertex-color';
-    return class extends BaseCls {
+    let FEATURE_VERTEX_COLOR = 0;
+    const cls = class extends BaseCls {
         static vertexColorMixed = true;
         constructor(...args){
             super(...args);
         }
         /** Albedo color */ get vertexColor() {
-            return this.featureUsed(FEATURE_VERTEX_COLOR, RENDER_PASS_TYPE_FORWARD);
+            return this.featureUsed(FEATURE_VERTEX_COLOR);
         }
         set vertexColor(val) {
             this.useFeature(FEATURE_VERTEX_COLOR, !!val);
         }
-        vertexShader(scope, ctx) {
-            super.vertexShader(scope, ctx);
-            if (this.needFragmentColor(ctx)) {
+        vertexShader(scope) {
+            super.vertexShader(scope);
+            if (this.needFragmentColor()) {
                 if (this.vertexColor) {
                     if (scope.$getVertexAttrib('diffuse')) {
                         throw new Error('mixinVertexColor.vertexShader(): diffuse vertex stream already defined');
@@ -28,8 +31,8 @@ function mixinVertexColor(BaseCls) {
                 }
             }
         }
-        getVertexColor(scope, ctx) {
-            if (!this.needFragmentColor(ctx)) {
+        getVertexColor(scope) {
+            if (!this.needFragmentColor()) {
                 throw new Error('mixinVertexColor.getVertexColor(): No need to calculate albedo color, make sure needFragmentColor() returns true');
             }
             if (scope.$builder.shaderKind === 'fragment') {
@@ -39,6 +42,8 @@ function mixinVertexColor(BaseCls) {
             }
         }
     };
+    FEATURE_VERTEX_COLOR = cls.defineFeature();
+    return cls;
 }
 
 export { mixinVertexColor };

package/dist/material/mixins/vertexcolor.js.map

@@ -1 +1 @@
-{"version":3,"file":"vertexcolor.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"vertexcolor.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/material/pbrmr.js

@@ -0,0 +1,65 @@
+import { applyMaterialMixins, MeshMaterial } from './meshmaterial.js';
+import { mixinVertexColor } from './mixins/vertexcolor.js';
+import { mixinPBRMetallicRoughness } from './mixins/lightmodel/pbrmetallicroughness.js';
+import { ShaderHelper } from './shader/helper.js';
+
+/**
+ * PBRMetallicRoughness material class
+ * @public
+ */ class PBRMetallicRoughnessMaterial extends applyMaterialMixins(MeshMaterial, mixinPBRMetallicRoughness, mixinVertexColor) {
+    /** @internal */ static FEATURE_VERTEX_NORMAL = this.defineFeature();
+    /** @internal */ static FEATURE_VERTEX_TANGENT = this.defineFeature();
+    /**
+   * Creates an instance of PBRMetallicRoughnessMaterial class
+   */ constructor(){
+        super();
+        this.useFeature(PBRMetallicRoughnessMaterial.FEATURE_VERTEX_NORMAL, true);
+    }
+    /** true if vertex normal attribute presents */ get vertexNormal() {
+        return this.featureUsed(PBRMetallicRoughnessMaterial.FEATURE_VERTEX_NORMAL);
+    }
+    set vertexNormal(val) {
+        this.useFeature(PBRMetallicRoughnessMaterial.FEATURE_VERTEX_NORMAL, !!val);
+    }
+    /** true if vertex normal attribute presents */ get vertexTangent() {
+        return this.featureUsed(PBRMetallicRoughnessMaterial.FEATURE_VERTEX_TANGENT);
+    }
+    set vertexTangent(val) {
+        this.useFeature(PBRMetallicRoughnessMaterial.FEATURE_VERTEX_TANGENT, !!val);
+    }
+    vertexShader(scope) {
+        super.vertexShader(scope);
+        const pb = scope.$builder;
+        scope.$l.oPos = ShaderHelper.resolveVertexPosition(scope);
+        scope.$outputs.worldPos = pb.mul(ShaderHelper.getWorldMatrix(scope), pb.vec4(scope.oPos, 1)).xyz;
+        ShaderHelper.setClipSpacePosition(scope, pb.mul(ShaderHelper.getViewProjectionMatrix(scope), pb.vec4(scope.$outputs.worldPos, 1)));
+        if (this.vertexNormal) {
+            scope.$l.oNorm = ShaderHelper.resolveVertexNormal(scope);
+            scope.$outputs.wNorm = pb.mul(ShaderHelper.getNormalMatrix(scope), pb.vec4(scope.oNorm, 0)).xyz;
+            if (this.vertexTangent) {
+                scope.$l.oTangent = ShaderHelper.resolveVertexTangent(scope);
+                scope.$outputs.wTangent = pb.mul(ShaderHelper.getNormalMatrix(scope), pb.vec4(scope.oTangent.xyz, 0)).xyz;
+                scope.$outputs.wBinormal = pb.mul(pb.cross(scope.$outputs.wNorm, scope.$outputs.wTangent), scope.oTangent.w);
+            }
+        }
+    }
+    fragmentShader(scope) {
+        super.fragmentShader(scope);
+        const pb = scope.$builder;
+        if (this.needFragmentColor()) {
+            scope.$l.albedo = this.calculateAlbedoColor(scope);
+            if (this.vertexColor) {
+                scope.albedo = pb.mul(scope.albedo, this.getVertexColor(scope));
+            }
+            scope.$l.normalInfo = this.calculateNormalAndTBN(scope, scope.$inputs.worldPos, scope.$inputs.wNorm, scope.$inputs.wTangent, scope.$inputs.wBinormal);
+            scope.$l.viewVec = this.calculateViewVector(scope, scope.$inputs.worldPos);
+            scope.$l.litColor = this.PBRLight(scope, scope.$inputs.worldPos, scope.normalInfo.normal, scope.viewVec, scope.albedo, scope.normalInfo.TBN);
+            this.outputFragmentColor(scope, scope.$inputs.worldPos, pb.vec4(scope.litColor, scope.albedo.a));
+        } else {
+            this.outputFragmentColor(scope, scope.$inputs.worldPos, null);
+        }
+    }
+}
+
+export { PBRMetallicRoughnessMaterial };
+//# sourceMappingURL=pbrmr.js.map

package/dist/material/pbrmr.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pbrmr.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/material/pbrsg.js

@@ -0,0 +1,64 @@
+import { applyMaterialMixins, MeshMaterial } from './meshmaterial.js';
+import { mixinVertexColor } from './mixins/vertexcolor.js';
+import { mixinPBRSpecularGlossness } from './mixins/lightmodel/pbrspecularglossness.js';
+import { ShaderHelper } from './shader/helper.js';
+
+class PBRSpecularGlossinessMaterial extends applyMaterialMixins(MeshMaterial, mixinPBRSpecularGlossness, mixinVertexColor) {
+    static FEATURE_VERTEX_NORMAL = this.defineFeature();
+    static FEATURE_VERTEX_TANGENT = this.defineFeature();
+    constructor(){
+        super();
+        this.useFeature(PBRSpecularGlossinessMaterial.FEATURE_VERTEX_NORMAL, true);
+    }
+    /** true if vertex normal attribute presents */ get vertexNormal() {
+        return this.featureUsed(PBRSpecularGlossinessMaterial.FEATURE_VERTEX_NORMAL);
+    }
+    set vertexNormal(val) {
+        this.useFeature(PBRSpecularGlossinessMaterial.FEATURE_VERTEX_NORMAL, !!val);
+    }
+    /** true if vertex normal attribute presents */ get vertexTangent() {
+        return this.featureUsed(PBRSpecularGlossinessMaterial.FEATURE_VERTEX_TANGENT);
+    }
+    set vertexTangent(val) {
+        this.useFeature(PBRSpecularGlossinessMaterial.FEATURE_VERTEX_TANGENT, !!val);
+    }
+    vertexShader(scope) {
+        super.vertexShader(scope);
+        const pb = scope.$builder;
+        scope.$l.oPos = ShaderHelper.resolveVertexPosition(scope);
+        scope.$outputs.worldPos = pb.mul(ShaderHelper.getWorldMatrix(scope), pb.vec4(scope.oPos, 1)).xyz;
+        ShaderHelper.setClipSpacePosition(scope, pb.mul(ShaderHelper.getViewProjectionMatrix(scope), pb.vec4(scope.$outputs.worldPos, 1)));
+        if (this.vertexNormal) {
+            scope.$l.oNorm = ShaderHelper.resolveVertexNormal(scope);
+            scope.$outputs.wNorm = pb.mul(ShaderHelper.getNormalMatrix(scope), pb.vec4(scope.oNorm, 0)).xyz;
+            if (this.vertexTangent) {
+                scope.$l.oTangent = ShaderHelper.resolveVertexTangent(scope);
+                scope.$outputs.wTangent = pb.mul(ShaderHelper.getNormalMatrix(scope), pb.vec4(scope.oTangent.xyz, 0)).xyz;
+                scope.$outputs.wBinormal = pb.mul(pb.cross(scope.$outputs.wNorm, scope.$outputs.wTangent), scope.oTangent.w);
+            }
+        }
+    }
+    fragmentShader(scope) {
+        super.fragmentShader(scope);
+        const pb = scope.$builder;
+        if (this.needFragmentColor()) {
+            scope.$l.albedo = this.calculateAlbedoColor(scope);
+            if (this.vertexColor) {
+                scope.albedo = pb.mul(scope.albedo, this.getVertexColor(scope));
+            }
+            scope.$l.albedo = this.calculateAlbedoColor(scope);
+            if (this.vertexColor) {
+                scope.albedo = pb.mul(scope.albedo, this.getVertexColor(scope));
+            }
+            scope.$l.normalInfo = this.calculateNormalAndTBN(scope, scope.$inputs.worldPos, scope.$inputs.wNorm, scope.$inputs.wTangent, scope.$inputs.wBinormal);
+            scope.$l.viewVec = this.calculateViewVector(scope, scope.$inputs.worldPos);
+            scope.$l.litColor = this.PBRLight(scope, scope.$inputs.worldPos, scope.normalInfo.normal, scope.viewVec, scope.albedo, scope.normalInfo.TBN);
+            this.outputFragmentColor(scope, scope.$inputs.worldPos, pb.vec4(scope.litColor, scope.albedo.a));
+        } else {
+            this.outputFragmentColor(scope, scope.$inputs.worldPos, null);
+        }
+    }
+}
+
+export { PBRSpecularGlossinessMaterial };
+//# sourceMappingURL=pbrsg.js.map

package/dist/material/pbrsg.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pbrsg.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}