- first refactoring / uniformisation of targets and color attachments…

… handling

src/core/meshes/mixins/MeshBaseMixin.ts

@@ -42,7 +42,7 @@ export interface MeshBaseParams extends MeshBaseRenderParams {
 /**
  *  Base options used to create this Mesh
  */
-export interface MeshBaseOptions {
+export interface MeshBaseOptions extends RenderMaterialParams {
   /** The label of this Mesh, sent to various GPU objects for debugging purpose */
   label?: MeshBaseParams['label']
   /** Shaders to use by this Mesh {@link RenderMaterial} */
@@ -766,12 +766,30 @@ function MeshBaseMixin<TBase extends MixinConstructor>(Base: TBase): MixinConstr
           ...(renderPass.options.colorAttachments.length > 1 && {
             additionalTargets: renderPass.options.colorAttachments
               .filter((c, i) => i > 0)
-              .map((colorAttachment) => {
+              .map((colorAttachment, index) => {
                 return {
                   format: colorAttachment.targetFormat,
+                  ...(this.options.additionalTargets.length &&
+                    this.options.additionalTargets[index] &&
+                    this.options.additionalTargets[index].blend && {
+                      blend: this.options.additionalTargets[index].blend,
+                    }),
                 }
               }),
           }),
+          // TODO
+          ...(renderPass.options.colorAttachments.length && {
+            targets: renderPass.options.colorAttachments.map((colorAttachment, index) => {
+              return {
+                format: colorAttachment.targetFormat,
+                ...(this.options.targets?.length &&
+                  this.options.targets[index] &&
+                  this.options.targets[index].blend && {
+                    blend: this.options.targets[index].blend,
+                  }),
+              }
+            }),
+          }),
         }),
         // depth
         depth: renderPass.options.useDepth,
@@ -780,6 +798,8 @@ function MeshBaseMixin<TBase extends MixinConstructor>(Base: TBase): MixinConstr
         }),
       }
 
+      console.log(this.options.label, renderingOptions)
+
       this.material?.setRenderingOptions(renderingOptions)
     }
 

src/core/meshes/mixins/ProjectedMeshBaseMixin.ts

@@ -12,10 +12,8 @@ import { GPUCurtains } from '../../../curtains/GPUCurtains'
 import { DOMElementBoundingRect, RectCoords } from '../../DOM/DOMElement'
 import { RenderMaterialParams, ShaderOptions } from '../../../types/Materials'
 import { ProjectedObject3D } from '../../objects3D/ProjectedObject3D'
-import { DOMObject3D } from '../../../curtains/objects3D/DOMObject3D'
 import default_projected_vsWgsl from '../../shaders/chunks/default_projected_vs.wgsl'
 import default_normal_fsWgsl from '../../shaders/chunks/default_normal_fs.wgsl'
-import { ShaderPassParams } from '../../renderPasses/ShaderPass'
 
 /**
  * Base parameters used to create a ProjectedMesh
@@ -144,9 +142,9 @@ export declare class ProjectedMeshBaseClass extends MeshBaseClass {
 }
 
 /**
- * Used to add the properties and methods defined in {@link ProjectedMeshBaseClass} to the {@link MeshBaseClass} and mix it with a given Base of type {@link ProjectedObject3D} or {@link DOMObject3D}.
+ * Used to add the properties and methods defined in {@link ProjectedMeshBaseClass} to the {@link MeshBaseClass} and mix it with a given Base of type {@link ProjectedObject3D} or {@link curtains/objects3D/DOMObject3D.DOMObject3D | DOMObject3D}.
  * @exports
- * @param Base - the class to mix onto, should be of {@link ProjectedObject3D} or {@link DOMObject3D} type
+ * @param Base - the class to mix onto, should be of {@link ProjectedObject3D} or {@link curtains/objects3D/DOMObject3D.DOMObject3D | DOMObject3D} type
  * @returns - the mixed classes, creating a Projected Mesh.
  */
 function ProjectedMeshBaseMixin<TBase extends MixinConstructor<ProjectedObject3D>>(

src/core/pipelines/RenderPipelineEntry.ts

@@ -294,18 +294,47 @@ export class RenderPipelineEntry extends PipelineEntry {
     // we either disable blending if mesh if opaque
     // use a custom blending if set
     // or use this blend equation if mesh is transparent (see https://limnu.com/webgl-blending-youre-probably-wrong/)
-    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',
+    // 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) {
+      // we will assume our renderer alphaMode is set to 'premultiplied'
+      // we either disable blending if mesh if opaque
+      // use a custom blending if set
+      // or use this blend equation if mesh is transparent (see https://limnu.com/webgl-blending-youre-probably-wrong/)
+      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,
         },
-      })
+      ]
+    }
+
+    console.log(this.options.rendering.targets)
 
     this.descriptor = {
       label: this.options.label,
@@ -332,15 +361,16 @@ export class RenderPipelineEntry extends PipelineEntry {
         fragment: {
           module: this.shaders.fragment.module,
           entryPoint: (this.options.shaders.fragment as ShaderOptions).entryPoint,
-          targets: [
-            {
-              format: this.options.rendering.targetFormat ?? this.renderer.options.preferredFormat,
-              ...(blend && {
-                blend,
-              }),
-            },
-            ...(this.options.rendering.additionalTargets ?? []), // merge with additional targets if any
-          ],
+          // 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: {

src/core/renderPasses/ShaderPass.ts

@@ -69,6 +69,7 @@ export class ShaderPass extends FullscreenPlane {
     isRenderer(renderer, parameters.label ? parameters.label + ' ShaderPass' : 'ShaderPass')
 
     // force transparency to allow for correct blending between successive passes
+    // TODO should we disable depth instead?
     parameters.transparent = true
     parameters.label = parameters.label ?? 'ShaderPass ' + renderer.shaderPasses?.length
 

src/types/Materials.ts

@@ -133,15 +133,18 @@ export interface RenderMaterialBaseRenderingOptions {
   /** Cull mode to use with this {@link core/materials/RenderMaterial.RenderMaterial | RenderMaterial} */
   cullMode: GPUCullMode
   /** Custom blending to use with this {@link core/materials/RenderMaterial.RenderMaterial | RenderMaterial}. Can override default transparent blending if set */
-  blend?: GPUBlendState
+  //blend?: GPUBlendState
   /** Custom write mask value to use with this {@link core/materials/RenderMaterial.RenderMaterial | RenderMaterial}. */
-  writeMask?: GPUColorWriteFlags
+  //writeMask?: GPUColorWriteFlags
   /** Optional texture format of the {@link core/pipelines/RenderPipelineEntry.RenderPipelineEntry | render pipeline} color target. Default to the renderer preferred format. */
-  targetFormat: GPUTextureFormat
+  //targetFormat: GPUTextureFormat
   /** The {@link core/renderPasses/RenderPass.RenderPassParams#sampleCount | sampleCount} of the {@link core/renderPasses/RenderPass.RenderPass | RenderPass} onto which we'll be drawing. Set internally. */
   sampleCount: GPUSize32
   /** Define the additional targets properties in case this {@link core/materials/RenderMaterial.RenderMaterial | RenderMaterial} should be drawn to multiple targets. */
   additionalTargets: GPUColorTargetState[]
+
+  // TODO
+  targets: GPUColorTargetState[]
 }
 
 /** Rendering options to send to the {@link core/pipelines/RenderPipelineEntry.RenderPipelineEntry#pipeline | render pipeline} */

tests/index.html

@@ -75,6 +75,9 @@ <h1>gpu-curtains tests</h1>
           <li>
             <a href="orbit-camera-selective-passes/" target="_blank">Orbit camera and selective passes</a>
           </li>
+          <li>
+            <a href="order-independent-transparency/" target="_blank">Weighted blended OIT</a>
+          </li>
           <li>
             <a href="./plane-transformations/" target="_blank">Plane transformations</a>
           </li>

tests/objects-removal/TestPingPong.js

@@ -84,6 +84,11 @@ export class TestPingPong {
         },
       },
       targetFormat: 'rgba16float', // important, we'll be using floating point textures
+      targets: [
+        {
+          format: 'rgba16float', // important, we'll be using floating point textures
+        },
+      ],
       uniforms: {
         flowmap: {
           label: 'Flowmap',

tests/order-independent-transparency/index.html

@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+
+    <!-- Metas -->
+    <title>gpu-curtains | Orbit camera + depth textures basic test</title>
+    <meta name="description" content="gpu-curtains orbit camera + depth textures basic test" />
+
+    <link href="../../examples/common-styles.css" rel="stylesheet" />
+
+    <link
+      rel="icon"
+      type="image/png"
+      href="https://raw.githubusercontent.com/martinlaxenaire/gpu-curtains/main/website/assets/favicon.png"
+    />
+  </head>
+
+  <body>
+    <div id="canvas"></div>
+
+    <script src="main.js" type="module"></script>
+  </body>
+</html>