add snow demo to vfx particle simulation

examples/vfx-particle-simulation/index.html

@@ -2,15 +2,25 @@
 
 <head>
   <meta charset="utf-8">
-  <title>Forge • Hello World</title>
+  <title>Forge • VFX Particle Simulation</title>
   <style>
-    body {
+    html, body {
-      margin: 0;
+            margin: 0;
-    }
+            height: 100%;
+            background-color: black;
+        }
+
+        #canvas {
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            touch-action: none;
+        }
   </style>
 </head>
 
 <body>
+  <canvas id="canvas"></canvas>
   <script type="importmap">
     {
       "imports": {
@@ -19,28 +29,7 @@
       }
     }
   </script>
-  <script type="module">
+  <script type="module" src="main.js"></script>
-    import * as THREE from "three";
-    import { SplatMesh } from "@forge-gfx/forge";
-    import { getAssetFileURL } from "/examples/js/get-asset-url.js";
-
-    const scene = new THREE.Scene();
-    const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
-    const renderer = new THREE.WebGLRenderer();
-    renderer.setSize(window.innerWidth, window.innerHeight);
-    document.body.appendChild(renderer.domElement)
-
-    const splatURL = await getAssetFileURL("butterfly-wings-closed.spz");
-    const butterfly = new SplatMesh({ url: splatURL });
-    butterfly.quaternion.set(1, 0, 0, 0);
-    butterfly.position.set(0, -0.5, -3);
-    scene.add(butterfly);
-
-    renderer.setAnimationLoop(function animate(time) {
-      renderer.render(scene, camera);
-      butterfly.rotation.y += 0.01;
-    });
-  </script>
 </body>
 
 </html>

examples/vfx-particle-simulation/main.js

@@ -0,0 +1,203 @@
+import {
+  ForgeRenderer,
+  PointerControls,
+  SplatMesh,
+  VRButton,
+  generators,
+} from "@forge-gfx/forge";
+import GUI from "lil-gui";
+import * as THREE from "three";
+
+export const SNOW_HEIGHT = 8;
+
+async function main() {
+  const canvas = document.getElementById("canvas");
+  const renderer = new THREE.WebGLRenderer({ canvas });
+  const scene = new THREE.Scene();
+
+  const forge = new ForgeRenderer({ renderer });
+  scene.add(forge);
+
+  const camera = new THREE.PerspectiveCamera(
+    75,
+    canvas.width / canvas.height,
+    0.1,
+    1000,
+  );
+  camera.position.set(-1, 12, 100);
+  camera.rotateY((3 * Math.PI) / 2);
+  scene.add(camera);
+
+  const pointerControls = new PointerControls({ canvas });
+
+  function handleResize() {
+    const width = canvas.clientWidth;
+    const height = canvas.clientHeight;
+    renderer.setSize(width, height, false);
+    camera.aspect = width / height;
+    camera.updateProjectionMatrix();
+  }
+
+  handleResize();
+  window.addEventListener("resize", handleResize);
+
+  const splatURL =
+    "https://asundqui-public.s3.us-west-2.amazonaws.com/gsplats/snow_street.spz";
+  // "./snow_street_crop8.ply";
+  const background = new SplatMesh({ url: splatURL });
+  background.quaternion.set(1, 0, 0, 0);
+  scene.add(background);
+
+  const halfWidth = 25;
+  const halfDepth = 50;
+  const snowMinYClamp = -0.7;
+  const cam = camera.position;
+
+  const snowVolumeBox = new THREE.Box3(
+    new THREE.Vector3(
+      cam.x - halfWidth,
+      cam.y - SNOW_HEIGHT / 1.5,
+      cam.z - halfDepth,
+    ),
+    new THREE.Vector3(
+      cam.x + halfWidth,
+      cam.y + SNOW_HEIGHT * 2,
+      cam.z + halfDepth,
+    ),
+  );
+
+  const snow = generators.snowBox({
+    ...generators.DEFAULT_SNOW,
+    box: snowVolumeBox.clone(),
+    minY: snowMinYClamp,
+    color1: new THREE.Color(1.0, 1.0, 1.0),
+    color2: new THREE.Color(0.91, 0.9, 0.97),
+    density: 1000,
+    maxScale: 0.01,
+  });
+  scene.add(snow.snow);
+
+  const gui = new GUI({ title: "Clouds" });
+  const controls = {
+    fallVelocity: generators.DEFAULT_SNOW.fallVelocity,
+    wanderScale: generators.DEFAULT_SNOW.wanderScale,
+    wanderVariance: generators.DEFAULT_SNOW.wanderVariance,
+    maxScale: 0.01,
+    color1: new THREE.Color(1.0, 1.0, 1.0),
+    color2: new THREE.Color(0.91, 0.9, 0.97),
+    isPaused: false,
+    fallDirection: new THREE.Vector3(0, -1, 0),
+    windDirection: "No Direction",
+    _previousFallVelocity: generators.DEFAULT_SNOW.fallVelocity,
+    _previousWanderScale: generators.DEFAULT_SNOW.wanderScale,
+    _previousWanderVariance: generators.DEFAULT_SNOW.wanderVariance,
+  };
+
+  // snow parameters
+  gui.add(controls, "fallVelocity", 0.01, 0.5, 0.01).name("Fall Velocity");
+  gui.add(controls, "wanderScale", 0.01, 1, 0.01).name("Wander Scale");
+  gui.add(controls, "wanderVariance", 1, 5, 0.1).name("Wander Variance");
+  gui.add(controls, "maxScale", 0.001, 0.05, 0.001).name("Snow Size");
+  gui
+    .add(controls, "isPaused")
+    .name("Pause Snowfall")
+    .onChange((value) => {
+      if (value) {
+        controls._previousFallVelocity = controls.fallVelocity;
+        controls._previousWanderScale = controls.wanderScale;
+        controls._previousWanderVariance = controls.wanderVariance;
+
+        snow.fallVelocity.value = 0;
+        snow.wanderScale.value = 0;
+        snow.wanderVariance.value = 0;
+      } else {
+        snow.fallVelocity.value = controls._previousFallVelocity;
+        snow.wanderScale.value = controls._previousWanderScale;
+        snow.wanderVariance.value = controls._previousWanderVariance;
+      }
+    });
+
+  // color
+  const colorFolder = gui.addFolder("Snow Colors");
+  colorFolder
+    .addColor(controls, "color1")
+    .onChange((value) => {
+      snow.color1.value.set(value.r, value.g, value.b);
+    })
+    .name("Color 1");
+  colorFolder
+    .addColor(controls, "color2")
+    .onChange((value) => {
+      snow.color2.value.set(value.r, value.g, value.b);
+    })
+    .name("Color 2");
+
+  const directionFolder = gui.addFolder("Wind Orientation");
+  directionFolder
+    .add(controls.fallDirection, "x", -1, 1, 0.1)
+    .onChange(() => {
+      controls.fallDirection.normalize();
+      snow.fallDirection.value.copy(controls.fallDirection);
+    })
+    .name("East-West");
+  directionFolder
+    .add(controls.fallDirection, "z", -1, 1, 0.1)
+    .onChange(() => {
+      controls.fallDirection.normalize();
+      snow.fallDirection.value.copy(controls.fallDirection);
+    })
+    .name("North-South");
+
+  const windFolder = gui.addFolder("Wind Direction Presets");
+  windFolder
+    .add(controls, "windDirection", [
+      "N",
+      "NE",
+      "E",
+      "SE",
+      "No Direction",
+      "S",
+      "SW",
+      "W",
+      "NW",
+    ])
+    .onChange((value) => {
+      const directions = {
+        N: new THREE.Vector3(0, -1, -1),
+        NE: new THREE.Vector3(1, -1, -1),
+        E: new THREE.Vector3(1, -1, 0),
+        SE: new THREE.Vector3(1, -1, 1),
+        "No Direction": new THREE.Vector3(0, -1, 0),
+        S: new THREE.Vector3(0, -1, 1),
+        SW: new THREE.Vector3(-1, -1, 1),
+        W: new THREE.Vector3(-1, -1, 0),
+        NW: new THREE.Vector3(-1, -1, -1),
+      };
+      controls.fallDirection.copy(directions[value]).normalize();
+      snow.fallDirection.value.copy(controls.fallDirection);
+    })
+    .name("Wind Direction");
+
+  const vrButton = VRButton.createButton(renderer);
+  if (vrButton) document.body.appendChild(vrButton);
+
+  let lastTime;
+  renderer.setAnimationLoop((time) => {
+    const t = time * 0.001;
+    const dt = t - (lastTime ?? t);
+    lastTime = t;
+
+    pointerControls.update(dt, camera);
+
+    if (!controls.isPaused) {
+      snow.fallVelocity.value = controls.fallVelocity;
+      snow.wanderScale.value = controls.wanderScale;
+      snow.wanderVariance.value = controls.wanderVariance;
+      snow.maxScale.value = controls.maxScale;
+    }
+
+    renderer.render(scene, camera);
+  });
+}
+
+main().catch(console.error);

index.html

@@ -132,6 +132,7 @@
     <h2>Examples</h2>
 
     <ul class="links">
+        <li><a href="/examples/atmospheric-clouds/">Atmospheric - Clouds</a></li>
         <li><a href="/examples/envmap/">Environment Map</a></li>
         <li><a href="/examples/hello-world/">Hello World</a></li>
         <li><a href="/examples/interactivity/">Interactivity</a></li>