@zephyr3d/scene 0.5.0 → 0.6.0

package/dist/index.js

@@ -2,7 +2,9 @@ export { prefilterCubemap } from './utility/pmrem.js';
 export { panoramaToCubemap } from './utility/panorama.js';
 export { projectCubemap, projectCubemapCPU } from './utility/shprojection.js';
 export { AABBTree } from './utility/aabbtree.js';
-export { BoundingBox, BoundingBoxTree } from './utility/bounding_volume.js';
+export { BoundingBox } from './utility/bounding_volume.js';
+export { createGradientNoiseTexture } from './utility/textures/gradientnoise.js';
+export { createRandomNoiseTexture } from './utility/textures/randomnoise.js';
 export { Shape } from './shapes/shape.js';
 export { BoxFrameShape, BoxShape } from './shapes/box.js';
 export { CylinderShape } from './shapes/cylinder.js';
@@ -20,10 +22,13 @@ export { Clipmap } from './render/clipmap.js';
 export { EnvConstantAmbient, EnvHemisphericAmbient, EnvIBL, EnvShIBL, EnvironmentLighting } from './render/envlight.js';
 export { Primitive } from './render/primitive.js';
 export { CullVisitor } from './render/cull_visitor.js';
-export { WaterMesh, defaultBuildParams } from './render/watermesh.js';
+export { WaterMesh } from './render/watermesh.js';
 export { OIT } from './render/oit.js';
 export { WeightedBlendedOIT } from './render/weightedblended_oit.js';
 export { ABufferOIT } from './render/abuffer_oit.js';
+export { WaveGenerator } from './render/wavegenerator.js';
+export { FFTWaveGenerator } from './render/fft_wavegenerator.js';
+export { GerstnerWaveGenerator } from './render/gerstner_wavegenerator.js';
 export { ShaderHelper } from './material/shader/helper.js';
 export { LambertMaterial } from './material/lambert.js';
 export { BlinnMaterial } from './material/blinn.js';
@@ -71,9 +76,9 @@ export { PerspectiveCamera } from './camera/perspectivecamera.js';
 export { BaseCameraController } from './camera/base.js';
 export { FPSCameraController } from './camera/fps.js';
 export { OrbitCameraController } from './camera/orbit.js';
-export { decode2HalfFromRGBA, decodeFloatFromRGBA, decodeNormalizedFloatFromRGBA, decodeRGBM, encode2HalfToRGBA, encodeFloatToRGBA, encodeNormalizedFloatToRGBA, encodeRGBM, gammaToLinear, linearToGamma } from './shaders/misc.js';
-export { noise3D, noisef, smoothNoise3D, worleyFBM, worleyNoise } from './shaders/noise.js';
-export { createProgramFFT2H, createProgramFFT2V, createProgramH0, createProgramHk, createProgramOcean, createProgramPostFFT2 } from './shaders/water.js';
+export { decode2HalfFromRGBA, decodeFloatFromRGBA, decodeNormalizedFloatFromRGBA, decodeRGBM, encode2HalfToRGBA, encodeFloatToRGBA, encodeNormalizedFloatToRGBA, encodeRGBM, fetchNormalizedFloatForDevice, gammaToLinear, linearToGamma } from './shaders/misc.js';
+export { gradient, hash, interleavedGradientNoise, noise3D, perlinNoise2D, perlinNoise3D, smoothNoise3D, worleyFBM, worleyNoise } from './shaders/noise.js';
+export { WaterShaderImpl, createProgramFFT2H, createProgramFFT2V, createProgramH0, createProgramHk, createProgramOcean, createProgramPostFFT2 } from './shaders/water.js';
 export { ShadowMapper } from './shadow/shadowmapper.js';
 export { ESM } from './shadow/esm.js';
 export { PCFPD } from './shadow/pcf_pd.js';
@@ -85,7 +90,7 @@ export { Blitter } from './blitter/blitter.js';
 export { GaussianBlurBlitter } from './blitter/gaussianblur.js';
 export { BoxFilterBlitter } from './blitter/box.js';
 export { CopyBlitter } from './blitter/copy.js';
-export { BUILTIN_ASSET_TEST_CUBEMAP, BUILTIN_ASSET_TEXTURE_SHEEN_LUT, LIGHT_TYPE_DIRECTIONAL, LIGHT_TYPE_NONE, LIGHT_TYPE_POINT, LIGHT_TYPE_SPOT, MAX_CLUSTERED_LIGHTS, MAX_MORPH_ATTRIBUTES, MAX_MORPH_TARGETS, MORPH_ATTRIBUTE_VECTOR_COUNT, MORPH_TARGET_COLOR, MORPH_TARGET_NORMAL, MORPH_TARGET_POSITION, MORPH_TARGET_TANGENT, MORPH_TARGET_TEX0, MORPH_TARGET_TEX1, MORPH_TARGET_TEX2, MORPH_TARGET_TEX3, MORPH_WEIGHTS_VECTOR_COUNT, QUEUE_OPAQUE, QUEUE_TRANSPARENT, RENDER_PASS_TYPE_DEPTH, RENDER_PASS_TYPE_LIGHT, RENDER_PASS_TYPE_OBJECT_COLOR, RENDER_PASS_TYPE_SHADOWMAP } from './values.js';
+export { BUILTIN_ASSET_TEST_CUBEMAP, BUILTIN_ASSET_TEXTURE_SHEEN_LUT, LIGHT_TYPE_DIRECTIONAL, LIGHT_TYPE_NONE, LIGHT_TYPE_POINT, LIGHT_TYPE_SPOT, MAX_CLUSTERED_LIGHTS, MAX_MORPH_ATTRIBUTES, MAX_MORPH_TARGETS, MORPH_ATTRIBUTE_VECTOR_COUNT, MORPH_TARGET_COLOR, MORPH_TARGET_NORMAL, MORPH_TARGET_POSITION, MORPH_TARGET_TANGENT, MORPH_TARGET_TEX0, MORPH_TARGET_TEX1, MORPH_TARGET_TEX2, MORPH_TARGET_TEX3, MORPH_WEIGHTS_VECTOR_COUNT, MaterialVaryingFlags, QUEUE_OPAQUE, QUEUE_TRANSPARENT, RENDER_PASS_TYPE_DEPTH, RENDER_PASS_TYPE_LIGHT, RENDER_PASS_TYPE_OBJECT_COLOR, RENDER_PASS_TYPE_SHADOWMAP } from './values.js';
 export { AbstractPostEffect } from './posteffect/posteffect.js';
 export { Grayscale } from './posteffect/grayscale.js';
 export { Tonemap } from './posteffect/tonemap.js';

package/dist/index.js.map

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

package/dist/material/blinn.js

@@ -2,7 +2,7 @@ import { applyMaterialMixins, MeshMaterial } from './meshmaterial.js';
 import { mixinVertexColor } from './mixins/vertexcolor.js';
 import { mixinBlinnPhong } from './mixins/lightmodel/blinnphong.js';
 import { ShaderHelper } from './shader/helper.js';
-import { RENDER_PASS_TYPE_LIGHT } from '../values.js';
+import { RENDER_PASS_TYPE_LIGHT, MaterialVaryingFlags } from '../values.js';
 
 /**
  * Blinn material
@@ -55,8 +55,14 @@ import { RENDER_PASS_TYPE_LIGHT } from '../values.js';
             if (this.drawContext.renderPass.type === RENDER_PASS_TYPE_LIGHT) {
                 scope.$l.normal = this.calculateNormal(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.blinnPhongLight(scope, scope.$inputs.worldPos, scope.normal, scope.viewVec, scope.albedo);
-                this.outputFragmentColor(scope, scope.$inputs.worldPos, pb.vec4(scope.litColor, scope.albedo.a));
+                if (this.drawContext.materialFlags & MaterialVaryingFlags.SSR_STORE_ROUGHNESS) {
+                    scope.$l.outRoughness = pb.vec4();
+                    scope.$l.litColor = this.blinnPhongLight(scope, scope.$inputs.worldPos, scope.normal, scope.viewVec, scope.albedo, scope.outRoughness);
+                    this.outputFragmentColor(scope, scope.$inputs.worldPos, pb.vec4(scope.litColor, scope.albedo.a), scope.outRoughness, pb.vec4(pb.add(pb.mul(scope.normal, 0.5), pb.vec3(0.5)), 1));
+                } else {
+                    scope.$l.litColor = this.blinnPhongLight(scope, scope.$inputs.worldPos, scope.normal, scope.viewVec, scope.albedo);
+                    this.outputFragmentColor(scope, scope.$inputs.worldPos, pb.vec4(scope.litColor, scope.albedo.a));
+                }
             } else {
                 this.outputFragmentColor(scope, scope.$inputs.worldPos, scope.albedo);
             }

package/dist/material/blinn.js.map

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

package/dist/material/lambert.js

@@ -2,7 +2,7 @@ import { mixinLight } from './mixins/lit.js';
 import { mixinVertexColor } from './mixins/vertexcolor.js';
 import { applyMaterialMixins, MeshMaterial } from './meshmaterial.js';
 import { ShaderHelper } from './shader/helper.js';
-import { RENDER_PASS_TYPE_LIGHT } from '../values.js';
+import { RENDER_PASS_TYPE_LIGHT, MaterialVaryingFlags } from '../values.js';
 
 /**
  * Lambert material
@@ -69,7 +69,11 @@ import { RENDER_PASS_TYPE_LIGHT } from '../values.js';
                     this.color = pb.add(this.color, this.lightContrib);
                 });
                 scope.$l.litColor = pb.mul(scope.albedo, pb.vec4(scope.color, 1));
-                this.outputFragmentColor(scope, scope.$inputs.worldPos, scope.litColor);
+                if (this.drawContext.materialFlags & MaterialVaryingFlags.SSR_STORE_ROUGHNESS) {
+                    this.outputFragmentColor(scope, scope.$inputs.worldPos, scope.litColor, pb.vec4(0, 0, 0, 1), pb.vec4(pb.add(pb.mul(scope.normal, 0.5), pb.vec3(0.5)), 1));
+                } else {
+                    this.outputFragmentColor(scope, scope.$inputs.worldPos, scope.litColor);
+                }
             } else {
                 this.outputFragmentColor(scope, scope.$inputs.worldPos, scope.albedo);
             }

package/dist/material/lambert.js.map

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

package/dist/material/material.js

@@ -1,5 +1,6 @@
 import { ProgramBuilder } from '@zephyr3d/device';
 import { QUEUE_OPAQUE } from '../values.js';
+import { RenderBundleWrapper } from '../render/renderbundle_wrapper.js';
 
 /**
  * Base class for any kind of materials
@@ -113,7 +114,7 @@ import { QUEUE_OPAQUE } from '../values.js';
         device.setRenderStates(state.renderStateSet);
     }
     /** @internal */ calcGlobalHash(ctx, pass) {
-        return `${this.getHash(pass)}:${Number(!!ctx.morphAnimation)}${Number(!!ctx.skinAnimation)}:${Number(!!ctx.instancing)}:${ctx.renderPassHash}`;
+        return `${this.getHash(pass)}:${ctx.materialFlags}:${ctx.renderPassHash}`;
     }
     /**
    * Draws a primitive using this material
@@ -144,6 +145,7 @@ import { QUEUE_OPAQUE } from '../values.js';
             for(let i = 0; i < this._numPasses; i++){
                 this._hash[i] = null;
             }
+            RenderBundleWrapper.materialChanged(this);
         }
     }
     /**

package/dist/material/material.js.map

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

package/dist/material/meshmaterial.js

@@ -1,5 +1,5 @@
 import { ProgramBuilder } from '@zephyr3d/device';
-import { RENDER_PASS_TYPE_OBJECT_COLOR, QUEUE_TRANSPARENT, QUEUE_OPAQUE, RENDER_PASS_TYPE_SHADOWMAP, RENDER_PASS_TYPE_LIGHT, RENDER_PASS_TYPE_DEPTH } from '../values.js';
+import { RENDER_PASS_TYPE_OBJECT_COLOR, QUEUE_OPAQUE, RENDER_PASS_TYPE_SHADOWMAP, MaterialVaryingFlags, QUEUE_TRANSPARENT, RENDER_PASS_TYPE_LIGHT, RENDER_PASS_TYPE_DEPTH } from '../values.js';
 import { Material } from './material.js';
 import { encodeNormalizedFloatToRGBA } from '../shaders/misc.js';
 import { Application } from '../app.js';
@@ -96,18 +96,19 @@ let FEATURE_ALPHATOCOVERAGE = 0;
         instance.coreMaterial = that;
         // Copy original uniform values
         for(let i = 0; i < instanceUniforms.length; i++){
-            const [prop, type] = instanceUniforms[i];
+            const instanceIndex = i;
+            const [prop, type] = instanceUniforms[instanceIndex];
             const value = that[prop];
             switch(type){
                 case 'float':
                     {
-                        uniformsHolder[i * 4] = Number(value);
+                        uniformsHolder[instanceIndex * 4] = Number(value);
                         Object.defineProperty(instance, prop, {
                             get () {
-                                return uniformsHolder[i * 4];
+                                return uniformsHolder[instanceIndex * 4];
                             },
                             set (value) {
-                                uniformsHolder[i * 4 + 0] = value;
+                                uniformsHolder[instanceIndex * 4 + 0] = value;
                                 that[prop] = value;
                             }
                         });
@@ -118,14 +119,18 @@ let FEATURE_ALPHATOCOVERAGE = 0;
                         if (!(value instanceof Vector2)) {
                             throw new Error(`Instance uniform property ${prop} must be of type Vector2`);
                         }
-                        uniformsHolder[i * 4] = value.x;
-                        uniformsHolder[i * 4 + 1] = value.y;
+                        uniformsHolder[instanceIndex * 4] = value.x;
+                        uniformsHolder[instanceIndex * 4 + 1] = value.y;
                         Object.defineProperty(instance, prop, {
                             get () {
-                                return new Vector2(uniformsHolder[i * 4], uniformsHolder[i * 4 + 1]);
+                                return new Vector2(uniformsHolder[instanceIndex * 4], uniformsHolder[instanceIndex * 4 + 1]);
                             },
                             set (value) {
-                                uniformsHolder.set(value);
+                                if (!(value instanceof Vector2)) {
+                                    throw new Error(`Instance uniform property ${prop} must be of type Vector2`);
+                                }
+                                uniformsHolder[instanceIndex * 4] = value.x;
+                                uniformsHolder[instanceIndex * 4 + 1] = value.y;
                                 that[prop] = value;
                             }
                         });
@@ -136,15 +141,20 @@ let FEATURE_ALPHATOCOVERAGE = 0;
                         if (!(value instanceof Vector3)) {
                             throw new Error(`Instance uniform property ${prop} must be of type Vector3`);
                         }
-                        uniformsHolder[i * 4] = value.x;
-                        uniformsHolder[i * 4 + 1] = value.y;
-                        uniformsHolder[i * 4 + 2] = value.z;
+                        uniformsHolder[instanceIndex * 4] = value.x;
+                        uniformsHolder[instanceIndex * 4 + 1] = value.y;
+                        uniformsHolder[instanceIndex * 4 + 2] = value.z;
                         Object.defineProperty(instance, prop, {
                             get () {
-                                return new Vector3(uniformsHolder[i * 4], uniformsHolder[i * 4 + 1], uniformsHolder[i * 4 + 2]);
+                                return new Vector3(uniformsHolder[instanceIndex * 4], uniformsHolder[instanceIndex * 4 + 1], uniformsHolder[instanceIndex * 4 + 2]);
                             },
                             set (value) {
-                                uniformsHolder.set(value);
+                                if (!(value instanceof Vector3)) {
+                                    throw new Error(`Instance uniform property ${prop} must be of type Vector3`);
+                                }
+                                uniformsHolder[instanceIndex * 4] = value.x;
+                                uniformsHolder[instanceIndex * 4 + 1] = value.y;
+                                uniformsHolder[instanceIndex * 4 + 2] = value.z;
                                 that[prop] = value;
                             }
                         });
@@ -155,16 +165,22 @@ let FEATURE_ALPHATOCOVERAGE = 0;
                         if (!(value instanceof Vector4)) {
                             throw new Error(`Instance uniform property ${prop} must be of type Vector4`);
                         }
-                        uniformsHolder[i * 4] = value.x;
-                        uniformsHolder[i * 4 + 1] = value.y;
-                        uniformsHolder[i * 4 + 2] = value.z;
-                        uniformsHolder[i * 4 + 3] = value.w;
+                        uniformsHolder[instanceIndex * 4] = value.x;
+                        uniformsHolder[instanceIndex * 4 + 1] = value.y;
+                        uniformsHolder[instanceIndex * 4 + 2] = value.z;
+                        uniformsHolder[instanceIndex * 4 + 3] = value.w;
                         Object.defineProperty(instance, prop, {
                             get () {
-                                return new Vector4(uniformsHolder[i * 4], uniformsHolder[i * 4 + 1], uniformsHolder[i * 4 + 2], uniformsHolder[i * 4 + 3]);
+                                return new Vector4(uniformsHolder[instanceIndex * 4], uniformsHolder[instanceIndex * 4 + 1], uniformsHolder[instanceIndex * 4 + 2], uniformsHolder[instanceIndex * 4 + 3]);
                             },
                             set (value) {
-                                uniformsHolder.set(value);
+                                if (!(value instanceof Vector4)) {
+                                    throw new Error(`Instance uniform property ${prop} must be of type Vector4`);
+                                }
+                                uniformsHolder[instanceIndex * 4] = value.x;
+                                uniformsHolder[instanceIndex * 4 + 1] = value.y;
+                                uniformsHolder[instanceIndex * 4 + 2] = value.z;
+                                uniformsHolder[instanceIndex * 4 + 3] = value.w;
                                 that[prop] = value;
                             }
                         });
@@ -241,6 +257,7 @@ let FEATURE_ALPHATOCOVERAGE = 0;
         const isObjectColorPass = ctx.renderPass.type === RENDER_PASS_TYPE_OBJECT_COLOR;
         const blending = !isObjectColorPass && (this.featureUsed(FEATURE_ALPHABLEND) || ctx.lightBlending);
         const a2c = !isObjectColorPass && this.featureUsed(FEATURE_ALPHATOCOVERAGE);
+        const ztestEq = ctx.queue === QUEUE_OPAQUE && !!ctx.depthTexture;
         if (blending || a2c) {
             const blendingState = stateSet.useBlendingState();
             if (blending) {
@@ -256,21 +273,33 @@ let FEATURE_ALPHATOCOVERAGE = 0;
                 blendingState.enable(false);
             }
             blendingState.enableAlphaToCoverage(a2c);
-            if (blendingState.enabled) {
+            if (ztestEq) {
+                stateSet.useDepthState().setCompareFunc('eq').enableTest(true).enableWrite(false);
+            } else if (blendingState.enabled) {
                 stateSet.useDepthState().enableTest(true).enableWrite(false);
             } else {
                 stateSet.defaultDepthState();
             }
         } else if (stateSet.blendingState?.enabled && !blending) {
             stateSet.defaultBlendingState();
-            stateSet.defaultDepthState();
+            if (ztestEq) {
+                stateSet.useDepthState().setCompareFunc('eq').enableTest(true).enableWrite(false);
+            } else {
+                stateSet.defaultDepthState();
+            }
         }
-        if (this._cullMode !== 'back') {
-            stateSet.useRasterizerState().cullMode = this._cullMode;
+        if (ctx.forceCullMode || this._cullMode !== 'back') {
+            stateSet.useRasterizerState().cullMode = ctx.forceCullMode || this._cullMode;
+        } else if (ctx.renderPass.type === RENDER_PASS_TYPE_SHADOWMAP) {
+            stateSet.useRasterizerState().cullMode = 'none';
         } else {
             stateSet.defaultRasterizerState();
         }
-        stateSet.defaultColorState();
+        if (ctx.forceColorState) {
+            stateSet.useColorState(ctx.forceColorState);
+        } else {
+            stateSet.defaultColorState();
+        }
         stateSet.defaultStencilState();
         if (ctx.oit) {
             ctx.oit.setRenderStates(stateSet);
@@ -292,7 +321,7 @@ let FEATURE_ALPHATOCOVERAGE = 0;
         if (ctx.oit) {
             ctx.oit.applyUniforms(ctx, bindGroup);
         }
-        if (!ctx.instancing && ctx.renderPass.type === RENDER_PASS_TYPE_OBJECT_COLOR) {
+        if (!(ctx.materialFlags & MaterialVaryingFlags.INSTANCING) && ctx.renderPass.type === RENDER_PASS_TYPE_OBJECT_COLOR) {
             bindGroup.setValue('zObjectColor', this._objectColor);
         }
     }
@@ -365,14 +394,14 @@ let FEATURE_ALPHATOCOVERAGE = 0;
    */ vertexShader(scope) {
         const pb = scope.$builder;
         ShaderHelper.prepareVertexShader(pb, this.drawContext);
-        if (this.drawContext.skinAnimation) {
+        if (this.drawContext.materialFlags & MaterialVaryingFlags.SKIN_ANIMATION) {
             scope.$inputs.zBlendIndices = pb.vec4().attrib('blendIndices');
             scope.$inputs.zBlendWeights = pb.vec4().attrib('blendWeights');
         }
-        if (this.drawContext.morphAnimation && this.drawContext.device.type === 'webgl') {
+        if (this.drawContext.materialFlags & MaterialVaryingFlags.MORPH_ANIMATION && this.drawContext.device.type === 'webgl') {
             scope.$inputs.zFakeVertexID = pb.float().attrib('texCoord7');
         }
-        if (this.drawContext.renderPass.type === RENDER_PASS_TYPE_OBJECT_COLOR && this.drawContext.instancing) {
+        if (this.drawContext.renderPass.type === RENDER_PASS_TYPE_OBJECT_COLOR && this.drawContext.materialFlags & MaterialVaryingFlags.INSTANCING) {
             scope.$outputs.zObjectColor = this.getInstancedUniform(scope, MeshMaterial.OBJECT_COLOR_UNIFORM);
         }
     }
@@ -389,7 +418,7 @@ let FEATURE_ALPHATOCOVERAGE = 0;
             if (this.isTransparentPass(this.pass)) {
                 scope.zOpacity = pb.float().uniform(2);
             }
-        } else if (this.drawContext.renderPass.type === RENDER_PASS_TYPE_OBJECT_COLOR && !this.drawContext.instancing) {
+        } else if (this.drawContext.renderPass.type === RENDER_PASS_TYPE_OBJECT_COLOR && !(this.drawContext.materialFlags & MaterialVaryingFlags.INSTANCING)) {
             scope.zObjectColor = pb.vec4().uniform(2);
         }
     }
@@ -413,6 +442,10 @@ let FEATURE_ALPHATOCOVERAGE = 0;
                     that.drawContext.oit.setupFragmentOutput(this);
                 } else {
                     this.$outputs.zFragmentOutput = pb.vec4();
+                    if (ctx.materialFlags & MaterialVaryingFlags.SSR_STORE_ROUGHNESS) {
+                        this.$outputs.zSSRRoughness = pb.vec4();
+                        this.$outputs.zSSRNormal = pb.vec4();
+                    }
                 }
                 pb.main(function() {
                     that.fragmentShader(this);
@@ -434,7 +467,7 @@ let FEATURE_ALPHATOCOVERAGE = 0;
    * @param color - Lit fragment color
    *
    * @returns The final fragment color
-   */ outputFragmentColor(scope, worldPos, color) {
+   */ outputFragmentColor(scope, worldPos, color, ssrRoughness, ssrNormal) {
         const pb = scope.$builder;
         const that = this;
         const funcName = 'Z_outputFragmentColor';
@@ -471,9 +504,12 @@ let FEATURE_ALPHATOCOVERAGE = 0;
                     });
                 }
                 ShaderHelper.discardIfClipped(this, this.worldPos);
+                const depthPass = that.drawContext.renderPass;
                 this.$l.depth = ShaderHelper.nonLinearDepthToLinearNormalized(this, this.$builtins.fragCoord.z);
-                if (that.drawContext.device.type === 'webgl') {
+                if (depthPass.encodeDepth) {
                     this.$outputs.zFragmentOutput = encodeNormalizedFloatToRGBA(this, this.depth);
+                } else if (depthPass.renderBackface) {
+                    this.$outputs.zFragmentOutput = pb.vec4(0, this.depth, 0, 1);
                 } else {
                     this.$outputs.zFragmentOutput = pb.vec4(this.depth, 0, 0, 1);
                 }
@@ -484,7 +520,7 @@ let FEATURE_ALPHATOCOVERAGE = 0;
                     });
                 }
                 ShaderHelper.discardIfClipped(this, this.worldPos);
-                this.$outputs.zFragmentOutput = that.drawContext.instancing ? scope.$inputs.zObjectColor : scope.zObjectColor;
+                this.$outputs.zFragmentOutput = that.drawContext.materialFlags & MaterialVaryingFlags.INSTANCING ? scope.$inputs.zObjectColor : scope.zObjectColor;
             } else {
                 if (color) {
                     this.$if(pb.lessThan(this.outColor.a, this.zAlphaCutoff), function() {
@@ -497,6 +533,10 @@ let FEATURE_ALPHATOCOVERAGE = 0;
             }
         });
         color ? pb.getGlobalScope()[funcName](worldPos, color) : pb.getGlobalScope()[funcName](worldPos);
+        if (that.drawContext.materialFlags & MaterialVaryingFlags.SSR_STORE_ROUGHNESS) {
+            scope.$outputs.zSSRRoughness = ssrRoughness ?? pb.vec4(1, 0, 0, 1);
+            scope.$outputs.zSSRNormal = ssrNormal ?? pb.vec4(0);
+        }
     }
 }
 FEATURE_ALPHATEST = MeshMaterial.defineFeature();

package/dist/material/meshmaterial.js.map

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

package/dist/material/mixins/albedocolor.js

@@ -1,6 +1,7 @@
 import { Vector4 } from '@zephyr3d/base';
 import { applyMaterialMixins } from '../meshmaterial.js';
 import { mixinTextureProps } from './texture.js';
+import { MaterialVaryingFlags } from '../../values.js';
 
 /**
  * Albedo color mixin
@@ -29,7 +30,7 @@ import { mixinTextureProps } from './texture.js';
             this.uniformChanged();
         }
         getUniformValueAlbedoColor(scope) {
-            return this.drawContext.instancing ? scope.$inputs.zAlbedo : scope.zAlbedo;
+            return this.drawContext.materialFlags & MaterialVaryingFlags.INSTANCING ? scope.$inputs.zAlbedo : scope.zAlbedo;
         }
         calculateAlbedoColor(scope, uv) {
             const pb = scope.$builder;
@@ -46,21 +47,21 @@ import { mixinTextureProps } from './texture.js';
         vertexShader(scope) {
             super.vertexShader(scope);
             if (this.needFragmentColor()) {
-                if (this.drawContext.instancing) {
+                if (this.drawContext.materialFlags & MaterialVaryingFlags.INSTANCING) {
                     scope.$outputs.zAlbedo = this.getInstancedUniform(scope, ALBEDO_COLOR_UNIFORM);
                 }
             }
         }
         fragmentShader(scope) {
             super.fragmentShader(scope);
-            if (this.needFragmentColor() && !this.drawContext.instancing) {
+            if (this.needFragmentColor() && !(this.drawContext.materialFlags & MaterialVaryingFlags.INSTANCING)) {
                 const pb = scope.$builder;
                 scope.zAlbedo = pb.vec4().uniform(2);
             }
         }
         applyUniformValues(bindGroup, ctx, pass) {
             super.applyUniformValues(bindGroup, ctx, pass);
-            if (this.needFragmentColor(ctx) && !ctx.instancing) {
+            if (this.needFragmentColor(ctx) && !(ctx.materialFlags & MaterialVaryingFlags.INSTANCING)) {
                 bindGroup.setValue('zAlbedo', this._albedoColor);
             }
         }

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

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

package/dist/material/mixins/lightmodel/blinnphong.js

@@ -1,5 +1,6 @@
 import { applyMaterialMixins } from '../../meshmaterial.js';
 import { mixinLight } from '../lit.js';
+import { ShaderHelper } from '../../shader/helper.js';
 
 /**
  * Blinn-phong lighting model mixin
@@ -40,7 +41,7 @@ import { mixinLight } from '../lit.js';
                 bindGroup.setValue('zShininess', this._shininess);
             }
         }
-        blinnPhongLight(scope, worldPos, normal, viewVec, albedo) {
+        blinnPhongLight(scope, worldPos, normal, viewVec, albedo, outRoughness) {
             const pb = scope.$builder;
             const funcName = 'Z_blinnPhongLight';
             const that = this;
@@ -48,12 +49,15 @@ import { mixinLight } from '../lit.js';
                 pb.vec3('worldPos'),
                 pb.vec3('normal'),
                 pb.vec3('viewVec'),
-                pb.vec4('albedo')
+                pb.vec4('albedo'),
+                ...outRoughness ? [
+                    pb.vec4('outRoughness').out()
+                ] : []
             ], function() {
                 if (!that.needFragmentColor()) {
                     this.$return(this.albedo.rgb);
                 } else {
-                    if (that.needCalculateEnvLight()) {
+                    if (that.needCalculateEnvLight() && !outRoughness) {
                         this.$l.diffuseColor = that.getEnvLightIrradiance(this, this.normal);
                     } else {
                         this.$l.diffuseColor = pb.vec3(0);
@@ -69,18 +73,24 @@ import { mixinLight } from '../lit.js';
                         this.$l.diffuse = pb.mul(this.lightColor, this.NoL);
                         this.$l.specular = pb.mul(this.lightColor, pb.pow(this.NoH, this.zShininess));
                         if (shadow) {
-                            this.$l.shadow = pb.vec3(that.calculateShadow(this, this.worldPos, this.NoL));
-                            this.diffuse = pb.mul(this.diffuse, this.shadow);
-                            this.specular = pb.mul(this.specular, this.shadow);
+                            this.$if(pb.greaterThan(this.NoL, 0), function() {
+                                this.$l.shadow = pb.vec3(that.calculateShadow(this, this.worldPos, this.NoL));
+                                this.diffuse = pb.mul(this.diffuse, this.shadow);
+                                this.specular = pb.mul(this.specular, this.shadow);
+                            });
                         }
                         this.diffuseColor = pb.add(this.diffuseColor, this.diffuse);
                         this.specularColor = pb.add(this.specularColor, this.specular);
                     });
                     this.$l.litColor = pb.add(pb.mul(this.albedo.rgb, this.diffuseColor), this.specularColor);
+                    if (outRoughness) {
+                        this.$l.roughness = pb.sqrt(pb.div(2, pb.add(this.zShininess, 2)));
+                        this.outRoughness = pb.vec4(pb.mul(this.albedo.rgb, pb.sub(1, this.roughness)), pb.mul(this.roughness, ShaderHelper.getCameraRoughnessFactor(this)));
+                    }
                     this.$return(this.litColor);
                 }
             });
-            return pb.getGlobalScope()[funcName](worldPos, normal, viewVec, albedo);
+            return outRoughness ? pb.getGlobalScope()[funcName](worldPos, normal, viewVec, albedo, outRoughness) : pb.getGlobalScope()[funcName](worldPos, normal, viewVec, albedo);
         }
     };
 }

package/dist/material/mixins/lightmodel/blinnphong.js.map

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

package/dist/material/mixins/lightmodel/lambert.js

@@ -1,11 +1,11 @@
 import { applyMaterialMixins } from '../../meshmaterial.js';
 import { mixinLight } from '../lit.js';
 
-/**
- * Lambert lighting model mixin
- * @param BaseCls - Class to mix in
- * @returns Mixed class
- * @public
+/**
+ * Lambert lighting model mixin
+ * @param BaseCls - Class to mix in
+ * @returns Mixed class
+ * @public
  */ function mixinLambert(BaseCls) {
     if (BaseCls.lambertMixed) {
         return BaseCls;

package/dist/material/mixins/lightmodel/pbrmetallicroughness.js

@@ -3,6 +3,7 @@ import { mixinTextureProps } from '../texture.js';
 import { mixinPBRCommon } from '../pbr/common.js';
 import { Vector4 } from '@zephyr3d/base';
 import { mixinLight } from '../lit.js';
+import { ShaderHelper } from '../../shader/helper.js';
 
 /**
  * PBRMetallicRoughness lighting model mixin
@@ -52,7 +53,7 @@ import { mixinLight } from '../lit.js';
                 this.uniformChanged();
             }
         }
-        PBRLight(scope, worldPos, normal, viewVec, albedo, TBN) {
+        PBRLight(scope, worldPos, normal, viewVec, albedo, TBN, outRoughness) {
             const pb = scope.$builder;
             const funcName = 'Z_PBRMetallicRoughnessLight';
             const that = this;
@@ -61,12 +62,19 @@ import { mixinLight } from '../lit.js';
                 pb.vec3('normal'),
                 pb.mat3('TBN'),
                 pb.vec3('viewVec'),
-                pb.vec4('albedo')
+                pb.vec4('albedo'),
+                ...outRoughness ? [
+                    pb.vec4('outRoughness').out()
+                ] : []
             ], function() {
                 this.$l.pbrData = that.getCommonData(this, this.albedo, this.normal, 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);
+                if (outRoughness) {
+                    that.indirectLighting(this, this.normal, this.viewVec, this.pbrData, this.lightingColor, this.outRoughness);
+                } else {
+                    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();
@@ -81,7 +89,7 @@ import { mixinLight } from '../lit.js';
                 });
                 this.$return(pb.add(this.lightingColor, this.emissiveColor));
             });
-            return pb.getGlobalScope()[funcName](worldPos, normal, TBN, viewVec, albedo);
+            return outRoughness ? pb.getGlobalScope()[funcName](worldPos, normal, TBN, viewVec, albedo, outRoughness) : pb.getGlobalScope()[funcName](worldPos, normal, TBN, viewVec, albedo);
         }
         fragmentShader(scope) {
             super.fragmentShader(scope);
@@ -110,6 +118,7 @@ import { mixinLight } from '../lit.js';
                 data.metallic = scope.zMetallic;
                 data.roughness = scope.zRoughness;
             }
+            data.roughness = pb.mul(data.roughness, ShaderHelper.getCameraRoughnessFactor(scope));
             if (this.specularColorTexture) {
                 scope.$l.specularColor = pb.mul(scope.zSpecularFactor.rgb, this.sampleSpecularColorTexture(scope).rgb);
             } else {

package/dist/material/mixins/lightmodel/pbrmetallicroughness.js.map

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