chore: add RTInspector multiple

src/config-hot.ts

@@ -1,6 +1,7 @@
 export const
+  RTINSPECTOR_MULTIPLE = false,
   RTINSPECTOR_CAPTURE_NAME: string | null = null,
-  // RTINSPECTOR_CAPTURE_NAME: string | null = 'Bloom/swap1',
+  // RTINSPECTOR_CAPTURE_NAME: string | null = 'CameraEntity/cameraTarget',
   RTINSPECTOR_CAPTURE_INDEX = 0,
   COMPONENT_UPDATE_BREAKPOINT: string | null = null,
   // COMPONENT_UPDATE_BREAKPOINT: string | null = 'Bloom/quadDup3',

src/entities/Cube.ts

@@ -43,6 +43,7 @@ export class Cube {
         );
       },
       visible: false,
+      name: process.env.DEV && 'Cube/speen',
     } ) );
   }
 

src/entities/RTInspector.ts

@@ -1,12 +1,9 @@
 import { Entity } from '../heck/Entity';
-import { Material } from '../heck/Material';
-import { Quad } from '../heck/components/Quad';
 import { RenderTarget } from '../heck/RenderTarget';
-import returnFrag from '../shaders/return.frag';
-import quadVert from '../shaders/quad.vert';
 import { BufferRenderTarget } from '../heck/BufferRenderTarget';
-import { RTINSPECTOR_CAPTURE_INDEX, RTINSPECTOR_CAPTURE_NAME } from '../config-hot';
+import { RTINSPECTOR_CAPTURE_INDEX, RTINSPECTOR_CAPTURE_NAME, RTINSPECTOR_MULTIPLE } from '../config-hot';
 import { gl } from '../heck/canvas';
+import { Blit } from '../heck/components/Blit';
 
 export interface RTInspectorOptions {
   target: RenderTarget;
@@ -14,25 +11,72 @@ export interface RTInspectorOptions {
 
 export class RTInspector {
   public entity: Entity;
-  public material: Material;
+  public entitySingle: Entity;
+  public entityMultiple: Entity;
+  public blitSingle: Blit;
+  public blitsMultiple: Blit[];
 
   public constructor( options: RTInspectorOptions ) {
     this.entity = new Entity();
 
-    this.material = new Material(
+    // -- single -----------------------------------------------------------------------------------
-      quadVert,
+    this.entitySingle = new Entity();
-      returnFrag,
+    this.entity.children.push( this.entitySingle );
-    );
 
-    this.entity.components.push( new Quad( {
+    this.blitSingle = new Blit( {
-      target: options.target,
+      dst: options.target,
-      material: this.material,
+      name: process.env.DEV && 'RTInspector/blitSingle',
-      name: process.env.DEV && 'RTInspector/quad',
+    } );
-      ignoreBreakpoints: true,
+    this.entitySingle.components.push( this.blitSingle );
-    } ) );
 
+    // -- multiple ---------------------------------------------------------------------------------
+    this.entityMultiple = new Entity();
+    this.entity.children.push( this.entityMultiple );
+
+    // count first?
+    let count = 0;
+    for ( const src of BufferRenderTarget.nameMap.values() ) {
+      count += src.numBuffers;
+    }
+
+    // grid
+    const grid = Math.ceil( Math.sqrt( count ) );
+    const width = Math.floor( options.target.width / grid );
+    const height = Math.floor( options.target.height / grid );
+
+    // then add blits
+    let iBlit = 0;
+    this.blitsMultiple = [];
+    for ( const src of BufferRenderTarget.nameMap.values() ) {
+      for ( let iAttachment = 0; iAttachment < src.numBuffers; iAttachment ++ ) {
+        const x = iBlit % grid;
+        const y = grid - 1 - Math.floor( iBlit / grid );
+        const dstRect: [ number, number, number, number ] = [
+          width * x,
+          height * y,
+          width * ( x + 1.0 ),
+          height * ( y + 1.0 ),
+        ];
+
+        const blit = new Blit( {
+          src,
+          dst: options.target,
+          attachment: gl.COLOR_ATTACHMENT0 + iAttachment,
+          dstRect,
+          name: `RTInspector/blitsMultiple/${ src.name }/${ iAttachment }`,
+        } );
+
+        this.blitsMultiple.push( blit );
+        this.entityMultiple.components.push( blit );
+
+        iBlit ++;
+      }
+    }
+
+    // -- see the config ---------------------------------------------------------------------------
     this.__updateTarget();
 
+    // -- hot hot hot hot hot ----------------------------------------------------------------------
     if ( process.env.DEV ) {
       if ( module.hot ) {
         module.hot.accept( '../config-hot', () => {
@@ -43,21 +87,31 @@ export class RTInspector {
   }
 
   private __updateTarget(): void {
-    if ( RTINSPECTOR_CAPTURE_NAME != null ) {
+    if ( RTINSPECTOR_MULTIPLE ) {
+      this.entityMultiple.active = true;
+      this.entitySingle.active = false;
+    } else if ( RTINSPECTOR_CAPTURE_NAME != null ) {
+      this.entityMultiple.active = false;
+
       const target = BufferRenderTarget.nameMap.get( RTINSPECTOR_CAPTURE_NAME ?? '' ) ?? null;
       const attachment = gl.COLOR_ATTACHMENT0 + ( RTINSPECTOR_CAPTURE_INDEX ?? 0 );
-      const texture = target?.getTexture( attachment );
 
-      if ( texture ) {
+      if ( !target ) {
-        this.material.addUniformTexture( 'sampler0', texture );
+        if ( process.env.DEV ) {
-        this.entity.active = true;
-        return;
-      } else {
           console.warn( `RTInspector: Cannot retrieve a render target texture, RTINSPECTOR_CAPTURE_NAME: ${ RTINSPECTOR_CAPTURE_NAME }, RTINSPECTOR_CAPTURE_INDEX: ${ RTINSPECTOR_CAPTURE_INDEX }` );
         }
+
+        this.entitySingle.active = false;
+        return;
       }
 
+      this.blitSingle.src = target;
+      this.blitSingle.attachment = attachment;
+      this.entitySingle.active = true;
+    } else {
       // fallback to not render it
-    this.entity.active = false;
+      this.entityMultiple.active = false;
+      this.entitySingle.active = false;
+    }
   }
 }

src/heck/BufferRenderTarget.ts

@@ -37,6 +37,33 @@ export class BufferRenderTarget extends RenderTarget {
     return this.__numBuffers;
   }
 
+  private __name?: string;
+  public get name(): string | undefined {
+    return this.__name;
+  }
+  public set name( name: string | undefined ) {
+    if ( process.env.DEV ) {
+      // remove previous one from the nameMap
+      if ( this.__name != null ) {
+        BufferRenderTarget.nameMap.delete( this.__name );
+      }
+
+      this.__name = name;
+
+      // set the current one to the nameMap
+      if ( name != null ) {
+        if ( BufferRenderTarget.nameMap.has( name ) ) {
+          console.warn( `Duplicated BufferRenderTarget name, ${ name }` );
+          return;
+        }
+
+        BufferRenderTarget.nameMap.set( name, this );
+      } else {
+        console.warn( 'BufferRenderTarget without name' );
+      }
+    }
+  }
+
   public constructor( options: BufferRenderTargetOptions ) {
     super();
 
@@ -54,16 +81,7 @@ export class BufferRenderTarget extends RenderTarget {
     this.__numBuffers = options.numBuffers || 1;
 
     if ( process.env.DEV ) {
-      if ( options.name ) {
+      this.name = options?.name;
-        if ( BufferRenderTarget.nameMap.has( options.name ) ) {
-          console.warn( `Duplicated BufferRenderTarget name, ${ options.name }` );
-          return;
-        }
-
-        BufferRenderTarget.nameMap.set( options.name, this );
-      } else {
-        console.warn( 'BufferRenderTarget created without name' );
-      }
     }
   }
 

src/heck/canvas.ts

@@ -5,7 +5,7 @@ export const canvas = document.createElement( 'canvas' );
 canvas.width = RESOLUTION[ 0 ];
 canvas.height = RESOLUTION[ 1 ];
 
-export const gl = canvas.getContext( 'webgl2' )!;
+export const gl = canvas.getContext( 'webgl2', { antialias: false } )!;
 gl.lineWidth( 1 );
 
 export const glCat = new GLCat( gl );

src/heck/components/Blit.ts

@@ -4,10 +4,11 @@ import { gl } from '../canvas';
 import { BufferRenderTarget } from '../BufferRenderTarget';
 
 export interface BlitOptions extends ComponentOptions {
-  src: BufferRenderTarget;
+  src?: BufferRenderTarget;
-  dst: RenderTarget;
+  dst?: RenderTarget;
   srcRect?: [ number, number, number, number ];
   dstRect?: [ number, number, number, number ];
+  attachment?: GLenum;
   mask?: GLenum;
   filter?: GLenum;
 }
@@ -16,10 +17,11 @@ export interface BlitOptions extends ComponentOptions {
  * Blit.
  */
 export class Blit extends Component {
-  public src: BufferRenderTarget;
+  public src?: BufferRenderTarget;
-  public dst: RenderTarget;
+  public dst?: RenderTarget;
-  public srcRect: [ number, number, number, number ];
+  public srcRect?: [ number, number, number, number ] | null;
-  public dstRect: [ number, number, number, number ];
+  public dstRect?: [ number, number, number, number ] | null;
+  public attachment?: GLenum;
   public mask: GLenum;
   public filter: GLenum;
 
@@ -30,13 +32,15 @@ export class Blit extends Component {
 
     this.src = options.src;
     this.dst = options.dst;
-    this.srcRect = options.srcRect ?? [ 0, 0, this.src.width, this.src.height ];
+    this.srcRect = options.srcRect;
-    this.dstRect = options.dstRect ?? [ 0, 0, this.dst.width, this.dst.height ];
+    this.dstRect = options.dstRect;
+    this.attachment = options.attachment;
     this.mask = options.mask ?? gl.COLOR_BUFFER_BIT;
     this.filter = options.filter ?? gl.NEAREST;
   }
 
   protected __updateImpl(): void {
+    if ( this.src && this.dst ) {
       gl.bindFramebuffer( gl.READ_FRAMEBUFFER, this.src.framebuffer.raw );
       if ( this.dst instanceof BufferRenderTarget ) {
         gl.bindFramebuffer( gl.DRAW_FRAMEBUFFER, this.dst.framebuffer.raw );
@@ -44,11 +48,13 @@ export class Blit extends Component {
         gl.bindFramebuffer( gl.DRAW_FRAMEBUFFER, null );
       }
 
+      gl.readBuffer( this.attachment ?? gl.COLOR_ATTACHMENT0 );
       gl.blitFramebuffer(
-      ...this.srcRect,
+        ...( this.srcRect ?? [ 0, 0, this.src.width, this.src.height ] ),
-      ...this.dstRect,
+        ...( this.dstRect ?? [ 0, 0, this.dst.width, this.dst.height ] ),
         this.mask,
         this.filter,
       );
     }
+  }
 }

src/heck/components/Component.ts

@@ -112,6 +112,8 @@ export class Component {
         }
 
         Component.nameMap.set( name, this );
+      } else {
+        console.warn( 'Component without name' );
       }
     }
   }
@@ -126,10 +128,6 @@ export class Component {
       this.name = options?.name;
       this.ignoreBreakpoints = options?.ignoreBreakpoints;
 
-      if ( !this.name ) {
-        console.warn( 'Component created without name' );
-      }
-
       Component.gpuTimer = new GPUTimer();
     }
   }

src/main.ts

@@ -204,20 +204,20 @@ const environmentMap = new EnvironmentMap();
 dog.root.children.push( environmentMap.entity );
 
 // -- "objects" ------------------------------------------------------------------------------------
-// const sphereParticles = new SphereParticles( {
+const sphereParticles = new SphereParticles( {
-//   particlesSqrt: 256,
+  particlesSqrt: 256,
-//   textureRandom: randomTexture.texture,
+  textureRandom: randomTexture.texture,
-//   textureRandomStatic: randomTextureStatic.texture
+  textureRandomStatic: randomTextureStatic.texture
-// } );
+} );
-// dog.root.children.push( sphereParticles.entity );
+dog.root.children.push( sphereParticles.entity );
 
-// const trails = new Trails( {
+const trails = new Trails( {
-//   trails: 4096,
+  trails: 4096,
-//   trailLength: 64,
+  trailLength: 64,
-//   textureRandom: randomTexture.texture,
+  textureRandom: randomTexture.texture,
-//   textureRandomStatic: randomTextureStatic.texture
+  textureRandomStatic: randomTextureStatic.texture
-// } );
+} );
-// dog.root.children.push( trails.entity );
+dog.root.children.push( trails.entity );
 
 const rings = new Rings();
 dog.root.children.push( rings.entity );
@@ -232,11 +232,11 @@ const flickyParticles = new FlickyParticles( {
 } );
 dog.root.children.push( flickyParticles.entity );
 
-// const raymarcher = new Raymarcher( {
+const raymarcher = new Raymarcher( {
-//   textureRandom: randomTexture.texture,
+  textureRandom: randomTexture.texture,
-//   textureRandomStatic: randomTextureStatic.texture
+  textureRandomStatic: randomTextureStatic.texture
-// } );
+} );
-// dog.root.children.push( raymarcher.entity );
+dog.root.children.push( raymarcher.entity );
 
 // -- things that is not an "object" ---------------------------------------------------------------
 const swapOptions = {

src/shaders/environment-map.frag

@@ -69,7 +69,7 @@ vec3 haha( vec3 L ) {
   bool circ = dot( L, normalize( vec3( 1.0, 3.0, 3.0 ) ) ) > 0.9;
   vec3 c = circ ? 0.01 * vec3( 0.1, 0.1, 1.0 ) : vec3( 0.0 );
 
-  bool ring = abs( dot( L, vec3( 0.0, 1.0, 0.0 ) ) ) < 0.1;
+  bool ring = abs( dot( L, vec3( -0.3, 1.0, 0.3 ) ) ) < 0.1;
   c += ring ? 10.0 * vec3( 0.1, 1.0, 0.3 ) : vec3( 0.0 );
 
   return c;