354 cleanup postprocessing

components/directional-light.js

@@ -10,6 +10,6 @@ export default (options) => ({
   bias: 0.1,
   castShadows: true,
   radius: 1,
-  // shadowMapSize: 2048,
+  // shadowMapSize: 2048, //TODO: MARCIN: why is this commented out?
   ...options,
 });

components/material.js

@@ -7,7 +7,7 @@
  * @alias module:components.material
  */
 export default (options) =>
-  options?.type === "line"
+  options?.type === "line" //TODO: MARCIN: Can we just have regular if () {} else {} for readability
     ? {
         baseColor: [1, 1, 1, 1],
         castShadows: false,
@@ -40,7 +40,7 @@ export default (options) =>
         // baseColorTexture,
         // emissiveColorTexture,
         // normalTexture,
-        normalTextureScale: 1,
+        normalTextureScale: 1, //TODO: MARCIN: why we have default for this while not for e.g. emissiveIntensity?
         // roughnessTexture,
         // metallicTexture,
         // metallicRoughnessTexture,

components/morph.js

@@ -9,6 +9,7 @@ export default (options) => ({
   current:
     options.current ||
     Object.keys(options.sources).reduce((current, attribute) => {
+      //TODO: MARCIN: is that cloning arrays per attribute? what if they are typed?
       current[attribute] = [...options.sources[attribute]];
       return current;
     }, {}),

components/overlay.js

@@ -4,4 +4,4 @@
  * @returns {object}
  * @alias module:components.overlay
  */
-export default (options) => ({ ...options });
+export default (options) => ({ ...options }); //TODO: MARCIN: Shoudln't this have at least texure? Are defaults/docs missing?

components/point-light.js

@@ -11,6 +11,6 @@ export default (options) => ({
   bias: 0.1,
   castShadows: true,
   radius: 1,
-  // shadowMapSize: 2048,
+  // shadowMapSize: 2048, //TODO: MARCIN: why is this commented out?
   ...options,
 });

components/spot-light.js

@@ -13,6 +13,6 @@ export default (options) => ({
   bias: 0.1,
   castShadows: true,
   radius: 1,
-  // shadowMapSize: 2048,
+  // shadowMapSize: 2048, //TODO: MARCIN: why is this commented out?
   ...options,
 });

examples/ao.js

@@ -244,13 +244,20 @@ gui.addRadioList(
 // renderEngine.renderers.find(
 //   (renderer) => renderer.type == "standard-renderer"
 // ).debugRender = "data.ao";
+
 gui.addRadioList(
   "Debug Post-Processing",
-  renderEngine.renderers.find(
-    (renderer) => renderer.type == "post-processing-renderer",
+  renderEngine.systems.find(
+    (system) => system.type == "render-pipeline-system",
   ),
   "debugRender",
-  ["", "ssao.blurHorizontal", "ssao.blurVertical"].map((value) => ({
+  [
+    "",
+    "ssao.main",
+    "ssao.blurHorizontal",
+    "ssao.blurVertical",
+    "gtao.main",
+  ].map((value) => ({
     name: value || "No debug",
     value,
   })),

examples/graph-viz.js

@@ -75,13 +75,14 @@ const dot = {
 
     containerElement.innerHTML = graphviz.layout(dotStr, "svg", "dot");
     const svgElement = containerElement.querySelector("svg");
+
     Object.assign(svgElement.style, {
       position: "absolute",
-      right: "10px",
+      left: "10px",
       top: "10px",
-      maxWidth: "80vw",
-      maxHeight: "400px",
       opacity: 0.7,
+      transformOrigin: "0 0",
+      transform: "scale(0.25)",
     });
     svgElement.removeAttribute("width");
     svgElement.removeAttribute("height");

examples/multi-view.js

@@ -71,14 +71,16 @@ renderGraph.renderPass = (opts) => {
 
     dot.passNode(passId, passName.replace(" ", "\n"));
 
-    const colorTextureId = opts?.pass?.opts?.color?.[0].id;
-    const colorTextureName = opts?.pass?.opts?.color?.[0].name;
-    if (colorTextureId) {
-      dot.resourceNode(colorTextureId, colorTextureName.replace(" ", "\n"));
-      dot.edge(passId, colorTextureId);
-    } else {
-      dot.edge(passId, "Window");
-    }
+    opts?.pass?.opts?.color?.forEach((colorAttachment) => {
+      const colorTextureId = colorAttachment.id;
+      const colorTextureName = colorAttachment.name || colorTextureId;
+      if (colorTextureId) {
+        dot.resourceNode(colorTextureId, colorTextureName.replace(" ", "\n"));
+        dot.edge(passId, colorTextureId);
+      } else {
+        dot.edge(passId, "Window");
+      }
+    });
 
     const depthTextureId = opts?.pass?.opts?.depth?.id;
     const depthTextureName = opts?.pass?.opts?.depth?.name;
@@ -323,10 +325,6 @@ const skyboxRendererSystem = systems.renderer.skybox({
   renderGraph,
 });
 const helperRendererSystem = systems.renderer.helper({ ctx });
-const postProcessingRendererSystem = systems.renderer.postProcessing({
-  ctx,
-  resourceCache,
-});
 
 const createView = (cameraEntity, viewport) => ({
   viewport,
@@ -417,7 +415,6 @@ ctx.frame(() => {
         standardRendererSystem,
         lineRendererSystem,
         skyboxRendererSystem,
-        postProcessingRendererSystem,
       ],
       renderView: renderView,
     });
@@ -431,7 +428,6 @@ ctx.frame(() => {
           basicRendererSystem,
           lineRendererSystem,
           helperRendererSystem,
-          postProcessingRendererSystem,
         ],
         renderView: renderView,
       },

examples/post-processing.js

@@ -384,10 +384,11 @@ gui.addRadioList(
     value,
   })),
 );
+
 gui.addRadioList(
   "Debug Post-Processing",
-  renderEngine.renderers.find(
-    (renderer) => renderer.type == "post-processing-renderer",
+  renderEngine.systems.find(
+    (system) => system.type == "render-pipeline-system",
   ),
   "debugRender",
   ["", "ssao.main", "dof.main", "bloom.threshold", "bloom.downsample[3]"].map(

package.json

@@ -59,7 +59,8 @@
   },
   "engines": {
     "node": ">=20.0.0",
-    "npm": ">=9.6.4"
+    "npm": ">=9.6.4",
+    "snowdev": "2.0.0-alpha.26"
   },
   "snowdev": {
     "dependencies": [
@@ -89,4 +90,4 @@
     ],
     "files": "{*.js,*(systems|components|helpers|loaders)/**/*.js}"
   }
-}
+}