chore: add RTInspector multiple

This commit is contained in:
FMS-Cat
2021-03-15 05:04:02 +09:00
parent e8fa0c0b3d
commit 42a0a52c66
9 changed files with 159 additions and 81 deletions

View File

@@ -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',

View File

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

View File

@@ -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;
}
}
}

View File

@@ -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;
}
}

View File

@@ -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 );

View File

@@ -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,
);
}
}
}

View File

@@ -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();
}
}

View File

@@ -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 = {

View File

@@ -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;