v0.9.0

README.md

@@ -26,9 +26,9 @@
 
 ### DOM 2 WebGPU rendering engine
 
-gpu-curtains is a small, lightweight WebGPU rendering engine library.
+gpu-curtains is a small, lightweight 3D WebGPU rendering engine library.
 
-Although it can theoretically be used as a genuine 3D engine, its main purpose is to turn HTML elements into textured planes, allowing you to animate them via WGSL shaders.
+It can be used as a standalone 3D engine, but also includes extra classes designed to turn HTML elements into textured planes or meshes, allowing you to animate them via WGSL shaders.
 
 The project was initially conceived as a WebGPU port of [curtains.js](https://github.com/martinlaxenaire/curtainsjs). It turned out to be a complete rewrite of the library instead, but with a very similar API.
 
@@ -168,9 +168,9 @@ window.addEventListener('load', async () => {
 
 ## Limitations
 
-gpu-curtains is mostly made to create quads based on HTML elements, it may lack some common 3D engines features (even tho it is slowly evolving towards a real 3D engine).
+gpu-curtains is a slowly evolving 3D engine and may lack some common features.
 
-If you need a more robust 3D engine that could handle complex geometries or advanced rendering mechanics, then you should probably go with another library like [three.js](https://github.com/mrdoob/three.js) or [Babylon.js](https://github.com/BabylonJS).
+If you need a more robust 3D engine that could handle complex glTF or advanced lighting, shading or rendering mechanics, then you should probably go with another library like [three.js](https://github.com/mrdoob/three.js) or [Babylon.js](https://github.com/BabylonJS).
 
 ## Contributing
 

ROADMAP.md

@@ -8,9 +8,9 @@
 - Camera
 - Geometries
 - Materials (Material, RenderMaterial, ComputeMaterial)
-- Buffer & Bindings & BindGroups
+- Buffers & Bindings & BindGroups
 - Render + Compute Pipelines (async by default)
-- PipelineManager to cache RenderPipeline + set only needed BindGroup
+- PipelineManager to cache RenderPipelineEntry and ComputePipelineEntry + set only needed BindGroup
 - Meshes (Mesh, DOMMesh, FullscreenPlane, Plane)
 - Compute passes
 - Texture (including storage & depth) & DOMTexture classes
@@ -20,12 +20,14 @@
 - Lights & Shadows
 - Shader passes
 - PingPongPlane
-- Plane raycasting
+- RenderBundle
 - Basic CacheManager
 - Scroll + resize, frustum culling check
 - GPUCurtains
 - OrbitControls
+- Raycaster
 - GLTFLoader + GLTFScenesManager
+- HDRLoader + EnvironmentMap
 
 ## Work in progress
 
@@ -34,9 +36,10 @@
 ## TODO / possible improvements
 
 - Add/improve GLTFScenesManager features (sparse accessors, animations, morphing, skinning...)
-- Mesh raycasting
 - Add more lights (SpotLight...)
+- MSDF fonts
+- Better shader chunks system and/or custom preprocessor
+- Implement different lit extras RenderMaterial (i.e. RenderLambertMaterial, RenderPhongMaterial, RenderPBRMaterial, etc.)?
+- Implement indirect draw calls?
 - Improve typedoc documentation?
-- Use render bundles? Probably not suited to the library tho
-- Use indirect draw calls?
 - More examples & tests?

dist/esm/core/DOM/DOMFrustum.mjs

@@ -37,6 +37,12 @@ class DOMFrustum {
     this.modelViewProjectionMatrix = modelViewProjectionMatrix;
     this.containerBoundingRect = containerBoundingRect;
     this.DOMFrustumMargins = { ...defaultDOMFrustumMargins, ...DOMFrustumMargins };
+    this.clipSpaceBoundingRect = {
+      top: 0,
+      left: 0,
+      width: 0,
+      height: 0
+    };
     this.projectedBoundingRect = {
       top: 0,
       right: 0,
@@ -82,6 +88,12 @@ class DOMFrustum {
    */
   setDocumentCoordsFromClipSpaceOBB() {
     this.computeClipSpaceOBB();
+    this.clipSpaceBoundingRect = {
+      top: this.clipSpaceOBB.max.y,
+      left: this.clipSpaceOBB.min.x,
+      width: this.clipSpaceOBB.max.x - this.clipSpaceOBB.min.x,
+      height: this.clipSpaceOBB.max.y - this.clipSpaceOBB.min.y
+    };
     const minX = (this.clipSpaceOBB.min.x + 1) * 0.5;
     const maxX = (this.clipSpaceOBB.max.x + 1) * 0.5;
     const minY = 1 - (this.clipSpaceOBB.min.y + 1) * 0.5;
@@ -103,15 +115,21 @@ class DOMFrustum {
    * @param boundingSphere - bounding sphere in clip space.
    */
   setDocumentCoordsFromClipSpaceSphere(boundingSphere = { center: new Vec3(), radius: 0 }) {
+    this.clipSpaceBoundingRect = {
+      top: boundingSphere.center.y + boundingSphere.radius,
+      left: boundingSphere.center.x - boundingSphere.radius,
+      width: boundingSphere.radius * 2,
+      height: boundingSphere.radius * 2
+    };
     const centerX = (boundingSphere.center.x + 1) * 0.5;
     const centerY = 1 - (boundingSphere.center.y + 1) * 0.5;
     const { width, height, top, left } = this.containerBoundingRect;
-    this.projectedBoundingRect.width = boundingSphere.radius * height * 0.5;
-    this.projectedBoundingRect.height = boundingSphere.radius * height * 0.5;
+    this.projectedBoundingRect.width = boundingSphere.radius * height;
+    this.projectedBoundingRect.height = boundingSphere.radius * height;
     this.projectedBoundingRect.left = centerX * width + left - this.projectedBoundingRect.width * 0.5;
-    this.projectedBoundingRect.x = centerX * width + left - this.projectedBoundingRect.width * 0.5;
+    this.projectedBoundingRect.x = this.projectedBoundingRect.left;
     this.projectedBoundingRect.top = centerY * height + top - this.projectedBoundingRect.height * 0.5;
-    this.projectedBoundingRect.y = centerY * height + top - this.projectedBoundingRect.height * 0.5;
+    this.projectedBoundingRect.y = this.projectedBoundingRect.top;
     this.projectedBoundingRect.right = this.projectedBoundingRect.left + this.projectedBoundingRect.width;
     this.projectedBoundingRect.bottom = this.projectedBoundingRect.top + this.projectedBoundingRect.height;
   }

dist/esm/core/bindGroups/BindGroup.mjs

@@ -35,7 +35,11 @@ class BindGroup {
     this.consumers = /* @__PURE__ */ new Set();
     for (const binding of this.bufferBindings) {
       if ("buffer" in binding) {
-        binding.buffer.consumers.add(this.uuid);
+        if (binding.parent) {
+          binding.parent.buffer.consumers.add(this.uuid);
+        } else {
+          binding.buffer.consumers.add(this.uuid);
+        }
       }
       if ("resultBuffer" in binding) {
         binding.resultBuffer.consumers.add(this.uuid);
@@ -57,8 +61,13 @@ class BindGroup {
   addBindings(bindings = []) {
     bindings.forEach((binding) => {
       if ("buffer" in binding) {
-        this.renderer.deviceManager.bufferBindings.set(binding.cacheKey, binding);
-        binding.buffer.consumers.add(this.uuid);
+        if (binding.parent) {
+          this.renderer.deviceManager.bufferBindings.set(binding.parent.cacheKey, binding.parent);
+          binding.parent.buffer.consumers.add(this.uuid);
+        } else {
+          this.renderer.deviceManager.bufferBindings.set(binding.cacheKey, binding);
+          binding.buffer.consumers.add(this.uuid);
+        }
       }
     });
     this.bindings = [...this.bindings, ...bindings];
@@ -81,6 +90,13 @@ class BindGroup {
       if (!binding.buffer.consumers.size) {
         binding.buffer.destroy();
       }
+      if (binding.parent) {
+        binding.parent.buffer.consumers.delete(this.uuid);
+        if (!binding.parent.buffer.consumers.size) {
+          this.renderer.removeBuffer(binding.parent.buffer);
+          binding.parent.buffer.destroy();
+        }
+      }
     }
     if ("resultBuffer" in binding) {
       this.renderer.removeBuffer(binding.resultBuffer);
@@ -230,6 +246,9 @@ class BindGroup {
     this.resetEntries();
     for (const binding of this.bufferBindings) {
       binding.buffer.reset();
+      if (binding.parent) {
+        binding.parent.buffer.reset();
+      }
       if ("resultBuffer" in binding) {
         binding.resultBuffer.reset();
       }
@@ -258,12 +277,13 @@ class BindGroup {
     );
   }
   /**
-   * Creates binding GPUBuffer with correct params
-   * @param binding - the binding element
+   * Creates binding GPUBuffer with correct params.
+   * @param binding - The binding element.
+   * @param optionalLabel - Optional label to use for the {@link GPUBuffer}.
    */
-  createBindingBuffer(binding) {
+  createBindingBuffer(binding, optionalLabel = null) {
     binding.buffer.createBuffer(this.renderer, {
-      label: this.options.label + ": " + binding.bindingType + " buffer from: " + binding.label,
+      label: optionalLabel || this.options.label + ": " + binding.bindingType + " buffer from: " + binding.label,
       usage: [...["copySrc", "copyDst", binding.bindingType], ...binding.options.usage]
     });
     if ("resultBuffer" in binding) {
@@ -284,7 +304,9 @@ class BindGroup {
         binding.visibility = GPUShaderStage.VERTEX | GPUShaderStage.FRAGMENT | GPUShaderStage.COMPUTE;
       }
       if ("buffer" in binding) {
-        if (!binding.buffer.GPUBuffer) {
+        if (binding.parent && !binding.parent.buffer.GPUBuffer) {
+          this.createBindingBuffer(binding.parent, binding.parent.options.label);
+        } else if (!binding.buffer.GPUBuffer && !binding.parent) {
           this.createBindingBuffer(binding);
         }
       }
@@ -393,10 +415,12 @@ class BindGroup {
     for (const binding of bindingsRef) {
       bindGroupCopy.addBinding(binding);
       if ("buffer" in binding) {
-        if (!binding.buffer.GPUBuffer) {
+        if (binding.parent && !binding.parent.buffer.GPUBuffer) {
+          this.createBindingBuffer(binding.parent, binding.parent.options.label);
+          binding.parent.buffer.consumers.add(bindGroupCopy.uuid);
+        } else if (!binding.buffer.GPUBuffer && !binding.parent) {
           this.createBindingBuffer(binding);
         }
-        binding.buffer.consumers.add(bindGroupCopy.uuid);
         if ("resultBuffer" in binding) {
           binding.resultBuffer.consumers.add(bindGroupCopy.uuid);
         }