From 42a0a52c6696e42fb5c03900f6201686d1bca668 Mon Sep 17 00:00:00 2001 From: FMS-Cat Date: Mon, 15 Mar 2021 05:04:02 +0900 Subject: [PATCH] chore: add RTInspector multiple --- src/config-hot.ts | 3 +- src/entities/Cube.ts | 1 + src/entities/RTInspector.ts | 106 +++++++++++++++++++++++-------- src/heck/BufferRenderTarget.ts | 38 ++++++++--- src/heck/canvas.ts | 2 +- src/heck/components/Blit.ts | 46 ++++++++------ src/heck/components/Component.ts | 6 +- src/main.ts | 36 +++++------ src/shaders/environment-map.frag | 2 +- 9 files changed, 159 insertions(+), 81 deletions(-) diff --git a/src/config-hot.ts b/src/config-hot.ts index a30f9a3..94e895d 100644 --- a/src/config-hot.ts +++ b/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', diff --git a/src/entities/Cube.ts b/src/entities/Cube.ts index 6cf3978..95dc640 100644 --- a/src/entities/Cube.ts +++ b/src/entities/Cube.ts @@ -43,6 +43,7 @@ export class Cube { ); }, visible: false, + name: process.env.DEV && 'Cube/speen', } ) ); } diff --git a/src/entities/RTInspector.ts b/src/entities/RTInspector.ts index e5279c6..11ca444 100644 --- a/src/entities/RTInspector.ts +++ b/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( - quadVert, - returnFrag, - ); + // -- single ----------------------------------------------------------------------------------- + this.entitySingle = new Entity(); + this.entity.children.push( this.entitySingle ); - this.entity.components.push( new Quad( { - target: options.target, - material: this.material, - name: process.env.DEV && 'RTInspector/quad', - ignoreBreakpoints: true, - } ) ); + this.blitSingle = new Blit( { + dst: options.target, + name: process.env.DEV && 'RTInspector/blitSingle', + } ); + 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 ) { - this.material.addUniformTexture( 'sampler0', texture ); - this.entity.active = true; + if ( !target ) { + if ( process.env.DEV ) { + 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; - } else { - console.warn( `RTInspector: Cannot retrieve a render target texture, RTINSPECTOR_CAPTURE_NAME: ${ RTINSPECTOR_CAPTURE_NAME }, RTINSPECTOR_CAPTURE_INDEX: ${ RTINSPECTOR_CAPTURE_INDEX }` ); } - } - // fallback to not render it - this.entity.active = false; + this.blitSingle.src = target; + this.blitSingle.attachment = attachment; + this.entitySingle.active = true; + } else { + // fallback to not render it + this.entityMultiple.active = false; + this.entitySingle.active = false; + } } } diff --git a/src/heck/BufferRenderTarget.ts b/src/heck/BufferRenderTarget.ts index e3f229d..d4520cb 100644 --- a/src/heck/BufferRenderTarget.ts +++ b/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 ) { - 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' ); - } + this.name = options?.name; } } diff --git a/src/heck/canvas.ts b/src/heck/canvas.ts index 49ebd8c..a4f3d1c 100644 --- a/src/heck/canvas.ts +++ b/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 ); diff --git a/src/heck/components/Blit.ts b/src/heck/components/Blit.ts index bb6e944..a0221b5 100644 --- a/src/heck/components/Blit.ts +++ b/src/heck/components/Blit.ts @@ -4,10 +4,11 @@ import { gl } from '../canvas'; import { BufferRenderTarget } from '../BufferRenderTarget'; export interface BlitOptions extends ComponentOptions { - src: BufferRenderTarget; - dst: RenderTarget; + src?: BufferRenderTarget; + 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 dst: RenderTarget; - public srcRect: [ number, number, number, number ]; - public dstRect: [ number, number, number, number ]; + public src?: BufferRenderTarget; + public dst?: RenderTarget; + public srcRect?: [ number, number, number, number ] | null; + public dstRect?: [ number, number, number, number ] | null; + public attachment?: GLenum; public mask: GLenum; public filter: GLenum; @@ -30,25 +32,29 @@ 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.dstRect = options.dstRect ?? [ 0, 0, this.dst.width, this.dst.height ]; + this.srcRect = options.srcRect; + 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 { - gl.bindFramebuffer( gl.READ_FRAMEBUFFER, this.src.framebuffer.raw ); - if ( this.dst instanceof BufferRenderTarget ) { - gl.bindFramebuffer( gl.DRAW_FRAMEBUFFER, this.dst.framebuffer.raw ); - } else { - gl.bindFramebuffer( gl.DRAW_FRAMEBUFFER, null ); - } + 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 ); + } else { + gl.bindFramebuffer( gl.DRAW_FRAMEBUFFER, null ); + } - gl.blitFramebuffer( - ...this.srcRect, - ...this.dstRect, - this.mask, - this.filter, - ); + gl.readBuffer( this.attachment ?? gl.COLOR_ATTACHMENT0 ); + gl.blitFramebuffer( + ...( this.srcRect ?? [ 0, 0, this.src.width, this.src.height ] ), + ...( this.dstRect ?? [ 0, 0, this.dst.width, this.dst.height ] ), + this.mask, + this.filter, + ); + } } } diff --git a/src/heck/components/Component.ts b/src/heck/components/Component.ts index ee645b3..838dc3a 100644 --- a/src/heck/components/Component.ts +++ b/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(); } } diff --git a/src/main.ts b/src/main.ts index 0ee3b52..9e34adc 100644 --- a/src/main.ts +++ b/src/main.ts @@ -204,20 +204,20 @@ const environmentMap = new EnvironmentMap(); dog.root.children.push( environmentMap.entity ); // -- "objects" ------------------------------------------------------------------------------------ -// const sphereParticles = new SphereParticles( { -// particlesSqrt: 256, -// textureRandom: randomTexture.texture, -// textureRandomStatic: randomTextureStatic.texture -// } ); -// dog.root.children.push( sphereParticles.entity ); +const sphereParticles = new SphereParticles( { + particlesSqrt: 256, + textureRandom: randomTexture.texture, + textureRandomStatic: randomTextureStatic.texture +} ); +dog.root.children.push( sphereParticles.entity ); -// const trails = new Trails( { -// trails: 4096, -// trailLength: 64, -// textureRandom: randomTexture.texture, -// textureRandomStatic: randomTextureStatic.texture -// } ); -// dog.root.children.push( trails.entity ); +const trails = new Trails( { + trails: 4096, + trailLength: 64, + textureRandom: randomTexture.texture, + textureRandomStatic: randomTextureStatic.texture +} ); +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( { -// textureRandom: randomTexture.texture, -// textureRandomStatic: randomTextureStatic.texture -// } ); -// dog.root.children.push( raymarcher.entity ); +const raymarcher = new Raymarcher( { + textureRandom: randomTexture.texture, + textureRandomStatic: randomTextureStatic.texture +} ); +dog.root.children.push( raymarcher.entity ); // -- things that is not an "object" --------------------------------------------------------------- const swapOptions = { diff --git a/src/shaders/environment-map.frag b/src/shaders/environment-map.frag index fc18873..bafe831 100644 --- a/src/shaders/environment-map.frag +++ b/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;