Merge pull request #74 from martinlaxenaire/develop

Minor bugs fixes and improvements - v0.7.1

ROADMAP.md

@@ -29,11 +29,11 @@
 ## Work in progress
 
 - Examples & tests
-- Add/improve GLTFScenesManager features
+- glTF IBL shader
 
 ## TODO / possible improvements
 
-- Sort transparent objects by distance from the camera to the object bounding box center + radius distance before drawing them
+- Add/improve GLTFScenesManager features
 - Option to chose between sphere and OBB frustum culling
 - Mesh raycasting
 - Lights management?

dist/esm/core/bindings/BufferBinding.mjs

@@ -136,7 +136,13 @@ class BufferBinding extends Binding {
       });
       binding.value = bindings[bindingKey].value;
       if (binding.value instanceof Vec2 || binding.value instanceof Vec3) {
-        binding.value.onChange(() => binding.shouldUpdate = true);
+        const _onChangeCallback = binding.value._onChangeCallback;
+        binding.value._onChangeCallback = () => {
+          if (_onChangeCallback) {
+            _onChangeCallback();
+          }
+          binding.shouldUpdate = true;
+        };
       }
       this.inputs[bindingKey] = binding;
       this.cacheKey += `${bindingKey},${bindings[bindingKey].type},`;

dist/esm/core/camera/Camera.mjs

@@ -107,7 +107,7 @@ class Camera extends Object3D {
    */
   updateModelMatrix() {
     super.updateModelMatrix();
-    this.setScreenRatios();
+    this.setVisibleSize();
     this.matrices.view.shouldUpdate = true;
   }
   /**
@@ -142,7 +142,7 @@ class Camera extends Object3D {
       __privateSet(this, _fov, fov);
       this.shouldUpdateProjectionMatrix();
     }
-    this.setScreenRatios();
+    this.setVisibleSize();
     this.setCSSPerspective();
   }
   /**
@@ -203,7 +203,7 @@ class Camera extends Object3D {
     }
     this.size.width = width;
     this.size.height = height;
-    this.setScreenRatios();
+    this.setVisibleSize();
     this.setCSSPerspective();
   }
   /**
@@ -241,7 +241,7 @@ class Camera extends Object3D {
    * @param depth - depth to use for calculations
    * @returns - visible width and height at given depth
    */
-  getScreenRatiosAtDepth(depth = 0) {
+  getVisibleSizeAtDepth(depth = 0) {
     const cameraOffset = this.position.z;
     if (depth < cameraOffset) {
       depth -= cameraOffset;
@@ -258,8 +258,8 @@ class Camera extends Object3D {
   /**
    * Sets visible width / height at a depth of 0.
    */
-  setScreenRatios() {
-    this.screenRatio = this.getScreenRatiosAtDepth();
+  setVisibleSize() {
+    this.visibleSize = this.getVisibleSizeAtDepth();
   }
   /**
    * Rotate this {@link Camera} so it looks at the {@link Vec3 | target}

dist/esm/core/renderers/GPUCameraRenderer.mjs

@@ -180,8 +180,8 @@ class GPUCameraRenderer extends GPURenderer {
    * Call our {@link GPURenderer#onResize | GPURenderer onResize method} and resize our {@link camera} as well
    */
   onResize() {
-    super.onResize();
     this.setPerspective();
+    super.onResize();
   }
   /* RENDER */
   /**

dist/esm/curtains/objects3D/DOMObject3D.mjs

@@ -31,7 +31,7 @@ class DOMObject3D extends ProjectedObject3D {
    * @param element - {@link HTMLElement} or string representing an {@link HTMLElement} selector used to scale and position the {@link DOMObject3D}
    * @param parameters - {@link DOMObject3DParams | parameters} used to create this {@link DOMObject3D}
    */
-  constructor(renderer, element, parameters) {
+  constructor(renderer, element, parameters = {}) {
     super(renderer);
     /** Private {@link Vec3 | vector} used to keep track of the actual {@link DOMObject3DTransforms#position.world | world position} accounting the {@link DOMObject3DTransforms#position.document | additional document translation} converted into world space */
     __privateAdd(this, _DOMObjectWorldPosition, new Vec3());
@@ -59,8 +59,7 @@ class DOMObject3D extends ProjectedObject3D {
         position: new Vec2()
       },
       cameraWorld: {
-        size: new Vec2(1),
-        position: new Vec2()
+        size: new Vec2(1)
       },
       scaledWorld: {
         size: new Vec3(1),
@@ -255,8 +254,8 @@ class DOMObject3D extends ProjectedObject3D {
    */
   documentToWorldSpace(vector = new Vec3()) {
     return new Vec3(
-      vector.x * this.renderer.pixelRatio / this.renderer.boundingRect.width * this.camera.screenRatio.width,
-      -(vector.y * this.renderer.pixelRatio / this.renderer.boundingRect.height) * this.camera.screenRatio.height,
+      vector.x * this.renderer.pixelRatio / this.renderer.boundingRect.width * this.camera.visibleSize.width,
+      -(vector.y * this.renderer.pixelRatio / this.renderer.boundingRect.height) * this.camera.visibleSize.height,
       vector.z
     );
   }
@@ -286,19 +285,15 @@ class DOMObject3D extends ProjectedObject3D {
       (containerCenter.y - planeCenter.y) / containerBoundingRect.height
     );
     this.size.cameraWorld.size.set(
-      this.size.normalizedWorld.size.x * this.camera.screenRatio.width,
-      this.size.normalizedWorld.size.y * this.camera.screenRatio.height
-    );
-    this.size.cameraWorld.position.set(
-      this.size.normalizedWorld.position.x * this.camera.screenRatio.width,
-      this.size.normalizedWorld.position.y * this.camera.screenRatio.height
+      this.size.normalizedWorld.size.x * this.camera.visibleSize.width,
+      this.size.normalizedWorld.size.y * this.camera.visibleSize.height
     );
     this.size.scaledWorld.size.set(this.size.cameraWorld.size.x / size.x, this.size.cameraWorld.size.y / size.y, 1);
     this.size.scaledWorld.size.z = this.size.scaledWorld.size.y * (size.x / size.y / (this.size.document.width / this.size.document.height));
     this.size.scaledWorld.position.set(
-      this.size.cameraWorld.position.x - center.x * this.size.scaledWorld.size.x * size.x,
-      this.size.cameraWorld.position.y - center.y * this.size.scaledWorld.size.y * size.y,
-      -center.z
+      this.size.normalizedWorld.position.x * this.camera.visibleSize.width,
+      this.size.normalizedWorld.position.y * this.camera.visibleSize.height,
+      0
     );
   }
   /**
@@ -334,10 +329,10 @@ class DOMObject3D extends ProjectedObject3D {
   setWorldTransformOrigin() {
     this.transforms.origin.world = new Vec3(
       (this.transformOrigin.x * 2 - 1) * // between -1 and 1
-      this.size.scaledWorld.size.x,
+      __privateGet(this, _DOMObjectWorldScale).x,
       -(this.transformOrigin.y * 2 - 1) * // between -1 and 1
-      this.size.scaledWorld.size.y,
-      this.transformOrigin.z * this.size.scaledWorld.size.z
+      __privateGet(this, _DOMObjectWorldScale).y,
+      this.transformOrigin.z * __privateGet(this, _DOMObjectWorldScale).z
     );
     this.shouldUpdateMatrixStack();
   }
@@ -353,7 +348,7 @@ class DOMObject3D extends ProjectedObject3D {
   /**
    * Callback to execute just after the {@link domElement} has been resized.
    * @param callback - callback to run just after {@link domElement} has been resized
-   * @returns - our Mesh
+   * @returns - our {@link DOMObject3D}
    */
   onAfterDOMElementResize(callback) {
     if (callback) {

dist/esm/curtains/renderers/GPUCurtainsRenderer.mjs

@@ -56,14 +56,9 @@ class GPUCurtainsRenderer extends GPUCameraRenderer {
       }
     });
     this.domObjects.forEach((domObject) => {
-      this.onBeforeCommandEncoderCreation.add(
-        () => {
-          if (!domObject.domElement.isResizing) {
-            domObject.domElement.setSize();
-          }
-        },
-        { once: true }
-      );
+      if (!domObject.domElement.isResizing) {
+        domObject.domElement.setSize();
+      }
     });
   }
 }

dist/esm/index.mjs

@@ -35,7 +35,6 @@ export { Texture } from './core/textures/Texture.mjs';
 export { DOMTexture } from './core/textures/DOMTexture.mjs';
 export { DOMElement } from './core/DOM/DOMElement.mjs';
 export { DOMMesh } from './curtains/meshes/DOMMesh.mjs';
-export { PingPongPlane } from './curtains/meshes/PingPongPlane.mjs';
 export { Plane } from './curtains/meshes/Plane.mjs';
 export { DOMObject3D } from './curtains/objects3D/DOMObject3D.mjs';
 export { GPUCurtainsRenderer } from './curtains/renderers/GPUCurtainsRenderer.mjs';
@@ -49,6 +48,7 @@ export { Vec3 } from './math/Vec3.mjs';
 export { OrbitControls } from './extras/controls/OrbitControls.mjs';
 export { BoxGeometry } from './extras/geometries/BoxGeometry.mjs';
 export { SphereGeometry } from './extras/geometries/SphereGeometry.mjs';
+export { PingPongPlane } from './extras/meshes/PingPongPlane.mjs';
 export { GLTFLoader } from './extras/gltf/GLTFLoader.mjs';
 export { GLTFScenesManager } from './extras/gltf/GLTFScenesManager.mjs';
 export { buildIBLShaders, buildPBRShaders, buildShaders } from './extras/gltf/utils.mjs';