From 63bd42642ad0b0fb88045214e330721e9dc6737b Mon Sep 17 00:00:00 2001
From: Joe Pea <joe@trusktr.io>
Date: Wed, 27 Dec 2023 18:44:09 -0800
Subject: [PATCH] add a lava lamp demo!

---
 _sidebar.md                     |  13 +-
 _sidebar.src.md                 |  13 +-
 examples/lava-lamp/README.md    |   3 +
 examples/lava-lamp/example.html | 368 ++++++++++++++++++++++++++++++++
 importmap.js                    |   2 +
 5 files changed, 387 insertions(+), 12 deletions(-)
 create mode 100644 examples/lava-lamp/README.md
 create mode 100644 examples/lava-lamp/example.html

diff --git a/_sidebar.md b/_sidebar.md
index 7083ee2..84791b6 100644
--- a/_sidebar.md
+++ b/_sidebar.md
@@ -21,12 +21,13 @@
 
   <!-- - [Hello 3D world!](/examples/hello3d.md ':class=no-sublist') -->
 
-  - [Hello world!](/examples/hello-world/ ':class=no-sublist')
-  - [🎄 Skateboard Configurator](/examples/skateboard-configurator/ ':class=no-sublist')
-  - [Picture Frame](/examples/picture-frame ':class=no-sublist')
-  - [NASA Astrobee Robot](/examples/nasa-astrobee-robot/ ':class=no-sublist')
-  - [Velodyne Lidar Scan](/examples/velodyne-lidar-scan/ ':class=no-sublist')
-  - [Shelby GT350 Points](/examples/shelby-gt350-points/ ':class=no-sublist')
+  - [🌍 Hello world!](/examples/hello-world/ ':class=no-sublist')
+  - [🛹 Skateboard Configurator](/examples/skateboard-configurator/ ':class=no-sublist')
+  - [🟠 Lava Lamp](/examples/lava-lamp/ ':class=no-sublist')
+  - [🖼️ Picture Frame](/examples/picture-frame ':class=no-sublist')
+  - [🤖 NASA Astrobee Robot](/examples/nasa-astrobee-robot/ ':class=no-sublist')
+  - [✨ Velodyne Lidar Scan](/examples/velodyne-lidar-scan/ ':class=no-sublist')
+  - [🏎️ Shelby GT350 Points](/examples/shelby-gt350-points/ ':class=no-sublist')
   - [Disco Helmet](/examples/disco-helmet/ ':class=no-sublist')
   - [Buttons with shadow](/examples/buttons-with-shadow.md ':class=no-sublist')
   - [Rounded rectangle](/examples/rounded-rectangle.md ':class=no-sublist')
diff --git a/_sidebar.src.md b/_sidebar.src.md
index 2537b5b..d6c70a3 100644
--- a/_sidebar.src.md
+++ b/_sidebar.src.md
@@ -21,12 +21,13 @@
 
   <!-- - [Hello 3D world!](/examples/hello3d.md ':class=no-sublist') -->
 
-  - [Hello world!](/examples/hello-world/ ':class=no-sublist')
-  - [🎄 Skateboard Configurator](/examples/skateboard-configurator/ ':class=no-sublist')
-  - [Picture Frame](/examples/picture-frame ':class=no-sublist')
-  - [NASA Astrobee Robot](/examples/nasa-astrobee-robot/ ':class=no-sublist')
-  - [Velodyne Lidar Scan](/examples/velodyne-lidar-scan/ ':class=no-sublist')
-  - [Shelby GT350 Points](/examples/shelby-gt350-points/ ':class=no-sublist')
+  - [🌍 Hello world!](/examples/hello-world/ ':class=no-sublist')
+  - [🛹 Skateboard Configurator](/examples/skateboard-configurator/ ':class=no-sublist')
+  - [🟠 Lava Lamp](/examples/lava-lamp/ ':class=no-sublist')
+  - [🖼️ Picture Frame](/examples/picture-frame ':class=no-sublist')
+  - [🤖 NASA Astrobee Robot](/examples/nasa-astrobee-robot/ ':class=no-sublist')
+  - [✨ Velodyne Lidar Scan](/examples/velodyne-lidar-scan/ ':class=no-sublist')
+  - [🏎️ Shelby GT350 Points](/examples/shelby-gt350-points/ ':class=no-sublist')
   - [Disco Helmet](/examples/disco-helmet/ ':class=no-sublist')
   - [Buttons with shadow](/examples/buttons-with-shadow.md ':class=no-sublist')
   - [Rounded rectangle](/examples/rounded-rectangle.md ':class=no-sublist')
diff --git a/examples/lava-lamp/README.md b/examples/lava-lamp/README.md
new file mode 100644
index 0000000..b378b1d
--- /dev/null
+++ b/examples/lava-lamp/README.md
@@ -0,0 +1,3 @@
+# Lava Lamp
+
+<live-code src="./example.html"></live-code>
diff --git a/examples/lava-lamp/example.html b/examples/lava-lamp/example.html
new file mode 100644
index 0000000..fc80bf7
--- /dev/null
+++ b/examples/lava-lamp/example.html
@@ -0,0 +1,368 @@
+<!--
+This example is adapted from https://threejs.org/examples/webgl_marchingcubes.html,
+with all parts (lights, camera) replaced with Lume elements except for the
+MarchingCubes class imported from Three.js.
+
+TODO:
+- bloom filter to make the bright parts look like they are glowing
+- refraction for the outside glass (use MeshTransmissionMaterial)
+- figure out how to change the dimensions of the metaball volume, right now it
+  is 1x1x1 and we scale it vertically, but it would be nice to instead increase
+  the Y size instead of scaling, f.e. 1x3x1 so that the balls are spherical and
+  not elongated.
+- conic shaped glass instead of stretched sphere
+- top and bottom lava lamp panels, maybe even area lights on top and bottom panels
+-->
+
+<script src="../../importmap.js"></script>
+
+<title>lava lamp</title>
+<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
+
+<style>
+	html,
+	body {
+		height: 100%;
+		margin: 0;
+	}
+
+	/* hide UI */
+	.lil-gui {
+		display: none !important;
+	}
+
+	#lumeSceneWrapper {
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		background: #050505;
+	}
+</style>
+
+<div id="container"></div>
+<div id="info">
+	<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> - marching cubes<br />
+	based on greggman's <a href="https://webglsamples.org/blob/blob.html">blob</a>, original code by Henrik Rydgård
+</div>
+
+<div id="lumeSceneWrapper">
+	<lume-scene
+		id="lumeScene"
+		webgl
+		background="./nasa-astrobee-robot/luna-station.jpg"
+		background-intensity="0"
+		equirectangular-background
+		environment="./nasa-astrobee-robot/luna-station.jpg"
+	>
+		<lume-ambient-light id="ambientLight" color="#ffc700" intensity="10"></lume-ambient-light>
+
+		<lume-element3d align-point="0.5 0.5">
+			<lume-camera-rig
+				distance="1500"
+				min-distance="1500"
+				max-distance="1500"
+				min-vertical-angle="-20"
+				max-vertical-angle="20"
+			></lume-camera-rig>
+
+			<lume-directional-light id="light" color="#ffc700" intensity="15" position="0 1000 0"></lume-directional-light>
+			<lume-directional-light id="light2" color="#ffc700" intensity="15" position="0 -1000 0"></lume-directional-light>
+
+			<lume-sphere
+				receive-shadow="false"
+				size="6000 6000 6000"
+				scale="0.26 10 0.26"
+				mount-point="0.5 0.5 0.5"
+				color="orange"
+				roughness="0.4"
+				transmission="0.99"
+				ior="1.5"
+				thickness="2"
+				sidedness="back"
+			></lume-sphere>
+		</lume-element3d>
+	</lume-scene>
+</div>
+
+<!-- Integration example, scene not needed, render objects in Three.js scene. -->
+<!-- <lume-box id="box" size="50 50 50" color="deeppink" align-point="0.5 0.5">
+	<lume-box size="50 50 50" color="deeppink" position="50 50 50">
+		<lume-box size="50 50 50" color="deeppink" position="50 50 50">
+			<lume-box size="50 50 50" color="deeppink" position="50 50 50"> </lume-box>
+		</lume-box>
+	</lume-box>
+</lume-box>
+<script type="module">
+	import 'lume'
+	box.rotation = (x, y) => [x + 0.2, y + 0.2]
+</script> -->
+
+<script type="module">
+	import {Motor} from 'lume'
+
+	import * as THREE from 'three'
+
+	import Stats from 'three/addons/libs/stats.module.js'
+
+	import {GUI} from 'three/addons/libs/lil-gui.module.min.js'
+	import {OrbitControls} from 'three/addons/controls/OrbitControls.js'
+	import {MarchingCubes} from 'three/addons/objects/MarchingCubes.js'
+	import {ToonShader1, ToonShader2, ToonShaderHatching, ToonShaderDotted} from 'three/addons/shaders/ToonShader.js'
+
+	let currentMaterial = 'liquid2'
+	let resolution = 60
+
+	const effectController = {
+		material: currentMaterial,
+
+		speed: 0.2,
+		numBlobs: 10,
+		resolution,
+		isolation: 20,
+
+		floor: false,
+		wallx: false,
+		wallz: false,
+
+		dummy: function () {},
+	}
+
+	let time = 0
+
+	const clock = new THREE.Clock()
+
+	const container = document.getElementById('container')
+
+	// MATERIALS
+
+	const materials = generateMaterials()
+
+	// MARCHING CUBES
+
+	const effect = new MarchingCubes(resolution, materials[currentMaterial], true, true, 100000)
+	effect.position.set(0, 0, 0)
+	effect.scale.set(700, 1000, 700)
+
+	effect.enableUvs = false
+	effect.enableColors = false
+
+	// LUME ///////////////
+	const lumeScene = document.getElementById('lumeScene')
+	lumeScene.three.children.push(effect)
+
+	// STATS
+
+	const stats = new Stats()
+	container.appendChild(stats.dom)
+
+	// GUI
+
+	setupGui()
+
+	Motor.addRenderTask(animate)
+
+	//
+
+	function generateMaterials() {
+		// environment map
+
+		// TODO use local images
+		const path = 'https://threejs.org/examples/textures/cube/SwedishRoyalCastle/'
+		const format = '.jpg'
+		const urls = [
+			path + 'px' + format,
+			path + 'nx' + format,
+			path + 'py' + format,
+			path + 'ny' + format,
+			path + 'pz' + format,
+			path + 'nz' + format,
+		]
+
+		// With cube map
+		const cubeTextureLoader = new THREE.CubeTextureLoader()
+		const reflectionCube = cubeTextureLoader.load(urls)
+		const refractionCube = cubeTextureLoader.load(urls)
+		refractionCube.mapping = THREE.CubeRefractionMapping
+		// With equirectangular image.
+		// const textureLoader = new THREE.TextureLoader()
+		// const refractionCube = textureLoader.load('./nasa-astrobee-robot/luna-station.jpg')
+		// refractionCube.mapping = THREE.CubeRefractionMapping
+
+		// toons
+
+		const toonMaterial1 = createShaderMaterial(ToonShader1, light.three, ambientLight.three)
+		const toonMaterial2 = createShaderMaterial(ToonShader2, light.three, ambientLight.three)
+		const hatchingMaterial = createShaderMaterial(ToonShaderHatching, light.three, ambientLight.three)
+		const dottedMaterial = createShaderMaterial(ToonShaderDotted, light.three, ambientLight.three)
+
+		// TODO use local images
+		const texture = new THREE.TextureLoader().load('https://threejs.org/examples/textures/uv_grid_opengl.jpg')
+		texture.wrapS = THREE.RepeatWrapping
+		texture.wrapT = THREE.RepeatWrapping
+		texture.colorSpace = THREE.SRGBColorSpace
+
+		const materials = {
+			shiny: new THREE.MeshStandardMaterial({color: 0x9c0000, envMap: reflectionCube, roughness: 0.1, metalness: 1.0}),
+			chrome: new THREE.MeshLambertMaterial({color: 0xffffff, envMap: reflectionCube}),
+			liquid: new THREE.MeshLambertMaterial({color: 0xffffff, envMap: refractionCube, refractionRatio: 0.85}),
+			liquid2: new THREE.MeshPhysicalMaterial({
+				color: '#ff6500', // blood orange
+				// color: 'orange', // blood orange
+				// color: '#white', // blood orange
+				metalness: 0,
+				roughness: 0.8,
+				// envMap: refractionCube,
+				ior: 1.5,
+				transmission: 0.9,
+				thickness: 2,
+			}),
+			matte: new THREE.MeshPhongMaterial({specular: 0x494949, shininess: 1}),
+			flat: new THREE.MeshLambertMaterial({
+				/*TODO flatShading: true */
+			}),
+			textured: new THREE.MeshPhongMaterial({color: 0xffffff, specular: 0x111111, shininess: 1, map: texture}),
+			colors: new THREE.MeshPhongMaterial({color: 0xffffff, specular: 0xffffff, shininess: 2, vertexColors: true}),
+			multiColors: new THREE.MeshPhongMaterial({shininess: 2, vertexColors: true}),
+			plastic: new THREE.MeshPhongMaterial({specular: 0xc1c1c1, shininess: 250}),
+			toon1: toonMaterial1,
+			toon2: toonMaterial2,
+			hatching: hatchingMaterial,
+			dotted: dottedMaterial,
+		}
+
+		return materials
+	}
+
+	function createShaderMaterial(shader, threeLight, threeAmbient) {
+		const u = THREE.UniformsUtils.clone(shader.uniforms)
+
+		const vs = shader.vertexShader
+		const fs = shader.fragmentShader
+
+		const material = new THREE.ShaderMaterial({uniforms: u, vertexShader: vs, fragmentShader: fs})
+
+		material.uniforms['uDirLightPos'].value = threeLight.position
+		material.uniforms['uDirLightColor'].value = threeLight.color
+
+		material.uniforms['uAmbientLightColor'].value = threeAmbient.color
+
+		return material
+	}
+
+	//
+
+	function setupGui() {
+		const createHandler = function (id) {
+			return function () {
+				currentMaterial = id
+
+				effect.material = materials[id]
+				effect.enableUvs = currentMaterial === 'textured' ? true : false
+				effect.enableColors = currentMaterial === 'colors' || currentMaterial === 'multiColors' ? true : false
+			}
+		}
+
+		// Initial
+		createHandler(currentMaterial)()
+
+		let h
+
+		const gui = new GUI()
+
+		// material (type)
+
+		h = gui.addFolder('Materials')
+
+		for (const m in materials) {
+			effectController[m] = createHandler(m)
+			h.add(effectController, m).name(m)
+		}
+
+		// simulation
+
+		h = gui.addFolder('Simulation')
+
+		h.add(effectController, 'speed', 0.1, 8.0, 0.05)
+		h.add(effectController, 'numBlobs', 1, 50, 1)
+		h.add(effectController, 'resolution', 14, 100, 1)
+		h.add(effectController, 'isolation', 10, 300, 1)
+
+		h.add(effectController, 'floor')
+		h.add(effectController, 'wallx')
+		h.add(effectController, 'wallz')
+	}
+
+	// this controls content of marching cubes voxel field
+
+	function updateCubes(object, time, numblobs, floor, wallx, wallz) {
+		object.reset()
+
+		// fill the field with some metaballs
+
+		const rainbow = [
+			new THREE.Color(0xff0000),
+			new THREE.Color(0xffbb00),
+			new THREE.Color(0xffff00),
+			new THREE.Color(0x00ff00),
+			new THREE.Color(0x0000ff),
+			new THREE.Color(0x9400bd),
+			new THREE.Color(0xc800eb),
+		]
+		const subtract = 12
+		const strength = 1.2 / ((Math.sqrt(numblobs) - 1) / 4 + 1)
+
+		for (let i = 0; i < numblobs; i++) {
+			const ballx = Math.sin(i + 1.26 * time * (1.03 + 0.5 * Math.cos(0.21 * i))) * 0.27 + 0.5
+			const bally = Math.abs(Math.cos(i + 1.12 * time * Math.cos(1.22 + 0.1424 * i))) * 0.77 // dip into the floor
+			const ballz = Math.cos(i + 1.32 * time * 0.1 * Math.sin(0.92 + 0.53 * i)) * 0.27 + 0.5
+
+			if (currentMaterial === 'multiColors') {
+				object.addBall(ballx, bally, ballz, strength, subtract, rainbow[i % 7])
+			} else {
+				object.addBall(ballx, bally, ballz, strength, subtract)
+			}
+		}
+
+		if (floor) object.addPlaneY(2, 12)
+		if (wallz) object.addPlaneZ(2, 12)
+		if (wallx) object.addPlaneX(2, 12)
+
+		object.update()
+	}
+
+	//
+
+	function animate() {
+		update()
+		stats.update()
+		lumeScene.needsUpdate() // Notify that Lume scene should redraw
+	}
+
+	function update() {
+		const delta = clock.getDelta()
+
+		time += delta * effectController.speed * 0.5
+
+		// marching cubes
+
+		if (effectController.resolution !== resolution) {
+			resolution = effectController.resolution
+			effect.init(Math.floor(resolution))
+		}
+
+		if (effectController.isolation !== effect.isolation) {
+			effect.isolation = effectController.isolation
+		}
+
+		updateCubes(
+			effect,
+			time,
+			effectController.numBlobs,
+			effectController.floor,
+			effectController.wallx,
+			effectController.wallz,
+		)
+	}
+</script>
diff --git a/importmap.js b/importmap.js
index b521567..afe8f5a 100644
--- a/importmap.js
+++ b/importmap.js
@@ -24,6 +24,8 @@
 		'solid-js/store': './modules/solid-js/store/dist/store.js',
 		three: './modules/three/src/Three.js',
 		'three/': './modules/three/',
+		// For Three.js example modules so we don't have to change their imports.
+		'three/addons/': './modules/three/examples/jsm/',
 
 		// live-code
 		'@lume/live-code': './modules/@lume/live-code/dist/index.js',