- fixed core targets/targetFormat refactoring

martinlaxenaire · Feb 28, 2024 · 126220b · 126220b
1 parent 81a67ad
commit 126220b
Show file tree

Hide file tree

Showing 336 changed files with 3,745 additions and 3,715 deletions.
diff --git a/dist/esm/core/materials/RenderMaterial.mjs b/dist/esm/core/materials/RenderMaterial.mjs
@@ -22,7 +22,9 @@ class RenderMaterial extends Material {
     if (shaders.fragment && !shaders.fragment.entryPoint) {
       shaders.fragment.entryPoint = "main";
     }
-    renderingOptions.targetFormat = renderingOptions.targetFormat ?? this.renderer.options.preferredFormat;
+    if (!renderingOptions.targets || !renderingOptions.targets.length || !renderingOptions.targets[0].format) {
+      renderingOptions.targets[0].format = this.renderer.options.preferredFormat;
+    }
     this.options = {
       ...this.options,
       shaders,

diff --git a/dist/esm/core/meshes/FullscreenPlane.mjs b/dist/esm/core/meshes/FullscreenPlane.mjs
@@ -26,6 +26,7 @@ class FullscreenPlane extends MeshBaseMixin(class {
         );
       });
     }
+    parameters.depthWriteEnabled = false;
     super(renderer, null, { geometry, ...parameters });
     this.size = {
       document: {

diff --git a/dist/esm/core/meshes/mixins/MeshBaseMixin.mjs b/dist/esm/core/meshes/mixins/MeshBaseMixin.mjs
@@ -311,18 +311,20 @@ function MeshBaseMixin(Base) {
      */
     setRenderingOptionsForRenderPass(renderPass) {
       const renderingOptions = {
+        // sample count
         sampleCount: renderPass.options.sampleCount,
         // color attachments
         ...renderPass.options.colorAttachments.length && {
-          targetFormat: renderPass.options.colorAttachments[0].targetFormat,
-          // multiple render targets?
-          ...renderPass.options.colorAttachments.length > 1 && {
-            additionalTargets: renderPass.options.colorAttachments.filter((c, i) => i > 0).map((colorAttachment) => {
-              return {
-                format: colorAttachment.targetFormat
-              };
-            })
-          }
+          targets: renderPass.options.colorAttachments.map((colorAttachment, index) => {
+            return {
+              // patch format...
+              format: colorAttachment.targetFormat,
+              // ...but keep original blend values if any
+              ...this.options.targets?.length && this.options.targets[index] && this.options.targets[index].blend && {
+                blend: this.options.targets[index].blend
+              }
+            };
+          })
         },
         // depth
         depth: renderPass.options.useDepth,

diff --git a/dist/esm/core/pipelines/RenderPipelineEntry.mjs b/dist/esm/core/pipelines/RenderPipelineEntry.mjs
@@ -208,16 +208,26 @@ ${this.shaders.full.head}`;
     if (!this.shadersModulesReady)
       return;
     let vertexLocationIndex = -1;
-    const blend = this.options.rendering.blend ?? (this.options.rendering.transparent && {
-      color: {
-        srcFactor: "src-alpha",
-        dstFactor: "one-minus-src-alpha"
-      },
-      alpha: {
-        srcFactor: "one",
-        dstFactor: "one-minus-src-alpha"
+    if (this.options.rendering.targets.length) {
+      if (this.options.rendering.transparent) {
+        this.options.rendering.targets[0].blend = this.options.rendering.targets[0].blend ? this.options.rendering.targets[0].blend : {
+          color: {
+            srcFactor: "src-alpha",
+            dstFactor: "one-minus-src-alpha"
+          },
+          alpha: {
+            srcFactor: "one",
+            dstFactor: "one-minus-src-alpha"
+          }
+        };
       }
-    });
+    } else {
+      this.options.rendering.targets = [
+        {
+          format: this.renderer.options.preferredFormat
+        }
+      ];
+    }
     this.descriptor = {
       label: this.options.label,
       layout: this.layout,
@@ -245,16 +255,7 @@ ${this.shaders.full.head}`;
         fragment: {
           module: this.shaders.fragment.module,
           entryPoint: this.options.shaders.fragment.entryPoint,
-          targets: [
-            {
-              format: this.options.rendering.targetFormat ?? this.renderer.options.preferredFormat,
-              ...blend && {
-                blend
-              }
-            },
-            ...this.options.rendering.additionalTargets ?? []
-            // merge with additional targets if any
-          ]
+          targets: this.options.rendering.targets
         }
       },
       primitive: {

diff --git a/dist/esm/core/renderPasses/RenderPass.mjs b/dist/esm/core/renderPasses/RenderPass.mjs
@@ -15,10 +15,6 @@ class RenderPass {
     // color
     useColorAttachments = true,
     shouldUpdateView = true,
-    loadOp = "clear",
-    storeOp = "store",
-    clearValue = [0, 0, 0, 0],
-    targetFormat,
     colorAttachments = [],
     // depth
     useDepth = true,
@@ -35,10 +31,10 @@ class RenderPass {
     this.renderer = renderer;
     if (useColorAttachments) {
       const defaultColorAttachment = {
-        loadOp,
-        storeOp,
-        clearValue,
-        targetFormat: targetFormat ?? this.renderer.options.preferredFormat
+        loadOp: "clear",
+        storeOp: "store",
+        clearValue: [0, 0, 0, 0],
+        targetFormat: this.renderer.options.preferredFormat
       };
       if (!colorAttachments.length) {
         colorAttachments = [defaultColorAttachment];
@@ -55,10 +51,6 @@ class RenderPass {
       // color
       useColorAttachments,
       shouldUpdateView,
-      loadOp,
-      storeOp,
-      clearValue,
-      targetFormat: targetFormat ?? this.renderer.options.preferredFormat,
       colorAttachments,
       // depth
       useDepth,
@@ -68,7 +60,6 @@ class RenderPass {
       depthClearValue,
       depthFormat
     };
-    this.setClearValue(clearValue);
     if (this.options.useDepth) {
       this.createDepthTexture();
     }
@@ -169,10 +160,14 @@ class RenderPass {
    * @param colorAttachmentIndex - index of the color attachment for which to use this load operation
    */
   setLoadOp(loadOp = "clear", colorAttachmentIndex = 0) {
-    this.options.loadOp = loadOp;
-    if (this.options.useColorAttachments && this.descriptor) {
-      if (this.descriptor.colorAttachments && this.descriptor.colorAttachments[colorAttachmentIndex]) {
-        this.descriptor.colorAttachments[colorAttachmentIndex].loadOp = loadOp;
+    if (this.options.useColorAttachments) {
+      if (this.options.colorAttachments[colorAttachmentIndex]) {
+        this.options.colorAttachments[colorAttachmentIndex].loadOp = loadOp;
+      }
+      if (this.descriptor) {
+        if (this.descriptor.colorAttachments && this.descriptor.colorAttachments[colorAttachmentIndex]) {
+          this.descriptor.colorAttachments[colorAttachmentIndex].loadOp = loadOp;
+        }
       }
     }
   }
@@ -193,16 +188,21 @@ class RenderPass {
    * @param colorAttachmentIndex - index of the color attachment for which to use this clear value
    */
   setClearValue(clearValue = [0, 0, 0, 0], colorAttachmentIndex = 0) {
-    if (this.renderer.alphaMode === "premultiplied") {
-      const alpha = clearValue[3];
-      clearValue[0] = Math.min(clearValue[0], alpha);
-      clearValue[1] = Math.min(clearValue[1], alpha);
-      clearValue[2] = Math.min(clearValue[2], alpha);
-    } else {
-      this.options.clearValue = clearValue;
-    }
-    if (this.descriptor && this.descriptor.colorAttachments && this.descriptor.colorAttachments[colorAttachmentIndex]) {
-      this.descriptor.colorAttachments[colorAttachmentIndex].clearValue = clearValue;
+    if (this.options.useColorAttachments) {
+      if (this.renderer.alphaMode === "premultiplied") {
+        const alpha = clearValue[3];
+        clearValue[0] = Math.min(clearValue[0], alpha);
+        clearValue[1] = Math.min(clearValue[1], alpha);
+        clearValue[2] = Math.min(clearValue[2], alpha);
+      }
+      if (this.options.colorAttachments[colorAttachmentIndex]) {
+        this.options.colorAttachments[colorAttachmentIndex].clearValue = clearValue;
+      }
+      if (this.descriptor) {
+        if (this.descriptor.colorAttachments && this.descriptor.colorAttachments[colorAttachmentIndex]) {
+          this.descriptor.colorAttachments[colorAttachmentIndex].clearValue = clearValue;
+        }
+      }
     }
   }
   /**

diff --git a/dist/esm/core/renderPasses/RenderTarget.mjs b/dist/esm/core/renderPasses/RenderTarget.mjs
@@ -36,20 +36,20 @@ class RenderTarget {
     this.type = "RenderTarget";
     this.renderer = renderer;
     this.uuid = generateUUID();
-    const { label, targetFormat, depthTexture, autoRender, ...renderPassParams } = parameters;
+    const { label, colorAttachments, depthTexture, autoRender, ...renderPassParams } = parameters;
     this.options = {
       label,
       ...renderPassParams,
       ...depthTexture && { depthTexture },
-      targetFormat: targetFormat ?? this.renderer.options.preferredFormat,
+      ...colorAttachments && { colorAttachments },
       autoRender: autoRender === void 0 ? true : autoRender
     };
     if (autoRender !== void 0) {
       __privateSet(this, _autoRender, autoRender);
     }
     this.renderPass = new RenderPass(this.renderer, {
       label: this.options.label ? `${this.options.label} Render Pass` : "Render Target Render Pass",
-      targetFormat: this.options.targetFormat,
+      ...colorAttachments && { colorAttachments },
       depthTexture: this.options.depthTexture ?? this.renderer.renderPass.depthTexture,
       // reuse renderer depth texture for every pass
       ...renderPassParams
@@ -58,7 +58,7 @@ class RenderTarget {
       this.renderTexture = new RenderTexture(this.renderer, {
         label: this.options.label ? `${this.options.label} Render Texture` : "Render Target render texture",
         name: "renderTexture",
-        format: this.options.targetFormat,
+        format: colorAttachments && colorAttachments.length && colorAttachments[0].targetFormat ? colorAttachments[0].targetFormat : this.renderer.options.preferredFormat,
         ...this.options.qualityRatio !== void 0 && { qualityRatio: this.options.qualityRatio }
       });
     }

diff --git a/dist/esm/core/renderPasses/ShaderPass.mjs b/dist/esm/core/renderPasses/ShaderPass.mjs
@@ -12,7 +12,7 @@ class ShaderPass extends FullscreenPlane {
   constructor(renderer, parameters = {}) {
     renderer = renderer && renderer.renderer || renderer;
     isRenderer(renderer, parameters.label ? parameters.label + " ShaderPass" : "ShaderPass");
-    parameters.transparent = true;
+    parameters.depth = false;
     parameters.label = parameters.label ?? "ShaderPass " + renderer.shaderPasses?.length;
     parameters.sampleCount = !!parameters.sampleCount ? parameters.sampleCount : renderer && renderer.postProcessingPass ? renderer && renderer.postProcessingPass.options.sampleCount : 1;
     if (!parameters.shaders) {

diff --git a/dist/esm/core/renderers/GPURenderer.mjs b/dist/esm/core/renderers/GPURenderer.mjs
@@ -274,12 +274,12 @@ class GPURenderer {
   setMainRenderPasses() {
     this.renderPass = new RenderPass(this, {
       label: "Main render pass",
-      targetFormat: this.options.preferredFormat,
+      //targetFormat: this.options.preferredFormat,
       ...this.options.renderPass
     });
     this.postProcessingPass = new RenderPass(this, {
       label: "Post processing render pass",
-      targetFormat: this.options.preferredFormat,
+      //targetFormat: this.options.preferredFormat,
       // no need to handle depth or perform MSAA on a fullscreen quad
       useDepth: false,
       sampleCount: 1

diff --git a/dist/esm/curtains/meshes/PingPongPlane.mjs b/dist/esm/curtains/meshes/PingPongPlane.mjs
@@ -11,10 +11,15 @@ class PingPongPlane extends FullscreenPlane {
   constructor(renderer, parameters = {}) {
     renderer = renderer && renderer.renderer || renderer;
     isRenderer(renderer, parameters.label ? parameters.label + " PingPongPlane" : "PingPongPlane");
+    const colorAttachments = parameters.targets && parameters.targets.length && parameters.targets.map((target) => {
+      return {
+        targetFormat: target.format
+      };
+    });
     parameters.outputTarget = new RenderTarget(renderer, {
       label: parameters.label ? parameters.label + " render target" : "Ping Pong render target",
       useDepth: false,
-      ...parameters.targetFormat && { targetFormat: parameters.targetFormat }
+      ...colorAttachments && { colorAttachments }
     });
     parameters.transparent = false;
     parameters.depth = false;
@@ -24,7 +29,7 @@ class PingPongPlane extends FullscreenPlane {
     this.createRenderTexture({
       label: parameters.label ? `${parameters.label} render texture` : "PingPongPlane render texture",
       name: "renderTexture",
-      ...parameters.targetFormat && { format: parameters.targetFormat }
+      ...parameters.targets && parameters.targets.length && { format: parameters.targets[0].format }
     });
   }
   /**