Merge pull request #73 from martinlaxenaire/develop

v0.7.0

ROADMAP.md

@@ -24,15 +24,17 @@
 - Scroll + resize, frustum culling check
 - GPUCurtains
 - OrbitControls
+- GLTFLoader + GLTFScenesManager
 
 ## Work in progress
 
 - Examples & tests
-- glTF loading
+- Add/improve GLTFScenesManager features
 
 ## TODO / possible improvements
 
-- Add Mat3 class + normalMatrix to ProjectedObject3D?
+- Sort transparent objects by distance from the camera to the object bounding box center + radius distance before drawing them
+- Option to chose between sphere and OBB frustum culling
 - Mesh raycasting
 - Lights management?
 - Improve typedoc documentation?

dist/esm/core/DOM/DOMElement.mjs

@@ -90,10 +90,13 @@ class DOMElement {
    * @param boundingRect - new bounding rectangle
    */
   setSize(boundingRect = null) {
-    if (!this.element)
+    if (!this.element || this.isResizing)
       return;
+    this.isResizing = true;
     this.boundingRect = boundingRect ?? this.element.getBoundingClientRect();
-    this.isResizing = false;
+    setTimeout(() => {
+      this.isResizing = false;
+    }, 10);
   }
   /**
    * Destroy our DOMElement - remove from resize observer and clear throttle timeout

dist/esm/core/bindGroups/BindGroup.mjs

@@ -28,6 +28,7 @@ class BindGroup {
     if (this.options.uniforms || this.options.storages)
       this.setInputBindings();
     this.layoutCacheKey = "";
+    this.pipelineCacheKey = "";
     this.resetEntries();
     this.bindGroupLayout = null;
     this.bindGroup = null;
@@ -163,6 +164,7 @@ class BindGroup {
    */
   resetBindGroup() {
     this.entries.bindGroup = [];
+    this.pipelineCacheKey = "";
     for (const binding of this.bindings) {
       this.addBindGroupEntry(binding);
     }
@@ -177,6 +179,7 @@ class BindGroup {
       binding: this.entries.bindGroup.length,
       resource: binding.resource
     });
+    this.pipelineCacheKey += binding.cacheKey;
   }
   /**
    * Reset the {@link BindGroup#entries.bindGroupLayout | bindGroupLayout entries}, recreates them and then recreate the {@link BindGroup#bindGroupLayout | GPU bind group layout}

dist/esm/core/bindings/Binding.mjs

@@ -24,7 +24,7 @@ class Binding {
     };
     this.shouldResetBindGroup = false;
     this.shouldResetBindGroupLayout = false;
-    this.cacheKey = `${bindingType},${visibility},`;
+    this.cacheKey = `${bindingType},${this.visibility},`;
   }
 }
 

dist/esm/core/bindings/TextureBinding.mjs

@@ -30,7 +30,7 @@ class TextureBinding extends Binding {
       viewDimension,
       multisampled
     };
-    this.cacheKey += `${format},${access},${viewDimension},${multisampled}`;
+    this.cacheKey += `${format},${access},${viewDimension},${multisampled},`;
     this.resource = texture;
     this.setWGSLFragment();
   }
@@ -72,6 +72,7 @@ class TextureBinding extends Binding {
       if (bindingType)
         this.shouldResetBindGroupLayout = true;
       this.bindingType = bindingType;
+      this.cacheKey = `${this.bindingType},${this.visibility},${this.options.format},${this.options.access},${this.options.viewDimension},${this.options.multisampled},`;
       this.setWGSLFragment();
     }
   }
@@ -85,6 +86,7 @@ class TextureBinding extends Binding {
     if (isNewFormat && this.bindingType === "storage") {
       this.setWGSLFragment();
       this.shouldResetBindGroupLayout = true;
+      this.cacheKey = `${this.bindingType},${this.visibility},${this.options.format},${this.options.access},${this.options.viewDimension},${this.options.multisampled},`;
     }
   }
   /**
@@ -97,6 +99,7 @@ class TextureBinding extends Binding {
     if (isNewMultisampled && this.bindingType !== "storage") {
       this.setWGSLFragment();
       this.shouldResetBindGroupLayout = true;
+      this.cacheKey = `${this.bindingType},${this.visibility},${this.options.format},${this.options.access},${this.options.viewDimension},${this.options.multisampled},`;
     }
   }
   /**

dist/esm/core/bindings/bufferElements/BufferElement.mjs

@@ -195,12 +195,19 @@ class BufferElement {
     this.view[2] = value.z ?? value[2] ?? 0;
   }
   /**
-   * Set the {@link view} value from a {@link Mat4} or a {@link Quat}
+   * Set the {@link view} value from a {@link Mat4} or {@link Quat}
    * @param value - {@link Mat4} or {@link Quat} to use
    */
   setValueFromMat4OrQuat(value) {
     this.view.set(value.elements);
   }
+  /**
+   * Set the {@link view} value from a {@link Mat3}
+   * @param value - {@link Mat3} to use
+   */
+  setValueFromMat3(value) {
+    this.setValueFromArrayWithPad(value.elements);
+  }
   /**
    * Set the {@link view} value from an array
    * @param value - array to use
@@ -232,6 +239,8 @@ class BufferElement {
           return this.setValueFromVec2;
         } else if (this.type === "vec3f") {
           return this.setValueFromVec3;
+        } else if (this.type === "mat3x3f") {
+          return value2.elements ? this.setValueFromMat3 : this.setValueFromArrayWithPad;
         } else if (value2.elements) {
           return this.setValueFromMat4OrQuat;
         } else if (ArrayBuffer.isView(value2) || Array.isArray(value2)) {

dist/esm/core/camera/Camera.mjs

@@ -236,11 +236,12 @@ class Camera extends Object3D {
     ) / Math.tan(this.fov * 0.5 * Math.PI / 180);
   }
   /**
-   * Sets visible width / height at a given z-depth from our {@link Camera} parameters.<br>
+   * Get visible width / height at a given z-depth from our {@link Camera} parameters.<br>
    * {@link https://discourse.threejs.org/t/functions-to-calculate-the-visible-width-height-at-a-given-z-depth-from-a-perspective-camera/269 | See reference}
    * @param depth - depth to use for calculations
+   * @returns - visible width and height at given depth
    */
-  setScreenRatios(depth = 0) {
+  getScreenRatiosAtDepth(depth = 0) {
     const cameraOffset = this.position.z;
     if (depth < cameraOffset) {
       depth -= cameraOffset;
@@ -249,11 +250,17 @@ class Camera extends Object3D {
     }
     const vFOV = this.fov * Math.PI / 180;
     const height = 2 * Math.tan(vFOV / 2) * Math.abs(depth);
-    this.screenRatio = {
+    return {
       width: height * this.size.width / this.size.height,
       height
     };
   }
+  /**
+   * Sets visible width / height at a depth of 0.
+   */
+  setScreenRatios() {
+    this.screenRatio = this.getScreenRatiosAtDepth();
+  }
   /**
    * Rotate this {@link Camera} so it looks at the {@link Vec3 | target}
    * @param target - {@link Vec3 | target} to look at

dist/esm/core/materials/Material.mjs

@@ -399,7 +399,7 @@ class Material {
     });
     const hasDefaultSampler = this.samplers.find((sampler) => sampler.name === "defaultSampler");
     if (!hasDefaultSampler) {
-      const sampler = new Sampler(this.renderer, { name: "defaultSampler" });
+      const sampler = new Sampler(this.renderer, { label: "Default sampler", name: "defaultSampler" });
       this.addSampler(sampler);
     }
   }

dist/esm/core/meshes/mixins/MeshBaseMixin.mjs

@@ -412,6 +412,19 @@ ${geometry.wgslStructFragment}`
         this.addToScene();
       }
     }
+    /**
+     * Get the visible property value
+     */
+    get visible() {
+      return this._visible;
+    }
+    /**
+     * Set the visible property value
+     * @param value - new visibility value
+     */
+    set visible(value) {
+      this._visible = value;
+    }
     /* TEXTURES */
     /**
      * Get our {@link RenderMaterial#domTextures | RenderMaterial domTextures array}

dist/esm/core/meshes/mixins/ProjectedMeshBaseMixin.mjs

@@ -151,6 +151,11 @@ function ProjectedMeshBaseMixin(Base) {
             // model view matrix (world matrix multiplied by camera view matrix)
             type: "mat4x4f",
             value: this.modelViewMatrix
+          },
+          normal: {
+            // normal matrix
+            type: "mat3x3f",
+            value: this.normalMatrix
           }
           // modelViewProjection: {
           //   type: 'mat4x4f',
@@ -163,6 +168,20 @@ function ProjectedMeshBaseMixin(Base) {
       meshParameters.uniforms = { matrices: matricesUniforms, ...meshParameters.uniforms };
       super.setMaterial(meshParameters);
     }
+    /**
+     * Get the visible property value
+     */
+    get visible() {
+      return this._visible;
+    }
+    /**
+     * Set the visible property value
+     * @param value - new visibility value
+     */
+    set visible(value) {
+      this.shouldUpdateMatrixStack();
+      this._visible = value;
+    }
     /* SIZE & TRANSFORMS */
     /**
      * Resize our {@link ProjectedMeshBaseClass}

dist/esm/core/objects3D/Object3D.mjs

@@ -28,8 +28,11 @@ class Object3D {
    * @param value - new parent to set, could be an {@link Object3D} or null
    */
   set parent(value) {
-    if (this.parent) {
-      this.parent.children = this.parent.children.filter((child) => child.object3DIndex !== this.object3DIndex);
+    if (this._parent && value && this._parent.object3DIndex === value.object3DIndex) {
+      return;
+    }
+    if (this._parent) {
+      this._parent.children = this._parent.children.filter((child) => child.object3DIndex !== this.object3DIndex);
     }
     if (value) {
       this.shouldUpdateWorldMatrix();
@@ -267,6 +270,16 @@ class Object3D {
       this.children[i].updateMatrixStack();
     }
   }
+  /**
+   * Destroy this {@link Object3D}. Removes its parent and set its children free.
+   */
+  destroy() {
+    for (let i = 0, l = this.children.length; i < l; i++) {
+      if (this.children[i])
+        this.children[i].parent = null;
+    }
+    this.parent = null;
+  }
 }
 
 export { Object3D };

dist/esm/core/objects3D/ProjectedObject3D.mjs

@@ -1,6 +1,7 @@
 import { Object3D } from './Object3D.mjs';
 import { isCameraRenderer } from '../renderers/utils.mjs';
 import { Mat4 } from '../../math/Mat4.mjs';
+import { Mat3 } from '../../math/Mat3.mjs';
 
 class ProjectedObject3D extends Object3D {
   /**
@@ -61,6 +62,13 @@ class ProjectedObject3D extends Object3D {
         onUpdate: () => {
           this.modelViewProjectionMatrix.multiplyMatrices(this.projectionMatrix, this.modelViewMatrix);
         }
+      },
+      normal: {
+        matrix: new Mat3(),
+        shouldUpdate: true,
+        onUpdate: () => {
+          this.normalMatrix.getNormalMatrix(this.worldMatrix);
+        }
       }
     };
   }
@@ -106,6 +114,20 @@ class ProjectedObject3D extends Object3D {
     this.matrices.modelViewProjection.matrix = value;
     this.matrices.modelViewProjection.shouldUpdate = true;
   }
+  /**
+   * Get our {@link normalMatrix | normal matrix}
+   */
+  get normalMatrix() {
+    return this.matrices.normal.matrix;
+  }
+  /**
+   * Set our {@link normalMatrix | normal matrix}
+   * @param value - new {@link normalMatrix | normal matrix}
+   */
+  set normalMatrix(value) {
+    this.matrices.normal.matrix = value;
+    this.matrices.normal.shouldUpdate = true;
+  }
   /**
    * Set our projection matrices shouldUpdate flags to true (tell them to update)
    */
@@ -119,6 +141,7 @@ class ProjectedObject3D extends Object3D {
   shouldUpdateWorldMatrix() {
     super.shouldUpdateWorldMatrix();
     this.shouldUpdateProjectionMatrixStack();
+    this.matrices.normal.shouldUpdate = true;
   }
   /**
    * Tell all our matrices to update

dist/esm/core/pipelines/PipelineManager.mjs

@@ -47,7 +47,7 @@ class PipelineManager {
       bindGroup.bindings.forEach((binding) => {
         cacheKey += binding.name + ",";
       });
-      cacheKey += bindGroup.layoutCacheKey;
+      cacheKey += bindGroup.pipelineCacheKey;
     });
     const existingPipelineEntry = this.isSameRenderPipeline({ ...parameters, cacheKey });
     if (existingPipelineEntry) {

dist/esm/core/renderers/GPUCameraRenderer.mjs

@@ -105,6 +105,14 @@ class GPUCameraRenderer extends GPURenderer {
           // camera projection matrix
           type: "mat4x4f",
           value: this.camera.projectionMatrix
+        },
+        position: {
+          // camera world position
+          type: "vec3f",
+          value: this.camera.position.clone().setFromMatrixPosition(this.camera.worldMatrix),
+          onBeforeUpdate: () => {
+            this.cameraBufferBinding.inputs.position.value.copy(this.camera.position).setFromMatrixPosition(this.camera.worldMatrix);
+          }
         }
       }
     });
@@ -129,6 +137,7 @@ class GPUCameraRenderer extends GPURenderer {
   updateCameraBindings() {
     this.cameraBufferBinding?.shouldUpdateBinding("view");
     this.cameraBufferBinding?.shouldUpdateBinding("projection");
+    this.cameraBufferBinding?.shouldUpdateBinding("position");
     this.cameraBindGroup?.update();
   }
   /**

dist/esm/core/renderers/GPURenderer.mjs

@@ -142,19 +142,14 @@ class GPURenderer {
     this.computePasses.forEach((computePass) => computePass.resize());
     this.pingPongPlanes.forEach((pingPongPlane) => pingPongPlane.resize(this.boundingRect));
     this.shaderPasses.forEach((shaderPass) => shaderPass.resize(this.boundingRect));
+    this.resizeMeshes();
+  }
+  /**
+   * Resize the {@link meshes}.
+   */
+  resizeMeshes() {
     this.meshes.forEach((mesh) => {
-      if (!("domElement" in mesh)) {
-        mesh.resize(this.boundingRect);
-      } else {
-        this.onBeforeCommandEncoderCreation.add(
-          () => {
-            if (!mesh.domElement.isResizing) {
-              mesh.domElement.setSize();
-            }
-          },
-          { once: true }
-        );
-      }
+      mesh.resize(this.boundingRect);
     });
   }
   /**