diff --git a/src/entities/CameraEntity.ts b/src/entities/CameraEntity.ts index e2be55a..2ea7145 100644 --- a/src/entities/CameraEntity.ts +++ b/src/entities/CameraEntity.ts @@ -11,8 +11,8 @@ import { AO_RESOLUTION_RATIO } from '../config'; import aoFrag from '../shaders/ao.frag'; import quadVert from '../shaders/quad.vert'; import shadingFrag from '../shaders/shading.frag'; -import { gl } from '../heck/canvas'; -import { randomTexture } from '../utils/RandomTexture'; +import { gl } from '../globals/canvas'; +import { randomTexture } from '../globals/randomTexture'; export interface CameraEntityOptions { root: Entity; diff --git a/src/entities/FlickyParticles.ts b/src/entities/FlickyParticles.ts index c415f17..a7a4221 100644 --- a/src/entities/FlickyParticles.ts +++ b/src/entities/FlickyParticles.ts @@ -9,8 +9,8 @@ import flickyParticleComputeFrag from '../shaders/flicky-particles-compute.frag' import flickyParticleRenderFrag from '../shaders/flicky-particles-render.frag'; import flickyParticleRenderVert from '../shaders/flicky-particles-render.vert'; import { TRIANGLE_STRIP_QUAD } from '@fms-cat/experimental'; -import { gl, glCat } from '../heck/canvas'; -import { randomTexture, randomTextureStatic } from '../utils/RandomTexture'; +import { gl, glCat } from '../globals/canvas'; +import { randomTexture, randomTextureStatic } from '../globals/randomTexture'; export interface FlickyParticlesOptions { particlesSqrt: number; diff --git a/src/entities/GPUParticles.ts b/src/entities/GPUParticles.ts index 24473e9..2fcecab 100644 --- a/src/entities/GPUParticles.ts +++ b/src/entities/GPUParticles.ts @@ -6,7 +6,7 @@ import { Material } from '../heck/Material'; import { Mesh } from '../heck/components/Mesh'; import { Quad } from '../heck/components/Quad'; import { Swap } from '@fms-cat/experimental'; -import { gl } from '../heck/canvas'; +import { gl } from '../globals/canvas'; export interface GPUParticlesOptions { materialCompute: Material; diff --git a/src/entities/Glitch.ts b/src/entities/Glitch.ts index 9b378c2..5048233 100644 --- a/src/entities/Glitch.ts +++ b/src/entities/Glitch.ts @@ -4,15 +4,14 @@ import { Quad } from '../heck/components/Quad'; import { RenderTarget } from '../heck/RenderTarget'; import quadVert from '../shaders/quad.vert'; import glitchFrag from '../shaders/glitch.frag'; -import { Automaton } from '@fms-cat/automaton'; import returnFrag from '../shaders/return.frag'; import { BufferRenderTarget } from '../heck/BufferRenderTarget'; import { Blit } from '../heck/components/Blit'; +import { auto } from '../globals/automaton'; export interface GlitchOptions { input: BufferRenderTarget; target: RenderTarget; - automaton: Automaton; } export class Glitch { @@ -67,7 +66,7 @@ export class Glitch { entityMain.components.push( quad ); // -- update uniform --------------------------------------------------------------------------- - options.automaton.auto( 'Glitch/amp', ( { value } ) => { + auto( 'Glitch/amp', ( { value } ) => { this.material.addUniform( 'amp', '1f', value ); entityMain.active = 0.0 < value; diff --git a/src/entities/PixelSorter.ts b/src/entities/PixelSorter.ts index 87b542f..e905fe1 100644 --- a/src/entities/PixelSorter.ts +++ b/src/entities/PixelSorter.ts @@ -10,11 +10,11 @@ import { BufferRenderTarget } from '../heck/BufferRenderTarget'; import { Swap } from '@fms-cat/experimental'; import { Automaton } from '@fms-cat/automaton'; import { Blit } from '../heck/components/Blit'; +import { auto } from '../globals/automaton'; export interface PixelSorterOptions { input: BufferRenderTarget; target: RenderTarget; - automaton: Automaton; } export class PixelSorter { @@ -142,7 +142,7 @@ export class PixelSorter { } // -- update uniform --------------------------------------------------------------------------- - options.automaton.auto( 'PixelSorter/amp', ( { value } ) => { + auto( 'PixelSorter/amp', ( { value } ) => { indexMaterials.map( ( material ) => { material.addUniform( 'threshold', '1f', value ); } ); diff --git a/src/entities/RTInspector.ts b/src/entities/RTInspector.ts index 11ca444..874b4a7 100644 --- a/src/entities/RTInspector.ts +++ b/src/entities/RTInspector.ts @@ -2,7 +2,7 @@ import { Entity } from '../heck/Entity'; import { RenderTarget } from '../heck/RenderTarget'; import { BufferRenderTarget } from '../heck/BufferRenderTarget'; import { RTINSPECTOR_CAPTURE_INDEX, RTINSPECTOR_CAPTURE_NAME, RTINSPECTOR_MULTIPLE } from '../config-hot'; -import { gl } from '../heck/canvas'; +import { gl } from '../globals/canvas'; import { Blit } from '../heck/components/Blit'; export interface RTInspectorOptions { diff --git a/src/entities/Raymarcher.ts b/src/entities/Raymarcher.ts index 5b5e955..50dcd8c 100644 --- a/src/entities/Raymarcher.ts +++ b/src/entities/Raymarcher.ts @@ -1,14 +1,14 @@ import { GLCatTexture } from '@fms-cat/glcat-ts'; import { Mesh, MeshCull } from '../heck/components/Mesh'; import { TRIANGLE_STRIP_QUAD, Vector3 } from '@fms-cat/experimental'; -import { gl, glCat } from '../heck/canvas'; +import { gl, glCat } from '../globals/canvas'; import { Entity } from '../heck/Entity'; import { Geometry } from '../heck/Geometry'; import { Material } from '../heck/Material'; import quadVert from '../shaders/quad.vert'; import raymarcherFrag from '../shaders/raymarcher.frag'; import { Lambda } from '../heck/components/Lambda'; -import { randomTexture, randomTextureStatic } from '../utils/RandomTexture'; +import { randomTexture, randomTextureStatic } from '../globals/randomTexture'; export class Raymarcher { private __mesh: Mesh; diff --git a/src/entities/Rings.ts b/src/entities/Rings.ts index f8429bf..1b9bb14 100644 --- a/src/entities/Rings.ts +++ b/src/entities/Rings.ts @@ -7,7 +7,7 @@ import { InstancedGeometry } from '../heck/InstancedGeometry'; import { Material } from '../heck/Material'; import ringsVert from '../shaders/rings.vert'; import ringsFrag from '../shaders/rings.frag'; -import { gl, glCat } from '../heck/canvas'; +import { gl, glCat } from '../globals/canvas'; const PRIMCOUNT = 32; diff --git a/src/entities/SphereParticles.ts b/src/entities/SphereParticles.ts index f1e5d12..e4067a4 100644 --- a/src/entities/SphereParticles.ts +++ b/src/entities/SphereParticles.ts @@ -8,12 +8,11 @@ import quadVert from '../shaders/quad.vert'; import sphereParticleComputeFrag from '../shaders/sphere-particles-compute.frag'; import sphereParticleRenderFrag from '../shaders/sphere-particles-render.frag'; import sphereParticleRenderVert from '../shaders/sphere-particles-render.vert'; -import { gl, glCat } from '../heck/canvas'; -import { randomTexture, randomTextureStatic } from '../utils/RandomTexture'; +import { gl, glCat } from '../globals/canvas'; +import { randomTexture, randomTextureStatic } from '../globals/randomTexture'; -export interface SphereParticlesOptions { - particlesSqrt: number; -} +const PARTICLES_SQRT = 256; +const PARTICLES = PARTICLES_SQRT * PARTICLES_SQRT; export class SphereParticles { public get entity(): Entity { @@ -30,25 +29,22 @@ export class SphereParticles { return this.__gpuParticles.materialRender; } - public constructor( options: SphereParticlesOptions ) { + public constructor() { this.__gpuParticles = new GPUParticles( { - materialCompute: this.__createMaterialCompute( options ), - geometryRender: this.__createGeometryRender( options ), - materialRender: this.__createMaterialRender( options ), - computeWidth: options.particlesSqrt, - computeHeight: options.particlesSqrt, + materialCompute: this.__createMaterialCompute(), + geometryRender: this.__createGeometryRender(), + materialRender: this.__createMaterialRender(), + computeWidth: PARTICLES_SQRT, + computeHeight: PARTICLES_SQRT, computeNumBuffers: 2, namePrefix: process.env.DEV && 'SphereParticles', } ); } - private __createMaterialCompute( options: SphereParticlesOptions ): Material { - const { particlesSqrt } = options; - const particles = particlesSqrt * particlesSqrt; - + private __createMaterialCompute(): Material { const material = new Material( quadVert, sphereParticleComputeFrag ); - material.addUniform( 'particlesSqrt', '1f', particlesSqrt ); - material.addUniform( 'particles', '1f', particles ); + material.addUniform( 'particlesSqrt', '1f', PARTICLES_SQRT ); + material.addUniform( 'particles', '1f', PARTICLES ); material.addUniformTexture( 'samplerRandom', randomTexture.texture ); if ( process.env.DEV ) { @@ -62,10 +58,7 @@ export class SphereParticles { return material; } - private __createGeometryRender( options: SphereParticlesOptions ): Geometry { - const { particlesSqrt } = options; - const particles = particlesSqrt * particlesSqrt; - + private __createGeometryRender(): Geometry { const octahedron = genOctahedron( { radius: 1.0, div: 1 } ); const geometry = new InstancedGeometry(); @@ -76,12 +69,12 @@ export class SphereParticles { const bufferComputeUV = glCat.createBuffer(); bufferComputeUV.setVertexbuffer( ( () => { - const ret = new Float32Array( particles * 2 ); - for ( let iy = 0; iy < particlesSqrt; iy ++ ) { - for ( let ix = 0; ix < particlesSqrt; ix ++ ) { - const i = ix + iy * particlesSqrt; - const s = ( ix + 0.5 ) / particlesSqrt; - const t = ( iy + 0.5 ) / particlesSqrt; + const ret = new Float32Array( PARTICLES * 2 ); + for ( let iy = 0; iy < PARTICLES_SQRT; iy ++ ) { + for ( let ix = 0; ix < PARTICLES_SQRT; ix ++ ) { + const i = ix + iy * PARTICLES_SQRT; + const s = ( ix + 0.5 ) / PARTICLES_SQRT; + const t = ( iy + 0.5 ) / PARTICLES_SQRT; ret[ i * 2 + 0 ] = s; ret[ i * 2 + 1 ] = t; } @@ -98,12 +91,12 @@ export class SphereParticles { geometry.count = octahedron.count; geometry.mode = octahedron.mode; - geometry.primcount = options.particlesSqrt * options.particlesSqrt; + geometry.primcount = PARTICLES_SQRT * PARTICLES_SQRT; return geometry; } - private __createMaterialRender( options: SphereParticlesOptions ): Material { + private __createMaterialRender(): Material { const material = new Material( sphereParticleRenderVert, sphereParticleRenderFrag, diff --git a/src/entities/Trails.ts b/src/entities/Trails.ts index 3d2da0c..c6b2fc2 100644 --- a/src/entities/Trails.ts +++ b/src/entities/Trails.ts @@ -7,13 +7,11 @@ import quadVert from '../shaders/quad.vert'; import trailsComputeFrag from '../shaders/trails-compute.frag'; import trailsRenderFrag from '../shaders/trails-render.frag'; import trailsRenderVert from '../shaders/trails-render.vert'; -import { gl, glCat } from '../heck/canvas'; -import { randomTexture, randomTextureStatic } from '../utils/RandomTexture'; +import { gl, glCat } from '../globals/canvas'; +import { randomTexture, randomTextureStatic } from '../globals/randomTexture'; -export interface TrailsOptions { - trails: number; - trailLength: number; -} +const TRAILS = 4096; +const TRAIL_LENGTH = 64; export class Trails { public get entity(): Entity { @@ -30,22 +28,22 @@ export class Trails { return this.__gpuParticles.materialRender; } - public constructor( options: TrailsOptions ) { + public constructor() { this.__gpuParticles = new GPUParticles( { - materialCompute: this.__createMaterialCompute( options ), - geometryRender: this.__createGeometryRender( options ), - materialRender: this.__createMaterialRender( options ), - computeWidth: options.trailLength, - computeHeight: options.trails, + materialCompute: this.__createMaterialCompute(), + geometryRender: this.__createGeometryRender(), + materialRender: this.__createMaterialRender(), + computeWidth: TRAIL_LENGTH, + computeHeight: TRAILS, computeNumBuffers: 2, namePrefix: process.env.DEV && 'Trails', } ); } - private __createMaterialCompute( options: TrailsOptions ): Material { + private __createMaterialCompute(): Material { const material = new Material( quadVert, trailsComputeFrag ); - material.addUniform( 'trails', '1f', options.trails ); - material.addUniform( 'trailLength', '1f', options.trailLength ); + material.addUniform( 'trails', '1f', TRAILS ); + material.addUniform( 'trailLength', '1f', TRAIL_LENGTH ); material.addUniformTexture( 'samplerRandom', randomTexture.texture ); if ( process.env.DEV ) { @@ -59,14 +57,14 @@ export class Trails { return material; } - private __createGeometryRender( options: TrailsOptions ): Geometry { + private __createGeometryRender(): Geometry { const geometry = new InstancedGeometry(); const bufferComputeU = glCat.createBuffer(); bufferComputeU.setVertexbuffer( ( () => { - const ret = new Float32Array( options.trailLength * 3 ); - for ( let i = 0; i < options.trailLength; i ++ ) { - const u = ( 0.5 + i ) / options.trailLength; + const ret = new Float32Array( TRAIL_LENGTH * 3 ); + for ( let i = 0; i < TRAIL_LENGTH; i ++ ) { + const u = ( 0.5 + i ) / TRAIL_LENGTH; ret[ i * 3 + 0 ] = u; ret[ i * 3 + 1 ] = u; ret[ i * 3 + 2 ] = u; @@ -82,9 +80,9 @@ export class Trails { const bufferComputeV = glCat.createBuffer(); bufferComputeV.setVertexbuffer( ( () => { - const ret = new Float32Array( options.trails ); - for ( let i = 0; i < options.trails; i ++ ) { - ret[ i ] = ( i + 0.5 ) / options.trails; + const ret = new Float32Array( TRAILS ); + for ( let i = 0; i < TRAILS; i ++ ) { + ret[ i ] = ( i + 0.5 ) / TRAILS; } return ret; } )() ); @@ -98,8 +96,8 @@ export class Trails { const bufferTriIndex = glCat.createBuffer(); bufferTriIndex.setVertexbuffer( ( () => { - const ret = new Float32Array( 3 * options.trailLength ); - for ( let i = 0; i < options.trailLength; i ++ ) { + const ret = new Float32Array( 3 * TRAIL_LENGTH ); + for ( let i = 0; i < TRAIL_LENGTH; i ++ ) { ret[ i * 3 + 0 ] = 0; ret[ i * 3 + 1 ] = 1; ret[ i * 3 + 2 ] = 2; @@ -115,8 +113,8 @@ export class Trails { const indexBuffer = glCat.createBuffer(); indexBuffer.setIndexbuffer( ( () => { - const ret = new Uint16Array( ( options.trailLength - 1 ) * 18 ); - for ( let i = 0; i < options.trailLength - 1; i ++ ) { + const ret = new Uint16Array( ( TRAIL_LENGTH - 1 ) * 18 ); + for ( let i = 0; i < TRAIL_LENGTH - 1; i ++ ) { for ( let j = 0; j < 3; j ++ ) { const jn = ( j + 1 ) % 3; ret[ i * 18 + j * 6 + 0 ] = i * 3 + j; @@ -135,14 +133,14 @@ export class Trails { type: gl.UNSIGNED_SHORT } ); - geometry.count = ( options.trailLength - 1 ) * 18; - geometry.primcount = options.trails; + geometry.count = ( TRAIL_LENGTH - 1 ) * 18; + geometry.primcount = TRAILS; geometry.mode = gl.TRIANGLES; return geometry; } - private __createMaterialRender( options: TrailsOptions ): Material { + private __createMaterialRender(): Material { const material = new Material( trailsRenderVert, trailsRenderFrag, diff --git a/src/geometries/genCube.ts b/src/geometries/genCube.ts index 81efa4c..e5b2505 100644 --- a/src/geometries/genCube.ts +++ b/src/geometries/genCube.ts @@ -1,4 +1,4 @@ -import { gl, glCat } from '../heck/canvas'; +import { gl, glCat } from '../globals/canvas'; import { GeometryAttribute, GeometryIndex } from '../heck/Geometry'; interface ResultGenCube { diff --git a/src/geometries/genOctahedron.ts b/src/geometries/genOctahedron.ts index 2ce23ce..b46c39b 100644 --- a/src/geometries/genOctahedron.ts +++ b/src/geometries/genOctahedron.ts @@ -1,4 +1,4 @@ -import { gl, glCat } from '../heck/canvas'; +import { gl, glCat } from '../globals/canvas'; import { GeometryAttribute, GeometryIndex } from '../heck/Geometry'; interface ResultGenOctahedron { diff --git a/src/geometries/genTorus.ts b/src/geometries/genTorus.ts index 0956607..cac3ace 100644 --- a/src/geometries/genTorus.ts +++ b/src/geometries/genTorus.ts @@ -1,4 +1,4 @@ -import { gl, glCat } from '../heck/canvas'; +import { gl, glCat } from '../globals/canvas'; import { GeometryAttribute, GeometryIndex } from '../heck/Geometry'; interface ResultGenTorus { diff --git a/src/globals/automaton.ts b/src/globals/automaton.ts new file mode 100644 index 0000000..53fbe0c --- /dev/null +++ b/src/globals/automaton.ts @@ -0,0 +1,47 @@ +import { Automaton } from '@fms-cat/automaton'; +import { AutomatonWithGUI } from '@fms-cat/automaton-with-gui'; +import automatonData from '../automaton.json'; +import * as automatonFxs from '../automaton-fxs/automatonFxs'; +import { music } from './music'; +import { getDivAutomaton } from './dom'; + +export const automaton = ( () => { + if ( process.env.DEV ) { + // this cast smells so bad + // https://github.com/FMS-Cat/automaton/issues/121 + const automatonWithGUI = new AutomatonWithGUI( + automatonData, + { + gui: getDivAutomaton(), + isPlaying: true, + fxDefinitions: automatonFxs, + } + ); + + automatonWithGUI.on( 'play', () => { music.isPlaying = true; } ); + automatonWithGUI.on( 'pause', () => { music.isPlaying = false; } ); + automatonWithGUI.on( 'seek', ( { time } ) => { + music.time = Math.max( 0.0, time ); + automatonWithGUI.reset(); + } ); + + if ( module.hot ) { + module.hot.accept( '../automaton.json', () => { + // we probably don't need this feature for now... + // See: https://github.com/FMS-Cat/automaton/issues/120 + // automatonWithGUI.deserialize( automatonData ); + } ); + } + + return automatonWithGUI; + } else { + return new Automaton( + automatonData, + { + fxDefinitions: automatonFxs + } + ); + } +} )(); + +export const auto = automaton.auto; diff --git a/src/heck/canvas.ts b/src/globals/canvas.ts similarity index 100% rename from src/heck/canvas.ts rename to src/globals/canvas.ts diff --git a/src/globals/dom.ts b/src/globals/dom.ts new file mode 100644 index 0000000..f419a6b --- /dev/null +++ b/src/globals/dom.ts @@ -0,0 +1,92 @@ +function getElement( + id: string, + tagName: string, + style: { [ key: string ]: string }, + hook?: ( el: T ) => void, +): T { + let el = document.getElementById( id ) as T; + if ( el ) { + return el; + } + + el = document.createElement( tagName ) as T; + el.id = id; + + document.body.appendChild( el ); + + Object.assign( el.style, style ); + + hook?.( el ); + + return el; +} + +export function getCheckboxActive(): HTMLInputElement { + return getElement( + 'checkboxActive', + 'input', + { + position: 'fixed', + left: '8px', + bottom: '248px', + }, + ( el ) => { + el.type = 'checkbox'; + el.checked = true; + }, + ); +} + +export function getDivAutomaton(): HTMLDivElement { + return getElement( + 'divAutomaton', + 'div', + { + position: 'fixed', + width: '100%', + height: '240px', + right: '0', + bottom: '0', + }, + ); +} + +export function getDivComponentsUpdate(): HTMLDivElement { + return getElement( + 'divComponentsUpdate', + 'div', + { + whiteSpace: 'pre', + color: '#ffffff', + font: '500 10px Wt-Position-Mono', + position: 'fixed', + padding: '0', + boxSizing: 'border-box', + width: '240px', + height: 'calc( ( 100% - 240px ) * 0.5 )', + right: '0', + top: '0', + overflowY: 'scroll', + }, + ); +} + +export function getDivComponentsDraw(): HTMLDivElement { + return getElement( + 'divComponentsDraw', + 'div', + { + whiteSpace: 'pre', + color: '#ffffff', + font: '500 10px Wt-Position-Mono', + position: 'fixed', + padding: '0', + boxSizing: 'border-box', + width: '240px', + height: 'calc( ( 100% - 240px ) * 0.5 )', + right: '0', + top: 'calc( ( 100% - 240px ) * 0.5 )', + overflowY: 'scroll', + }, + ); +} diff --git a/src/globals/music.ts b/src/globals/music.ts new file mode 100644 index 0000000..816c629 --- /dev/null +++ b/src/globals/music.ts @@ -0,0 +1,5 @@ +import { Music } from '../Music'; +import { glCat } from './canvas'; + +export const audio = new AudioContext(); +export const music = new Music( glCat, audio ); diff --git a/src/globals/randomTexture.ts b/src/globals/randomTexture.ts new file mode 100644 index 0000000..658c1f5 --- /dev/null +++ b/src/globals/randomTexture.ts @@ -0,0 +1,17 @@ +import { glCat } from './canvas'; +import { RANDOM_RESOLUTION, STATIC_RANDOM_RESOLUTION } from '../config'; +import { RandomTexture } from '../utils/RandomTexture'; + +export const randomTexture = new RandomTexture( + glCat, + RANDOM_RESOLUTION[ 0 ], + RANDOM_RESOLUTION[ 1 ] +); +randomTexture.update(); + +export const randomTextureStatic = new RandomTexture( + glCat, + STATIC_RANDOM_RESOLUTION[ 0 ], + STATIC_RANDOM_RESOLUTION[ 1 ] +); +randomTextureStatic.update(); diff --git a/src/heck/BufferRenderTarget.ts b/src/heck/BufferRenderTarget.ts index d4520cb..dc8e917 100644 --- a/src/heck/BufferRenderTarget.ts +++ b/src/heck/BufferRenderTarget.ts @@ -1,5 +1,5 @@ import { GLCatFramebuffer, GLCatTexture } from '@fms-cat/glcat-ts'; -import { gl, glCat } from './canvas'; +import { gl, glCat } from '../globals/canvas'; import { RenderTarget } from './RenderTarget'; export interface BufferRenderTargetOptions { diff --git a/src/heck/CanvasRenderTarget.ts b/src/heck/CanvasRenderTarget.ts index 274bc52..f4bfea6 100644 --- a/src/heck/CanvasRenderTarget.ts +++ b/src/heck/CanvasRenderTarget.ts @@ -1,4 +1,4 @@ -import { canvas, gl, glCat } from './canvas'; +import { canvas, gl, glCat } from '../globals/canvas'; import { RenderTarget } from './RenderTarget'; export class CanvasRenderTarget extends RenderTarget { diff --git a/src/heck/Dog.ts b/src/heck/Dog.ts index f5d1d85..8dac38c 100644 --- a/src/heck/Dog.ts +++ b/src/heck/Dog.ts @@ -1,32 +1,28 @@ import { Entity } from './Entity'; import { Transform } from './Transform'; -import { Music } from '../Music'; import { Component } from './components/Component'; - -let ha = 0; +import { music } from '../globals/music'; /** * And what a WONDERFUL Dog they are!! */ export class Dog { public root: Entity; - public music: Music; public active: boolean; private __frameCount: number = 0; - public constructor( music: Music ) { + public constructor() { this.root = new Entity(); - this.music = music; this.active = true; const update = (): void => { if ( this.active ) { - this.music.update(); + music.update(); this.root.update( { frameCount: this.__frameCount ++, - time: this.music.time, - deltaTime: this.music.deltaTime, + time: music.time, + deltaTime: music.deltaTime, globalTransform: new Transform(), parent: null } ); diff --git a/src/heck/GPUTimer.ts b/src/heck/GPUTimer.ts index 9188eb6..78a784c 100644 --- a/src/heck/GPUTimer.ts +++ b/src/heck/GPUTimer.ts @@ -1,5 +1,5 @@ import { Pool } from '../utils/Pool'; -import { gl, glCat } from './canvas'; +import { gl, glCat } from '../globals/canvas'; export class GPUTimer { public queries: Pool; diff --git a/src/heck/Geometry.ts b/src/heck/Geometry.ts index 789ca47..aa57069 100644 --- a/src/heck/Geometry.ts +++ b/src/heck/Geometry.ts @@ -1,5 +1,5 @@ import { GLCatBuffer, GLCatTransformFeedback } from '@fms-cat/glcat-ts'; -import { gl, glCat } from './canvas'; +import { gl, glCat } from '../globals/canvas'; import { Material } from './Material'; export interface GeometryAttribute { diff --git a/src/heck/InstancedGeometry.ts b/src/heck/InstancedGeometry.ts index 2d11d7f..d62b825 100644 --- a/src/heck/InstancedGeometry.ts +++ b/src/heck/InstancedGeometry.ts @@ -1,4 +1,4 @@ -import { gl } from './canvas'; +import { gl } from '../globals/canvas'; import { Geometry } from './Geometry'; export class InstancedGeometry extends Geometry { diff --git a/src/heck/Material.ts b/src/heck/Material.ts index 3ef1f8e..f915674 100644 --- a/src/heck/Material.ts +++ b/src/heck/Material.ts @@ -1,5 +1,5 @@ import { GLCatProgram, GLCatProgramLinkOptions, GLCatProgramUniformType, GLCatTexture } from '@fms-cat/glcat-ts'; -import { gl } from './canvas'; +import { gl } from '../globals/canvas'; import { SHADERPOOL } from './ShaderPool'; export class Material { diff --git a/src/heck/ShaderPool.ts b/src/heck/ShaderPool.ts index 9e3f2e2..81c68a2 100644 --- a/src/heck/ShaderPool.ts +++ b/src/heck/ShaderPool.ts @@ -1,5 +1,5 @@ import { GLCatProgram, GLCatProgramLinkOptions } from '@fms-cat/glcat-ts'; -import { glCat } from './canvas'; +import { glCat } from '../globals/canvas'; import { Material } from './Material'; export class ShaderPool { diff --git a/src/heck/components/Blit.ts b/src/heck/components/Blit.ts index a0221b5..fdd36f1 100644 --- a/src/heck/components/Blit.ts +++ b/src/heck/components/Blit.ts @@ -1,6 +1,6 @@ import { Component, ComponentOptions, ComponentUpdateEvent } from './Component'; import { RenderTarget } from '../RenderTarget'; -import { gl } from '../canvas'; +import { gl } from '../../globals/canvas'; import { BufferRenderTarget } from '../BufferRenderTarget'; export interface BlitOptions extends ComponentOptions { diff --git a/src/heck/components/Camera.ts b/src/heck/components/Camera.ts index e4c554a..433620a 100644 --- a/src/heck/components/Camera.ts +++ b/src/heck/components/Camera.ts @@ -3,7 +3,7 @@ import { Entity } from '../Entity'; import { Matrix4 } from '@fms-cat/experimental'; import { RenderTarget } from '../RenderTarget'; import { Transform } from '../Transform'; -import { glCat } from '../canvas'; +import { glCat } from '../../globals/canvas'; export interface CameraOptions extends ComponentOptions { renderTarget?: RenderTarget; diff --git a/src/heck/components/Component.ts b/src/heck/components/Component.ts index 838dc3a..dd776a9 100644 --- a/src/heck/components/Component.ts +++ b/src/heck/components/Component.ts @@ -5,6 +5,7 @@ import { RenderTarget } from '../RenderTarget'; import { Transform } from '../Transform'; import { COMPONENT_DRAW_BREAKPOINT, COMPONENT_UPDATE_BREAKPOINT } from '../../config-hot'; import { GPUTimer } from '../GPUTimer'; +import { getDivComponentsDraw, getDivComponentsUpdate } from '../../globals/dom'; export interface ComponentUpdateEvent { frameCount: number; @@ -42,7 +43,9 @@ export class Component { public static resetUpdateBreakpoint(): void { if ( process.env.DEV ) { - if ( window.divComponentsUpdate && Component.updateList != null ) { + const divComponentsUpdate = getDivComponentsUpdate(); + + if ( Component.updateList != null ) { Promise.all( Component.updateList ).then( ( list ) => { let accumCpu = 0.0; let accumGpu = 0.0; @@ -54,7 +57,7 @@ export class Component { } ).join( '\n' ); const strAccum = `${ accumCpu.toFixed( 3 ) }, ${ accumGpu.toFixed( 3 ) } - UPDATE\n`; - window.divComponentsUpdate!.innerHTML = strAccum + strEach; + divComponentsUpdate.innerHTML = strAccum + strEach; } ); } Component.updateList = []; @@ -65,7 +68,9 @@ export class Component { public static resetDrawBreakpoint(): void { if ( process.env.DEV ) { - if ( window.divComponentsDraw && Component.drawList != null ) { + const divComponentsDraw = getDivComponentsDraw(); + + if ( Component.drawList != null ) { Promise.all( Component.drawList ).then( ( list ) => { let accumCpu = 0.0; let accumGpu = 0.0; @@ -77,7 +82,7 @@ export class Component { } ).join( '\n' ); const strAccum = `${ accumCpu.toFixed( 3 ) }, ${ accumGpu.toFixed( 3 ) } - DRAW\n`; - window.divComponentsDraw!.innerHTML = strAccum + strEach; + divComponentsDraw.innerHTML = strAccum + strEach; } ); } Component.drawList = []; diff --git a/src/heck/components/Mesh.ts b/src/heck/components/Mesh.ts index 26dc920..b7cf03a 100644 --- a/src/heck/components/Mesh.ts +++ b/src/heck/components/Mesh.ts @@ -1,7 +1,7 @@ import { Component, ComponentDrawEvent, ComponentOptions } from './Component'; import { Geometry } from '../Geometry'; import { Material } from '../Material'; -import { glCat } from '../canvas'; +import { glCat } from '../../globals/canvas'; export enum MeshCull { None, diff --git a/src/heck/components/Quad.ts b/src/heck/components/Quad.ts index 4b731b6..9a6693a 100644 --- a/src/heck/components/Quad.ts +++ b/src/heck/components/Quad.ts @@ -3,7 +3,7 @@ import { Geometry } from '../Geometry'; import { Material } from '../Material'; import { RenderTarget } from '../RenderTarget'; import { TRIANGLE_STRIP_QUAD } from '@fms-cat/experimental'; -import { glCat } from '../canvas'; +import { glCat } from '../../globals/canvas'; const quadBuffer = glCat.createBuffer(); quadBuffer.setVertexbuffer( new Float32Array( TRIANGLE_STRIP_QUAD ) ); diff --git a/src/main.ts b/src/main.ts index 8b8e66a..4b88517 100644 --- a/src/main.ts +++ b/src/main.ts @@ -1,13 +1,8 @@ -import { Automaton } from '@fms-cat/automaton'; -import { AutomatonWithGUI } from '@fms-cat/automaton-with-gui'; -import * as automatonFxs from './automaton-fxs/automatonFxs'; -import { Music } from './Music'; -import automatonData from './automaton.json'; -import { canvas, glCat } from './heck/canvas'; +import { canvas } from './globals/canvas'; import { Dog } from './heck/Dog'; import { CanvasRenderTarget } from './heck/CanvasRenderTarget'; import { Lambda } from './heck/components/Lambda'; -import { randomTexture } from './utils/RandomTexture'; +import { randomTexture } from './globals/randomTexture'; import { SphereParticles } from './entities/SphereParticles'; import { Swap, Vector3 } from '@fms-cat/experimental'; import { BufferRenderTarget } from './heck/BufferRenderTarget'; @@ -26,11 +21,11 @@ import { PixelSorter } from './entities/PixelSorter'; import { IBLLUT } from './entities/IBLLUT'; import { EnvironmentMap } from './entities/EnvironmentMap'; import { Cube } from './entities/Cube'; +import { music } from './globals/music'; +import { automaton } from './globals/automaton'; +import { getCheckboxActive } from './globals/dom'; // == music ======================================================================================== -const audio = new AudioContext(); -const music = new Music( glCat, audio ); - if ( process.env.DEV ) { music.isPlaying = true; } @@ -47,58 +42,6 @@ if ( process.env.DEV ) { canvas.style.left = '0'; canvas.style.top = '0'; canvas.style.width = 'calc( 100% - 240px )'; - - window.divPath = document.createElement( 'div' ); - document.body.appendChild( window.divPath ); - window.divPath.style.position = 'fixed'; - window.divPath.style.textAlign = 'right'; - window.divPath.style.right = '8px'; - window.divPath.style.bottom = '248px'; - window.divPath.style.textShadow = '1px 1px 1px #ffffff'; - - window.divAutomaton = document.createElement( 'div' ); - document.body.appendChild( window.divAutomaton ); - window.divAutomaton.style.position = 'fixed'; - window.divAutomaton.style.width = '100%'; - window.divAutomaton.style.height = '240px'; - window.divAutomaton.style.right = '0'; - window.divAutomaton.style.bottom = '0'; - - window.checkActive = document.createElement( 'input' ); - document.body.appendChild( window.checkActive ); - window.checkActive.type = 'checkbox'; - window.checkActive.checked = true; - window.checkActive.style.position = 'fixed'; - window.checkActive.style.left = '8px'; - window.checkActive.style.bottom = '248px'; - - window.divComponentsUpdate = document.createElement( 'div' ); - document.body.appendChild( window.divComponentsUpdate ); - window.divComponentsUpdate.style.whiteSpace = 'pre'; - window.divComponentsUpdate.style.color = '#ffffff'; - window.divComponentsUpdate.style.font = '500 10px Wt-Position-Mono'; - window.divComponentsUpdate.style.position = 'fixed'; - window.divComponentsUpdate.style.padding = '0'; - window.divComponentsUpdate.style.boxSizing = 'border-box'; - window.divComponentsUpdate.style.width = '240px'; - window.divComponentsUpdate.style.height = 'calc( ( 100% - 240px ) * 0.5 )'; - window.divComponentsUpdate.style.right = '0'; - window.divComponentsUpdate.style.top = '0'; - window.divComponentsUpdate.style.overflowY = 'scroll'; - - window.divComponentsDraw = document.createElement( 'div' ); - document.body.appendChild( window.divComponentsDraw ); - window.divComponentsDraw.style.whiteSpace = 'pre'; - window.divComponentsDraw.style.color = '#ffffff'; - window.divComponentsDraw.style.font = '500 10px Wt-Position-Mono'; - window.divComponentsDraw.style.position = 'fixed'; - window.divComponentsDraw.style.padding = '0'; - window.divComponentsDraw.style.boxSizing = 'border-box'; - window.divComponentsDraw.style.width = '240px'; - window.divComponentsDraw.style.height = 'calc( ( 100% - 240px ) * 0.5 )'; - window.divComponentsDraw.style.right = '0'; - window.divComponentsDraw.style.top = 'calc( ( 100% - 240px ) * 0.5 )'; - window.divComponentsDraw.style.overflowY = 'scroll'; } else { canvas.style.position = 'fixed'; canvas.style.left = '0'; @@ -117,53 +60,11 @@ if ( process.env.DEV ) { }; } -// == automaton ==================================================================================== +// == scene ======================================================================================== let totalFrame = 0; let isInitialFrame = true; -let automaton: Automaton; - -if ( process.env.DEV ) { - // this cast smells so bad - // https://github.com/FMS-Cat/automaton/issues/121 - const automatonWithGUI = new AutomatonWithGUI( - automatonData, - { - gui: window.divAutomaton, - isPlaying: true, - fxDefinitions: automatonFxs, - } - ); - - automatonWithGUI.on( 'play', () => { music.isPlaying = true; } ); - automatonWithGUI.on( 'pause', () => { music.isPlaying = false; } ); - automatonWithGUI.on( 'seek', ( { time } ) => { - music.time = Math.max( 0.0, time ); - automaton.reset(); - } ); - - if ( module.hot ) { - module.hot.accept( './automaton.json', () => { - // we probably don't need this feature for now... - // See: https://github.com/FMS-Cat/automaton/issues/120 - // automatonWithGUI.deserialize( automatonData ); - } ); - } - - automaton = automatonWithGUI; -} else { - // this cast smells so bad - // https://github.com/FMS-Cat/automaton/issues/121 - automaton = new Automaton( - automatonData, - { - fxDefinitions: automatonFxs - } - ); -} - -// == scene ======================================================================================== -const dog = new Dog( music ); +const dog = new Dog(); const canvasRenderTarget = new CanvasRenderTarget(); @@ -188,15 +89,10 @@ const environmentMap = new EnvironmentMap(); dog.root.children.push( environmentMap.entity ); // -- "objects" ------------------------------------------------------------------------------------ -const sphereParticles = new SphereParticles( { - particlesSqrt: 256, -} ); +const sphereParticles = new SphereParticles(); dog.root.children.push( sphereParticles.entity ); -const trails = new Trails( { - trails: 4096, - trailLength: 64, -} ); +const trails = new Trails(); dog.root.children.push( trails.entity ); const rings = new Rings(); @@ -295,7 +191,6 @@ swap.swap(); const glitch = new Glitch( { input: swap.i, target: swap.o, - automaton, } ); dog.root.children.push( glitch.entity ); @@ -303,7 +198,6 @@ swap.swap(); const pixelSorter = new PixelSorter( { input: swap.i, target: swap.o, - automaton, } ); dog.root.children.push( pixelSorter.entity ); @@ -323,15 +217,17 @@ if ( process.env.DEV ) { // -- keyboards ------------------------------------------------------------------------------------ if ( process.env.DEV ) { + const checkboxActive = getCheckboxActive(); + window.addEventListener( 'keydown', ( event ) => { if ( event.key === 'Escape' ) { // panic button dog.root.active = false; music.isPlaying = false; - window.checkActive!.checked = false; + checkboxActive.checked = false; } } ); - window.checkActive!.addEventListener( 'input', ( event: any ) => { + checkboxActive.addEventListener( 'input', ( event: any ) => { dog.root.active = event.target.checked; music.isPlaying = event.target.checked; } ); diff --git a/src/utils/RandomTexture.ts b/src/utils/RandomTexture.ts index ac70afc..056d2f2 100644 --- a/src/utils/RandomTexture.ts +++ b/src/utils/RandomTexture.ts @@ -1,7 +1,6 @@ -import { GLCat, GLCatTexture } from '@fms-cat/glcat-ts'; import { Xorshift } from '@fms-cat/experimental'; -import { gl, glCat } from '../heck/canvas'; -import { RANDOM_RESOLUTION, STATIC_RANDOM_RESOLUTION } from '../config'; +import GLCat, { GLCatTexture } from '@fms-cat/glcat-ts'; +import { gl } from '../globals/canvas'; export class RandomTexture { private __texture: GLCatTexture; @@ -53,17 +52,3 @@ export class RandomTexture { ); } } - -export const randomTexture = new RandomTexture( - glCat, - RANDOM_RESOLUTION[ 0 ], - RANDOM_RESOLUTION[ 1 ] -); -randomTexture.update(); - -export const randomTextureStatic = new RandomTexture( - glCat, - STATIC_RANDOM_RESOLUTION[ 0 ], - STATIC_RANDOM_RESOLUTION[ 1 ] -); -randomTextureStatic.update(); diff --git a/src/window.d.ts b/src/window.d.ts deleted file mode 100644 index aae8999..0000000 --- a/src/window.d.ts +++ /dev/null @@ -1,7 +0,0 @@ -interface Window { - divPath?: HTMLDivElement; - divAutomaton?: HTMLDivElement; - checkActive?: HTMLInputElement; - divComponentsUpdate?: HTMLDivElement; - divComponentsDraw?: HTMLDivElement; -}