Use Pavel fluid simulation with point-cloud emitters

README.md

@@ -2,33 +2,37 @@
 
 Browser-based Augmenta demo for real-time spatial interaction.
 
-This repository is intentionally based on the current
-[Augmenta Three.js example](https://github.com/Augmenta-tech/Augmenta-ThreeJS-example)
-so connection handling, setup parsing, scene selection, debug data, QR sharing,
-sidebar behavior, persistence, mobile behavior, and GitHub Pages deployment stay
-aligned with the reference implementation.
-
-The Web Demo adds an independent 2D data-visual layer on top of that base. Disable
-**Visuals → Data visuals** at any time to reveal the original Three.js viewer.
+The application shell stays aligned with
+[Augmenta Three.js example](https://github.com/Augmenta-tech/Augmenta-ThreeJS-example):
+connection handling, setup parsing, scene selection, debug data, QR sharing,
+sidebar behavior, persistence, mobile behavior, and GitHub Pages deployment are
+kept intact.
 
 ## Visuals
 
-The default visual mode is a front-facing technical/data-art view with:
+The default visual mode is now a direct adaptation of
+[PavelDoGreat/WebGL-Fluid-Simulation](https://github.com/PavelDoGreat/WebGL-Fluid-Simulation) at upstream commit `a2d292931f19d9b3b9f564e23e6c32729d2121c3`.
+
+The simulation keeps the reference project's default visual parameters and
+rendering pipeline: 128 simulation resolution, 1024 dye resolution, density and
+velocity dissipation, pressure solve, vorticity, shading, bloom, sunrays, and the
+original dithering texture.
+
+The only intentional input change is the effector source:
+
+- mouse and multitouch input are removed
+- Augmenta point clouds are projected to the fluid canvas
+- each cloud is evenly subsampled to a bounded number of emitters
+- sampled point motion drives the same splat force path used by pointer motion
+- emitter colors follow the reference simulation's colorful pointer behavior
+- emitter count is shared across simultaneous point clouds to keep the effect
+  responsive and visually close to the original
 
-- colored point-cloud silhouettes
-- tracked bounding boxes and centroids
-- velocity cues
-- point-cloud-driven GPU fluid field and motion trails
-- scene grid and frame
-- zone markers
-- glow and labels
-- Punchy, Cool, and Monochrome palettes
+The fluid canvas is the primary visual when **Visuals → Fluid simulation** is
+enabled. Disable it to reveal the original Three.js debug viewer underneath.
 
-The visual layer is implemented in `src/visuals.js` and does not replace the
-reference Three.js renderer in `src/viewer.js`. Its optional fluid field lives
-in `src/fluid.js`: current point-cloud samples continuously seed dye and velocity,
-so the recognizable point silhouette stays sharp while color flows around and
-behind it.
+The adapted fluid engine lives in `src/fluid.js`; the point-cloud-to-emitter
+bridge is isolated in `src/visuals.js`.
 
 ## Run
 
@@ -47,5 +51,5 @@ an Augmenta server.
 
 ## Deployment
 
-GitHub Pages is deployed from `main` by the workflow in
+GitHub Pages is deployed from `main` by
 `.github/workflows/pages.yml`.

THIRD_PARTY_LICENSES

@@ -74,8 +74,11 @@ SOFTWARE.
 Project: https://github.com/PavelDoGreat/WebGL-Fluid-Simulation
 License: MIT
 
-The fluid solver in src/fluid.js adapts techniques and shader logic from
-Pavel Dobryakov's WebGL Fluid Simulation.
+The fluid engine in src/fluid.js is a reusable adaptation of Pavel Dobryakov's
+WebGL Fluid Simulation. It preserves the reference rendering pipeline and
+default visual parameters while replacing mouse/touch input with externally
+supplied Augmenta point-cloud emitters. The original dithering texture is kept
+at src/LDR_LLL1_0.png.
 
 MIT License
 

index.html

@@ -175,40 +175,15 @@ <h1>Augmenta Web Demo</h1>
           <span class="panel-heading-copy">
             <span class="panel-title">Visuals</span>
           </span>
-          <span id="visuals-section-summary" class="panel-summary-value">Punchy</span>
+          <span id="visuals-section-summary" class="panel-summary-value">Fluid</span>
         </summary>
 
         <div class="panel-content">
-          <div class="toggles">
-            <div class="toggle-column">
-              <label><input id="visual-enabled" type="checkbox" checked> Data visuals</label>
-              <label><input id="visual-trails" type="checkbox" checked> Point trails</label>
-              <label><input id="visual-grid" type="checkbox" checked> Data grid</label>
-            </div>
-            <div class="toggle-column">
-              <label><input id="visual-fluid" type="checkbox" checked> Fluid field</label>
-              <label><input id="visual-glow" type="checkbox" checked> Glow</label>
-              <label><input id="visual-labels" type="checkbox" checked> Labels</label>
-            </div>
-          </div>
-
-          <div class="visual-palette-field">
-            <label for="visual-fluid-response">Fluid response</label>
-            <select id="visual-fluid-response">
-              <option value="soft">Soft</option>
-              <option value="balanced" selected>Balanced</option>
-              <option value="expressive">Expressive</option>
-            </select>
-          </div>
-
-          <div class="visual-palette-field">
-            <label for="visual-palette">Palette</label>
-            <select id="visual-palette">
-              <option value="punchy" selected>Punchy</option>
-              <option value="cool">Cool</option>
-              <option value="mono">Monochrome</option>
-            </select>
-          </div>
+          <label class="advanced-toggle">
+            <input id="visual-enabled" type="checkbox" checked>
+            Fluid simulation
+          </label>
+          <p class="hint">PavelDoGreat defaults, driven by subsampled Augmenta point clouds.</p>
         </div>
       </details>
 

scripts/assemble-site.mjs

@@ -32,6 +32,7 @@ function replaceRequired(source, search, replacement) {
 requirePath(join(root, 'vendor', 'AugmentaClientSDK-JS', 'dist', 'esm'), 'built Augmenta SDK');
 requirePath(join(root, 'vendor', 'qrcode-generator', 'qrcode.js'), 'vendored QR generator');
 requirePath(join(threeRoot, 'build', 'three.module.js'), 'Three.js runtime');
+requirePath(join(root, 'src', 'LDR_LLL1_0.png'), 'fluid dithering texture');
 
 rmSync(out, { recursive: true, force: true });
 mkdirSync(join(out, 'src'), { recursive: true });
@@ -42,7 +43,7 @@ copyFileSync(join(root, 'index.html'), join(out, 'index.html'));
 copyFileSync(join(root, 'augmenta-favicon.png'), join(out, 'augmenta-favicon.png'));
 
 for (const name of readdirSync(join(root, 'src'))) {
-  if (!name.endsWith('.js') && name !== 'styles.css') continue;
+  if (!name.endsWith('.js') && name !== 'styles.css' && !name.endsWith('.png')) continue;
   copyFileSync(join(root, 'src', name), join(out, 'src', name));
 }
 

src/app-info.js

@@ -1 +1 @@
-export const APP_VERSION = '0.2.0';
+export const APP_VERSION = '0.3.0';