@zephyr3d/scene 0.2.0 → 0.3.1

package/dist/material/meshmaterial.js

@@ -4,14 +4,15 @@ import { Material } from './material.js';
 import { encodeNormalizedFloatToRGBA } from '../shaders/misc.js';
 import { Application } from '../app.js';
 import { ShaderHelper } from './shader/helper.js';
+import { Vector4, Vector3, Vector2 } from '@zephyr3d/base';
 
-/**
- * Apply material mixins to specific material class
- * @param target - Material class
- * @param mixins - mixins
- * @returns Mixed mesh material class
- *
- * @public
+/**
+ * Apply material mixins to specific material class
+ * @param target - Material class
+ * @param mixins - mixins
+ * @returns Mixed mesh material class
+ *
+ * @public
  */ function applyMaterialMixins(target, ...mixins) {
     let r = target;
     for (const m of mixins){
@@ -22,11 +23,12 @@ import { ShaderHelper } from './shader/helper.js';
 let FEATURE_ALPHATEST = 0;
 let FEATURE_ALPHABLEND = 0;
 let FEATURE_ALPHATOCOVERAGE = 0;
-/**
- * Base class for any kind of mesh materials
- *
- * @public
+/**
+ * Base class for any kind of mesh materials
+ *
+ * @public
  */ class MeshMaterial extends Material {
+    /** @internal */ static INSTANCE_UNIFORMS = [];
     /** @internal */ static NEXT_FEATURE_INDEX = 3;
     /** @internal */ _featureStates;
     /** @internal */ _alphaCutoff;
@@ -35,9 +37,9 @@ let FEATURE_ALPHATOCOVERAGE = 0;
     /** @internal */ _opacity;
     /** @internal */ _ctx;
     /** @internal */ _materialPass;
-    /**
-   * Creates an instance of MeshMaterial class
-   * @param args - constructor arguments
+    /**
+   * Creates an instance of MeshMaterial class
+   * @param args - constructor arguments
    */ constructor(...args){
         super();
         this._featureStates = [];
@@ -56,6 +58,136 @@ let FEATURE_ALPHATOCOVERAGE = 0;
         this.NEXT_FEATURE_INDEX++;
         return val;
     }
+    /** Define instance uniform index */ static defineInstanceUniform(prop, type) {
+        if (this.INSTANCE_UNIFORMS.findIndex((val)=>val[0] === prop) >= 0) {
+            throw new Error(`${this.name}.defineInstanceUniform(): ${prop} was already defined`);
+        }
+        if (type !== 'float' && type !== 'vec2' && type !== 'vec3' && type !== 'vec4') {
+            throw new Error(`${this.name}.defineInstanceUniform(): invalid uniform type ${type}`);
+        }
+        this.INSTANCE_UNIFORMS = [
+            ...this.INSTANCE_UNIFORMS,
+            [
+                prop,
+                type
+            ]
+        ];
+        return this.INSTANCE_UNIFORMS.length - 1;
+    }
+    getInstancedUniform(scope, uniformIndex) {
+        //return ShaderHelper.getInstancedUniform(scope, 4 + uniformIndex);
+        const pb = scope.$builder;
+        const instanceID = pb.shaderKind === 'vertex' ? scope.$builtins.instanceIndex : scope.$inputs.zInstanceID;
+        const uniformName = ShaderHelper.getWorldMatricesUniformName();
+        const strideName = ShaderHelper.getInstanceBufferStrideUniformName();
+        return scope[uniformName].at(pb.add(pb.mul(scope[strideName], instanceID), 4 + uniformIndex));
+    }
+    /** Create material instance */ createInstance() {
+        const instanceUniforms = this.constructor.INSTANCE_UNIFORMS;
+        const uniformsHolder = instanceUniforms.length > 0 ? new Float32Array(4 * instanceUniforms.length) : null;
+        const batchable = Application.instance.device.type !== 'webgl';
+        // Copy original uniform values
+        for(let i = 0; i < instanceUniforms.length; i++){
+            const [prop, type] = instanceUniforms[i];
+            const value = this[prop];
+            switch(type){
+                case 'float':
+                    {
+                        uniformsHolder[i * 4] = Number(value);
+                        break;
+                    }
+                case 'vec2':
+                    {
+                        if (!(value instanceof Vector2)) {
+                            throw new Error(`Instance uniform property ${prop} must be of type Vector2`);
+                        }
+                        uniformsHolder[i * 4] = value.x;
+                        uniformsHolder[i * 4 + 1] = value.y;
+                        break;
+                    }
+                case 'vec3':
+                    {
+                        if (!(value instanceof Vector3)) {
+                            throw new Error(`Instance uniform property ${prop} must be of type Vector3`);
+                        }
+                        uniformsHolder[i * 4] = value.x;
+                        uniformsHolder[i * 4 + 1] = value.y;
+                        uniformsHolder[i * 4 + 2] = value.z;
+                        break;
+                    }
+                case 'vec4':
+                    {
+                        if (!(value instanceof Vector4)) {
+                            throw new Error(`Instance uniform property ${prop} must be of type Vector4`);
+                        }
+                        uniformsHolder[i * 4] = value.x;
+                        uniformsHolder[i * 4 + 1] = value.y;
+                        uniformsHolder[i * 4 + 2] = value.z;
+                        uniformsHolder[i * 4 + 3] = value.w;
+                        break;
+                    }
+            }
+        }
+        const handler = {
+            get (target, prop, receiver) {
+                if (prop === 'isBatchable') {
+                    return ()=>batchable;
+                } else if (prop === '$instanceUniforms') {
+                    return uniformsHolder;
+                } else if (prop === '$isInstance') {
+                    return true;
+                } else if (prop === 'beginDraw') {
+                    if (!batchable || !target.isBatchable()) {
+                        for(let i = 0; i < instanceUniforms.length; i++){
+                            const name = instanceUniforms[i][0];
+                            const type = instanceUniforms[i][1];
+                            switch(type){
+                                case 'float':
+                                    target[name] = uniformsHolder[i * 4];
+                                    break;
+                                case 'vec2':
+                                    target[name] = new Vector2(uniformsHolder[i * 4], uniformsHolder[i * 4 + 1]);
+                                    break;
+                                case 'vec3':
+                                    target[name] = new Vector3(uniformsHolder[i * 4], uniformsHolder[i * 4 + 1], uniformsHolder[i * 4 + 2]);
+                                case 'vec4':
+                                    target[name] = new Vector4(uniformsHolder[i * 4], uniformsHolder[i * 4 + 1], uniformsHolder[i * 4 + 2], uniformsHolder[i * 4 + 3]);
+                            }
+                        }
+                    }
+                } else if (typeof prop === 'string') {
+                    const index = instanceUniforms.findIndex((val)=>val[0] === prop);
+                    if (index >= 0) {
+                        switch(instanceUniforms[index][1]){
+                            case 'float':
+                                return uniformsHolder[index * 4];
+                            case 'vec2':
+                                return new Vector2(uniformsHolder[index * 4], uniformsHolder[index * 4 + 1]);
+                            case 'vec3':
+                                return new Vector3(uniformsHolder[index * 4], uniformsHolder[index * 4 + 1], uniformsHolder[index * 4 + 2]);
+                            case 'vec4':
+                                return new Vector4(uniformsHolder[index * 4], uniformsHolder[index * 4 + 1], uniformsHolder[index * 4 + 2], uniformsHolder[index * 4 + 3]);
+                        }
+                    }
+                }
+                return Reflect.get(target, prop, receiver);
+            },
+            set (target, prop, value, receiver) {
+                const i = instanceUniforms.findIndex((val)=>val[0] === prop);
+                if (i >= 0) {
+                    if (typeof value === 'number') {
+                        uniformsHolder[i * 4 + 0] = value;
+                    } else if (value instanceof Float32Array) {
+                        uniformsHolder.set(value);
+                    }
+                    return true;
+                } else {
+                    return Reflect.set(target, prop, value, receiver);
+                }
+            }
+        };
+        return new Proxy(this, handler);
+    }
     /** Draw context for shader creation */ get drawContext() {
         return this._ctx;
     }
@@ -107,10 +239,10 @@ let FEATURE_ALPHATOCOVERAGE = 0;
     /** Returns true if shading of the material will be affected by lights  */ supportLighting() {
         return true;
     }
-    /**
-   * Update render states according to draw context and current material pass
-   * @param pass - Current material pass
-   * @param ctx - Draw context
+    /**
+   * Update render states according to draw context and current material pass
+   * @param pass - Current material pass
+   * @param ctx - Draw context
    */ updateRenderStates(pass, ctx) {
         const blending = this.featureUsed(FEATURE_ALPHABLEND) || ctx.lightBlending;
         const a2c = this.featureUsed(FEATURE_ALPHATOCOVERAGE);
@@ -144,12 +276,12 @@ let FEATURE_ALPHATOCOVERAGE = 0;
             this.stateSet.defaultRasterizerState();
         }
     }
-    /**
-   * Submit Uniform values before rendering with this material.
-   *
-   * @param bindGroup - Bind group for this material
-   * @param ctx - Draw context
-   * @param pass - Current pass of the material
+    /**
+   * Submit Uniform values before rendering with this material.
+   *
+   * @param bindGroup - Bind group for this material
+   * @param ctx - Draw context
+   * @param pass - Current pass of the material
    */ applyUniformValues(bindGroup, ctx, pass) {
         if (this.featureUsed(FEATURE_ALPHATEST)) {
             bindGroup.setValue('zAlphaCutoff', this._alphaCutoff);
@@ -158,21 +290,21 @@ let FEATURE_ALPHATOCOVERAGE = 0;
             bindGroup.setValue('zOpacity', this._opacity);
         }
     }
-    /**
-   * Determine which queue should be used to render this material.
-   * @returns QUEUE_TRANSPARENT or QUEUE_OPAQUE
+    /**
+   * Determine which queue should be used to render this material.
+   * @returns QUEUE_TRANSPARENT or QUEUE_OPAQUE
    */ getQueueType() {
         return this.isTransparentPass(0) ? QUEUE_TRANSPARENT : QUEUE_OPAQUE;
     }
-    /**
-   * Determine if a certain pass of this material is translucent.
-   * @param pass - Pass of the material
-   * @returns True if it is translucent, otherwise false.
+    /**
+   * Determine if a certain pass of this material is translucent.
+   * @param pass - Pass of the material
+   * @returns True if it is translucent, otherwise false.
    */ isTransparentPass(pass) {
         return this.featureUsed(FEATURE_ALPHABLEND);
     }
-    /**
-   * {@inheritdoc Material.beginDraw}
+    /**
+   * {@inheritdoc Material.beginDraw}
    */ beginDraw(pass, ctx) {
         this.updateRenderStates(pass, ctx);
         return super.beginDraw(pass, ctx);
@@ -185,51 +317,51 @@ let FEATURE_ALPHATOCOVERAGE = 0;
         }
         return this._createProgram(pb, ctx, pass);
     }
-    /**
-   * Check if a feature is in use for given render pass type.
-   *
-   * @param feature - The feature index
-   * @returns true if the feature is in use, otherwise false.
+    /**
+   * Check if a feature is in use for given render pass type.
+   *
+   * @param feature - The feature index
+   * @returns true if the feature is in use, otherwise false.
    */ featureUsed(feature) {
         return this._featureStates[feature];
     }
-    /**
-   * Use or unuse a feature of the material, this will cause the shader to be rebuild.
-   *
-   * @param feature - Which feature will be used or unused
-   * @param use - true if use the feature, otherwise false
+    /**
+   * Use or unuse a feature of the material, this will cause the shader to be rebuild.
+   *
+   * @param feature - Which feature will be used or unused
+   * @param use - true if use the feature, otherwise false
    */ useFeature(feature, use) {
         if (this._featureStates[feature] !== use) {
             this._featureStates[feature] = use;
             this.optionChanged(true);
         }
     }
-    /**
-   * {@inheritDoc Material._createHash}
-   * @override
-   *
-   * @internal
+    /**
+   * {@inheritDoc Material._createHash}
+   * @override
+   *
+   * @internal
    */ _createHash(renderPassType) {
         return this._featureStates.map((val)=>val === undefined ? '' : val).join('|');
     }
-    /**
-   * {@inheritDoc Material._applyUniforms}
-   * @override
-   *
-   * @internal
+    /**
+   * {@inheritDoc Material._applyUniforms}
+   * @override
+   *
+   * @internal
    */ _applyUniforms(bindGroup, ctx, pass) {
         this.applyUniformValues(bindGroup, ctx, pass);
     }
-    /**
-   * Check if the color should be computed in fragment shader, this is required for forward render pass or alpha test is in use or alpha to coverage is in use.
-   *
-   * @returns - true if the color should be computed in fragment shader, otherwise false.
+    /**
+   * Check if the color should be computed in fragment shader, this is required for forward render pass or alpha test is in use or alpha to coverage is in use.
+   *
+   * @returns - true if the color should be computed in fragment shader, otherwise false.
    */ needFragmentColor(ctx) {
         return (ctx ?? this.drawContext).renderPass.type === RENDER_PASS_TYPE_LIGHT || this._alphaCutoff > 0 || this.alphaToCoverage;
     }
-    /**
-   * Vertex shader implementation of this material
-   * @param scope - Shader scope
+    /**
+   * Vertex shader implementation of this material
+   * @param scope - Shader scope
    */ vertexShader(scope) {
         const pb = scope.$builder;
         ShaderHelper.prepareVertexShader(pb, this.drawContext);
@@ -237,10 +369,13 @@ let FEATURE_ALPHATOCOVERAGE = 0;
             scope.$inputs.zBlendIndices = pb.vec4().attrib('blendIndices');
             scope.$inputs.zBlendWeights = pb.vec4().attrib('blendWeights');
         }
+        if (this.drawContext.instanceData) {
+            scope.$outputs.zInstanceID = scope.$builtins.instanceIndex;
+        }
     }
-    /**
-   * Fragment shader implementation of this material
-   * @param scope - Shader scope
+    /**
+   * Fragment shader implementation of this material
+   * @param scope - Shader scope
    */ fragmentShader(scope) {
         const pb = scope.$builder;
         ShaderHelper.prepareFragmentShader(pb, this.drawContext);
@@ -253,11 +388,11 @@ let FEATURE_ALPHATOCOVERAGE = 0;
             }
         }
     }
-    /**
-   * {@inheritDoc Material._createProgram}
-   * @override
-   *
-   * @internal
+    /**
+   * {@inheritDoc Material._createProgram}
+   * @override
+   *
+   * @internal
    */ _createProgram(pb, ctx, pass) {
         const that = this;
         this._ctx = ctx;
@@ -275,20 +410,20 @@ let FEATURE_ALPHATOCOVERAGE = 0;
                 });
             }
         });
-        /*
-    if (program) {
-      console.log(program.getShaderSource('vertex'));
-      console.log(program.getShaderSource('fragment'));
-    }
+        /*
+    if (program) {
+      console.log(program.getShaderSource('vertex'));
+      console.log(program.getShaderSource('fragment'));
+    }
     */ return program;
     }
-    /**
-   * Calculate final fragment color for output.
-   *
-   * @param scope - Shader scope
-   * @param color - Lit fragment color
-   *
-   * @returns The final fragment color
+    /**
+   * Calculate final fragment color for output.
+   *
+   * @param scope - Shader scope
+   * @param color - Lit fragment color
+   *
+   * @returns The final fragment color
    */ outputFragmentColor(scope, worldPos, color) {
         const pb = scope.$builder;
         const that = this;

package/dist/material/meshmaterial.js.map

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

package/dist/material/mixins/albedocolor.js

@@ -2,17 +2,18 @@ import { Vector4 } from '@zephyr3d/base';
 import { applyMaterialMixins } from '../meshmaterial.js';
 import { mixinTextureProps } from './texture.js';
 
-/**
- * Albedo color mixin
- * @param BaseCls - Class to mix in
- * @returns Mixed class
- *
- * @public
+/**
+ * Albedo color mixin
+ * @param BaseCls - Class to mix in
+ * @returns Mixed class
+ *
+ * @public
  */ function mixinAlbedoColor(BaseCls) {
     if (BaseCls.albedoColorMixed) {
         return BaseCls;
     }
     const S = applyMaterialMixins(BaseCls, mixinTextureProps('albedo'));
+    const ALBEDO_COLOR_UNIFORM = S.defineInstanceUniform('albedoColor', 'vec4');
     return class extends S {
         static albedoColorMixed = true;
         _albedoColor;
@@ -27,13 +28,16 @@ import { mixinTextureProps } from './texture.js';
             this._albedoColor.set(val);
             this.uniformChanged();
         }
+        getUniformValueAlbedoColor(scope) {
+            return this.drawContext.instanceData ? this.getInstancedUniform(scope, ALBEDO_COLOR_UNIFORM) : scope.zAlbedo;
+        }
         calculateAlbedoColor(scope, uv) {
             const pb = scope.$builder;
             if (!this.needFragmentColor()) {
                 console.warn('mixinAlbedoColor.calculateAlbedoColor(): No need to calculate albedo color, make sure needFragmentColor() returns true');
                 return pb.vec4(1);
             }
-            let color = scope.zAlbedo;
+            let color = this.getUniformValueAlbedoColor(scope);
             if (this.albedoTexture) {
                 color = pb.mul(color, this.sampleAlbedoTexture(scope, uv));
             }

package/dist/material/mixins/albedocolor.js.map

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

package/dist/material/mixins/foliage.js

@@ -1,10 +1,10 @@
-/**
- * Foliage mixin
- *
- * @param BaseCls - Class to mix in
- * @returns Mixed class
- *
- * @public
+/**
+ * Foliage mixin
+ *
+ * @param BaseCls - Class to mix in
+ * @returns Mixed class
+ *
+ * @public
  */ function mixinFoliage(BaseCls) {
     if (BaseCls.foliageMixed) {
         return BaseCls;

package/dist/material/mixins/lightmodel/blinnphong.js

@@ -1,11 +1,11 @@
 import { applyMaterialMixins } from '../../meshmaterial.js';
 import { mixinLight } from '../lit.js';
 
-/**
- * Blinn-phong lighting model mixin
- * @param BaseCls - Class to mix in
- * @returns Mixed class
- * @public
+/**
+ * Blinn-phong lighting model mixin
+ * @param BaseCls - Class to mix in
+ * @returns Mixed class
+ * @public
  */ function mixinBlinnPhong(BaseCls) {
     if (BaseCls.blinnPhongMixed) {
         return BaseCls;

package/dist/material/mixins/lightmodel/lambert.js

@@ -1,11 +1,11 @@
 import { applyMaterialMixins } from '../../meshmaterial.js';
 import { mixinLight } from '../lit.js';
 
-/**
- * Lambert lighting model mixin
- * @param BaseCls - Class to mix in
- * @returns Mixed class
- * @public
+/**
+ * Lambert lighting model mixin
+ * @param BaseCls - Class to mix in
+ * @returns Mixed class
+ * @public
  */ function mixinLambert(BaseCls) {
     if (BaseCls.lambertMixed) {
         return BaseCls;

package/dist/material/mixins/lightmodel/pbrmetallicroughness.js

@@ -4,11 +4,11 @@ import { mixinPBRCommon } from '../pbr/common.js';
 import { Vector4 } from '@zephyr3d/base';
 import { mixinLight } from '../lit.js';
 
-/**
- * PBRMetallicRoughness lighting model mixin
- * @param BaseCls - Class to mix in
- * @returns Mixed class
- * @public
+/**
+ * PBRMetallicRoughness lighting model mixin
+ * @param BaseCls - Class to mix in
+ * @returns Mixed class
+ * @public
  */ function mixinPBRMetallicRoughness(BaseCls) {
     if (BaseCls.pbrMetallicRoughnessMixed) {
         return BaseCls;

package/dist/material/mixins/lightmodel/pbrspecularglossness.js

@@ -4,7 +4,14 @@ import { mixinPBRCommon } from '../pbr/common.js';
 import { Vector4 } from '@zephyr3d/base';
 import { mixinLight } from '../lit.js';
 
-function mixinPBRSpecularGlossness(BaseCls) {
+/**
+ * PBRSpecularGlossiness mixin
+ *
+ * @param BaseCls - Base class to mix in
+ * @returns Mixed class
+ *
+ * @public
+ */ function mixinPBRSpecularGlossness(BaseCls) {
     if (BaseCls.pbrSpecularGlossnessMixed) {
         return BaseCls;
     }

package/dist/material/mixins/lightmodel/pbrspecularglossness.js.map

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