update mobile white particles

experiments/darkBlossom/src/SceneApp.js

@@ -75,6 +75,7 @@ class SceneApp extends Scene {
 
     if (Config.usePoseDetection) {
       this._initPoseDetection();
+      this.orbitalControl.lock();
     }
   }
 

experiments/darkBlossom/src/shaders/compose.frag

@@ -105,8 +105,8 @@ void main(void) {
     // color.rgb -= noiseAmount * 0.2;
 
     // highlight / shadow
-    float highlight = distance(uv, vec2(-0.2, 0.2));
-    highlight = smoothstep(0.8, 0.2, highlight);
+    float highlight = distance(uv, vec2(-0.3, 0.4));
+    highlight = smoothstep(0.9, 0.3, highlight);
     highlight = mix(0.7, 1.5, highlight);
     color.rgb *= highlight;
 

experiments/darkBlossom/src/utils/addControl.js

@@ -3,10 +3,7 @@ import { GL } from "alfrid";
 import * as dat from "dat.gui";
 import Config from "../Config";
 import Settings from "../Settings";
-import { rgb } from "../utils";
 import { saveJson } from "./";
-import { resizeUpdate } from "./resize";
-import addPreview, { resizeThumbnail } from "./thumbnail";
 
 export default (scene) => {
   const { refresh, reload } = Settings;
@@ -22,52 +19,13 @@ export default (scene) => {
     .add(Config, "numParticles", [128, 144, 192, 256, 384, 512])
     .onFinishChange(reload);
   gui.add(Config, "usePoseDetection").onFinishChange(reload);
-  gui.add(Config, "floorLevel", 0, -2).onFinishChange(reload);
-  gui.addColor(Config, "colorBg").onChange(refresh);
-  gui.addColor(Config, "colorCover").onChange(refresh);
-  gui.addColor(Config, "colorShadow").onChange(refresh);
-  gui.addColor(Config, "colorPetal").onChange(refresh);
+  // gui.add(Config, "floorLevel", 0, -2).onFinishChange(reload);
+  // gui.addColor(Config, "colorBg").onChange(refresh);
+  // gui.addColor(Config, "colorCover").onChange(refresh);
+  // gui.addColor(Config, "colorShadow").onChange(refresh);
+  // gui.addColor(Config, "colorPetal").onChange(refresh);
 
-  const fSystem = gui.addFolder("System");
-  const updateBackgroundColor = () => {
-    refresh();
-    document.body.style.backgroundColor = rgb(Config.background);
-  };
-
-  const updateThumbnail = () => {
-    refresh();
-    resizeThumbnail();
-  };
-
-  fSystem
-    .add(Config, "margin", 0, 500)
-    .step(1)
-    .onChange(function () {
-      refresh();
-      resizeUpdate();
-    });
-
-  fSystem.addColor(Config, "background").onChange(updateBackgroundColor);
-  fSystem.add(Config, "showThumbnail").onFinishChange(reload);
-  if (Config.showThumbnail) {
-    fSystem
-      .add(Config, "thumbnailSize", 0, 500)
-      .step(1)
-      .onFinishChange(updateThumbnail);
-  }
-  fSystem.add(Config, "autoSave").onFinishChange(reload);
-
-  fSystem.add(oControl, "save").name("Save Settings");
-  fSystem.add(Settings, "reset").name("Reset Default");
-
-  fSystem.open();
-
-  resizeUpdate();
-  updateBackgroundColor();
-
-  if (Config.showThumbnail) {
-    addPreview(GL.canvas);
-  }
+  gui.add(Settings, "reset").name("Reset default settings");
 
   // dat.GUI.toggleHide();
 };

experiments/whiteParticles/src/SceneApp.js

@@ -261,6 +261,7 @@ class SceneApp extends Scene {
       .uniform("uTime", Scheduler.getElapsedTime())
       .uniform("uOffset", f)
       .uniform("uLifeDecrease", this._offset.value < 1 ? 0 : 1)
+      .uniform("uSpeed", GL.isMobile ? 0.25 : 1.0)
       .draw();
 
     this._fbo.swap();
@@ -295,6 +296,7 @@ class SceneApp extends Scene {
     let f = sin(this._offset.value * PI);
     f = smoothstep(0.0, 0.8, f);
     f = Math.pow(f, 2) * 0.2;
+    if (GL.isMobile) f *= 0.25;
     const noise = 1;
     const angle = this._rotation * f;
 
@@ -392,7 +394,6 @@ class SceneApp extends Scene {
     GL.enableAdditiveBlending();
     this._drawReflection
       .bindTexture("uNormalMap", this._textureNormal, 0)
-
       .uniform("uColor", Config.colorReflection0.map(toGlsl))
       .uniform("uLight", [0.3, 0.1, 1.0])
       .draw();
@@ -422,7 +423,7 @@ class SceneApp extends Scene {
   }
 
   resize() {
-    const pixelRatio = 1.5;
+    const pixelRatio = GL.isMobile ? 1 : 1.5;
     const { innerWidth, innerHeight } = window;
     GL.setSize(innerWidth * pixelRatio, innerHeight * pixelRatio);
     this.camera?.setAspectRatio?.(GL.aspectRatio);

experiments/whiteParticles/src/index.js

@@ -28,6 +28,7 @@ import Scene from "./SceneApp";
 import { logError } from "./utils";
 import preload from "./utils/preload";
 import "./utils/Capture";
+import Config from "./Config.js";
 
 const isDev = process.env.NODE_ENV === "development" || 1;
 
@@ -53,11 +54,15 @@ function _init3D() {
   if (isDev) {
     import("./Settings").then(({ default: Settings }) => {
       Settings.init();
+      if (GL.isMobile) {
+        Config.numParticles = 128;
+        Config.usePoseDetection = false;
+      }
       initScene();
 
       import("./utils/addControl").then(({ default: addControls }) => {
         addControls(scene);
-        // import("./debug");
+        import("./debug");
       });
     });
   } else {

experiments/whiteParticles/src/shaders/sim.frag

@@ -17,6 +17,7 @@ uniform sampler2D uFluidMap;
 uniform sampler2D uDensityMap;
 
 uniform float uTime;
+uniform float uSpeed;
 uniform float uOffset;
 uniform float uLifeDecrease;
 
@@ -51,7 +52,7 @@ void main(void) {
     data.z += 0.1;
 
     float life = data.x;
-    life -= mix(1.0, 4.0, data.y) * 0.003 * mix(1.0, 2.0, uLifeDecrease);
+    life -= mix(1.0, 4.0, data.y) * 0.003 * mix(1.0, 2.0, uLifeDecrease)/uSpeed;
 
     vec3 acc = vec3(0.0);
 
@@ -67,14 +68,14 @@ void main(void) {
     // float noise = snoise(vec3(pos * 0.75 + uTime * 0.5 + extra * 0.1));
     acc.z += noise * 30.0 * density;
 
-    acc += fluid * 0.03 * density;
+    acc += fluid * 0.03 * density * uSpeed;
 
 
     // apply velocity
     float speed = mix(1.0, 2.0, extra.x);
 
     float t = pow(uOffset , 3.0);
-    vel += acc * speed * 0.0001 * mix(1.0, 1.5, t);
+    vel += acc * speed * 0.0001 * mix(1.0, 1.5, t) * uSpeed;
     vel *= 0.9 + uOffset * 0.02;
 
     pos += vel;