build face particle

experiments/faceParticles03/src/AudioManager.js

@@ -0,0 +1,11 @@
+import sono from "./sono/sono.min.js";
+// console.log(sono);
+
+const sound0 = sono.create("music.mp3");
+const sound = sono.create({
+  id: "music",
+  url: ["music.mp3"],
+  loop: true,
+});
+
+sound.play();

experiments/faceParticles03/src/Config.js

@@ -1,11 +1,14 @@
 export default {
   numParticles: "512",
-  colorBg: [77.5, 77.5, 77.5],
-  colorHighlight: [25, 103, 135],
-  colorShadow: [0, 255, 120],
+  colorBg: [192, 188, 183],
+  colorHighlight: [247.5, 247.5, 247.5],
+  colorShadow: [78, 72, 68],
   autoSave: false,
   showThumbnail: false,
   margin: 100,
   thumbnailSize: 256,
   background: [22, 22, 22],
+  particleScale: 1.4,
+  showWebcam: false,
+  audio: false,
 };

experiments/faceParticles03/src/DrawCompose.js

@@ -1,11 +1,10 @@
-import { Draw, Geom, ShaderLibs } from "alfrid";
+import { Draw, Geom } from "alfrid";
 
+import vs from "shaders/pass.vert";
 import fs from "shaders/compose.frag";
 
 export default class DrawCompose extends Draw {
   constructor() {
-    super()
-      .setMesh(Geom.bigTriangle())
-      .useProgram(ShaderLibs.bigTriangleVert, fs);
+    super().setMesh(Geom.bigTriangle()).useProgram(vs, fs);
   }
 }

experiments/faceParticles03/src/DrawFloatingParticles.js

@@ -10,7 +10,7 @@ export default class DrawFloatingParticles extends Draw {
   constructor() {
     super();
 
-    let num = 1000;
+    let num = 2000;
     const r = 7;
     const getPos = () => [random(-r, r), random(-r, r), random(-r, r)];
 

experiments/faceParticles03/src/DrawFloor.js

@@ -0,0 +1,11 @@
+import { Draw, Geom } from "alfrid";
+
+import vs from "shaders/floor.vert";
+import fs from "shaders/floor.frag";
+
+export default class DrawFloor extends Draw {
+  constructor() {
+    const s = 15;
+    super().setMesh(Geom.plane(s, s, 1, "xz")).useProgram(vs, fs);
+  }
+}

experiments/faceParticles03/src/DrawParticles.js

@@ -17,7 +17,11 @@ export default class DrawParticles extends Draw {
 
     for (let j = 0; j < num; j++) {
       for (let i = 0; i < num; i++) {
-        positions.push([random(), random(), random(0)]);
+        let scale = random(0.5, 1.5);
+        if (random() < 0.03) {
+          scale *= random(2, 3);
+        }
+        positions.push([random(), random(), scale]);
         uvs.push([i / num, j / num]);
         indices.push(i + j * num);
       }

experiments/faceParticles03/src/DrawRibbon.js

@@ -44,12 +44,18 @@ export default class DrawRibbon extends Draw {
       .bufferIndex(indices);
 
     // instancing
-    let num = 1000;
+    let num = 1800;
     const uvOffsets = [];
     const extras = [];
     while (num--) {
       uvOffsets.push([random(), random()]);
-      extras.push([random(), random(), random()]);
+
+      let scale = random(0.5, 1.5);
+      if (random() < 0.1) {
+        scale *= random(1, 2);
+      }
+
+      extras.push([random(), random(), scale]);
     }
     mesh.bufferInstance(uvOffsets, "aUVOffset");
     mesh.bufferInstance(extras, "aExtra");

experiments/faceParticles03/src/DrawStaticFace.js

@@ -0,0 +1,42 @@
+import { GL, Draw, Mesh } from "alfrid";
+
+import { random } from "./utils";
+
+import vs from "shaders/staticFace.vert";
+import fs from "shaders/staticFace.frag";
+
+export default class DrawStaticFace extends Draw {
+  constructor() {
+    super();
+
+    const positions = [];
+    const uvs = [];
+    const indices = [];
+
+    let num = 250000;
+
+    const { sin, cos, PI, pow } = Math;
+    const getUV = () => {
+      const r = pow(random(0.5), random(1, 1.3));
+      const a = random(PI * 2);
+      return [r * cos(a) + 0.5, r * sin(a) + 0.5];
+    };
+
+    while (num--) {
+      let scale = random(0.5, 1.5);
+      if (random() < 0.01) {
+        scale *= random(1, 2);
+      }
+      positions.push([scale, random(), random()]);
+      uvs.push(getUV());
+      indices.push(num);
+    }
+
+    const mesh = new Mesh(GL.POINTS)
+      .bufferVertex(positions)
+      .bufferTexCoord(uvs)
+      .bufferIndex(indices);
+
+    this.setMesh(mesh).useProgram(vs, fs);
+  }
+}

experiments/faceParticles03/src/DrawVignette.js

@@ -0,0 +1,12 @@
+import { Draw, Geom, ShaderLibs } from "alfrid";
+import { random } from "./utils";
+import fs from "shaders/vignette.frag";
+
+export default class DrawBg extends Draw {
+  constructor() {
+    super()
+      .setMesh(Geom.bigTriangle())
+      .useProgram(ShaderLibs.bigTriangleVert, fs)
+      .uniform("uSeed", random(10));
+  }
+}

experiments/faceParticles03/src/FaceDetection.js

@@ -8,6 +8,7 @@ export const videoHeight = 480 * scale;
 
 export const VIDEO_STARTED = "videoStarted";
 export const FACE_DETECTED = "faceDetected";
+export const FACE_LOST = "faceLost";
 
 export const STATE = {
   camera: { targetFPS: 60, sizeOption: "640 X 480" },
@@ -121,6 +122,8 @@ class FaceDetection extends EventDispatcher {
     );
     if (faces.length > 0) {
       this.emit(FACE_DETECTED, faces[0]);
+    } else {
+      this.emit(FACE_LOST);
     }
 
     requestAnimationFrame(() => this.checkFace());

experiments/faceParticles03/src/SceneApp.js

@@ -9,9 +9,11 @@ import {
   CameraOrtho,
   FboPingPong,
   FrameBuffer,
+  EaseNumber,
 } from "alfrid";
 import {
   RAD,
+  random,
   randomInt,
   iOS,
   toGlsl,
@@ -26,6 +28,7 @@ import FaceDetection, {
   videoWidth,
   videoHeight,
   FACE_DETECTED,
+  FACE_LOST,
   VIDEO_STARTED,
 } from "./FaceDetection";
 import { vec3, mat4 } from "gl-matrix";
@@ -45,7 +48,10 @@ import DrawFloatingParticles from "./DrawFloatingParticles";
 import DrawRibbon from "./DrawRibbon";
 import DrawBg from "./DrawBg";
 import DrawVideo from "./DrawVideo";
+import DrawFloor from "./DrawFloor";
 import DrawCompose from "./DrawCompose";
+import DrawStaticFace from "./DrawStaticFace";
+import DrawVignette from "./DrawVignette";
 import SubParticles from "./SubParticles";
 
 // fluid simulation
@@ -68,7 +74,7 @@ class SceneApp extends Scene {
     this.orbitalControl.lock();
     // this.orbitalControl.rx.value = -0.4;
     this.orbitalControl.radius.value = 7;
-    this.camera.setPerspective(60 * RAD, GL.aspectRatio, 0.1, 40);
+    this.camera.setPerspective(70 * RAD, GL.aspectRatio, 0.1, 40);
     // this.camera.setPerspective(120 * RAD, GL.aspectRatio, 0.1, 40);
 
     this._pointNose = [0, 0, 0];
@@ -96,6 +102,9 @@ class SceneApp extends Scene {
     FaceDetection.on(FACE_DETECTED, this.onFaceDetected);
     FaceDetection.on(VIDEO_STARTED, this.onVideoStarted);
     FaceDetection.init();
+    FaceDetection.on(FACE_LOST, () => {
+      this._offsetOpen.value = 0;
+    });
 
     const pointIndices = [4, 159, 386, 200, 47, 176];
     let num = 15;
@@ -105,14 +114,17 @@ class SceneApp extends Scene {
 
     this._controlPoints = pointIndices.map((index) => new ControlPoint(index));
 
+    // state
+    this._offsetOpen = new EaseNumber(0, 0.02);
+
     setTimeout(() => {
       canSave = true;
     }, 500);
   }
 
   _setupLight() {
     const r = 6;
-    this._lightPos = [1, 4, 2];
+    this._lightPos = [0, 4, 2];
     this._cameraLight = new CameraOrtho();
     this._cameraLight.ortho(-r, r, r, -r, 1, 12);
     this._cameraLight.lookAt(this._lightPos, [0, 0, 0]);
@@ -177,6 +189,7 @@ class SceneApp extends Scene {
     });
 
     this._hasFaceDetected = true;
+    this._offsetOpen.value = 1;
   };
 
   _initTextures() {
@@ -218,11 +231,6 @@ class SceneApp extends Scene {
       fbo.unbind();
       this._fboRibbons.push(fbo);
     }
-
-    // lookup
-    this._textureLookup = Assets.get("colorMapAll");
-    this._textureLookup.minFilter = GL.NEAREST;
-    this._textureLookup.magFilter = GL.NEAREST;
   }
 
   _initViews() {
@@ -234,20 +242,23 @@ class SceneApp extends Scene {
     this._drawLine = new DrawLine();
     this._drawBg = new DrawBg();
     this._drawVideo = new DrawVideo();
-    this._drawCompose = new DrawCompose();
+    this._drawCompose = new DrawCompose().uniform("uSeed", random(10));
+    this._drawVignette = new DrawVignette();
+    this._drawFloor = new DrawFloor();
 
     // particles
     new DrawSave().bindFrameBuffer(this._fbo.read).draw();
     this._drawParticles = new DrawParticles();
     this._drawFloating = new DrawFloatingParticles();
+    this._drawStaticFace = new DrawStaticFace();
     this._drawSim = new DrawSim();
     this._drawRibbon = new DrawRibbon();
     this._subParticles = new SubParticles();
   }
 
   update() {
     // update video feed
-    if (this._textureVideo) {
+    if (this._textureVideo && Config.showWebcam) {
       this._textureVideo.updateTexture(FaceDetection.video);
     }
 
@@ -314,6 +325,8 @@ class SceneApp extends Scene {
       return;
     }
 
+    const { particleScale } = Config;
+
     const tDepth = mShadow ? this._fboShadow.depthTexture : this._fluid.density;
     this._drawParticles
       .uniform("uViewport", [GL.width, GL.height])
@@ -323,6 +336,19 @@ class SceneApp extends Scene {
       .bindTexture("uDepthMap", tDepth, 3)
       .bindTexture("uColorMap", Assets.get("colorMap"), 4)
       .uniform("uShadowMatrix", this._mtxShadow)
+      .uniform("uOffsetOpen", this._offsetOpen.value)
+      .uniform("uParticleScale", particleScale)
+      .draw();
+
+    this._drawStaticFace
+      .uniform("uViewport", [GL.width, GL.height])
+      .bindTexture("uPosMap", this._fboFront.texture, 0)
+      .bindTexture("uColorMap", Assets.get("colorMap"), 1)
+      .bindTexture("uDepthMap", tDepth, 2)
+      .uniform("uShadowMatrix", this._mtxShadow)
+      .uniform("uTime", Scheduler.getElapsedTime())
+      .uniform("uOffsetOpen", this._offsetOpen.value)
+      .uniform("uParticleScale", particleScale)
       .draw();
   }
 
@@ -337,6 +363,8 @@ class SceneApp extends Scene {
       .bindTexture("uDataMap", this._fbo.read.getTexture(3), index)
       .bindTexture("uColorMap", Assets.get("floatingMap"), index + 1)
       .uniform("uLight", this._lightPos)
+      .uniform("uCenter", this._pointNose)
+      .uniform("uOffsetOpen", this._offsetOpen.value)
       .draw();
     GL.enable(GL.CULL_FACE);
   }
@@ -362,7 +390,7 @@ class SceneApp extends Scene {
       .uniform("uColor1", colorShadow.map(toGlsl))
       .draw();
 
-    if (this._textureVideo) {
+    if (this._textureVideo && Config.showWebcam) {
       this._drawVideo
         .bindTexture("uMap", this._textureVideo, 1)
         .uniform("uRatio", GL.aspectRatio)
@@ -389,16 +417,31 @@ class SceneApp extends Scene {
     this._renderParticles(true);
     this._subParticles.render();
 
-    // this._staticFace.render(this.camera);
-
     this._drawFloating.uniform("uViewport", [GL.width, GL.height]).draw();
     this._renderRibbons();
+
+    if (this._fboShadow.depthTexture) {
+      this._drawFloor
+        .bindTexture("uDepthMap", this._fboShadow.depthTexture, 0)
+        .uniform("uShadowMatrix", this._mtxShadow)
+        .uniform("uColor", Config.colorBg.map(toGlsl))
+        .draw();
+    }
+
+    GL.disable(GL.DEPTH_TEST);
+    this._drawVignette
+      .uniform("uColor", Config.colorBg.map(toGlsl))
+      .uniform("uRatio", GL.aspectRatio)
+      .draw();
+    GL.enable(GL.DEPTH_TEST);
+
     this._fboRender.unbind();
 
     // this._dCopy.draw(this._fboRender.texture);
     this._drawCompose
       .bindTexture("uMap", this._fboRender.texture, 0)
-      .bindTexture("uLookupMap", this._textureLookup, 1)
+      .uniform("uTime", Scheduler.getElapsedTime())
+      .uniform("uRatio", GL.aspectRatio)
       .draw();
 
     if (canSave && !hasSaved && Config.autoSave) {
@@ -413,6 +456,7 @@ class SceneApp extends Scene {
     GL.setSize(innerWidth * pixelRatio, innerHeight * pixelRatio);
     this.camera.setAspectRatio(GL.aspectRatio);
     this._textureBg = generateBg();
+    this._fboRender = new FrameBuffer(GL.width, GL.height);
   }
 }