@zephyr3d/scene 0.3.1 → 0.5.0

package/dist/render/render_queue.js

@@ -1,84 +1,98 @@
 import { Application } from '../app.js';
+import { Vector3 } from '@zephyr3d/base';
 import { QUEUE_TRANSPARENT } from '../values.js';
 import { ProgramBuilder } from '@zephyr3d/device';
 import { ShaderHelper } from '../material/shader/helper.js';
 import '../material/lambert.js';
 import '../material/blinn.js';
 import '../material/unlit.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 '@zephyr3d/base';
+import { RenderBundleWrapper } from './renderbundle_wrapper.js';
 
+const maxBufferSizeInFloats = 65536 / 4;
 /** @internal */ class InstanceBindGroupAllocator {
     static _instanceBindGroupLayout = null;
-    _usedBindGroupList = [];
-    _freeBindGroupList = [];
+    _bindGroupList = [];
     _allocFrameStamp;
     constructor(){
         this._allocFrameStamp = -1;
-        this._usedBindGroupList = [];
-        this._freeBindGroupList = [];
+        this._bindGroupList = [];
     }
-    allocateInstanceBindGroup(framestamp) {
+    allocateInstanceBindGroup(framestamp, sizeInFloats) {
         // Reset if render frame changed
         if (this._allocFrameStamp !== framestamp) {
             this._allocFrameStamp = framestamp;
-            this._freeBindGroupList.push(...this._usedBindGroupList);
-            this._usedBindGroupList.length = 0;
+            for (const k of this._bindGroupList){
+                k.offset = 0;
+            }
         }
-        let bindGroup = this._freeBindGroupList.pop();
-        if (!bindGroup) {
-            if (!InstanceBindGroupAllocator._instanceBindGroupLayout) {
-                const buildInfo = new ProgramBuilder(Application.instance.device).buildRender({
-                    vertex (pb) {
-                        this[ShaderHelper.getWorldMatricesUniformName()] = pb.vec4[65536 >> 4]().uniformBuffer(3);
-                        pb.main(function() {});
-                    },
-                    fragment (pb) {
-                        this[ShaderHelper.getWorldMatricesUniformName()] = pb.vec4[65536 >> 4]().uniformBuffer(3);
-                        pb.main(function() {});
-                    }
-                });
-                InstanceBindGroupAllocator._instanceBindGroupLayout = buildInfo[2][3];
+        for (const k of this._bindGroupList){
+            if (k.offset + sizeInFloats <= maxBufferSizeInFloats) {
+                k.dirty = true;
+                return k;
             }
-            bindGroup = {
-                bindGroup: Application.instance.device.createBindGroup(InstanceBindGroupAllocator._instanceBindGroupLayout),
-                buffer: new Float32Array(65536 >> 2),
-                dirty: true
-            };
-        } else {
-            bindGroup.dirty = true;
         }
-        this._usedBindGroupList.push(bindGroup);
+        if (!InstanceBindGroupAllocator._instanceBindGroupLayout) {
+            const buildInfo = new ProgramBuilder(Application.instance.device).buildRender({
+                vertex (pb) {
+                    this[ShaderHelper.getInstanceDataUniformName()] = pb.vec4[65536 >> 4]().uniformBuffer(3);
+                    pb.main(function() {});
+                },
+                fragment (pb) {
+                    pb.main(function() {});
+                }
+            });
+            InstanceBindGroupAllocator._instanceBindGroupLayout = buildInfo[2][3];
+        }
+        const bindGroup = {
+            bindGroup: Application.instance.device.createBindGroup(InstanceBindGroupAllocator._instanceBindGroupLayout),
+            buffer: new Float32Array(maxBufferSizeInFloats),
+            offset: 0,
+            dirty: true
+        };
+        this._bindGroupList.push(bindGroup);
         return bindGroup;
     }
 }
-const maxUniformSize = 65536 >> 2;
 const defaultInstanceBindGroupAlloator = new InstanceBindGroupAllocator();
 /**
  * A queue that contains the items to be rendered
  * @public
  */ class RenderQueue {
-    /** @internal */ _itemLists;
+    /** @internal */ _itemList;
     /** @internal */ _renderPass;
     /** @internal */ _shadowedLightList;
     /** @internal */ _unshadowedLightList;
     /** @internal */ _sunLight;
     /** @internal */ _bindGroupAllocator;
+    /** @internal */ _ref;
+    /** @internal */ _instanceInfo;
+    /** @internal */ _needSceneColor;
+    /** @internal */ _drawTransparent;
+    /** @internal */ _objectColorMaps;
     /**
    * Creates an instance of a render queue
    * @param renderPass - The render pass to which the render queue belongs
    */ constructor(renderPass, bindGroupAllocator){
         this._bindGroupAllocator = bindGroupAllocator ?? defaultInstanceBindGroupAlloator;
-        this._itemLists = {};
+        this._itemList = null;
         this._renderPass = renderPass;
         this._shadowedLightList = [];
         this._unshadowedLightList = [];
         this._sunLight = null;
+        this._ref = {
+            ref: this
+        };
+        this._instanceInfo = new Map();
+        this._needSceneColor = false;
+        this._drawTransparent = false;
+        this._objectColorMaps = [
+            new Map()
+        ];
     }
     /** The sun light */ get sunLight() {
         return this._sunLight;
@@ -86,13 +100,19 @@ const defaultInstanceBindGroupAlloator = new InstanceBindGroupAllocator();
     set sunLight(light) {
         this._sunLight = light;
     }
+    /** Whether this render queue requires scene color pass */ get needSceneColor() {
+        return this._needSceneColor;
+    }
+    /** Whether this render queue has transparent objects to be drawn */ get drawTransparent() {
+        return this._drawTransparent;
+    }
     /** The render pass to which the render queue belongs */ get renderPass() {
         return this._renderPass;
     }
     /**
    * Gets the items of the render queue
-   */ get items() {
-        return this._itemLists;
+   */ get itemList() {
+        return this._itemList;
     }
     /**
    * Gets the shadowed lights
@@ -105,6 +125,18 @@ const defaultInstanceBindGroupAlloator = new InstanceBindGroupAllocator();
         return this._unshadowedLightList;
     }
     /**
+   * Gets the indirect reference of this
+   */ get ref() {
+        return this._ref;
+    }
+    /**
+   * Gets the instance information for given drawable object
+   * @param drawable - The drawable object
+   * @returns The instane information for given drawable object, null if no exists
+   */ getInstanceInfo(drawable) {
+        return this._instanceInfo.get(drawable);
+    }
+    /**
    * Gets the maximum batch size of a given device
    * @returns The maximum batch size of the device
    *
@@ -129,108 +161,263 @@ const defaultInstanceBindGroupAlloator = new InstanceBindGroupAllocator();
    * Push items from another render queue
    * @param queue - The render queue to be pushed
    */ pushRenderQueue(queue) {
-        if (queue && queue !== this) {
-            for(const k in queue._itemLists){
-                const l = queue._itemLists[k];
-                if (l) {
-                    let list = this._itemLists[k];
-                    if (!list) {
-                        list = {
-                            opaqueList: [],
-                            opaqueInstanceList: {},
-                            transList: [],
-                            transInstanceList: {}
-                        };
-                        this._itemLists[k] = list;
-                    }
-                    list.opaqueList.push(...l.opaqueList);
-                    list.transList.push(...l.transList);
-                }
-            }
+        const newItemLists = queue._itemList;
+        if (!newItemLists) {
+            return;
         }
+        if (!this._itemList) {
+            this._itemList = this.newRenderItemList();
+        }
+        this._itemList.opaque.lit.push(...newItemLists.opaque.lit);
+        this._itemList.opaque.unlit.push(...newItemLists.opaque.unlit);
+        this._itemList.transmission.lit.push(...newItemLists.transmission.lit);
+        this._itemList.transmission.unlit.push(...newItemLists.transmission.unlit);
+        this._itemList.transparent.lit.push(...newItemLists.transparent.lit);
+        this._itemList.transparent.unlit.push(...newItemLists.transparent.unlit);
+        this._needSceneColor ||= queue._needSceneColor;
+        this._drawTransparent ||= queue._drawTransparent;
+        this._objectColorMaps.push(...queue._objectColorMaps);
     }
     /**
    * Push an item to the render queue
    * @param camera - The camera for drawing the item
    * @param drawable - The object to be drawn
-   * @param renderOrder - Render order of the object
-   */ push(camera, drawable, renderOrder) {
+   */ push(camera, drawable) {
         if (drawable) {
-            let itemList = this._itemLists[renderOrder];
-            if (!itemList) {
-                itemList = {
-                    opaqueList: [],
-                    opaqueInstanceList: {},
-                    transList: [],
-                    transInstanceList: {}
-                };
-                this._itemLists[renderOrder] = itemList;
+            if (!this._itemList) {
+                this._itemList = this.newRenderItemList();
             }
             const trans = drawable.getQueueType() === QUEUE_TRANSPARENT;
-            const list = trans ? itemList.transList : itemList.opaqueList;
+            const unlit = drawable.isUnlit();
+            const transmission = !trans && drawable.needSceneColor();
+            this._needSceneColor ||= transmission;
+            this._drawTransparent ||= trans;
+            if (camera.enablePicking) {
+                drawable.getMaterial().objectColor = drawable.getObjectColor();
+                this._objectColorMaps[0].set(drawable.getId(), drawable);
+            }
             if (drawable.isBatchable()) {
-                const instanceList = trans ? itemList.transInstanceList : itemList.opaqueInstanceList;
+                const instanceList = trans ? unlit ? this._itemList.transparent.unlit[0].instanceList : this._itemList.transparent.lit[0].instanceList : unlit ? transmission ? this._itemList.transmission.unlit[0].instanceList : this._itemList.opaque.unlit[0].instanceList : transmission ? this._itemList.transmission.lit[0].instanceList : this._itemList.opaque.lit[0].instanceList;
                 const hash = drawable.getInstanceId(this._renderPass);
-                const index = instanceList[hash];
-                if (index === undefined || list[index].instanceData.currentSize + list[index].instanceData.stride > list[index].instanceData.maxSize) {
-                    instanceList[hash] = list.length;
-                    const bindGroup = this._bindGroupAllocator.allocateInstanceBindGroup(Application.instance.device.frameInfo.frameCounter);
-                    drawable.setInstanceDataBuffer(this._renderPass, bindGroup, 0);
-                    bindGroup.buffer.set(drawable.getXForm().worldMatrix);
-                    let currentSize = 4;
-                    const instanceUniforms = drawable.getInstanceUniforms();
-                    if (instanceUniforms) {
-                        bindGroup.buffer.set(instanceUniforms, currentSize * 4);
-                        currentSize += instanceUniforms.length >> 2;
-                    }
-                    const maxSize = Math.floor(maxUniformSize / currentSize);
-                    list.push({
-                        drawable,
-                        sortDistance: drawable.getSortDistance(camera),
-                        instanceData: {
-                            bindGroup,
-                            currentSize,
-                            maxSize,
-                            stride: currentSize,
-                            hash: hash
-                        }
-                    });
-                } else {
-                    const instanceData = list[index].instanceData;
-                    drawable.setInstanceDataBuffer(this._renderPass, instanceData.bindGroup, instanceData.currentSize * 4);
-                    instanceData.bindGroup.buffer.set(drawable.getXForm().worldMatrix, instanceData.currentSize * 4);
-                    instanceData.currentSize += 4;
-                    const instanceUniforms = drawable.getInstanceUniforms();
-                    if (instanceUniforms) {
-                        instanceData.bindGroup.buffer.set(instanceUniforms, instanceData.currentSize * 4);
-                        instanceData.currentSize += instanceUniforms.length >> 2;
-                    }
+                let drawableList = instanceList[hash];
+                if (!drawableList) {
+                    drawableList = [];
+                    instanceList[hash] = drawableList;
                 }
+                drawableList.push(drawable);
             } else {
-                list.push({
+                const list = trans ? unlit ? this._itemList.transparent.unlit[0] : this._itemList.transparent.lit[0] : unlit ? transmission ? this._itemList.transmission.unlit[0] : this._itemList.opaque.unlit[0] : transmission ? this._itemList.transmission.lit[0] : this._itemList.opaque.lit[0];
+                const skinAnimation = !!drawable.getBoneMatrices();
+                const morphAnimation = !!drawable.getMorphData();
+                let queue;
+                if (skinAnimation && morphAnimation) {
+                    queue = list.skinAndMorphItemList;
+                } else if (skinAnimation) {
+                    queue = list.skinItemList;
+                } else if (morphAnimation) {
+                    queue = list.morphItemList;
+                } else {
+                    queue = list.itemList;
+                }
+                this.binaryInsert(queue, {
                     drawable,
                     sortDistance: drawable.getSortDistance(camera),
                     instanceData: null
                 });
+                drawable.applyTransformUniforms(this);
+                const mat = drawable.getMaterial();
+                if (mat) {
+                    list.materialList.add(mat.coreMaterial);
+                }
             }
+            drawable.pushRenderQueueRef(this._ref);
         }
     }
+    /** @internal */ getDrawableByColor(c) {
+        const id = (c[0] << 24) + (c[1] << 16) + (c[2] << 8) + c[3];
+        for (const m of this._objectColorMaps){
+            const drawable = m.get(id);
+            if (drawable) {
+                return drawable;
+            }
+        }
+        return null;
+    }
     /**
    * Removes all items in the render queue
    */ reset() {
-        this._itemLists = {};
+        this._itemList = null;
         this._shadowedLightList = [];
         this._unshadowedLightList = [];
         this._sunLight = null;
+        this._needSceneColor = false;
+        this._drawTransparent = false;
+    }
+    /** @internal */ dispose() {
+        this._ref.ref = null;
+        this._ref = null;
+        this.reset();
+    }
+    /** @internal */ end(camera, createRenderBundles) {
+        const frameCounter = Application.instance.device.frameInfo.frameCounter;
+        const itemList = this._itemList;
+        if (!this.itemList) {
+            return this;
+        }
+        const lists = [
+            itemList.opaque.lit,
+            itemList.opaque.unlit,
+            itemList.transmission.lit,
+            itemList.transmission.unlit,
+            itemList.transparent.lit,
+            itemList.transparent.unlit
+        ];
+        for(let i = 0; i < lists.length; i++){
+            const list = lists[i];
+            for (const info of list){
+                if (info.renderQueue !== this) {
+                    continue;
+                }
+                const instanceList = info.instanceList;
+                for(const x in instanceList){
+                    const drawables = instanceList[x];
+                    if (drawables.length === 1) {
+                        this.binaryInsert(info.itemList, {
+                            drawable: drawables[0],
+                            sortDistance: drawables[0].getSortDistance(camera),
+                            instanceData: null
+                        });
+                        drawables[0].applyTransformUniforms(this);
+                        const mat = drawables[0].getMaterial();
+                        if (mat) {
+                            info.materialList.add(mat.coreMaterial);
+                        }
+                    } else {
+                        let bindGroup = null;
+                        let item = null;
+                        for(let i = 0; i < drawables.length; i++){
+                            const drawable = drawables[i];
+                            const instanceUniforms = drawable.getInstanceUniforms();
+                            const instanceUniformsSize = instanceUniforms?.length ?? 0;
+                            const stride = 16 + instanceUniformsSize;
+                            if (!bindGroup || bindGroup.offset + stride > maxBufferSizeInFloats) {
+                                bindGroup = this._bindGroupAllocator.allocateInstanceBindGroup(frameCounter, stride);
+                                item = {
+                                    drawable,
+                                    sortDistance: drawable.getSortDistance(camera),
+                                    instanceData: {
+                                        bindGroup,
+                                        offset: bindGroup.offset,
+                                        numInstances: 0,
+                                        stride
+                                    }
+                                };
+                                this.binaryInsert(info.instanceItemList, item);
+                                drawable.applyInstanceOffsetAndStride(this, stride, bindGroup.offset);
+                            }
+                            const instanceInfo = {
+                                bindGroup,
+                                offset: bindGroup.offset
+                            };
+                            this._instanceInfo.set(drawable, instanceInfo);
+                            drawable.applyTransformUniforms(this);
+                            drawable.applyMaterialUniforms(instanceInfo);
+                            bindGroup.offset += stride;
+                            item.instanceData.numInstances++;
+                            const mat = drawable.getMaterial();
+                            if (mat) {
+                                info.materialList.add(mat.coreMaterial);
+                            }
+                        }
+                    }
+                }
+                info.instanceList = {};
+                if (createRenderBundles) {
+                    if (info.itemList.length > 0) {
+                        info.renderBundle = new RenderBundleWrapper();
+                    }
+                    if (info.skinItemList.length > 0) {
+                        info.skinRenderBundle = new RenderBundleWrapper();
+                    }
+                    if (info.morphItemList.length > 0) {
+                        info.morphRenderBundle = new RenderBundleWrapper();
+                    }
+                    if (info.skinAndMorphItemList.length > 0) {
+                        info.skinAndMorphRenderBundle = new RenderBundleWrapper();
+                    }
+                    if (info.instanceItemList.length > 0) {
+                        info.instanceRenderBundle = new RenderBundleWrapper();
+                    }
+                }
+            }
+        }
+        return this;
+    }
+    binaryInsert(itemList, item) {
+        let left = 0;
+        let right = itemList.length - 1;
+        const newInstanceId = item.drawable.getMaterial().instanceId;
+        while(left <= right){
+            const mid = Math.floor((left + right) / 2);
+            const instanceId = itemList[mid].drawable.getMaterial().instanceId;
+            if (instanceId === newInstanceId) {
+                itemList.splice(mid + 1, 0, item);
+                return;
+            } else if (instanceId < newInstanceId) {
+                left = mid + 1;
+            } else {
+                right = mid - 1;
+            }
+        }
+        itemList.splice(left, 0, item);
     }
     /**
    * Sorts the items in the render queue for rendering
-   */ sortItems() {
-        for (const list of Object.values(this._itemLists)){
-            list.opaqueList.sort((a, b)=>a.sortDistance - b.sortDistance);
-            list.transList.sort((a, b)=>b.sortDistance - a.sortDistance);
+   */ sortTransparentItems(cameraPos) {
+        if (this._itemList) {
+            this._itemList.transparent.lit[0].itemList.sort((a, b)=>this.drawableDistanceToCamera(b.drawable, cameraPos) - this.drawableDistanceToCamera(a.drawable, cameraPos));
+            this._itemList.transparent.lit[0].skinItemList.sort((a, b)=>this.drawableDistanceToCamera(b.drawable, cameraPos) - this.drawableDistanceToCamera(a.drawable, cameraPos));
+            this._itemList.transparent.lit[0].morphItemList.sort((a, b)=>this.drawableDistanceToCamera(b.drawable, cameraPos) - this.drawableDistanceToCamera(a.drawable, cameraPos));
+            this._itemList.transparent.lit[0].skinAndMorphItemList.sort((a, b)=>this.drawableDistanceToCamera(b.drawable, cameraPos) - this.drawableDistanceToCamera(a.drawable, cameraPos));
+            this._itemList.transparent.unlit[0].itemList.sort((a, b)=>this.drawableDistanceToCamera(b.drawable, cameraPos) - this.drawableDistanceToCamera(a.drawable, cameraPos));
+            this._itemList.transparent.unlit[0].skinItemList.sort((a, b)=>this.drawableDistanceToCamera(b.drawable, cameraPos) - this.drawableDistanceToCamera(a.drawable, cameraPos));
+            this._itemList.transparent.unlit[0].morphItemList.sort((a, b)=>this.drawableDistanceToCamera(b.drawable, cameraPos) - this.drawableDistanceToCamera(a.drawable, cameraPos));
+            this._itemList.transparent.unlit[0].skinAndMorphItemList.sort((a, b)=>this.drawableDistanceToCamera(b.drawable, cameraPos) - this.drawableDistanceToCamera(a.drawable, cameraPos));
         }
     }
+    drawableDistanceToCamera(drawable, cameraPos) {
+        const drawablePos = drawable.getXForm().position;
+        return Vector3.distanceSq(drawablePos, cameraPos);
+    }
+    newRenderItemListInfo() {
+        return {
+            itemList: [],
+            skinItemList: [],
+            morphItemList: [],
+            skinAndMorphItemList: [],
+            instanceItemList: [],
+            materialList: new Set(),
+            instanceList: {},
+            renderQueue: this
+        };
+    }
+    newRenderItemListBundle() {
+        return {
+            lit: [
+                this.newRenderItemListInfo()
+            ],
+            unlit: [
+                this.newRenderItemListInfo()
+            ]
+        };
+    }
+    newRenderItemList() {
+        return {
+            opaque: this.newRenderItemListBundle(),
+            transmission: this.newRenderItemListBundle(),
+            transparent: this.newRenderItemListBundle()
+        };
+    }
 }
 
 export { InstanceBindGroupAllocator, RenderQueue };

package/dist/render/render_queue.js.map

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

package/dist/render/renderbundle_wrapper.js

@@ -0,0 +1,20 @@
+import { Application } from '../app.js';
+
+class RenderBundleWrapper {
+    _renderBundles;
+    constructor(){
+        this._renderBundles = {};
+    }
+    getRenderBundle(hash) {
+        return this._renderBundles[hash] ?? null;
+    }
+    beginRenderBundle() {
+        Application.instance.device.beginCapture();
+    }
+    endRenderBundle(hash) {
+        this._renderBundles[hash] = Application.instance.device.endCapture();
+    }
+}
+
+export { RenderBundleWrapper };
+//# sourceMappingURL=renderbundle_wrapper.js.map

package/dist/render/renderbundle_wrapper.js.map

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