@zephyr3d/scene 0.3.0 → 0.4.0

package/dist/render/weightedblended_oit.js

@@ -0,0 +1,188 @@
+import { OIT } from './oit.js';
+import { drawFullscreenQuad } from './fullscreenquad.js';
+import { Vector4 } from '@zephyr3d/base';
+
+/**
+ * Weighted-blended OIT renderer.
+ *
+ * @remarks
+ * The weighed-blended OIT renderer supports both WebGL, WebGL2 and WebGPU device.
+ *
+ * @public
+ */ class WeightedBlendedOIT extends OIT {
+    /** Type name of WeightedBlendedOIT */ static type = 'wb';
+    static _compositeProgram;
+    static _compositeBindGroup;
+    static _compositeRenderStates;
+    _accumBuffer;
+    /**
+   * Creates an instance of WeightedBlendedOIT class.
+   */ constructor(){
+        super();
+        this._accumBuffer = null;
+    }
+    /**
+   * {@inheritDoc OIT.getType}
+   */ getType() {
+        return WeightedBlendedOIT.type;
+    }
+    /**
+   * {@inheritDoc OIT.supportDevice}
+   */ supportDevice(deviceType) {
+        return true;
+    }
+    /**
+   * {@inheritDoc OIT.dispose}
+   */ dispose() {
+        return;
+    }
+    /**
+   * {@inheritDoc OIT.begin}
+   */ begin(ctx) {
+        return 1;
+    }
+    /**
+   * {@inheritDoc OIT.end}
+   */ end(ctx) {
+        return;
+    }
+    /**
+   * {@inheritDoc OIT.setupFragmentOutput}
+   */ setupFragmentOutput(scope) {
+        const pb = scope.$builder;
+        scope.$outputs.outColor = pb.vec4();
+        scope.$outputs.outAlpha = pb.getDevice().type === 'webgl' ? pb.vec4() : pb.float();
+    }
+    /**
+   * {@inheritDoc OIT.beginPass}
+   */ beginPass(ctx, pass) {
+        const device = ctx.device;
+        const accumBuffer = this.getAccumFramebuffer(ctx, device);
+        device.pushDeviceStates();
+        device.setFramebuffer(accumBuffer);
+        device.clearFrameBuffer(new Vector4(0, 0, 0, 1), null, null);
+        return true;
+    }
+    /**
+   * {@inheritDoc OIT.endPass}
+   */ endPass(ctx, pass) {
+        const device = ctx.device;
+        const accumBuffer = device.getFramebuffer();
+        device.popDeviceStates();
+        const accumTargets = accumBuffer.getColorAttachments();
+        this.composite(ctx, device, accumTargets[0], accumTargets[1]);
+    }
+    /**
+   * {@inheritDoc OIT.calculateHash}
+   */ calculateHash() {
+        return this.getType();
+    }
+    /**
+   * {@inheritDoc OIT.applyUniforms}
+   */ applyUniforms(ctx, bindGroup) {
+        return;
+    }
+    /**
+   * {@inheritDoc OIT.outputFragmentColor}
+   */ outputFragmentColor(scope, color) {
+        const pb = scope.$builder;
+        pb.func('Z_WBOIT_depthWeight', [
+            pb.float('z'),
+            pb.float('a')
+        ], function() {
+            this.$return(pb.clamp(pb.mul(pb.pow(pb.add(pb.min(1, pb.mul(this.a, 10)), 0.01), 3), 1e8, pb.pow(pb.sub(1, pb.mul(this.z, 0.9)), 2)), 1e-2, 3e3));
+        });
+        pb.func('Z_WBOIT_output', [
+            pb.vec4('color')
+        ], function() {
+            this.$l.w = this.Z_WBOIT_depthWeight(this.$builtins.fragCoord.z, this.color.a);
+            this.$outputs[0] = pb.vec4(pb.mul(this.color.rgb, this.w), this.color.a);
+            this.$outputs[1] = pb.getDevice().type === 'webgl' ? pb.vec4(pb.mul(this.color.a, this.w)) : pb.mul(this.color.a, this.w);
+        });
+        scope.Z_WBOIT_output(color);
+        return true;
+    }
+    /**
+   * {@inheritDoc OIT.setRenderStates}
+   */ setRenderStates(rs) {
+        const blendingState = rs.useBlendingState();
+        blendingState.enable(true);
+        blendingState.setBlendEquation('add', 'add');
+        blendingState.setBlendFuncRGB('one', 'one');
+        blendingState.setBlendFuncAlpha('zero', 'inv-src-alpha');
+        const depthState = rs.useDepthState();
+        depthState.enableWrite(false).enableTest(true);
+    }
+    /** @internal */ composite(ctx, device, accumColor, accumAlpha) {
+        device.setProgram(WeightedBlendedOIT.getCompositeProgram(device));
+        WeightedBlendedOIT._compositeBindGroup.setTexture('accumColorTex', accumColor);
+        WeightedBlendedOIT._compositeBindGroup.setTexture('accumAlphaTex', accumAlpha);
+        device.setBindGroup(0, WeightedBlendedOIT._compositeBindGroup);
+        drawFullscreenQuad(WeightedBlendedOIT._compositeRenderStates);
+    }
+    /** @internal */ getAccumFramebuffer(ctx, device) {
+        const vp = device.getViewport();
+        const width = device.screenToDevice(vp.width);
+        const height = device.screenToDevice(vp.height);
+        if (this._accumBuffer) {
+            if (this._accumBuffer.getWidth() !== width || this._accumBuffer.getHeight() !== height || this._accumBuffer.getDepthAttachment() !== ctx.depthTexture) {
+                this._accumBuffer.dispose();
+                this._accumBuffer = null;
+            }
+        }
+        if (!this._accumBuffer) {
+            const accumColor = device.createTexture2D('rgba16f', width, height, {
+                samplerOptions: {
+                    mipFilter: 'none'
+                }
+            });
+            const accumAlpha = device.createTexture2D(device.type === 'webgl' ? 'rgba16f' : 'r16f', width, height, {
+                samplerOptions: {
+                    mipFilter: 'none'
+                }
+            });
+            this._accumBuffer = device.createFrameBuffer([
+                accumColor,
+                accumAlpha
+            ], ctx.depthTexture);
+        }
+        return this._accumBuffer;
+    }
+    /** @internal */ static getCompositeProgram(device) {
+        if (!this._compositeProgram) {
+            this._compositeProgram = 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, 1, 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.accumColorTex = pb.tex2D().uniform(0);
+                    this.accumAlphaTex = pb.tex2D().uniform(0);
+                    pb.main(function() {
+                        this.$l.accumColor = pb.textureSample(this.accumColorTex, this.$inputs.uv);
+                        this.$l.accumAlpha = pb.textureSample(this.accumAlphaTex, this.$inputs.uv);
+                        this.$l.r = this.accumColor.a;
+                        this.accumColor.a = this.accumAlpha.r;
+                        this.$outputs.outColor = pb.vec4(pb.div(this.accumColor.rgb, pb.clamp(this.accumColor.a, 0.0001, 50000)), this.r);
+                    });
+                }
+            });
+            this._compositeBindGroup = device.createBindGroup(this._compositeProgram.bindGroupLayouts[0]);
+            this._compositeRenderStates = device.createRenderStateSet();
+            this._compositeRenderStates.useBlendingState().enable(true).setBlendFuncRGB('inv-src-alpha', 'src-alpha').setBlendFuncAlpha('zero', 'one');
+            this._compositeRenderStates.useDepthState().enableTest(false).enableWrite(false);
+        }
+        return this._compositeProgram;
+    }
+}
+
+export { WeightedBlendedOIT };
+//# sourceMappingURL=weightedblended_oit.js.map

package/dist/render/weightedblended_oit.js.map

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

package/dist/scene/batchgroup.js

@@ -1,23 +1,22 @@
 import { GraphNode } from './graph_node.js';
-import '../app.js';
 import '@zephyr3d/base';
 import './octree.js';
+import '../app.js';
+import { InstanceBindGroupAllocator, RenderQueue } from '../render/render_queue.js';
 import '../material/shader/helper.js';
+import '../render/renderer.js';
+import '../render/sky.js';
+import '../render/clipmap.js';
+import '@zephyr3d/device';
+import '../render/watermesh.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 { InstanceBindGroupAllocator, RenderQueue } from '../render/render_queue.js';
-import { SceneRenderer } from '../render/renderer.js';
-import '../render/sky.js';
-import '../render/clipmap.js';
-import '@zephyr3d/device';
-import '../render/watermesh.js';
 
 /**
  * Batch group node
@@ -25,7 +24,6 @@ import '../render/watermesh.js';
  */ class BatchGroup extends GraphNode {
     _renderQueueMap;
     _bindGroupAllocator;
-    _transformHandler;
     _changeTag;
     /**
    * Creates an instance of mesh node
@@ -35,38 +33,13 @@ import '../render/watermesh.js';
         this._renderQueueMap = new WeakMap();
         this._changeTag = 0;
         this._bindGroupAllocator = new InstanceBindGroupAllocator();
-        this._transformHandler = (node)=>{
-            if (node.isGraphNode() && node.isBatchable()) {
-                const lightInstanceInfo = node.getInstanceDataBuffer(SceneRenderer.sceneRenderPass);
-                if (lightInstanceInfo?.bindGroup) {
-                    lightInstanceInfo.bindGroup.buffer.set(node.worldMatrix, lightInstanceInfo.offset);
-                    lightInstanceInfo.bindGroup.dirty = true;
-                }
-                const depthInstanceInfo = node.getInstanceDataBuffer(SceneRenderer.depthRenderPass);
-                if (depthInstanceInfo?.bindGroup) {
-                    depthInstanceInfo.bindGroup.buffer.set(node.worldMatrix, depthInstanceInfo.offset);
-                    depthInstanceInfo.bindGroup.dirty = true;
-                }
-                const shadowMapInstanceInfo = node.getInstanceDataBuffer(SceneRenderer.shadowMapRenderPass);
-                if (shadowMapInstanceInfo?.bindGroup.buffer) {
-                    shadowMapInstanceInfo.bindGroup.buffer.set(node.worldMatrix, shadowMapInstanceInfo.offset);
-                    shadowMapInstanceInfo.bindGroup.dirty = true;
-                }
-            }
-        };
         this.on('nodeattached', (node)=>{
             node.iterate((child)=>{
                 if (child.isGraphNode()) {
                     if (!child.isMesh()) {
                         console.error('Only mesh node can be added to batch group');
                     }
-                    child.on('transformchanged', this._transformHandler);
                     child.placeToOctree = false;
-                    if (child.isBatchable()) {
-                        child.setInstanceDataBuffer(SceneRenderer.sceneRenderPass, null, 0);
-                        child.setInstanceDataBuffer(SceneRenderer.depthRenderPass, null, 0);
-                        child.setInstanceDataBuffer(SceneRenderer.shadowMapRenderPass, null, 0);
-                    }
                 }
             });
             this._changeTag++;
@@ -74,7 +47,6 @@ import '../render/watermesh.js';
         this.on('noderemoved', (node)=>{
             node.iterate((child)=>{
                 if (child.isGraphNode()) {
-                    child.off('transformchanged', this._transformHandler);
                     child.placeToOctree = true;
                 }
             });
@@ -115,6 +87,7 @@ import '../render/watermesh.js';
                     cullVisitor.visit(node);
                 }
             });
+            queueInfo.queue.end(cullVisitor.camera, true);
             cullVisitor.frustumCulling = frustumCulling;
             cullVisitor.renderQueue = renderQueue;
         }

package/dist/scene/batchgroup.js.map

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

package/dist/scene/environment.js

@@ -1,17 +1,16 @@
 import { Vector4 } from '@zephyr3d/base';
-import '../app.js';
 import './octree.js';
+import '../app.js';
+import '@zephyr3d/device';
 import '../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/device';
 import '../render/renderer.js';
 import { SkyRenderer } from '../render/sky.js';
 import '../render/clipmap.js';

package/dist/scene/environment.js.map

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

package/dist/scene/graph_node.js

@@ -21,7 +21,7 @@ import { SceneNode } from './scene_node.js';
     /** @internal */ get octreeNode() {
         return this._octreeNode;
     }
-    /** @internal */ set octreeNode(node) {
+    set octreeNode(node) {
         this._octreeNode = node;
     }
     /**

package/dist/scene/mesh.js

@@ -1,4 +1,4 @@
-import { Vector4 } from '@zephyr3d/base';
+import { applyMixins, Vector4 } from '@zephyr3d/base';
 import { GraphNode } from './graph_node.js';
 import '@zephyr3d/device';
 import { Application } from '../app.js';
@@ -7,18 +7,18 @@ import '../material/shader/helper.js';
 import { LambertMaterial } from '../material/lambert.js';
 import '../material/blinn.js';
 import '../material/unlit.js';
-import '../material/material.js';
+import { QUEUE_OPAQUE } from '../values.js';
 import '../material/meshmaterial.js';
 import '../material/grassmaterial.js';
 import '../material/terrainmaterial.js';
 import '../material/pbrmr.js';
 import '../material/pbrsg.js';
-import { QUEUE_OPAQUE } from '../values.js';
+import { mixinDrawable } from '../render/drawable_mixin.js';
 
 /**
  * Mesh node
  * @public
- */ class Mesh extends GraphNode {
+ */ class Mesh extends applyMixins(GraphNode, mixinDrawable) {
     /** @internal */ _primitive;
     /** @internal */ _material;
     /** @internal */ _castShadow;
@@ -30,7 +30,6 @@ import { QUEUE_OPAQUE } from '../values.js';
     /** @internal */ _batchable;
     /** @internal */ _boundingBoxNode;
     /** @internal */ _instanceColor;
-    /** @internal */ _instanceBufferInfo;
     /**
    * Creates an instance of mesh node
    * @param scene - The scene to which the mesh node belongs
@@ -44,7 +43,6 @@ import { QUEUE_OPAQUE } from '../values.js';
         this._invBindMatrix = null;
         this._instanceHash = null;
         this._boundingBoxNode = null;
-        this._instanceBufferInfo = new Map();
         this._instanceColor = Vector4.zero();
         this._batchable = Application.instance.deviceType !== 'webgl';
         this._bboxChangeCallback = this._onBoundingboxChange.bind(this);
@@ -63,7 +61,7 @@ import { QUEUE_OPAQUE } from '../values.js';
         return `${this._instanceHash}:${this.worldMatrixDet >= 0}`;
     }
     /**
-   * {@inheritDoc BatchDrawable.getInstanceUniformCount}
+   * {@inheritDoc BatchDrawable.getInstanceUniforms}
    */ getInstanceUniforms() {
         return this.material.$instanceUniforms;
     }
@@ -175,9 +173,15 @@ import { QUEUE_OPAQUE } from '../values.js';
     /**
    * {@inheritDoc Drawable.draw}
    */ draw(ctx) {
+        this.bind(ctx);
         this.material.draw(this.primitive, ctx);
     }
     /**
+   * {@inheritDoc Drawable.getMaterial}
+   */ getMaterial() {
+        return this.material;
+    }
+    /**
    * {@inheritDoc Drawable.getBoneMatrices}
    */ getBoneMatrices() {
         return this._boneMatrices;
@@ -193,31 +197,6 @@ import { QUEUE_OPAQUE } from '../values.js';
         // mesh transform should be ignored when skinned
         return this;
     }
-    /**
-   * {@inheritDoc BatchDrawable.setInstanceDataBuffer}
-   */ setInstanceDataBuffer(renderPass, bindGroup, offset) {
-        const info = this._instanceBufferInfo.get(renderPass);
-        if (!info) {
-            if (bindGroup) {
-                this._instanceBufferInfo.set(renderPass, {
-                    bindGroup,
-                    offset
-                });
-            }
-        } else {
-            if (bindGroup) {
-                info.bindGroup = bindGroup;
-                info.offset = offset;
-            } else {
-                this._instanceBufferInfo.delete(renderPass);
-            }
-        }
-    }
-    /**
-   * {@inheritDoc BatchDrawable.getInstanceDataBuffer}
-   */ getInstanceDataBuffer(renderPass) {
-        return this._instanceBufferInfo.get(renderPass) ?? null;
-    }
     /** @internal */ computeBoundingVolume(bv) {
         let bbox;
         if (this._animatedBoundingBox) {

package/dist/scene/mesh.js.map

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

package/dist/scene/octree.js

@@ -520,9 +520,9 @@ var OctreePlacement;
         }
         const dim = this._chunks[level].getDimension();
         const inv_node_size = 1 / this._chunks[level].getNodeSize();
-        let px = Math.floor((center.x + this._rootSize * 0.5) * inv_node_size);
-        let py = Math.floor((center.y + this._rootSize * 0.5) * inv_node_size);
-        let pz = Math.floor((center.z + this._rootSize * 0.5) * inv_node_size);
+        const px = Math.floor((center.x + this._rootSize * 0.5) * inv_node_size);
+        const py = Math.floor((center.y + this._rootSize * 0.5) * inv_node_size);
+        const pz = Math.floor((center.z + this._rootSize * 0.5) * inv_node_size);
         if (px >= dim || py >= dim || pz >= dim) {
             return null;
         }

package/dist/scene/scene.js

@@ -1,19 +1,8 @@
-import { makeEventTarget, Vector4, Vector3, Ray, nextPowerOf2 } from '@zephyr3d/base';
+import { makeEventTarget, Vector4, Vector3, Ray } from '@zephyr3d/base';
 import { SceneNode } from './scene_node.js';
 import { Octree } from './octree.js';
-import { OctreeUpdateVisitor } from './octree_update_visitor.js';
-import '../material/shader/helper.js';
-import '../material/lambert.js';
-import '../material/blinn.js';
-import '../material/unlit.js';
-import { Material } from '../material/material.js';
-import '../material/meshmaterial.js';
-import '../material/grassmaterial.js';
-import '../material/terrainmaterial.js';
-import '../material/pbrmr.js';
-import '../material/pbrsg.js';
-import { Application } from '../app.js';
 import { RaycastVisitor } from './raycast_visitor.js';
+import { Application } from '../app.js';
 import { Environment } from './environment.js';
 
 /**
@@ -138,10 +127,6 @@ import { Environment } from './environment.js';
         const frameInfo = Application.instance.device.frameInfo;
         if (frameInfo.frameCounter !== this._updateFrame) {
             this._updateFrame = frameInfo.frameCounter;
-            // uniform buffer garbage collect
-            if (!Material.getGCOptions().disabled) {
-                Material.garbageCollect(frameInfo.frameTimestamp);
-            }
             for (const an of this._animationSet){
                 an.update();
             }
@@ -191,18 +176,6 @@ import { Environment } from './environment.js';
                     list.delete(node);
                 }
             }
-            if (octree) {
-                const worldBox = octree.getRootNode().getBox();
-                if (worldBox) {
-                    const radius = Math.max(Math.abs(worldBox.minPoint.x), Math.abs(worldBox.minPoint.y), Math.abs(worldBox.minPoint.z), Math.abs(worldBox.maxPoint.x), Math.abs(worldBox.maxPoint.y), Math.abs(worldBox.maxPoint.z));
-                    const rootSize = nextPowerOf2(radius * 2);
-                    if (rootSize > octree.getRootSize()) {
-                        octree.initialize(rootSize, octree.getLeafSize());
-                        const v = new OctreeUpdateVisitor(octree);
-                        this._rootNode.traverse(v);
-                    }
-                }
-            }
         }
     }
 }

package/dist/scene/scene.js.map

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

package/dist/scene/scene_node.js

@@ -53,7 +53,7 @@ import { XForm } from './xform.js';
     /** @internal */ get placeToOctree() {
         return this._placeToOctree;
     }
-    /** @internal */ set placeToOctree(val) {
+    set placeToOctree(val) {
         if (!!val !== this._placeToOctree) {
             this._placeToOctree = !!val;
             if (this.isGraphNode()) {
@@ -125,6 +125,10 @@ import { XForm } from './xform.js';
     }
     /**
    * Iterate self and all of the children
+   * 
+   * @remarks
+   * DO NOT remove child duration iteration!
+   * 
    * @param callback - callback function that will be called on each node
    */ iterate(callback) {
         callback(this);
@@ -293,6 +297,7 @@ import { XForm } from './xform.js';
     /** @internal */ _detached() {}
     /** @internal */ notifyHiddenChanged() {
         this._visibleChanged();
+        this.dispatchEvent(this, 'visiblechanged');
         for (const child of this._children){
             if (child.showState === 'inherit') {
                 child.notifyHiddenChanged();

package/dist/scene/scene_node.js.map

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

package/dist/scene/terrain/grass.js

@@ -1,30 +1,37 @@
-import { nextPowerOf2, Vector2 } from '@zephyr3d/base';
+import { applyMixins, nextPowerOf2, Vector2 } from '@zephyr3d/base';
 import { Primitive } from '../../render/primitive.js';
-import { Application } from '../../app.js';
 import { GrassMaterial } from '../../material/grassmaterial.js';
+import { mixinDrawable } from '../../render/drawable_mixin.js';
 
-class GrassCluster {
-    _primitive;
+class GrassClusterBase {
     _terrain;
+    constructor(terrain){
+        this._terrain = terrain;
+    }
+    getXForm() {
+        return this._terrain;
+    }
+}
+class GrassCluster extends applyMixins(GrassClusterBase, mixinDrawable) {
+    _primitive;
     _numInstances;
     _material;
     constructor(device, terrain, baseVertexBuffer, indexBuffer, material, grassData){
+        super(terrain);
         this._primitive = new Primitive();
         const instanceVertexBuffer = device.createVertexBuffer('tex1_f32x4', grassData);
         this._primitive.setVertexBuffer(baseVertexBuffer, 'vertex');
         this._primitive.setVertexBuffer(instanceVertexBuffer, 'instance');
         this._primitive.setIndexBuffer(indexBuffer);
         this._primitive.primitiveType = 'triangle-list';
-        this._terrain = terrain;
         this._numInstances = grassData.length >> 2;
         this._material = material;
-        this._material.stateSet.useRasterizerState().setCullMode('none');
     }
     getName() {
         return 'GrassCluster';
     }
-    getXForm() {
-        return this._terrain;
+    getMaterial() {
+        return this._material;
     }
     getInstanceColor() {
         return this._terrain.getInstanceColor();
@@ -51,8 +58,7 @@ class GrassCluster {
         return false;
     }
     draw(ctx) {
-        this._material.alphaToCoverage = Application.instance.device.getFrameBufferSampleCount() > 1;
-        this._material.alphaCutoff = this._material.alphaToCoverage ? 1 : 0.8;
+        this.bind(ctx);
         this._material.draw(this._primitive, ctx, this._numInstances);
     }
 }
@@ -263,5 +269,5 @@ function getPrimitive(device: AbstractDevice): Primitive {
 }
 */
 
-export { GrassCluster, GrassManager };
+export { GrassCluster, GrassClusterBase, GrassManager };
 //# sourceMappingURL=grass.js.map

package/dist/scene/terrain/grass.js.map

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