aesthetics: cube is animating

src/entities/Condition.ts

@@ -9,6 +9,7 @@ import { Material } from '../heck/Material';
 import { dummyRenderTargetFourDrawBuffers, dummyRenderTarget } from '../globals/dummyRenderTarget';
 import { Mesh } from '../heck/components/Mesh';
 import { auto } from '../globals/automaton';
+import { objectValuesMap } from '../utils/objectEntriesMap';
 
 const POINTS_MAX = 256;
 
@@ -128,17 +129,17 @@ export class Condition extends Entity {
       ),
     };
 
-    for ( const material of Object.values( materials ) ) {
+    objectValuesMap( materials, ( material ) => {
       material.addUniformTexture( 'samplerSvg', texture );
 
-      auto( 'Condition/phaseOffset', ( { value } ) => {
-        material.addUniform( 'phaseOffset', '1f', value );
-      } );
-
       auto( 'Condition/phaseWidth', ( { value } ) => {
         material.addUniform( 'phaseWidth', '1f', value );
       } );
-    }
+
+      auto( 'Sync/first/clap', ( { value } ) => {
+        material.addUniform( 'phaseOffset', '1f', 0.2 * value );
+      } );
+    } );
 
     if ( process.env.DEV ) {
       if ( module.hot ) {

src/entities/Cube.ts

@@ -1,7 +1,6 @@
 import { Quaternion, Vector3 } from '@fms-cat/experimental';
 import { Mesh } from '../heck/components/Mesh';
 import { Entity } from '../heck/Entity';
-import { Geometry } from '../heck/Geometry';
 import { Material } from '../heck/Material';
 import cubeVert from '../shaders/cube.vert';
 import cubeFrag from '../shaders/cube.frag';
@@ -10,6 +9,12 @@ import { genCube } from '../geometries/genCube';
 import { Lambda } from '../heck/components/Lambda';
 import { quadGeometry } from '../globals/quadGeometry';
 import { dummyRenderTargetFourDrawBuffers, dummyRenderTarget } from '../globals/dummyRenderTarget';
+import { glCat } from '../globals/canvas';
+import { InstancedGeometry } from '../heck/InstancedGeometry';
+import { objectValuesMap } from '../utils/objectEntriesMap';
+import { auto } from '../globals/automaton';
+
+const PRIMCOUNT = 512;
 
 export class Cube extends Entity {
   public mesh: Mesh;
@@ -25,22 +30,28 @@ export class Cube extends Entity {
       0.4,
     ) );
 
-    this.transform.position = new Vector3( [ 0.0, 0.0, -2.0 ] );
+    this.transform.position = new Vector3( [ 0.0, 0.0, 0.0 ] );
     this.transform.rotation = rot0;
-    this.transform.scale = this.transform.scale.scale( 0.8 );
+    this.transform.scale = this.transform.scale.scale( 0.2 );
 
     // -- geometry ---------------------------------------------------------------------------------
     const cube = genCube();
 
-    const geometry = new Geometry();
+    const geometry = new InstancedGeometry();
 
     geometry.vao.bindVertexbuffer( cube.position, 0, 3 );
     geometry.vao.bindVertexbuffer( cube.normal, 1, 3 );
     geometry.vao.bindIndexbuffer( cube.index );
 
+    const arrayInstanceId = [ ...Array( PRIMCOUNT ).keys() ];
+    const bufferInstanceId = glCat.createBuffer();
+    bufferInstanceId.setVertexbuffer( new Float32Array( arrayInstanceId ) );
+    geometry.vao.bindVertexbuffer( bufferInstanceId, 2, 1, 1 );
+
     geometry.count = cube.count;
     geometry.mode = cube.mode;
     geometry.indexType = cube.indexType;
+    geometry.primcount = PRIMCOUNT;
 
     // -- materials --------------------------------------------------------------------------------
     const materials = {
@@ -84,6 +95,10 @@ export class Cube extends Entity {
         ).multiply(
           Quaternion.fromAxisAngle( new Vector3( [ 0.0, 0.0, 1.0 ] ), 1.0 )
         );
+
+        objectValuesMap( materials, ( material ) => (
+          material.addUniform( 'clap', '1f', auto( 'Sync/first/clap' ) )
+        ) );
       },
       name: process.env.DEV && 'Cube/speen',
     } ) );

src/entities/Rings.ts

@@ -35,7 +35,7 @@ export class Rings extends Entity {
     geometry.vao.bindVertexbuffer( torus.normal, 1, 3 );
     geometry.vao.bindIndexbuffer( torus.index );
 
-    const arrayInstanceId = new Array( PRIMCOUNT ).fill( 0 ).map( ( _, i ) => i );
+    const arrayInstanceId = [ ...Array( PRIMCOUNT).keys() ];
     const bufferInstanceId = glCat.createBuffer();
     bufferInstanceId.setVertexbuffer( new Float32Array( arrayInstanceId ) );
 

src/shaders/cube.frag

@@ -6,7 +6,7 @@ precision highp float;
 
 const int MTL_PBR = 2;
 
-in float vLife;
+in float vInstanceId;
 in vec3 vNormal;
 in vec4 vPosition;
 in vec4 vPositionWithoutModel;
@@ -27,7 +27,7 @@ vec3 cyclicNoise( vec3 p ) {
   float amp = 0.5;
 
   for ( int i = 0; i < 8; i ++ ) {
-    p = p.zxy * 1.4 + 0.5;
+    p = p.zxy * 1.4 + vInstanceId;
     vec3 pt = lofi( p, 0.5 );
     sum += sin( cross( cos( pt ), sin( pt.yzx ) ) ) * amp;
     p += sum;

src/shaders/cube.vert

@@ -1,25 +1,50 @@
 #version 300 es
 
+#define fs(i) (fract(sin((i)*114.514)*1919.810))
+
 layout (location = 0) in vec3 position;
 layout (location = 1) in vec3 normal;
+layout (location = 2) in float instanceId;
 
+out float vInstanceId;
+out vec3 vNormal;
 out vec4 vPositionWithoutModel;
 out vec4 vPosition;
-out vec3 vNormal;
 
+uniform float clap;
 uniform vec2 resolution;
 uniform mat4 projectionMatrix;
 uniform mat4 viewMatrix;
 uniform mat4 modelMatrix;
 uniform mat4 normalMatrix;
 
-// ------
-
 void main() {
+  vInstanceId = instanceId;
+
   vNormal = normalize( ( normalMatrix * vec4( normal, 1.0 ) ).xyz );
 
   vPositionWithoutModel = vec4( position, 1.0 );
-  vPosition = modelMatrix * vPositionWithoutModel;
+
+  vec3 clapScaleSeed = vec3( 14.0, 5.2, 8.7 ) + 100.0 * instanceId;
+  vec3 clapScale = mix(
+    fs( clapScaleSeed + floor( clap ) ),
+    fs( clapScaleSeed + floor( clap + 1.0 ) ),
+    fract( clap )
+  );
+  vPositionWithoutModel.xyz *= clapScale;
+
+  vPosition = vPositionWithoutModel;
+
+  vec3 clapPositionSeed = vec3( 5.0, 8.6, 1.9 ) + 100.0 * instanceId;
+  vec3 clapPosition = 2.0 - 4.0 * mix(
+    fs( clapPositionSeed + floor( clap ) ),
+    fs( clapPositionSeed + floor( clap + 1.0 ) ),
+    fract( clap )
+  );
+  vPosition.xyz += clapPosition;
+
+  vPosition = modelMatrix * vPosition;
+
   vec4 outPos = projectionMatrix * viewMatrix * vPosition;
   outPos.x *= resolution.y / resolution.x;
   gl_Position = outPos;

src/utils/objectEntriesMap.ts

@@ -0,0 +1,13 @@
+export function objectEntriesMap<TValue, TReturn>(
+  object: { [ key: string ]: TValue },
+  func: ( entry: [ string, TValue ] ) => TReturn,
+): TReturn[] {
+  return Object.entries( object ).map( func );
+}
+
+export function objectValuesMap<TValue, TReturn>(
+  object: { [ key: string ]: TValue },
+  func: ( entry: TValue ) => TReturn,
+): TReturn[] {
+  return Object.values( object ).map( func );
+}