@zephyr3d/scene 0.1.2 → 0.2.0

package/dist/material/terrainmaterial.js

@@ -1,139 +1,347 @@
-import { Material } from './material.js';
-import { forwardComputeLighting } from '../shaders/lighting.js';
-import { RENDER_PASS_TYPE_FORWARD, RENDER_PASS_TYPE_SHADOWMAP, RENDER_PASS_TYPE_DEPTH_ONLY } from '../values.js';
-import { ShaderFramework } from '../shaders/framework.js';
-import { encodeColorOutput, nonLinearDepthToLinearNormalized, encodeNormalizedFloatToRGBA } from '../shaders/misc.js';
+import { applyMaterialMixins, MeshMaterial } from './meshmaterial.js';
+import { mixinPBRMetallicRoughness } from './mixins/lightmodel/pbrmetallicroughness.js';
+import { mixinLight } from './mixins/lit.js';
 import { Application } from '../app.js';
-import { TerrainLightModel } from './terrainlightmodel.js';
-import { MESH_MATERIAL } from '../shaders/builtins.js';
+import { Vector4 } from '@zephyr3d/base';
+import { drawFullscreenQuad } from '../render/fullscreenquad.js';
+import { ShaderHelper } from './shader/helper.js';
 
-/** @internal */ const MAX_DETAIL_TEXTURE_LEVELS = 8;
-/**
- * The terrain material
- * @public
- */ class TerrainMaterial extends Material {
-    /** @internal */ _lightModel;
-    /** @internal */ _terrainInfo;
-    /**
-   * Creates an instance of TerrainMaterial
-   */ constructor(options){
+/**
+ * Terrain material class
+ * @public
+ */ class TerrainMaterial extends applyMaterialMixins(MeshMaterial, mixinLight, mixinPBRMetallicRoughness) {
+    static _metallicRoughnessGenerationProgram = null;
+    static _metallicRoughnessGenerationBindGroup = null;
+    _options;
+    _uvScales;
+    _numDetailMaps;
+    _terrainInfo;
+    constructor(options){
         super();
+        this.normalMapMode = 'object-space';
+        this._options = null;
+        this._numDetailMaps = 0;
+        this._uvScales = null;
         this._terrainInfo = null;
-        this._lightModel = new TerrainLightModel(options);
-    }
-    get lightModel() {
-        return this._lightModel;
+        if (options && options.splatMap && options.detailMaps && options.detailMaps.albedoTextures) {
+            this._options = Object.assign({}, options);
+            const albedoTextures = this._options.detailMaps.albedoTextures;
+            this._numDetailMaps = Array.isArray(albedoTextures) ? albedoTextures.length : albedoTextures.depth;
+            if (!this._numDetailMaps) {
+                throw new Error(`TerrainMaterial(): Invalid detail textures`);
+            }
+            if (this._numDetailMaps > 4) {
+                throw new Error(`TerrainMaterial(): The maximum detail levels is 4`);
+            }
+            if (!this._options.detailMaps.uvScale || this._options.detailMaps.uvScale.length !== this._numDetailMaps) {
+                throw new Error(`TerrainMaterial(): Invalid uv scale`);
+            }
+            this._uvScales = new Float32Array(this._numDetailMaps * 4);
+            for(let i = 0; i < this._numDetailMaps; i++){
+                this._uvScales[i * 4] = this._options.detailMaps.uvScale[i];
+                this._uvScales[i * 4 + 1] = 1;
+                this._uvScales[i * 4 + 2] = 0.01;
+                this._uvScales[i * 4 + 3] = 0.99;
+            }
+            if (this._options.detailMaps.metallic) {
+                if (this._options.detailMaps.metallic.length !== this._numDetailMaps) {
+                    throw new Error(`TerrainMaterial(): Invalid metallic values`);
+                }
+                for(let i = 0; i < this._numDetailMaps; i++){
+                    this._uvScales[i * 4 + 2] = this._options.detailMaps.metallic[i];
+                }
+            }
+            if (this._options.detailMaps.roughness) {
+                if (this._options.detailMaps.roughness.length !== this._numDetailMaps) {
+                    throw new Error(`TerrainMaterial(): Invalid roughness values`);
+                }
+                for(let i = 0; i < this._numDetailMaps; i++){
+                    this._uvScales[i * 4 + 3] = this._options.detailMaps.roughness[i];
+                }
+            }
+            const normalTextures = options.detailMaps.normalTextures;
+            if (normalTextures) {
+                const m = Array.isArray(normalTextures) ? normalTextures.length : normalTextures.depth;
+                if (m !== this._numDetailMaps) {
+                    throw new Error(`TerrainMaterial(): The number of normal textures not match the number of albedo textures`);
+                }
+                if (options.detailMaps.normalScale) {
+                    if (options.detailMaps.normalScale.length !== this._numDetailMaps) {
+                        throw new Error(`TerrainMaterial(): Invalid normal scale`);
+                    }
+                    for(let i = 0; i < this._numDetailMaps; i++){
+                        this._uvScales[i * 4 + 1] = options.detailMaps.normalScale[i];
+                    }
+                }
+            }
+            this._options = Object.assign({}, options);
+            if (Array.isArray(albedoTextures)) {
+                for(let i = 0; i < albedoTextures.length; i++){
+                    if (!albedoTextures[i]) {
+                        throw new Error(`TerrainMaterial(): Invalid detail albedo texture`);
+                    }
+                    albedoTextures[i].samplerOptions = {
+                        addressU: 'repeat',
+                        addressV: 'repeat'
+                    };
+                }
+            } else {
+                albedoTextures.samplerOptions = {
+                    addressU: 'repeat',
+                    addressV: 'repeat'
+                };
+            }
+            if (Array.isArray(normalTextures)) {
+                for(let i = 0; i < normalTextures.length; i++){
+                    if (!normalTextures[i]) {
+                        throw new Error(`TerrainMaterial(): Invalid detail normal texture`);
+                    }
+                    normalTextures[i].samplerOptions = {
+                        addressU: 'repeat',
+                        addressV: 'repeat'
+                    };
+                }
+            } else if (normalTextures) {
+                normalTextures.samplerOptions = {
+                    addressU: 'repeat',
+                    addressV: 'repeat'
+                };
+            }
+        }
+        this.metallicRoughnessTexture = this.generateMetallicRoughnessMap();
+        this.metallicRoughnessTexCoordIndex = -1;
+        this.albedoTexCoordIndex = -1;
+        this.normalTexCoordIndex = -1;
     }
     get terrainInfo() {
         return this._terrainInfo;
     }
     set terrainInfo(val) {
         this._terrainInfo = val;
-        this.optionChanged(false);
+        this.uniformChanged();
     }
-    /**
-   * {@inheritDoc Material.isTransparent}
-   * @override
-   */ isTransparent() {
+    /**
+   * {@inheritDoc MeshMaterial.isTransparentPass}
+   * @override
+   */ isTransparentPass(pass) {
         return false;
     }
-    /**
-   * {@inheritDoc Material.supportLighting}
-   * @override
+    /**
+   * {@inheritDoc Material.supportLighting}
+   * @override
    */ supportLighting() {
-        return this._lightModel.supportLighting();
+        return true;
     }
-    /**
-   * {@inheritDoc Material.applyUniforms}
-   * @override
-   */ applyUniforms(bindGroup, ctx, needUpdate) {
-        super.applyUniforms(bindGroup, ctx, needUpdate);
-        if (ctx.renderPass.type === RENDER_PASS_TYPE_FORWARD) {
-            this._lightModel.applyUniformsIfOutdated(bindGroup, ctx);
-        }
+    /**
+   * {@inheritDoc Material.isBatchable}
+   * @override
+   */ isBatchable() {
+        return false;
     }
-    /**
-   * {@inheritDoc Material._applyUniforms}
-   * @override
-   */ _applyUniforms(bindGroup, ctx) {
-        if (ctx.renderPass.type === RENDER_PASS_TYPE_FORWARD) {
+    applyUniformValues(bindGroup, ctx, pass) {
+        super.applyUniformValues(bindGroup, ctx, pass);
+        if (this.needFragmentColor(ctx)) {
             bindGroup.setValue('terrainInfo', this._terrainInfo);
+            if (this._options) {
+                bindGroup.setValue('detailScales', this._uvScales);
+                bindGroup.setTexture('splatMap', this._options.splatMap);
+                if (Array.isArray(this._options.detailMaps.albedoTextures)) {
+                    for(let i = 0; i < this._numDetailMaps; i++){
+                        bindGroup.setTexture(`detailAlbedoMap${i}`, this._options.detailMaps.albedoTextures[i]);
+                    }
+                } else {
+                    bindGroup.setTexture('detailAlbedoMap', this._options.detailMaps.albedoTextures);
+                }
+                if (Array.isArray(this._options.detailMaps.normalTextures)) {
+                    for(let i = 0; i < this._numDetailMaps; i++){
+                        bindGroup.setTexture(`detailNormalMap${i}`, this._options.detailMaps.normalTextures[i]);
+                    }
+                } else {
+                    bindGroup.setTexture('detailNormalMap', this._options.detailMaps.normalTextures);
+                }
+            }
         }
     }
-    /** @internal */ getHash(renderPassType) {
-        if (this._hash[renderPassType] === void 0) {
-            this._hash[renderPassType] = this.createHash(renderPassType);
-        }
-        return this._hash[renderPassType];
+    /** @ts-ignore */ getMetallicRoughnessTexCoord(scope) {
+        return scope.$inputs.mapUV;
     }
-    /** @internal */ _createHash(renderPassType) {
-        return renderPassType === RENDER_PASS_TYPE_FORWARD ? this._lightModel.getHash() : '';
+    /** @ts-ignore */ getNormalTexCoord(scope) {
+        return scope.$inputs.mapUV;
     }
-    /** @internal */ _createProgram(pb, ctx) {
+    /** @ts-ignore */ getAlbedoTexCoord(scope) {
+        return scope.$inputs.mapUV;
+    }
+    calculateAlbedoColor(scope) {
+        if (!this._options) {
+            return super.calculateAlbedoColor(scope);
+        }
         const that = this;
-        if (ctx.renderPass.type === RENDER_PASS_TYPE_SHADOWMAP) {
-            const shadowMapParams = ctx.shadowMapInfo.get(ctx.renderPass.light);
-            pb.emulateDepthClamp = !!shadowMapParams.depthClampEnabled;
+        const pb = scope.$builder;
+        const funcName = 'getTerrainAlbedo';
+        pb.func(funcName, [], function() {
+            this.$l.mask = pb.textureSample(this.splatMap, this.$inputs.mapUV);
+            this.$l.color = pb.vec3(0);
+            const useTextureArray = !Array.isArray(that._options.detailMaps.albedoTextures);
+            for(let i = 0; i < that._numDetailMaps; i++){
+                const uv = pb.mul(this.$inputs.mapUV, this.detailScales.at(i).x);
+                const sample = useTextureArray ? pb.textureArraySample(this.detailAlbedoMap, uv, i).rgb : pb.textureSample(this[`detailAlbedoMap${i}`], uv).rgb;
+                this.color = pb.add(this.color, pb.mul(sample, this.mask[i]));
+            }
+            this.$return(pb.vec4(this.color, 1));
+        });
+        return pb.getGlobalScope()[funcName]();
+    }
+    sampleDetailNormalMap(scope, tex, texCoord, normalScale, TBN) {
+        const pb = scope.$builder;
+        const pixel = pb.sub(pb.mul(pb.textureSample(tex, texCoord).rgb, 2), pb.vec3(1));
+        const normalTex = pb.mul(pixel, pb.vec3(pb.vec3(normalScale).xx, 1));
+        return pb.normalize(pb.mul(TBN, normalTex));
+    }
+    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.needFragmentColor()) {
+            scope.terrainInfo = pb.vec4().uniform(2);
+            scope.$l.oNorm = ShaderHelper.resolveVertexNormal(scope);
+            scope.$outputs.worldNorm = pb.mul(ShaderHelper.getNormalMatrix(scope), pb.vec4(scope.oNorm, 0)).xyz;
+            scope.$outputs.mapUV = pb.div(scope.oPos.xz, scope.terrainInfo.xy);
         }
-        const program = pb.buildRenderProgram({
-            vertex () {
-                ShaderFramework.prepareVertexShader(pb, ctx);
-                this.$inputs.pos = pb.vec3().attrib('position');
-                if (ctx.renderPass.type === RENDER_PASS_TYPE_FORWARD) {
-                    this.terrainInfo = pb.vec4().uniform(2);
-                    this.$inputs.normal = pb.vec3().attrib('normal');
-                    that._lightModel.setupUniforms(this, ctx);
+    }
+    fragmentShader(scope) {
+        super.fragmentShader(scope);
+        const pb = scope.$builder;
+        const that = this;
+        if (this.needFragmentColor()) {
+            if (this._options) {
+                scope.detailScales = pb.vec4[this._numDetailMaps]().uniform(2);
+                scope.splatMap = pb.tex2D().uniform(2);
+                const useAlbedoTextureArray = !Array.isArray(that._options.detailMaps.albedoTextures);
+                if (useAlbedoTextureArray) {
+                    scope.detailAlbedoMap = pb.tex2DArray().uniform(2);
+                } else {
+                    for(let i = 0; i < that._numDetailMaps; i++){
+                        scope[`detailAlbedoMap${i}`] = pb.tex2D().uniform(2);
+                    }
                 }
-                pb.main(function() {
-                    ShaderFramework.ftransform(this);
-                    if (ctx.renderPass.type === RENDER_PASS_TYPE_FORWARD) {
-                        this.$l.uv = pb.div(this.$inputs.pos.xz, this.terrainInfo.xy);
-                        for(let i = 0; i < Application.instance.device.getDeviceCaps().miscCaps.maxTexCoordIndex; i++){
-                            if (that._lightModel?.isTexCoordIndexUsed(i)) {
-                                this.$outputs[`texcoord${i}`] = that._lightModel.calculateTexCoordNoInput(this, i, this.uv);
-                            }
-                        }
+                const useNormalTextureArray = !Array.isArray(that._options.detailMaps.normalTextures);
+                if (useNormalTextureArray) {
+                    scope.detailNormalMap = pb.tex2DArray().uniform(2);
+                } else {
+                    for(let i = 0; i < that._numDetailMaps; i++){
+                        scope[`detailNormalMap${i}`] = pb.tex2D().uniform(2);
                     }
-                });
-            },
-            fragment () {
-                ShaderFramework.prepareFragmentShader(pb, ctx);
-                if (ctx.renderPass.type === RENDER_PASS_TYPE_FORWARD) {
-                    that._lightModel.setupUniforms(this, ctx);
-                    this.$outputs.outColor = pb.vec4();
-                    pb.main(function() {
-                        this.$l.litColor = forwardComputeLighting(this, that._lightModel, ctx);
-                        MESH_MATERIAL.DISCARD_IF_CLIPPED(this);
-                        this.$outputs.outColor = encodeColorOutput(this, this.litColor);
-                    });
-                } else if (ctx.renderPass.type === RENDER_PASS_TYPE_DEPTH_ONLY) {
-                    this.$outputs.outColor = pb.vec4();
+                }
+            }
+            scope.$l.albedo = this.calculateAlbedoColor(scope);
+            scope.$l.normalInfo = this.calculateNormalAndTBN(scope, scope.$inputs.worldPos, scope.$inputs.worldNorm);
+            let calcNormal = false;
+            if (this._options && this._options.detailMaps.normalTextures) {
+                scope.$l.detailMask = pb.textureSample(scope.splatMap, scope.$inputs.mapUV);
+                if (Array.isArray(this._options.detailMaps.normalTextures)) {
+                    for(let i = 0; i < this._options.detailMaps.normalTextures.length; i++){
+                        const tex = scope[`detailNormalMap${i}`];
+                        const scale = scope.detailScales.at(i).y;
+                        const texCoord = pb.mul(scope.$inputs.mapUV, scope.detailScales.at(i).x);
+                        scope.normalInfo.normal = pb.add(scope.normalInfo.normal, pb.mul(this.sampleDetailNormalMap(scope, tex, texCoord, scale, scope.normalInfo.TBN), scope.detailMask[i]));
+                        calcNormal = true;
+                    }
+                } else {
+                    const tex = scope.detailNormalMap;
+                    for(let i = 0; i < this._numDetailMaps; i++){
+                        const scale = scope.detailScales.at(i).y;
+                        const texCoord = pb.mul(scope.$inputs.mapUV, scope.detailScales.at(i).x);
+                        const pixel = pb.sub(pb.mul(pb.textureArraySample(tex, texCoord, i).rgb, 2), pb.vec3(1));
+                        const normalTex = pb.mul(pixel, pb.vec3(pb.vec3(scale).xx, 1));
+                        const detailNormal = pb.normalize(pb.mul(scope.normalInfo.TBN, normalTex));
+                        scope.normalInfo.normal = pb.add(scope.normalInfo.normal, pb.mul(detailNormal, scope.detailMask[i]));
+                        calcNormal = true;
+                    }
+                }
+            }
+            if (calcNormal) {
+                scope.normalInfo.normal = pb.normalize(scope.normalInfo.normal);
+            }
+            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);
+        }
+    }
+    generateMetallicRoughnessMap() {
+        const device = Application.instance.device;
+        if (!this._options) {
+            const tex = device.createTexture2D('rgba8unorm', 1, 1, {
+                samplerOptions: {
+                    mipFilter: 'none'
+                }
+            });
+            tex.update(new Uint8Array([
+                0,
+                1,
+                0,
+                0
+            ]), 0, 0, 1, 1);
+            tex.name = 'TerrainMetallicRoughnessMap';
+            return tex;
+        }
+        if (!TerrainMaterial._metallicRoughnessGenerationProgram) {
+            TerrainMaterial._metallicRoughnessGenerationProgram = device.buildRenderProgram({
+                vertex (pb) {
+                    this.$inputs.pos = pb.vec2().attrib('position');
+                    this.$outputs.uv = pb.vec2();
                     pb.main(function() {
-                        MESH_MATERIAL.DISCARD_IF_CLIPPED(this);
-                        this.$l.depth = nonLinearDepthToLinearNormalized(this, this.$builtins.fragCoord.z);
-                        if (Application.instance.device.type === 'webgl') {
-                            this.$outputs.outColor = encodeNormalizedFloatToRGBA(this, this.depth);
-                        } else {
-                            this.$outputs.outColor = pb.vec4(this.depth, 0, 0, 1);
+                        this.$builtins.position = pb.vec4(this.$inputs.pos, 0, 1);
+                        this.$outputs.uv = pb.add(pb.mul(this.$inputs.pos.xy, 0.5), pb.vec2(0.5));
+                        if (device.type === 'webgpu') {
+                            this.$builtins.position.y = pb.neg(this.$builtins.position.y);
                         }
                     });
-                } else if (ctx.renderPass.type === RENDER_PASS_TYPE_SHADOWMAP) {
+                },
+                fragment (pb) {
                     this.$outputs.outColor = pb.vec4();
+                    this.roughness = pb.vec4().uniform(0);
+                    this.metallic = pb.vec4().uniform(0);
+                    this.splatMap = pb.tex2D().uniform(0);
                     pb.main(function() {
-                        MESH_MATERIAL.DISCARD_IF_CLIPPED(this);
-                        const shadowMapParams = ctx.shadowMapInfo.get(ctx.renderPass.light);
-                        this.$outputs.outColor = shadowMapParams.impl.computeShadowMapDepth(shadowMapParams, this);
+                        this.weights = pb.textureSample(this.splatMap, this.$inputs.uv);
+                        this.roughnessValue = pb.dot(this.weights, this.roughness);
+                        this.metallicValue = pb.dot(this.weights, this.metallic);
+                        this.$outputs.outColor = pb.vec4(0, this.roughnessValue, this.metallicValue, 1);
                     });
-                } else {
-                    throw new Error(`unknown render pass type: ${ctx.renderPass.type}`);
                 }
-            }
-        });
-        // console.log(program?.getShaderSource('vertex'));
-        // console.log(program?.getShaderSource('fragment'));
-        return program;
+            });
+            TerrainMaterial._metallicRoughnessGenerationBindGroup = device.createBindGroup(TerrainMaterial._metallicRoughnessGenerationProgram.bindGroupLayouts[0]);
+        }
+        const roughnessValues = Vector4.one();
+        const metallicValues = Vector4.zero();
+        for(let i = 0; i < this._numDetailMaps; i++){
+            metallicValues[i] = this._uvScales[i * 4 + 2];
+            roughnessValues[i] = this._uvScales[i * 4 + 3];
+        }
+        const tex = device.createTexture2D('rgba8unorm', this._options.splatMap.width, this._options.splatMap.height);
+        tex.name = 'TerrainMetallicRoughnessMap';
+        const program = TerrainMaterial._metallicRoughnessGenerationProgram;
+        const bindgroup = TerrainMaterial._metallicRoughnessGenerationBindGroup;
+        bindgroup.setValue('roughness', roughnessValues);
+        bindgroup.setValue('metallic', metallicValues);
+        bindgroup.setTexture('splatMap', this._options.splatMap);
+        const fb = device.createFrameBuffer([
+            tex
+        ], null);
+        device.pushDeviceStates();
+        device.setFramebuffer(fb);
+        device.setProgram(program);
+        device.setBindGroup(0, bindgroup);
+        drawFullscreenQuad();
+        device.popDeviceStates();
+        fb.dispose();
+        return tex;
     }
 }
 
-export { MAX_DETAIL_TEXTURE_LEVELS, TerrainMaterial };
+export { TerrainMaterial };
 //# sourceMappingURL=terrainmaterial.js.map

package/dist/material/terrainmaterial.js.map

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

package/dist/material/unlit.js

@@ -1,6 +1,7 @@
 import { applyMaterialMixins, MeshMaterial } from './meshmaterial.js';
 import { mixinAlbedoColor } from './mixins/albedocolor.js';
 import { mixinVertexColor } from './mixins/vertexcolor.js';
+import { ShaderHelper } from './shader/helper.js';
 
 /**
  * Unlit material
@@ -10,18 +11,20 @@ import { mixinVertexColor } from './mixins/vertexcolor.js';
     constructor(){
         super();
     }
-    vertexShader(scope, ctx) {
-        super.vertexShader(scope, ctx);
-        scope.$inputs.zPos = scope.$builder.vec3().attrib('position');
-        this.transformVertexAndNormal(scope);
+    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)));
     }
-    fragmentShader(scope, ctx) {
-        super.fragmentShader(scope, ctx);
-        let color = this.calculateAlbedoColor(scope, ctx);
+    fragmentShader(scope) {
+        super.fragmentShader(scope);
+        let color = this.calculateAlbedoColor(scope);
         if (this.vertexColor) {
-            color = scope.$builder.mul(color, this.getVertexColor(scope, ctx));
+            color = scope.$builder.mul(color, this.getVertexColor(scope));
         }
-        this.outputFragmentColor(scope, this.needFragmentColor(ctx) ? color : null, ctx);
+        this.outputFragmentColor(scope, scope.$inputs.worldPos, this.needFragmentColor() ? color : null);
     }
 }
 

package/dist/material/unlit.js.map

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

package/dist/posteffect/bloom.js

@@ -2,15 +2,17 @@ import { Application } from '../app.js';
 import { AbstractPostEffect } from './posteffect.js';
 import { Vector4, Vector2 } from '@zephyr3d/base';
 import '../scene/octree.js';
-import '../material/material.js';
-import '@zephyr3d/device';
-import '../shaders/framework.js';
-import '../render/scatteringlut.js';
+import '../material/shader/helper.js';
 import '../material/lambert.js';
 import '../material/blinn.js';
 import '../material/unlit.js';
-import '../material/lightmodel.js';
-import '../render/forward.js';
+import '../material/material.js';
+import '../material/meshmaterial.js';
+import '../material/grassmaterial.js';
+import '../material/terrainmaterial.js';
+import '../material/pbrmr.js';
+import '../material/pbrsg.js';
+import '../render/renderer.js';
 import '../render/sky.js';
 import '../render/clipmap.js';
 import { TemporalCache } from '../render/temporalcache.js';

package/dist/posteffect/bloom.js.map

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

package/dist/posteffect/compositor.js

@@ -2,15 +2,17 @@ import { Application } from '../app.js';
 import { linearToGamma } from '../shaders/misc.js';
 import '@zephyr3d/base';
 import '../scene/octree.js';
-import '../material/material.js';
-import '@zephyr3d/device';
-import '../shaders/framework.js';
-import '../render/scatteringlut.js';
+import '../material/shader/helper.js';
 import '../material/lambert.js';
 import '../material/blinn.js';
 import '../material/unlit.js';
-import '../material/lightmodel.js';
-import '../render/forward.js';
+import '../material/material.js';
+import '../material/meshmaterial.js';
+import '../material/grassmaterial.js';
+import '../material/terrainmaterial.js';
+import '../material/pbrmr.js';
+import '../material/pbrsg.js';
+import '../render/renderer.js';
 import '../render/sky.js';
 import '../render/clipmap.js';
 import { TemporalCache } from '../render/temporalcache.js';
@@ -78,6 +80,12 @@ import '../render/watermesh.js';
         }
     }
     /**
+   * Removes all post effects
+   */ clear() {
+        this._postEffectsOpaque = [];
+        this._postEffectsTransparency = [];
+    }
+    /**
    * Gets all post effects
    */ getPostEffects() {
         return [

package/dist/posteffect/compositor.js.map

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

package/dist/posteffect/posteffect.js

@@ -1,5 +1,5 @@
 import { Application } from '../app.js';
-import { drawFullscreenQuad } from '../render/helper.js';
+import { drawFullscreenQuad } from '../render/fullscreenquad.js';
 
 /**
  * Base class for any type of post effect

package/dist/posteffect/sao.js

@@ -4,16 +4,19 @@ import { AbstractPostEffect } from './posteffect.js';
 import { decodeNormalizedFloatFromRGBA, encodeNormalizedFloatToRGBA } from '../shaders/misc.js';
 import { Vector2, Vector4, Matrix4x4 } from '@zephyr3d/base';
 import { AOBilateralBlurBlitter } from '../blitter/depthlimitedgaussion.js';
-import '../shaders/framework.js';
 import { CopyBlitter } from '../blitter/copy.js';
 import '../scene/octree.js';
-import '../material/material.js';
-import '../render/scatteringlut.js';
+import '../material/shader/helper.js';
 import '../material/lambert.js';
 import '../material/blinn.js';
 import '../material/unlit.js';
-import '../material/lightmodel.js';
-import '../render/forward.js';
+import '../material/material.js';
+import '../material/meshmaterial.js';
+import '../material/grassmaterial.js';
+import '../material/terrainmaterial.js';
+import '../material/pbrmr.js';
+import '../material/pbrsg.js';
+import '../render/renderer.js';
 import '../render/sky.js';
 import '../render/clipmap.js';
 import { TemporalCache } from '../render/temporalcache.js';

package/dist/posteffect/sao.js.map

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

package/dist/posteffect/tonemap.js

@@ -68,12 +68,12 @@ import { linearToGamma } from '../shaders/misc.js';
                         pb.vec3('v')
                     ], function() {
                         this.$l.a = pb.sub(pb.mul(this.v, pb.add(this.v, pb.vec3(0.0245786))), pb.vec3(0.000090537));
-                        this.$l.b = pb.add(pb.mul(this.v, pb.add(pb.mul(this.v, 0.983729), pb.vec3(0.4329510))), pb.vec3(0.238081));
+                        this.$l.b = pb.add(pb.mul(this.v, pb.add(pb.mul(this.v, 0.983729), pb.vec3(0.432951))), pb.vec3(0.238081));
                         this.$return(pb.div(this.a, this.b));
                     });
                     pb.main(function() {
                         this.$l.vSample = pb.textureSample(this.tex, this.$inputs.uv);
-                        this.$l.ACESInputMat = pb.mat3(0.59719, 0.07600, 0.02840, 0.35458, 0.90834, 0.13383, 0.04823, 0.01566, 0.83777);
+                        this.$l.ACESInputMat = pb.mat3(0.59719, 0.076, 0.0284, 0.35458, 0.90834, 0.13383, 0.04823, 0.01566, 0.83777);
                         this.$l.ACESOutputMat = pb.mat3(1.60475, -0.10208, -0.00327, -0.53108, 1.10813, -0.07276, -0.07367, -0.00605, 1.07602);
                         this.$l.color = pb.mul(this.vSample.rgb, pb.div(this.exposure, 0.6));
                         this.color = pb.mul(this.ACESInputMat, this.color);