mirror of
https://github.com/FMS-Cat/condition.git
synced 2025-08-17 11:00:57 +02:00
refactor: globalize random textures
This commit is contained in:
@@ -12,6 +12,7 @@ import aoFrag from '../shaders/ao.frag';
|
|||||||
import quadVert from '../shaders/quad.vert';
|
import quadVert from '../shaders/quad.vert';
|
||||||
import shadingFrag from '../shaders/shading.frag';
|
import shadingFrag from '../shaders/shading.frag';
|
||||||
import { gl } from '../heck/canvas';
|
import { gl } from '../heck/canvas';
|
||||||
|
import { randomTexture } from '../utils/RandomTexture';
|
||||||
|
|
||||||
export interface CameraEntityOptions {
|
export interface CameraEntityOptions {
|
||||||
root: Entity;
|
root: Entity;
|
||||||
@@ -19,7 +20,6 @@ export interface CameraEntityOptions {
|
|||||||
lights: LightEntity[];
|
lights: LightEntity[];
|
||||||
textureIBLLUT: GLCatTexture<WebGL2RenderingContext>;
|
textureIBLLUT: GLCatTexture<WebGL2RenderingContext>;
|
||||||
textureEnv: GLCatTexture<WebGL2RenderingContext>;
|
textureEnv: GLCatTexture<WebGL2RenderingContext>;
|
||||||
textureRandom: GLCatTexture<WebGL2RenderingContext>;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export class CameraEntity {
|
export class CameraEntity {
|
||||||
@@ -95,7 +95,7 @@ export class CameraEntity {
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
aoMaterial.addUniformTexture( 'samplerRandom', options.textureRandom );
|
aoMaterial.addUniformTexture( 'samplerRandom', randomTexture.texture );
|
||||||
|
|
||||||
const aoQuad = new Quad( {
|
const aoQuad = new Quad( {
|
||||||
material: aoMaterial,
|
material: aoMaterial,
|
||||||
@@ -189,7 +189,7 @@ export class CameraEntity {
|
|||||||
shadingMaterial.addUniformTexture( 'samplerShadow', light.shadowMap.texture );
|
shadingMaterial.addUniformTexture( 'samplerShadow', light.shadowMap.texture );
|
||||||
shadingMaterial.addUniformTexture( 'samplerIBLLUT', options.textureIBLLUT );
|
shadingMaterial.addUniformTexture( 'samplerIBLLUT', options.textureIBLLUT );
|
||||||
shadingMaterial.addUniformTexture( 'samplerEnv', options.textureEnv );
|
shadingMaterial.addUniformTexture( 'samplerEnv', options.textureEnv );
|
||||||
shadingMaterial.addUniformTexture( 'samplerRandom', options.textureRandom );
|
shadingMaterial.addUniformTexture( 'samplerRandom', randomTexture.texture );
|
||||||
|
|
||||||
const shadingQuad = new Quad( {
|
const shadingQuad = new Quad( {
|
||||||
material: shadingMaterial,
|
material: shadingMaterial,
|
||||||
|
@@ -10,11 +10,10 @@ import flickyParticleRenderFrag from '../shaders/flicky-particles-render.frag';
|
|||||||
import flickyParticleRenderVert from '../shaders/flicky-particles-render.vert';
|
import flickyParticleRenderVert from '../shaders/flicky-particles-render.vert';
|
||||||
import { TRIANGLE_STRIP_QUAD } from '@fms-cat/experimental';
|
import { TRIANGLE_STRIP_QUAD } from '@fms-cat/experimental';
|
||||||
import { gl, glCat } from '../heck/canvas';
|
import { gl, glCat } from '../heck/canvas';
|
||||||
|
import { randomTexture, randomTextureStatic } from '../utils/RandomTexture';
|
||||||
|
|
||||||
export interface FlickyParticlesOptions {
|
export interface FlickyParticlesOptions {
|
||||||
particlesSqrt: number;
|
particlesSqrt: number;
|
||||||
textureRandom: GLCatTexture<WebGL2RenderingContext>;
|
|
||||||
textureRandomStatic: GLCatTexture<WebGL2RenderingContext>;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export class FlickyParticles {
|
export class FlickyParticles {
|
||||||
@@ -51,7 +50,7 @@ export class FlickyParticles {
|
|||||||
const material = new Material( quadVert, flickyParticleComputeFrag );
|
const material = new Material( quadVert, flickyParticleComputeFrag );
|
||||||
material.addUniform( 'particlesSqrt', '1f', particlesSqrt );
|
material.addUniform( 'particlesSqrt', '1f', particlesSqrt );
|
||||||
material.addUniform( 'particles', '1f', particles );
|
material.addUniform( 'particles', '1f', particles );
|
||||||
material.addUniformTexture( 'samplerRandom', options.textureRandom );
|
material.addUniformTexture( 'samplerRandom', randomTexture.texture );
|
||||||
|
|
||||||
if ( process.env.DEV ) {
|
if ( process.env.DEV ) {
|
||||||
if ( module.hot ) {
|
if ( module.hot ) {
|
||||||
@@ -114,7 +113,7 @@ export class FlickyParticles {
|
|||||||
flickyParticleRenderFrag,
|
flickyParticleRenderFrag,
|
||||||
);
|
);
|
||||||
material.addUniform( 'colorVar', '1f', 0.1 );
|
material.addUniform( 'colorVar', '1f', 0.1 );
|
||||||
material.addUniformTexture( 'samplerRandomStatic', options.textureRandomStatic );
|
material.addUniformTexture( 'samplerRandomStatic', randomTextureStatic.texture );
|
||||||
|
|
||||||
if ( process.env.DEV ) {
|
if ( process.env.DEV ) {
|
||||||
if ( module.hot ) {
|
if ( module.hot ) {
|
||||||
|
@@ -8,6 +8,7 @@ import { Material } from '../heck/Material';
|
|||||||
import quadVert from '../shaders/quad.vert';
|
import quadVert from '../shaders/quad.vert';
|
||||||
import raymarcherFrag from '../shaders/raymarcher.frag';
|
import raymarcherFrag from '../shaders/raymarcher.frag';
|
||||||
import { Lambda } from '../heck/components/Lambda';
|
import { Lambda } from '../heck/components/Lambda';
|
||||||
|
import { randomTexture, randomTextureStatic } from '../utils/RandomTexture';
|
||||||
|
|
||||||
export class Raymarcher {
|
export class Raymarcher {
|
||||||
private __mesh: Mesh;
|
private __mesh: Mesh;
|
||||||
@@ -25,10 +26,7 @@ export class Raymarcher {
|
|||||||
return this.__entity;
|
return this.__entity;
|
||||||
}
|
}
|
||||||
|
|
||||||
public constructor( options: {
|
public constructor() {
|
||||||
textureRandom: GLCatTexture<WebGL2RenderingContext>;
|
|
||||||
textureRandomStatic: GLCatTexture<WebGL2RenderingContext>;
|
|
||||||
} ) {
|
|
||||||
this.__entity = new Entity();
|
this.__entity = new Entity();
|
||||||
this.__entity.transform.position = new Vector3( [ 0.0, 0.0, 0.3 ] );
|
this.__entity.transform.position = new Vector3( [ 0.0, 0.0, 0.3 ] );
|
||||||
this.__entity.transform.scale = new Vector3( [ 16.0, 9.0, 1.0 ] ).scale( 0.15 );
|
this.__entity.transform.scale = new Vector3( [ 16.0, 9.0, 1.0 ] ).scale( 0.15 );
|
||||||
@@ -38,8 +36,8 @@ export class Raymarcher {
|
|||||||
|
|
||||||
this.__material.addUniform( 'range', '4f', -1.0, -1.0, 1.0, 1.0 );
|
this.__material.addUniform( 'range', '4f', -1.0, -1.0, 1.0, 1.0 );
|
||||||
|
|
||||||
this.__material.addUniformTexture( 'samplerRandom', options.textureRandom );
|
this.__material.addUniformTexture( 'samplerRandom', randomTexture.texture );
|
||||||
this.__material.addUniformTexture( 'samplerRandomStatic', options.textureRandomStatic );
|
this.__material.addUniformTexture( 'samplerRandomStatic', randomTextureStatic.texture );
|
||||||
|
|
||||||
this.__entity.components.push( new Lambda( {
|
this.__entity.components.push( new Lambda( {
|
||||||
onDraw: ( event ) => {
|
onDraw: ( event ) => {
|
||||||
|
@@ -1,4 +1,3 @@
|
|||||||
import { GLCatTexture } from '@fms-cat/glcat-ts';
|
|
||||||
import { Entity } from '../heck/Entity';
|
import { Entity } from '../heck/Entity';
|
||||||
import { GPUParticles } from './GPUParticles';
|
import { GPUParticles } from './GPUParticles';
|
||||||
import { Geometry } from '../heck/Geometry';
|
import { Geometry } from '../heck/Geometry';
|
||||||
@@ -10,11 +9,10 @@ import sphereParticleComputeFrag from '../shaders/sphere-particles-compute.frag'
|
|||||||
import sphereParticleRenderFrag from '../shaders/sphere-particles-render.frag';
|
import sphereParticleRenderFrag from '../shaders/sphere-particles-render.frag';
|
||||||
import sphereParticleRenderVert from '../shaders/sphere-particles-render.vert';
|
import sphereParticleRenderVert from '../shaders/sphere-particles-render.vert';
|
||||||
import { gl, glCat } from '../heck/canvas';
|
import { gl, glCat } from '../heck/canvas';
|
||||||
|
import { randomTexture, randomTextureStatic } from '../utils/RandomTexture';
|
||||||
|
|
||||||
export interface SphereParticlesOptions {
|
export interface SphereParticlesOptions {
|
||||||
particlesSqrt: number;
|
particlesSqrt: number;
|
||||||
textureRandom: GLCatTexture<WebGL2RenderingContext>;
|
|
||||||
textureRandomStatic: GLCatTexture<WebGL2RenderingContext>;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export class SphereParticles {
|
export class SphereParticles {
|
||||||
@@ -51,7 +49,7 @@ export class SphereParticles {
|
|||||||
const material = new Material( quadVert, sphereParticleComputeFrag );
|
const material = new Material( quadVert, sphereParticleComputeFrag );
|
||||||
material.addUniform( 'particlesSqrt', '1f', particlesSqrt );
|
material.addUniform( 'particlesSqrt', '1f', particlesSqrt );
|
||||||
material.addUniform( 'particles', '1f', particles );
|
material.addUniform( 'particles', '1f', particles );
|
||||||
material.addUniformTexture( 'samplerRandom', options.textureRandom );
|
material.addUniformTexture( 'samplerRandom', randomTexture.texture );
|
||||||
|
|
||||||
if ( process.env.DEV ) {
|
if ( process.env.DEV ) {
|
||||||
if ( module.hot ) {
|
if ( module.hot ) {
|
||||||
@@ -117,7 +115,7 @@ export class SphereParticles {
|
|||||||
},
|
},
|
||||||
);
|
);
|
||||||
material.addUniform( 'colorVar', '1f', 0.1 );
|
material.addUniform( 'colorVar', '1f', 0.1 );
|
||||||
material.addUniformTexture( 'samplerRandomStatic', options.textureRandomStatic );
|
material.addUniformTexture( 'samplerRandomStatic', randomTextureStatic.texture );
|
||||||
|
|
||||||
if ( process.env.DEV ) {
|
if ( process.env.DEV ) {
|
||||||
if ( module.hot ) {
|
if ( module.hot ) {
|
||||||
|
@@ -1,4 +1,3 @@
|
|||||||
import { GLCatTexture } from '@fms-cat/glcat-ts';
|
|
||||||
import { Entity } from '../heck/Entity';
|
import { Entity } from '../heck/Entity';
|
||||||
import { GPUParticles } from './GPUParticles';
|
import { GPUParticles } from './GPUParticles';
|
||||||
import { Geometry } from '../heck/Geometry';
|
import { Geometry } from '../heck/Geometry';
|
||||||
@@ -9,12 +8,11 @@ import trailsComputeFrag from '../shaders/trails-compute.frag';
|
|||||||
import trailsRenderFrag from '../shaders/trails-render.frag';
|
import trailsRenderFrag from '../shaders/trails-render.frag';
|
||||||
import trailsRenderVert from '../shaders/trails-render.vert';
|
import trailsRenderVert from '../shaders/trails-render.vert';
|
||||||
import { gl, glCat } from '../heck/canvas';
|
import { gl, glCat } from '../heck/canvas';
|
||||||
|
import { randomTexture, randomTextureStatic } from '../utils/RandomTexture';
|
||||||
|
|
||||||
export interface TrailsOptions {
|
export interface TrailsOptions {
|
||||||
trails: number;
|
trails: number;
|
||||||
trailLength: number;
|
trailLength: number;
|
||||||
textureRandom: GLCatTexture<WebGL2RenderingContext>;
|
|
||||||
textureRandomStatic: GLCatTexture<WebGL2RenderingContext>;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export class Trails {
|
export class Trails {
|
||||||
@@ -48,7 +46,7 @@ export class Trails {
|
|||||||
const material = new Material( quadVert, trailsComputeFrag );
|
const material = new Material( quadVert, trailsComputeFrag );
|
||||||
material.addUniform( 'trails', '1f', options.trails );
|
material.addUniform( 'trails', '1f', options.trails );
|
||||||
material.addUniform( 'trailLength', '1f', options.trailLength );
|
material.addUniform( 'trailLength', '1f', options.trailLength );
|
||||||
material.addUniformTexture( 'samplerRandom', options.textureRandom );
|
material.addUniformTexture( 'samplerRandom', randomTexture.texture );
|
||||||
|
|
||||||
if ( process.env.DEV ) {
|
if ( process.env.DEV ) {
|
||||||
if ( module.hot ) {
|
if ( module.hot ) {
|
||||||
@@ -149,7 +147,7 @@ export class Trails {
|
|||||||
trailsRenderVert,
|
trailsRenderVert,
|
||||||
trailsRenderFrag,
|
trailsRenderFrag,
|
||||||
);
|
);
|
||||||
material.addUniformTexture( 'samplerRandomStatic', options.textureRandomStatic );
|
material.addUniformTexture( 'samplerRandomStatic', randomTextureStatic.texture );
|
||||||
|
|
||||||
if ( process.env.DEV ) {
|
if ( process.env.DEV ) {
|
||||||
if ( module.hot ) {
|
if ( module.hot ) {
|
||||||
|
30
src/main.ts
30
src/main.ts
@@ -7,8 +7,7 @@ import { canvas, glCat } from './heck/canvas';
|
|||||||
import { Dog } from './heck/Dog';
|
import { Dog } from './heck/Dog';
|
||||||
import { CanvasRenderTarget } from './heck/CanvasRenderTarget';
|
import { CanvasRenderTarget } from './heck/CanvasRenderTarget';
|
||||||
import { Lambda } from './heck/components/Lambda';
|
import { Lambda } from './heck/components/Lambda';
|
||||||
import { RandomTexture } from './utils/RandomTexture';
|
import { randomTexture } from './utils/RandomTexture';
|
||||||
import { RANDOM_RESOLUTION, STATIC_RANDOM_RESOLUTION } from './config';
|
|
||||||
import { SphereParticles } from './entities/SphereParticles';
|
import { SphereParticles } from './entities/SphereParticles';
|
||||||
import { Swap, Vector3 } from '@fms-cat/experimental';
|
import { Swap, Vector3 } from '@fms-cat/experimental';
|
||||||
import { BufferRenderTarget } from './heck/BufferRenderTarget';
|
import { BufferRenderTarget } from './heck/BufferRenderTarget';
|
||||||
@@ -163,21 +162,6 @@ if ( process.env.DEV ) {
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
// == textures =====================================================================================
|
|
||||||
const randomTexture = new RandomTexture(
|
|
||||||
glCat,
|
|
||||||
RANDOM_RESOLUTION[ 0 ],
|
|
||||||
RANDOM_RESOLUTION[ 1 ]
|
|
||||||
);
|
|
||||||
randomTexture.update();
|
|
||||||
|
|
||||||
const randomTextureStatic = new RandomTexture(
|
|
||||||
glCat,
|
|
||||||
STATIC_RANDOM_RESOLUTION[ 0 ],
|
|
||||||
STATIC_RANDOM_RESOLUTION[ 1 ]
|
|
||||||
);
|
|
||||||
randomTextureStatic.update();
|
|
||||||
|
|
||||||
// == scene ========================================================================================
|
// == scene ========================================================================================
|
||||||
const dog = new Dog( music );
|
const dog = new Dog( music );
|
||||||
|
|
||||||
@@ -206,16 +190,12 @@ dog.root.children.push( environmentMap.entity );
|
|||||||
// -- "objects" ------------------------------------------------------------------------------------
|
// -- "objects" ------------------------------------------------------------------------------------
|
||||||
const sphereParticles = new SphereParticles( {
|
const sphereParticles = new SphereParticles( {
|
||||||
particlesSqrt: 256,
|
particlesSqrt: 256,
|
||||||
textureRandom: randomTexture.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,
|
|
||||||
textureRandomStatic: randomTextureStatic.texture
|
|
||||||
} );
|
} );
|
||||||
dog.root.children.push( trails.entity );
|
dog.root.children.push( trails.entity );
|
||||||
|
|
||||||
@@ -227,15 +207,10 @@ dog.root.children.push( cube.entity );
|
|||||||
|
|
||||||
const flickyParticles = new FlickyParticles( {
|
const flickyParticles = new FlickyParticles( {
|
||||||
particlesSqrt: 8,
|
particlesSqrt: 8,
|
||||||
textureRandom: randomTexture.texture,
|
|
||||||
textureRandomStatic: randomTextureStatic.texture,
|
|
||||||
} );
|
} );
|
||||||
dog.root.children.push( flickyParticles.entity );
|
dog.root.children.push( flickyParticles.entity );
|
||||||
|
|
||||||
const raymarcher = new Raymarcher( {
|
const raymarcher = new Raymarcher();
|
||||||
textureRandom: randomTexture.texture,
|
|
||||||
textureRandomStatic: randomTextureStatic.texture
|
|
||||||
} );
|
|
||||||
dog.root.children.push( raymarcher.entity );
|
dog.root.children.push( raymarcher.entity );
|
||||||
|
|
||||||
// -- things that is not an "object" ---------------------------------------------------------------
|
// -- things that is not an "object" ---------------------------------------------------------------
|
||||||
@@ -286,7 +261,6 @@ const camera = new CameraEntity( {
|
|||||||
],
|
],
|
||||||
textureIBLLUT: ibllut.texture,
|
textureIBLLUT: ibllut.texture,
|
||||||
textureEnv: environmentMap.texture,
|
textureEnv: environmentMap.texture,
|
||||||
textureRandom: randomTexture.texture
|
|
||||||
} );
|
} );
|
||||||
camera.camera.clear = [ 0.0, 0.0, 0.0, 0.0 ];
|
camera.camera.clear = [ 0.0, 0.0, 0.0, 0.0 ];
|
||||||
camera.entity.components.unshift( new Lambda( {
|
camera.entity.components.unshift( new Lambda( {
|
||||||
|
@@ -1,6 +1,7 @@
|
|||||||
import { GLCat, GLCatTexture } from '@fms-cat/glcat-ts';
|
import { GLCat, GLCatTexture } from '@fms-cat/glcat-ts';
|
||||||
import { Xorshift } from '@fms-cat/experimental';
|
import { Xorshift } from '@fms-cat/experimental';
|
||||||
import { gl } from '../heck/canvas';
|
import { gl, glCat } from '../heck/canvas';
|
||||||
|
import { RANDOM_RESOLUTION, STATIC_RANDOM_RESOLUTION } from '../config';
|
||||||
|
|
||||||
export class RandomTexture {
|
export class RandomTexture {
|
||||||
private __texture: GLCatTexture<WebGL2RenderingContext>;
|
private __texture: GLCatTexture<WebGL2RenderingContext>;
|
||||||
@@ -52,3 +53,17 @@ 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();
|
||||||
|
Reference in New Issue
Block a user