@zephyr3d/scene 0.1.0

package/dist/material/material.js

@@ -0,0 +1,458 @@
+import { List } from '@zephyr3d/base';
+import { ProgramBuilder } from '@zephyr3d/device';
+import { Application } from '../app.js';
+import { RENDER_PASS_TYPE_FORWARD, RENDER_PASS_TYPE_SHADOWMAP, RENDER_PASS_TYPE_DEPTH_ONLY } from '../values.js';
+
+class InstanceBindGroupPool {
+    _bindGroups;
+    _frameStamp;
+    constructor(){
+        this._bindGroups = [];
+        this._frameStamp = -1;
+    }
+    apply(hash, index, worldMatrices) {
+        const device = Application.instance.device;
+        const maxSize = device.getDeviceCaps().shaderCaps.maxUniformBufferSize;
+        if (device.frameInfo.frameCounter !== this._frameStamp) {
+            this._frameStamp = device.frameInfo.frameCounter;
+            for (const bindGroup of this._bindGroups){
+                bindGroup.freeSize = maxSize;
+            }
+        }
+        let bindGroupIndex = -1;
+        for(let i = 0; i < this._bindGroups.length; i++){
+            if (this._bindGroups[i].freeSize >= worldMatrices.length * 64) {
+                bindGroupIndex = i;
+                break;
+            }
+        }
+        if (bindGroupIndex < 0) {
+            const program = Material.getProgramByHashIndex(hash, index);
+            const bindGroup = program?.bindGroupLayouts[3] ? device.createBindGroup(program.bindGroupLayouts[3]) : null;
+            this._bindGroups.push({
+                bindGroup: bindGroup,
+                freeSize: maxSize
+            });
+            bindGroupIndex = this._bindGroups.length - 1;
+        }
+        const bindGroup = this._bindGroups[bindGroupIndex];
+        const offset = (maxSize - bindGroup.freeSize) / 64;
+        for (const matrix of worldMatrices){
+            bindGroup.bindGroup.setRawData('worldMatrix', maxSize - bindGroup.freeSize, matrix);
+            bindGroup.freeSize -= 64;
+        }
+        device.setBindGroup(3, bindGroup.bindGroup);
+        return offset;
+    }
+}
+/**
+ * Base class for any kind of materials
+ * @public
+ */ class Material {
+    /** @internal */ static _debugChannel = '';
+    /** @internal */ static _nextId = 0;
+    /** @internal */ static _programMap = {};
+    /** @internal */ static _drawableTimestamps = new WeakMap();
+    /** @internal */ static _drawableIterators = new WeakMap();
+    /** @internal */ static _drawableLRU = new List();
+    /** @internal */ static _materialTimestamps = new WeakMap();
+    /** @internal */ static _materialIterators = new WeakMap();
+    /** @internal */ static _materialLRU = new List();
+    /** @internal */ static _gcOptions = {
+        disabled: false,
+        drawableCountThreshold: 500,
+        materialCountThreshold: 200,
+        inactiveTimeDuration: 30000
+    };
+    /** @internal */ static _boneMatrixTextureSampler = null;
+    /** @internal */ static _instanceBindGroupPool = new InstanceBindGroupPool();
+    /** @internal */ static _drawableBindGroupMap = new WeakMap();
+    /** @internal */ _hash;
+    /** @internal */ _renderStateSet;
+    /** @internal */ _bindGroupMap;
+    /** @internal */ _optionTag;
+    /** @internal */ _materialBindGroup;
+    /** @internal */ _id;
+    /**
+   * Creates an instance of material
+   */ constructor(){
+        this._id = ++Material._nextId;
+        this._hash = [];
+        this._renderStateSet = null;
+        this._bindGroupMap = {};
+        this._optionTag = 0;
+        this._materialBindGroup = null;
+    }
+    /** Debug channel */ static get debugChannel() {
+        return this._debugChannel;
+    }
+    static set debugChannel(val) {
+        this._debugChannel = val;
+    }
+    /** Unique identifier of the material */ get id() {
+        return this._id;
+    }
+    /** @internal */ getHash(renderPassType) {
+        if (this._hash[renderPassType] === void 0) {
+            this._hash[renderPassType] = this.createHash(renderPassType);
+        }
+        return this._hash[renderPassType];
+    }
+    /** Render states associated to this material */ get stateSet() {
+        if (!this._renderStateSet) {
+            this._renderStateSet = this.createRenderStateSet();
+        }
+        return this._renderStateSet;
+    }
+    set stateSet(stateset) {
+        this._renderStateSet = stateset;
+    }
+    /** Returns true if this is a transparency material */ isTransparent() {
+        return false;
+    }
+    /** Returns true if shading of the material will be affected by lights  */ supportLighting() {
+        return true;
+    }
+    /**
+   * Draws a primitive using this material
+   * @param primitive - The prmitive to be drawn
+   * @param ctx - The context of current drawing task
+   */ draw(primitive, ctx) {
+        if (this.beginDraw(ctx)) {
+            if (ctx.instanceData?.worldMatrices.length > 1) {
+                primitive.drawInstanced(ctx.instanceData.worldMatrices.length);
+            } else {
+                primitive.draw();
+            }
+            this.endDraw();
+        }
+    }
+    /**
+   * Prepares for drawing
+   * @param ctx - The context of current drawing task
+   * @returns true if succeeded, otherwise false
+   */ beginDraw(ctx) {
+        const numInstances = ctx.instanceData?.worldMatrices?.length || 1;
+        const device = Application.instance.device;
+        const programInfo = this.getOrCreateProgram(ctx);
+        if (programInfo) {
+            const hash = programInfo.hash;
+            if (!programInfo.programs[ctx.renderPass.type]) {
+                return null;
+            }
+            this._materialBindGroup = this.applyMaterialBindGroups(ctx, hash);
+            if (numInstances > 1) {
+                this.applyInstanceBindGroups(ctx, hash);
+            } else {
+                this.applyDrawableBindGroups(ctx, hash);
+            }
+            ctx.renderPass.applyRenderStates(device, this.stateSet, ctx);
+            device.setProgram(programInfo.programs[ctx.renderPass.type]);
+            Material._drawableTimestamps.set(ctx.target, ctx.timestamp);
+            Material.lruPutDrawable(ctx.target);
+            Material._materialTimestamps.set(this, ctx.timestamp);
+            Material.lruPutMaterial(this);
+            return true;
+        }
+        return false;
+    }
+    /**
+   * Ends drawing a primitive
+   */ endDraw() {
+        this._materialBindGroup = null;
+    }
+    /**
+   * Gets the bind group of this material
+   * @returns The bind group of this material
+   */ getMaterialBindGroup() {
+        return this._materialBindGroup;
+    }
+    /**
+   * Sets all uniform values to the bind group of the material if needed
+   * @param bindGroup - The bind group of the material
+   * @param ctx - The context of current drawing task
+   * @param needUpdate - true if the uniform values needs to update
+   */ applyUniforms(bindGroup, ctx, needUpdate) {
+        if (needUpdate) {
+            this._applyUniforms(bindGroup, ctx);
+        }
+    }
+    /**
+   * Fetch the gpu program of the material for drawing
+   * @param ctx - The context for current drawing task
+   * @returns Information of the gpu program
+   */ getOrCreateProgram(ctx) {
+        const programMap = Material._programMap;
+        const renderPassType = ctx.renderPass.type;
+        const hash = `${Material.debugChannel}:${this.getHash(renderPassType)}:${!!ctx.target.getBoneMatrices()}:${Number(!!(ctx.instanceData?.worldMatrices.length > 1))}:${ctx.renderPassHash}`;
+        let programInfo = programMap[hash];
+        if (!programInfo || !programInfo.programs[renderPassType] || programInfo.programs[renderPassType].disposed) {
+            console.time(hash);
+            const program = this.createProgram(ctx);
+            console.timeEnd(hash);
+            if (!programInfo) {
+                programInfo = {
+                    programs: [
+                        null,
+                        null,
+                        null
+                    ],
+                    hash
+                };
+                programMap[hash] = programInfo;
+            }
+            programInfo.programs[renderPassType] = program;
+        }
+        return programInfo || null;
+    }
+    dispose() {
+        this.clearBindGroupCache();
+    }
+    /**
+   * Sets the options of garbage collection
+   * @param opt - The options to set
+   */ static setGCOptions(opt) {
+        this._gcOptions = Object.assign({}, this._gcOptions, opt || {});
+    }
+    /**
+   * Gets the options of garbage collection
+   * @returns The options of garbage collection
+   */ static getGCOptions() {
+        return this._gcOptions;
+    }
+    /**
+   * Performs a garbage collection for this material
+   * @param ts - Current time stamp
+   * @returns How many bind groups have been garbage collected
+   */ static garbageCollect(ts) {
+        let n = 0;
+        ts -= this._gcOptions.inactiveTimeDuration;
+        while(this._drawableLRU.length > this._gcOptions.drawableCountThreshold){
+            const iter = this._drawableLRU.begin();
+            if (this._drawableTimestamps.get(iter.data) < ts) {
+                const bindGroups = this._drawableBindGroupMap.get(iter.data);
+                if (bindGroups) {
+                    for(const k in bindGroups){
+                        for (const bindGroup of bindGroups[k].bindGroup){
+                            if (bindGroup) {
+                                this.bindGroupGarbageCollect(bindGroup);
+                                n++;
+                            }
+                        }
+                    }
+                }
+                this._drawableBindGroupMap.delete(iter.data);
+                this._drawableIterators.delete(iter.data);
+                this._drawableLRU.remove(iter);
+            } else {
+                break;
+            }
+        }
+        while(this._materialLRU.length > this._gcOptions.materialCountThreshold){
+            const iter = this._materialLRU.begin();
+            const mat = iter.data;
+            if (this._materialTimestamps.get(mat) < ts && mat._bindGroupMap) {
+                n += mat.clearBindGroupCache();
+                this._materialIterators.delete(mat);
+                this._materialLRU.remove(iter);
+            } else {
+                break;
+            }
+        }
+        if (n > 0 && this._gcOptions.verbose) {
+            console.log(`INFO: ${n} bind groups have been garbage collected`);
+        }
+        return n;
+    }
+    /** @internal */ optionChanged(changeHash) {
+        this._optionTag++;
+        if (changeHash) {
+            this._hash = [];
+        }
+    }
+    /** @internal */ static getProgramByHashIndex(hash, index) {
+        return this._programMap[hash].programs[index];
+    }
+    /** @internal */ applyMaterialBindGroups(ctx, hash) {
+        const index = ctx.renderPass.type;
+        let bindGroupInfo = this._bindGroupMap[hash];
+        if (!bindGroupInfo) {
+            // bindGroups not created or have been garbage collected
+            const materialBindGroup = [
+                RENDER_PASS_TYPE_FORWARD,
+                RENDER_PASS_TYPE_SHADOWMAP,
+                RENDER_PASS_TYPE_DEPTH_ONLY
+            ].map((k)=>{
+                const program = Material._programMap[hash].programs[k];
+                return program?.bindGroupLayouts[2] ? Application.instance.device.createBindGroup(program.bindGroupLayouts[2]) : null;
+            });
+            bindGroupInfo = this._bindGroupMap[hash] = {
+                materialBindGroup,
+                bindGroupTag: [
+                    0,
+                    0,
+                    0
+                ],
+                materialTag: [
+                    -1,
+                    -1,
+                    -1
+                ]
+            };
+        }
+        const bindGroup = bindGroupInfo.materialBindGroup[index];
+        if (bindGroup) {
+            this.applyUniforms(bindGroup, ctx, bindGroupInfo.materialTag[index] < this._optionTag || bindGroupInfo.bindGroupTag[index] !== bindGroup.cid);
+            bindGroupInfo.materialTag[index] = this._optionTag;
+            bindGroupInfo.bindGroupTag[index] = bindGroup.cid;
+            Application.instance.device.setBindGroup(2, bindGroup);
+        } else {
+            Application.instance.device.setBindGroup(2, null);
+        }
+        return bindGroup;
+    }
+    /** @internal */ getDrawableBindGroup(ctx, hash) {
+        let drawableBindGroups = Material._drawableBindGroupMap.get(ctx.target);
+        if (!drawableBindGroups) {
+            drawableBindGroups = {};
+            Material._drawableBindGroupMap.set(ctx.target, drawableBindGroups);
+        }
+        let drawableBindGroup = drawableBindGroups[hash];
+        if (!drawableBindGroup) {
+            const bindGroup = [
+                RENDER_PASS_TYPE_FORWARD,
+                RENDER_PASS_TYPE_SHADOWMAP,
+                RENDER_PASS_TYPE_DEPTH_ONLY
+            ].map((k)=>{
+                const program = Material._programMap[hash].programs[k];
+                return program?.bindGroupLayouts[1] ? Application.instance.device.createBindGroup(program.bindGroupLayouts[1]) : null;
+            });
+            drawableBindGroup = drawableBindGroups[hash] = {
+                bindGroup,
+                bindGroupTag: [
+                    0,
+                    0,
+                    0
+                ],
+                xformTag: [
+                    -1,
+                    -1,
+                    -1
+                ]
+            };
+        }
+        return drawableBindGroup;
+    }
+    /** @internal */ applyInstanceBindGroups(ctx, hash) {
+        const index = ctx.renderPass.type;
+        const offset = Material._instanceBindGroupPool.apply(hash, index, ctx.instanceData.worldMatrices);
+        const bindGroup = this.getDrawableBindGroup(ctx, hash).bindGroup?.[index];
+        if (bindGroup) {
+            bindGroup.setValue('instanceBufferOffset', offset);
+            Application.instance.device.setBindGroup(1, bindGroup);
+        } else {
+            Application.instance.device.setBindGroup(1, null);
+        }
+    }
+    /** @internal */ applyDrawableBindGroups(ctx, hash) {
+        const device = Application.instance.device;
+        const index = ctx.renderPass.type;
+        const drawableBindGroup = this.getDrawableBindGroup(ctx, hash);
+        if (drawableBindGroup.bindGroup) {
+            const bindGroup = drawableBindGroup.bindGroup[index];
+            if (drawableBindGroup.xformTag[index] < ctx.target.getXForm().getTag() || drawableBindGroup.bindGroupTag[index] !== bindGroup.cid) {
+                bindGroup.setValue('worldMatrix', ctx.target.getXForm().worldMatrix);
+                drawableBindGroup.xformTag[index] = ctx.target.getXForm().getTag();
+                drawableBindGroup.bindGroupTag[index] = bindGroup.cid;
+            }
+            const boneMatrices = ctx.target.getBoneMatrices();
+            if (boneMatrices) {
+                if (!Material._boneMatrixTextureSampler) {
+                    Material._boneMatrixTextureSampler = device.createSampler({
+                        magFilter: 'nearest',
+                        minFilter: 'nearest',
+                        mipFilter: 'none'
+                    });
+                }
+                bindGroup.setTexture('boneMatrices', boneMatrices);
+                bindGroup.setValue('boneTextureSize', boneMatrices.width);
+                bindGroup.setValue('invBindMatrix', ctx.target.getInvBindMatrix());
+            }
+            device.setBindGroup(1, bindGroup);
+        } else {
+            device.setBindGroup(1, null);
+        }
+    }
+    /** @internal */ createHash(renderPassType) {
+        return `${this.constructor.name}|${this._createHash(renderPassType)}`;
+    }
+    /** @internal */ clearBindGroupCache() {
+        let n = 0;
+        for(const k in this._bindGroupMap){
+            for (const bindGroup of this._bindGroupMap[k].materialBindGroup){
+                if (bindGroup) {
+                    Material.bindGroupGarbageCollect(bindGroup);
+                    n++;
+                }
+            }
+        }
+        this._bindGroupMap = {};
+        return n;
+    }
+    /** @internal */ static bindGroupGarbageCollect(bindGroup) {
+        const layout = bindGroup.getLayout();
+        for (const entry of layout.entries){
+            if (entry.buffer) {
+                const buffer = bindGroup.getBuffer(entry.name);
+                if (buffer) {
+                    buffer.dispose();
+                    bindGroup.setBuffer(entry.name, null);
+                }
+            }
+        }
+    }
+    /** @internal */ static lruPutDrawable(drawable) {
+        const iter = this._drawableIterators.get(drawable);
+        if (iter) {
+            this._drawableLRU.remove(iter);
+        }
+        this._drawableIterators.set(drawable, this._drawableLRU.append(drawable));
+    }
+    /** @internal */ static lruPutMaterial(material) {
+        const iter = this._materialIterators.get(material);
+        if (iter) {
+            this._materialLRU.remove(iter);
+        }
+        this._materialIterators.set(material, this._materialLRU.append(material));
+    }
+    /** @internal */ createProgram(ctx) {
+        const pb = new ProgramBuilder(Application.instance.device);
+        return this._createProgram(pb, ctx);
+    }
+    /** @internal */ createRenderStateSet() {
+        return Application.instance.device.createRenderStateSet();
+    }
+    /**
+   * Creates the shader program
+   * @param pb - The program builder
+   * @param ctx - The drawing context
+   * @param func - The material func
+   * @returns The created shader program
+   */ _createProgram(pb, ctx) {
+        return null;
+    }
+    /**
+   * Applies uniform values
+   * @param bindGroup - The bind group
+   * @param ctx - The drawing context
+   */ _applyUniforms(bindGroup, ctx) {}
+    /**
+   * Calculates the hash code of the shader program
+   * @returns The hash code
+   */ _createHash(renderPassType) {
+        return '';
+    }
+}
+
+export { Material };
+//# sourceMappingURL=material.js.map

package/dist/material/material.js.map

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