@zephyr3d/scene 0.1.2 → 0.2.0

package/dist/material/shader/helper.js.map

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

package/dist/material/terrainmat.js

@@ -0,0 +1,357 @@
+import { applyMaterialMixins, MeshMaterial } from './meshmaterial.js';
+import { mixinPBRMetallicRoughness } from './mixins/pbr/metallicroughness.js';
+import { mixinLight } from './mixins/lit.js';
+import { Application } from '../app.js';
+import { Vector4 } from '@zephyr3d/base';
+import { drawFullscreenQuad } from '../render/helper.js';
+
+class NewTerrainMaterial 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;
+        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(`TerrainLightModel(): Invalid detail textures`);
+            }
+            if (this._numDetailMaps > 4) {
+                throw new Error(`TerrainLightModel(): The maximum detail levels is 4`);
+            }
+            if (!this._options.detailMaps.uvScale || this._options.detailMaps.uvScale.length !== this._numDetailMaps) {
+                throw new Error(`TerrainLightModel(): 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(`TerrainLightModel(): 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(`TerrainLightModel(): 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(`TerrainLightModel(): 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(`TerrainLightModel(): 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(`TerrainLightModel(): 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(`TerrainLightModel(): Invalid detail normal texture`);
+                    }
+                    normalTextures[i].samplerOptions = {
+                        addressU: 'repeat',
+                        addressV: 'repeat'
+                    };
+                }
+            } else if (normalTextures) {
+                normalTextures.samplerOptions = {
+                    addressU: 'repeat',
+                    addressV: 'repeat'
+                };
+            }
+        }
+        this.vertexNormal = true;
+        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);
+    }
+    /**
+   * {@inheritDoc Material.isTransparent}
+   * @override
+   */ isTransparent() {
+        return false;
+    }
+    /**
+   * {@inheritDoc Material.supportLighting}
+   * @override
+   */ supportLighting() {
+        return true;
+    }
+    applyUniformValues(bindGroup, ctx) {
+        super.applyUniformValues(bindGroup, ctx);
+        if (this.needFragmentColor(ctx)) {
+            bindGroup.setValue('terrainInfo', this._terrainInfo);
+            if (this._options) {
+                bindGroup.setValue('kkDetailScales', this._uvScales);
+                bindGroup.setTexture('kkSplatMap', this._options.splatMap);
+                if (Array.isArray(this._options.detailMaps.albedoTextures)) {
+                    for(let i = 0; i < this._numDetailMaps; i++){
+                        bindGroup.setTexture(`kkDetailAlbedoMap${i}`, this._options.detailMaps.albedoTextures[i]);
+                    }
+                } else {
+                    bindGroup.setTexture('kkDetailAlbedoMap', this._options.detailMaps.albedoTextures);
+                }
+                if (Array.isArray(this._options.detailMaps.normalTextures)) {
+                    for(let i = 0; i < this._numDetailMaps; i++){
+                        bindGroup.setTexture(`kkDetailNormalMap${i}`, this._options.detailMaps.normalTextures[i]);
+                    }
+                } else {
+                    bindGroup.setTexture('kkDetailNormalMap', this._options.detailMaps.normalTextures);
+                }
+            }
+        }
+    }
+    /** @ts-ignore */ getMetallicRoughnessTexCoord(scope) {
+        return scope.$inputs.mapUV;
+    }
+    /** @ts-ignore */ getNormalTexCoord(scope) {
+        return scope.$inputs.mapUV;
+    }
+    /** @ts-ignore */ getAlbedoTexCoord(scope) {
+        return scope.$inputs.mapUV;
+    }
+    calculateAlbedoColor(scope, ctx) {
+        if (!this._options) {
+            return super.calculateAlbedoColor(scope, ctx);
+        }
+        const that = this;
+        const pb = scope.$builder;
+        const funcName = 'getTerrainAlbedo';
+        pb.func(funcName, [], function() {
+            this.$l.mask = pb.textureSample(this.kkSplatMap, 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.kkDetailScales.at(i).x);
+                const sample = useTextureArray ? pb.textureArraySample(this.kkDetailAlbedoMap, uv, i).rgb : pb.textureSample(this[`kkDetailAlbedoMap${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]();
+    }
+    sampleNormalMapWithTBN(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));
+    }
+    calculateNormalAndTBN(scope, ctx) {
+        scope.$l.normalInfo = super.calculateNormalAndTBN(scope, ctx);
+        const pb = scope.$builder;
+        let calcNormal = false;
+        if (this._options && this._options.detailMaps.normalTextures) {
+            scope.$l.detailMask = pb.textureSample(scope.kkSplatMap, scope.$inputs.mapUV);
+            if (Array.isArray(this._options.detailMaps.normalTextures)) {
+                for(let i = 0; i < this._options.detailMaps.normalTextures.length; i++){
+                    const tex = scope[`kkDetailNormalMap${i}`];
+                    const scale = scope.kkDetailScales.at(i).y;
+                    const texCoord = pb.mul(scope.$inputs.mapUV, scope.kkDetailScales.at(i).x);
+                    scope.normalInfo.normal = pb.add(scope.normalInfo.normal, pb.mul(this.sampleNormalMapWithTBN(scope, tex, texCoord, scale, scope.normalInfo.TBN), scope.detailMask[i]));
+                    calcNormal = true;
+                }
+            } else {
+                const tex = scope.kkDetailNormalMap;
+                for(let i = 0; i < this._numDetailMaps; i++){
+                    const scale = scope.kkDetailScales.at(i).y;
+                    const texCoord = pb.mul(scope.$inputs.mapUV, scope.kkDetailScales.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);
+        }
+        return scope.normalInfo;
+    }
+    vertexShader(scope, ctx) {
+        super.vertexShader(scope, ctx);
+        const pb = scope.$builder;
+        scope.$inputs.zPos = pb.vec3().attrib('position');
+        if (this.needFragmentColor(ctx)) {
+            scope.$g.terrainInfo = pb.vec4().uniform(2);
+            scope.$outputs.mapUV = pb.div(scope.$inputs.zPos.xz, scope.terrainInfo.xy);
+        }
+        this.transformVertexAndNormal(scope);
+    }
+    fragmentShader(scope, ctx) {
+        super.fragmentShader(scope, ctx);
+        const pb = scope.$builder;
+        const that = this;
+        if (this.needFragmentColor(ctx)) {
+            if (this._options) {
+                scope.$g.kkDetailScales = pb.vec4[this._numDetailMaps]().uniform(2);
+                scope.$g.kkSplatMap = pb.tex2D().uniform(2);
+                const useAlbedoTextureArray = !Array.isArray(that._options.detailMaps.albedoTextures);
+                if (useAlbedoTextureArray) {
+                    scope.$g.kkDetailAlbedoMap = pb.tex2DArray().uniform(2);
+                } else {
+                    for(let i = 0; i < that._numDetailMaps; i++){
+                        scope.$g[`kkDetailAlbedoMap${i}`] = pb.tex2D().uniform(2);
+                    }
+                }
+                const useNormalTextureArray = !Array.isArray(that._options.detailMaps.normalTextures);
+                if (useNormalTextureArray) {
+                    scope.$g.kkDetailNormalMap = pb.tex2DArray().uniform(2);
+                } else {
+                    for(let i = 0; i < that._numDetailMaps; i++){
+                        scope.$g[`kkDetailNormalMap${i}`] = pb.tex2D().uniform(2);
+                    }
+                }
+            }
+            scope.$l.albedo = this.calculateAlbedoColor(scope, ctx);
+            scope.$l.normalInfo = this.calculateNormalAndTBN(scope, ctx);
+            scope.$l.normal = scope.normalInfo.normal;
+            scope.$l.viewVec = this.calculateViewVector(scope);
+            scope.$l.pbrData = this.getCommonData(scope, scope.albedo, scope.viewVec, scope.normalInfo.TBN);
+            scope.$l.lightingColor = pb.vec3(0);
+            scope.$l.emissiveColor = this.calculateEmissiveColor(scope);
+            this.indirectLighting(scope, scope.normal, scope.viewVec, scope.pbrData, scope.lightingColor, ctx);
+            this.forEachLight(scope, ctx, 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, ctx));
+                }
+                that.directLighting(this, this.lightDir, this.lightColor, this.normal, this.viewVec, this.pbrData, this.lightingColor);
+            });
+            scope.$l.litColor = pb.add(scope.lightingColor, scope.emissiveColor);
+            this.outputFragmentColor(scope, pb.vec4(scope.litColor, scope.albedo.a), ctx);
+        } else {
+            this.outputFragmentColor(scope, null, ctx);
+        }
+    }
+    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 (!NewTerrainMaterial._metallicRoughnessGenerationProgram) {
+            NewTerrainMaterial._metallicRoughnessGenerationProgram = device.buildRenderProgram({
+                vertex (pb) {
+                    this.$inputs.pos = pb.vec2().attrib('position');
+                    this.$outputs.uv = pb.vec2();
+                    pb.main(function() {
+                        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);
+                        }
+                    });
+                },
+                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() {
+                        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);
+                    });
+                }
+            });
+            NewTerrainMaterial._metallicRoughnessGenerationBindGroup = device.createBindGroup(NewTerrainMaterial._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 = NewTerrainMaterial._metallicRoughnessGenerationProgram;
+        const bindgroup = NewTerrainMaterial._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 { NewTerrainMaterial };
+//# sourceMappingURL=terrainmat.js.map

package/dist/material/terrainmat.js.map

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