fix: reverse z

examples/demos/light.ts

@@ -91,6 +91,7 @@ export async function render($canvas: HTMLCanvasElement, gui: lil.GUI) {
             directional_light: new DirectionalLight({
               color: Color.rgb(0.98, 0.95, 0.82),
               shadows_enabled: true,
+              illuminance: 10000,
             }),
             transform: Transform.from_xyz(0.0, 0.0, 0.0).look_at(
               new Vec3(-1, -1, -1),
@@ -109,7 +110,7 @@ export async function render($canvas: HTMLCanvasElement, gui: lil.GUI) {
           new Camera3dBundle({
             camera: new Camera(),
             projection: new Perspective(),
-            transform: Transform.from_xyz(-2.5, 1.5, 2.0).look_at(
+            transform: Transform.from_xyz(2.0, 2.0, 2.0).look_at(
               Vec3.ZERO,
               Vec3.Y,
             ),
@@ -122,20 +123,23 @@ export async function render($canvas: HTMLCanvasElement, gui: lil.GUI) {
         )
         .entity.hold();
 
-      const mesh = Mesh.from(new Cube(1));
+      // const mesh = Mesh.from(new Cube(1));
+      const mesh = Mesh.from(Plane.from_size(10));
       const material = new Material({
-        base_color_texture: baseColorImage,
+        base_color: Color.WHITE,
+        perceptual_roughness: 1.0,
       });
       this.commands.spawn(
         new PbrBundle({
           mesh,
           material,
-          transform: Transform.from_xyz(0, 0, 0),
+          transform: Transform.from_xyz(0, -0.5, 0),
         }),
       );
 
-      const mesh2 = Mesh.from(Plane.from_size(10));
+      const mesh2 = Mesh.from(new Cube(1));
       const material2 = new Material({
+        base_color_texture: baseColorImage,
         base_color: Color.WHITE,
         perceptual_roughness: 1.0,
       });
@@ -178,10 +182,10 @@ export async function render($canvas: HTMLCanvasElement, gui: lil.GUI) {
   const directionalFolder = gui.addFolder('directional');
   const directionalConfig = {
     color: '#faf2d1',
-    illuminance: 100000,
-    dx: -1,
-    dy: -1,
-    dz: -1,
+    illuminance: 10000,
+    dx: -2.5,
+    dy: 1.5,
+    dz: 2.0,
   };
   directionalFolder
     .addColor(directionalConfig, 'color')
@@ -196,7 +200,7 @@ export async function render($canvas: HTMLCanvasElement, gui: lil.GUI) {
       directional_light.illuminance = illuminance;
     });
   directionalFolder
-    .add(directionalConfig, 'dx', -1, 1)
+    .add(directionalConfig, 'dx', -5, 5)
     .onChange((dx: number) => {
       const transform = directional.write(Transform);
 
@@ -211,7 +215,7 @@ export async function render($canvas: HTMLCanvasElement, gui: lil.GUI) {
       transform.scale = scale;
     });
   directionalFolder
-    .add(directionalConfig, 'dy', -1, 1)
+    .add(directionalConfig, 'dy', -5, 5)
     .onChange((dy: number) => {
       const transform = directional.write(Transform);
 
@@ -226,7 +230,7 @@ export async function render($canvas: HTMLCanvasElement, gui: lil.GUI) {
       transform.scale = scale;
     });
   directionalFolder
-    .add(directionalConfig, 'dz', -1, 1)
+    .add(directionalConfig, 'dz', -5, 5)
     .onChange((dz: number) => {
       const transform = directional.write(Transform);
 

package.json

@@ -45,7 +45,7 @@
   },
   "homepage": "https://github.com/xiaoiver/renderer#readme",
   "dependencies": {
-    "@antv/g-device-api": "^1.4.14",
+    "@antv/g-device-api": "^1.4.15",
     "@lastolivegames/becsy": "^0.15.9",
     "gl-matrix": "^3.4.3",
     "hammerjs": "^2.0.8",

src/framegraph/RenderCache.ts

@@ -138,6 +138,22 @@ function bindingsDescriptorHash(a: BindingsDescriptor): number {
       hash = hashCodeNumberUpdate(hash, binding.size);
     }
   }
+  for (let i = 0; i < a.storageBufferBindings.length; i++) {
+    const binding = a.storageBufferBindings[i];
+    if (binding !== null && binding.buffer !== null) {
+      hash = hashCodeNumberUpdate(hash, binding.buffer.id);
+      hash = hashCodeNumberUpdate(hash, binding.binding);
+      hash = hashCodeNumberUpdate(hash, binding.offset);
+      hash = hashCodeNumberUpdate(hash, binding.size);
+    }
+  }
+  for (let i = 0; i < a.storageTextureBindings.length; i++) {
+    const binding = a.storageTextureBindings[i];
+    if (binding !== null && binding.texture !== null) {
+      hash = hashCodeNumberUpdate(hash, binding.texture.id);
+      hash = hashCodeNumberUpdate(hash, binding.binding);
+    }
+  }
   return hashCodeNumberFinish(hash);
 }
 

src/framegraph/RenderGraphHelpers.ts

@@ -5,7 +5,6 @@ import {
   OpaqueBlack,
   OpaqueWhite,
 } from '@antv/g-device-api';
-// import { reverseDepthForClearValue } from '../platform/utils';
 import { RGAttachmentSlot } from './interfaces';
 import { RGRenderTargetDescription } from './RenderTargetDescription';
 
@@ -14,8 +13,7 @@ export function makeAttachmentClearDescriptor(
 ): GfxrAttachmentClearDescriptor {
   return {
     colorClearColor: clearColor,
-    // depthClearValue: reverseDepthForClearValue(1.0),
-    depthClearValue: 1,
+    depthClearValue: 0.0,
     stencilClearValue: 0.0,
   };
 }

src/framegraph/RenderInst.ts

@@ -63,6 +63,7 @@ export class RenderInst {
     samplerBindings: [],
     uniformBufferBindings: [],
     storageBufferBindings: [],
+    storageTextureBindings: [],
   }));
   private dynamicUniformBufferByteOffsets: number[] = nArray(10, () => 0);
 
@@ -102,6 +103,7 @@ export class RenderInst {
       samplerBindings: [],
       uniformBufferBindings: [],
       storageBufferBindings: [],
+      storageTextureBindings: [],
     }));
   }
 
@@ -151,6 +153,7 @@ export class RenderInst {
       numSamplers: obd.samplerBindings?.length,
       numUniformBuffers: obd.uniformBufferBindings?.length,
       numStorageBuffers: obd.storageBufferBindings?.length,
+      numStorageTextures: obd.storageTextureBindings?.length,
     });
 
     for (
@@ -165,6 +168,17 @@ export class RenderInst {
       tbd.uniformBufferBindings[i].size =
         o.bindingDescriptors[0].uniformBufferBindings[i].size;
     this.setSamplerBindingsFromTextureMappings(obd.samplerBindings);
+    for (
+      let i = 0;
+      i <
+      Math.min(
+        tbd.storageBufferBindings.length,
+        obd.storageBufferBindings.length,
+      );
+      i++
+    )
+      tbd.storageBufferBindings[i].size =
+        o.bindingDescriptors[0].storageBufferBindings[i].size;
     for (let i = 0; i < o.dynamicUniformBufferByteOffsets.length; i++)
       this.dynamicUniformBufferByteOffsets[i] =
         o.dynamicUniformBufferByteOffsets[i];
@@ -228,6 +242,7 @@ export class RenderInst {
     numUniformBuffers: number;
     numSamplers: number;
     numStorageBuffers: number;
+    numStorageTextures: number;
   }): void {
     assert(
       bindingLayout.numUniformBuffers <
@@ -255,13 +270,22 @@ export class RenderInst {
       });
     for (
       let i = this.bindingDescriptors[0].storageBufferBindings.length;
-      i < bindingLayout.numStorageBuffers;
+      i < bindingLayout.numStorageBuffers || 0;
       i++
     )
       this.bindingDescriptors[0].storageBufferBindings.push({
         binding: i,
         buffer: null,
       });
+    for (
+      let i = this.bindingDescriptors[0].storageTextureBindings.length;
+      i < bindingLayout.numStorageTextures || 0;
+      i++
+    )
+      this.bindingDescriptors[0].storageTextureBindings.push({
+        binding: i,
+        texture: null,
+      });
   }
 
   drawIndexes(indexCount: number, indexStart = 0): void {
@@ -273,7 +297,7 @@ export class RenderInst {
 
   drawIndexesInstanced(
     indexCount: number,
-    instanceCount: number,
+    instanceCount?: number,
     indexStart = 0,
   ): void {
     this.flags = setBitFlagEnabled(this.flags, RenderInstFlags.Indexed, true);

src/math/Mat4.ts

@@ -99,6 +99,20 @@ export class Mat4 {
     );
   }
 
+  static perspective_infinite_rh(
+    fov_y_radians: number,
+    aspect_ratio: number,
+    z_near: number,
+  ) {
+    const f = 1.0 / Math.tan(0.5 * fov_y_radians);
+    return Mat4.from_cols(
+      new Vec4(f / aspect_ratio, 0.0, 0.0, 0.0),
+      new Vec4(0.0, f, 0.0, 0.0),
+      new Vec4(0.0, 0.0, -1.0, -1.0),
+      new Vec4(0.0, 0.0, -z_near, 0.0),
+    );
+  }
+
   /**
    * Creates an infinite reverse right-handed perspective projection matrix
    * with `[0,1]` depth range.

src/plugins/Renderer.ts

@@ -11,8 +11,6 @@ import {
   PreUpdate,
   PreStartUp,
   RenderResource,
-  ExtractMeshes,
-  PrepareMaterial,
 } from '../systems';
 import { Mesh } from '../meshes';
 import { Material } from '../components';
@@ -24,8 +22,7 @@ export class RendererPlugin implements Plugin {
 
     app.add_systems(PreStartUp, RenderResource);
     app.add_systems(PreUpdate, PrepareViewUniforms);
-    app.add_systems(PreUpdate, PrepareMaterial);
-    app.add_systems(Update, ExtractMeshes);
+    // app.add_systems(Update, ExtractMeshes);
     app.add_systems(Update, MeshPipeline);
   }
 }

src/shaders/pbr/pbr.wgsl

@@ -36,6 +36,7 @@ fn fragment(
     var out: FragmentOutput;
     if (u32(pbr_input.material.flags) & STANDARD_MATERIAL_FLAGS_UNLIT_BIT) == 0u {
         out.color = apply_pbr_lighting(pbr_input);
+        // out.color = vec4(vec3(in.position.z * 20.0), 1.0);
     } else {
         out.color = pbr_input.material.base_color;
     }

src/systems/FxaaPipeline.ts

@@ -84,6 +84,7 @@ export class FxaaPipeline extends System {
     renderHelper: RenderHelper,
     renderInput: RenderInput,
     mainColorTargetID: number,
+    mainDepthTargetID?: number,
   ) => {
     const device = renderHelper.getDevice();
 
@@ -108,6 +109,10 @@ export class FxaaPipeline extends System {
     builder.pushPass((pass) => {
       pass.setDebugName('FXAA');
       pass.attachRenderTargetID(RGAttachmentSlot.Color0, mainColorTargetID);
+      // pass.attachRenderTargetID(
+      //   RGAttachmentSlot.DepthStencil,
+      //   mainDepthTargetID,
+      // );
 
       const mainColorResolveTextureID =
         builder.resolveRenderTarget(mainColorTargetID);
@@ -122,6 +127,7 @@ export class FxaaPipeline extends System {
           numUniformBuffers: 0,
           numSamplers: 1,
           numStorageBuffers: 0,
+          numStorageTextures: 0,
         });
         renderInst.drawPrimitives(3);
 

src/systems/MeshPipeline.ts

@@ -1,6 +1,6 @@
 import { Entity, System } from '@lastolivegames/becsy';
 import { Device, SwapChain, OpaqueWhite } from '@antv/g-device-api';
-import { AppConfig, Material, Transform } from '../components';
+import { AppConfig, GlobalTransform, Material, Transform } from '../components';
 import {
   AntialiasingMode,
   RGAttachmentSlot,
@@ -14,7 +14,6 @@ import {
 import { Mesh } from '../meshes';
 import { PrepareViewUniforms } from './PrepareViewUniforms';
 import { PrepareFog } from './PrepareFog';
-import { PrepareMaterial } from './PrepareMaterial';
 import { RenderResource } from './RenderResource';
 import { ExtractMeshes } from './ExtractMeshes';
 import { OpaqueNode } from './nodes/Opaque';
@@ -25,7 +24,7 @@ export class MeshPipeline extends System {
   private appConfig = this.singleton.read(AppConfig);
 
   private rendererResource = this.attach(RenderResource);
-  extractMeshes = this.attach(ExtractMeshes);
+  // extractMeshes = this.attach(ExtractMeshes);
 
   device: Device;
   swapChain: SwapChain;
@@ -37,6 +36,7 @@ export class MeshPipeline extends System {
       renderHelper: RenderHelper,
       renderInput: RenderInput,
       mainColorTargetID: number,
+      mainDepthTargetID?: number,
     ) => void
   > = {};
   passesChanged = true;
@@ -49,13 +49,12 @@ export class MeshPipeline extends System {
   private viewUniforms = this.attach(PrepareViewUniforms);
   private lightsUniforms = this.attach(PrepareLights);
   private fogUniforms = this.attach(PrepareFog);
-  private materialUniforms = this.attach(PrepareMaterial);
 
   private meshes_query = this.query((q) =>
-    q.current.with(Mesh, Material, Transform),
+    q.current.with(Mesh, Material, Transform, GlobalTransform),
   );
   private renderables = this.query(
-    (q) => q.addedOrChanged.with(Mesh, Transform).trackWrites,
+    (q) => q.addedOrChanged.with(Mesh, Material, Transform).trackWrites,
   );
 
   async prepare() {
@@ -70,7 +69,6 @@ export class MeshPipeline extends System {
     opaque.viewUniforms = this.viewUniforms;
     opaque.lightsUniforms = this.lightsUniforms;
     opaque.fogUniforms = this.fogUniforms;
-    opaque.materialUniforms = this.materialUniforms;
     this.nodes.push(opaque);
   }
 
@@ -124,7 +122,13 @@ export class MeshPipeline extends System {
     // Post-processing passes
     Object.keys(this.passes).forEach((name) => {
       const func = this.passes[name];
-      func(builder, this.renderHelper, renderInput, mainColorTargetID);
+      func(
+        builder,
+        this.renderHelper,
+        renderInput,
+        mainColorTargetID,
+        mainDepthTargetID,
+      );
     });
 
     // Output to screen
@@ -167,6 +171,7 @@ export class MeshPipeline extends System {
       renderHelper: RenderHelper,
       renderInput: RenderInput,
       mainColorTargetID: number,
+      mainDepthTargetID?: number,
     ) => void,
   ) {
     this.passes[key] = func;