mirror of
https://github.com/storytold/spark.git
synced 2026-10-09 00:09:53 +00:00
Transition Effects (#172)
* Transition effects * Added two transition effects and refactored code into separate .js filesAdded two transition effects and refactorized code for effects in separate .js files * Deleted unused html file * Fixed a GUI bug * Fixed focus given to effect when dropdown changes * Fixed github verification errors * fix lints in splat-transitions and tweak defaults * lint fix on splat-transitions * lint fix on splat-transitions * Morph transition * Morph transition - better random function * Morph transition - better morphing of dishes * fixed lint errors
This commit is contained in:
kali
@@ -0,0 +1,411 @@
|
||||
import { SparkControls, SplatMesh, dyno, textSplats } from "@sparkjsdev/spark";
|
||||
import * as THREE from "three";
|
||||
import { GLTFLoader } from "three/addons/loaders/GLTFLoader.js";
|
||||
import { getAssetFileURL } from "/examples/js/get-asset-url.js";
|
||||
|
||||
export async function init({ THREE: _THREE, scene, camera, renderer, spark }) {
|
||||
const group = new THREE.Group();
|
||||
scene.add(group);
|
||||
|
||||
// Basic lights
|
||||
const ambient = new THREE.AmbientLight(0x404040, 0.6);
|
||||
group.add(ambient);
|
||||
const dir = new THREE.DirectionalLight(0xffffff, 1.0);
|
||||
dir.position.set(5, 10, 5);
|
||||
dir.castShadow = true;
|
||||
group.add(dir);
|
||||
|
||||
renderer.shadowMap.enabled = true;
|
||||
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
|
||||
|
||||
// Camera baseline
|
||||
camera.position.set(0, 2.5, 7);
|
||||
camera.lookAt(0, 1, 0);
|
||||
|
||||
// WASD + mouse controls
|
||||
const controls = new SparkControls({ canvas: renderer.domElement });
|
||||
controls.fpsMovement.moveSpeed = 3.0;
|
||||
|
||||
// Uniforms
|
||||
const animationTime = dyno.dynoFloat(0.0);
|
||||
const uDropProgress = dyno.dynoFloat(0.0);
|
||||
const uGravity = dyno.dynoFloat(9.8);
|
||||
const uBounceDamping = dyno.dynoFloat(0.4);
|
||||
const uFloorLevel = dyno.dynoFloat(0.0);
|
||||
const uRandomFactor = dyno.dynoFloat(1.0);
|
||||
const uReformSpeed = dyno.dynoFloat(2.0);
|
||||
const uCycleDuration = dyno.dynoFloat(1.0);
|
||||
const uDropTime = dyno.dynoFloat(0.0);
|
||||
const uFriction = dyno.dynoFloat(0.98);
|
||||
const uShrinkSpeed = dyno.dynoFloat(5.0 - 3.0);
|
||||
const uExplosionStrength = dyno.dynoFloat(4.5);
|
||||
const uIsReforming = dyno.dynoFloat(0.0);
|
||||
const uReformTime = dyno.dynoFloat(0.0);
|
||||
const uReformDuration = dyno.dynoFloat(2.0);
|
||||
|
||||
const uIsBirthing = dyno.dynoFloat(0.0);
|
||||
const uBirthTime = dyno.dynoFloat(0.0);
|
||||
const uBirthDuration = dyno.dynoFloat(0.5);
|
||||
|
||||
function createDeathDynoshader() {
|
||||
return dyno.dynoBlock(
|
||||
{ gsplat: dyno.Gsplat },
|
||||
{ gsplat: dyno.Gsplat },
|
||||
({ gsplat }) => {
|
||||
const physicsShader = new dyno.Dyno({
|
||||
inTypes: {
|
||||
gsplat: dyno.Gsplat,
|
||||
time: "float",
|
||||
dropTime: "float",
|
||||
dropProgress: "float",
|
||||
gravity: "float",
|
||||
bounceDamping: "float",
|
||||
floorLevel: "float",
|
||||
randomFactor: "float",
|
||||
reformSpeed: "float",
|
||||
cycleDuration: "float",
|
||||
friction: "float",
|
||||
shrinkSpeed: "float",
|
||||
explosionStrength: "float",
|
||||
isReforming: "float",
|
||||
reformTime: "float",
|
||||
reformDuration: "float",
|
||||
},
|
||||
outTypes: { gsplat: dyno.Gsplat },
|
||||
globals: () => [
|
||||
dyno.unindent(`
|
||||
mat2 rot(float angle) { float c = cos(angle); float s = sin(angle); return mat2(c, -s, s, c); }
|
||||
float hash(vec3 p) { return fract(sin(dot(p, vec3(127.1, 311.7, 74.7))) * 43758.5453); }
|
||||
vec3 simulatePhysics(vec3 originalPos, float dropTime, float progress, float gravity, float damping, float floorLevel, float randomOffset, float friction, float explosionStrength) {
|
||||
if (progress <= 0.0) return originalPos;
|
||||
float timeVariation = hash(originalPos + vec3(42.0)) * 0.2 - 0.1;
|
||||
float t = max(0.0, dropTime + timeVariation);
|
||||
vec3 initialVelocity = vec3(
|
||||
(hash(originalPos + vec3(1.0)) - 0.5) * explosionStrength * (0.3 + hash(originalPos + vec3(10.0)) * 0.4),
|
||||
abs(hash(originalPos + vec3(3.0))) * explosionStrength * (0.8 + hash(originalPos + vec3(20.0)) * 0.4) + 0.5,
|
||||
(hash(originalPos + vec3(2.0)) - 0.5) * explosionStrength * (0.3 + hash(originalPos + vec3(30.0)) * 0.4)
|
||||
);
|
||||
float frictionDecay = pow(friction, t * 60.0);
|
||||
vec3 position = originalPos;
|
||||
position.x += initialVelocity.x * (1.0 - frictionDecay) / (1.0 - friction) / 60.0;
|
||||
position.z += initialVelocity.z * (1.0 - frictionDecay) / (1.0 - friction) / 60.0;
|
||||
position.y += initialVelocity.y * t - 0.5 * gravity * t * t;
|
||||
if (position.y <= floorLevel) {
|
||||
float bounceTime = t;
|
||||
float bounceCount = floor(bounceTime * 3.0);
|
||||
float timeSinceBounce = bounceTime - bounceCount / 3.0;
|
||||
float bounceHeight = initialVelocity.y * pow(damping, bounceCount) * max(0.0, 1.0 - timeSinceBounce * 3.0);
|
||||
if (bounceHeight > 0.1) {
|
||||
position.y = floorLevel + abs(sin(timeSinceBounce * 3.14159 * 3.0)) * bounceHeight;
|
||||
} else {
|
||||
position.y = floorLevel;
|
||||
float scatterFactor = hash(originalPos + vec3(50.0)) * 0.2;
|
||||
position.x += (hash(originalPos + vec3(60.0)) - 0.5) * scatterFactor;
|
||||
position.z += (hash(originalPos + vec3(70.0)) - 0.5) * scatterFactor;
|
||||
}
|
||||
}
|
||||
return position;
|
||||
}
|
||||
vec3 elegantReform(vec3 currentPos, vec3 originalPos, float reformTime, float duration) {
|
||||
if (reformTime <= 0.0) return currentPos;
|
||||
if (reformTime >= duration) return originalPos;
|
||||
float progress = reformTime / duration;
|
||||
return mix(currentPos, originalPos, progress);
|
||||
}
|
||||
vec3 reformScale(vec3 currentScale, vec3 originalScale, float reformTime, float duration) {
|
||||
if (reformTime <= 0.0) return currentScale;
|
||||
if (reformTime >= duration) return originalScale;
|
||||
float progress = reformTime / duration;
|
||||
float easeOut = 1.0 - pow(1.0 - progress, 2.0);
|
||||
return mix(currentScale, originalScale, easeOut);
|
||||
}
|
||||
`),
|
||||
],
|
||||
statements: ({ inputs, outputs }) =>
|
||||
dyno.unindentLines(`
|
||||
${outputs.gsplat} = ${inputs.gsplat};
|
||||
vec3 originalPos = ${inputs.gsplat}.center;
|
||||
vec3 originalScale = ${inputs.gsplat}.scales;
|
||||
vec3 physicsPos = originalPos;
|
||||
vec3 currentScale = originalScale;
|
||||
if (${inputs.dropProgress} > 0.0) {
|
||||
float randomOffset = hash(originalPos) * ${inputs.randomFactor};
|
||||
physicsPos = simulatePhysics(originalPos, ${inputs.dropTime}, ${inputs.dropProgress}, ${inputs.gravity}, ${inputs.bounceDamping}, ${inputs.floorLevel}, randomOffset, ${inputs.friction}, ${inputs.explosionStrength});
|
||||
float factor = exp(-${inputs.dropTime} * ${inputs.shrinkSpeed});
|
||||
currentScale = mix(originalScale, vec3(0.005), 1.0 - factor);
|
||||
}
|
||||
vec3 finalPos = physicsPos;
|
||||
vec3 finalScale = currentScale;
|
||||
if (${inputs.isReforming} > 0.5) {
|
||||
finalPos = elegantReform(physicsPos, originalPos, ${inputs.reformTime}, ${inputs.reformDuration});
|
||||
finalScale = reformScale(currentScale, originalScale, ${inputs.reformTime}, ${inputs.reformDuration});
|
||||
}
|
||||
${outputs.gsplat}.center = finalPos;
|
||||
${outputs.gsplat}.scales = finalScale;
|
||||
`),
|
||||
});
|
||||
gsplat = physicsShader.apply({
|
||||
gsplat,
|
||||
time: animationTime,
|
||||
dropTime: uDropTime,
|
||||
dropProgress: uDropProgress,
|
||||
gravity: uGravity,
|
||||
bounceDamping: uBounceDamping,
|
||||
floorLevel: uFloorLevel,
|
||||
randomFactor: uRandomFactor,
|
||||
reformSpeed: uReformSpeed,
|
||||
cycleDuration: uCycleDuration,
|
||||
friction: uFriction,
|
||||
shrinkSpeed: uShrinkSpeed,
|
||||
explosionStrength: uExplosionStrength,
|
||||
isReforming: uIsReforming,
|
||||
reformTime: uReformTime,
|
||||
reformDuration: uReformDuration,
|
||||
}).gsplat;
|
||||
return { gsplat };
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
function createBirthDynoshader() {
|
||||
return dyno.dynoBlock(
|
||||
{ gsplat: dyno.Gsplat },
|
||||
{ gsplat: dyno.Gsplat },
|
||||
({ gsplat }) => {
|
||||
const birthShader = new dyno.Dyno({
|
||||
inTypes: {
|
||||
gsplat: dyno.Gsplat,
|
||||
time: "float",
|
||||
isBirthing: "float",
|
||||
birthTime: "float",
|
||||
birthDuration: "float",
|
||||
},
|
||||
outTypes: { gsplat: dyno.Gsplat },
|
||||
globals: () => [
|
||||
dyno.unindent(`
|
||||
float hash(vec3 p) { return fract(sin(dot(p, vec3(127.1, 311.7, 74.7))) * 43758.5453); }
|
||||
`),
|
||||
],
|
||||
statements: ({ inputs, outputs }) =>
|
||||
dyno.unindentLines(`
|
||||
${outputs.gsplat} = ${inputs.gsplat};
|
||||
vec3 originalPos = ${inputs.gsplat}.center;
|
||||
vec3 originalScale = ${inputs.gsplat}.scales;
|
||||
if (${inputs.isBirthing} > 0.5 && ${inputs.birthTime} < ${inputs.birthDuration}) {
|
||||
float progress = ${inputs.birthTime} / ${inputs.birthDuration};
|
||||
float birthOffset = hash(originalPos) * 0.1;
|
||||
float adjusted = clamp((progress - birthOffset / ${inputs.birthDuration}) / (1.0 - birthOffset / ${inputs.birthDuration}), 0.0, 1.0);
|
||||
float ease = pow(adjusted * adjusted * (3.0 - 2.0 * adjusted), 0.6);
|
||||
vec3 birthPos = mix(vec3(0.0), originalPos, ease);
|
||||
vec3 birthScale = mix(vec3(0.0), originalScale, ease);
|
||||
${outputs.gsplat}.center = birthPos;
|
||||
${outputs.gsplat}.scales = birthScale;
|
||||
float alpha = ${inputs.gsplat}.rgba.a * ease;
|
||||
${outputs.gsplat}.rgba.a = alpha;
|
||||
}
|
||||
`),
|
||||
});
|
||||
gsplat = birthShader.apply({
|
||||
gsplat,
|
||||
time: animationTime,
|
||||
isBirthing: uIsBirthing,
|
||||
birthTime: uBirthTime,
|
||||
birthDuration: uBirthDuration,
|
||||
}).gsplat;
|
||||
return { gsplat };
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
const splatMeshes = {};
|
||||
let currentSplatName = "penguin";
|
||||
let nextSplatName = "cat";
|
||||
|
||||
async function loadSplats() {
|
||||
const splatNames = ["penguin.spz", "cat.spz", "woobles.spz"];
|
||||
for (const splatName of splatNames) {
|
||||
const splatURL = await getAssetFileURL(splatName);
|
||||
const mesh = new SplatMesh({ url: splatURL });
|
||||
await mesh.initialized;
|
||||
const nameKey = splatName.replace(".spz", "");
|
||||
mesh.worldModifier = createDeathDynoshader();
|
||||
mesh.updateGenerator();
|
||||
mesh.position.set(0, 0, 0);
|
||||
mesh.rotation.set(Math.PI, 0, 0);
|
||||
if (nameKey === "woobles") mesh.scale.set(1.7, 2.0, 1.7);
|
||||
else mesh.scale.set(1, 1, 1);
|
||||
mesh.visible = nameKey === currentSplatName;
|
||||
group.add(mesh);
|
||||
splatMeshes[nameKey] = mesh;
|
||||
}
|
||||
}
|
||||
|
||||
async function loadTable() {
|
||||
const tableURL = await getAssetFileURL("table.glb");
|
||||
const loader = new GLTFLoader();
|
||||
await new Promise((resolve, reject) => {
|
||||
loader.load(
|
||||
tableURL,
|
||||
(gltf) => {
|
||||
const tableModel = gltf.scene;
|
||||
tableModel.position.set(0, -0.5, 0);
|
||||
tableModel.scale.set(5.5, 5.5, 5.5);
|
||||
tableModel.rotation.set(0, 0, 0);
|
||||
tableModel.traverse((child) => {
|
||||
if (child.isMesh) {
|
||||
child.castShadow = true;
|
||||
child.receiveShadow = true;
|
||||
}
|
||||
});
|
||||
group.add(tableModel);
|
||||
resolve(tableModel);
|
||||
},
|
||||
undefined,
|
||||
reject,
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
function _switchToSplat(name) {
|
||||
for (const m of Object.values(splatMeshes)) {
|
||||
if (m) m.visible = false;
|
||||
}
|
||||
if (splatMeshes[name]) {
|
||||
splatMeshes[name].visible = true;
|
||||
currentSplatName = name;
|
||||
}
|
||||
}
|
||||
|
||||
function getNextSplatName(current) {
|
||||
const order = ["penguin", "cat", "woobles"];
|
||||
return order[(order.indexOf(current) + 1) % order.length];
|
||||
}
|
||||
|
||||
const transitionState = {
|
||||
isTransitioning: false,
|
||||
transitionTime: 0.0,
|
||||
transitionDuration: 3.0,
|
||||
};
|
||||
|
||||
function startExplosion() {
|
||||
if (transitionState.isTransitioning) return;
|
||||
transitionState.isTransitioning = true;
|
||||
transitionState.transitionTime = 0.0;
|
||||
for (const [name, mesh] of Object.entries(splatMeshes)) {
|
||||
if (mesh) mesh.visible = name === currentSplatName;
|
||||
}
|
||||
if (splatMeshes[currentSplatName]) {
|
||||
splatMeshes[currentSplatName].worldModifier = createDeathDynoshader();
|
||||
splatMeshes[currentSplatName].updateGenerator();
|
||||
}
|
||||
uDropProgress.value = 1.0;
|
||||
uDropTime.value = 0.0;
|
||||
uIsReforming.value = 0.0;
|
||||
}
|
||||
|
||||
function startTransition() {
|
||||
startExplosion();
|
||||
nextSplatName = getNextSplatName(currentSplatName);
|
||||
if (splatMeshes[nextSplatName]) {
|
||||
for (const [name, mesh] of Object.entries(splatMeshes)) {
|
||||
if (!mesh) continue;
|
||||
if (name !== currentSplatName && name !== nextSplatName)
|
||||
mesh.visible = false;
|
||||
}
|
||||
splatMeshes[nextSplatName].worldModifier = createBirthDynoshader();
|
||||
splatMeshes[nextSplatName].updateGenerator();
|
||||
splatMeshes[nextSplatName].visible = true;
|
||||
uIsBirthing.value = 1.0;
|
||||
uBirthTime.value = 0.0;
|
||||
}
|
||||
}
|
||||
|
||||
function completeTransition() {
|
||||
uIsBirthing.value = 0.0;
|
||||
uBirthTime.value = 0.0;
|
||||
currentSplatName = nextSplatName;
|
||||
transitionState.isTransitioning = false;
|
||||
transitionState.transitionTime = 0.0;
|
||||
}
|
||||
|
||||
await Promise.all([loadSplats(), loadTable()]);
|
||||
|
||||
// Instructional text
|
||||
const instructionsText = textSplats({
|
||||
text: "WASD + mouse to move\nSPACEBAR: Explosion!",
|
||||
font: "Arial",
|
||||
fontSize: 24,
|
||||
color: new THREE.Color(0xffffff),
|
||||
textAlign: "center",
|
||||
lineHeight: 1.3,
|
||||
});
|
||||
instructionsText.scale.setScalar(0.15 / 24);
|
||||
instructionsText.position.set(0, 0.2, 2.5);
|
||||
group.add(instructionsText);
|
||||
|
||||
let totalTime = 0;
|
||||
const transitionParams = { autoTransition: true };
|
||||
|
||||
function onKeyDown(e) {
|
||||
if (e.code === "Space") {
|
||||
e.preventDefault();
|
||||
if (transitionState.isTransitioning) completeTransition();
|
||||
startTransition();
|
||||
totalTime = 0;
|
||||
}
|
||||
}
|
||||
window.addEventListener("keydown", onKeyDown);
|
||||
|
||||
function update(dt, t) {
|
||||
animationTime.value = t;
|
||||
// Update camera controls
|
||||
controls.update(camera);
|
||||
if (transitionParams.autoTransition) {
|
||||
if (!transitionState.isTransitioning) totalTime += dt;
|
||||
if (!transitionState.isTransitioning && totalTime >= 1.0) {
|
||||
startTransition();
|
||||
totalTime = 0;
|
||||
}
|
||||
}
|
||||
if (transitionState.isTransitioning) {
|
||||
transitionState.transitionTime += dt;
|
||||
uBirthTime.value = transitionState.transitionTime;
|
||||
if (transitionState.transitionTime >= transitionState.transitionDuration)
|
||||
completeTransition();
|
||||
}
|
||||
uDropTime.value += dt;
|
||||
const dying = splatMeshes[currentSplatName];
|
||||
const birthing = splatMeshes[nextSplatName];
|
||||
if (transitionState.isTransitioning) {
|
||||
if (dying) dying.updateVersion();
|
||||
if (birthing) birthing.updateVersion();
|
||||
} else {
|
||||
if (dying) dying.updateVersion();
|
||||
}
|
||||
}
|
||||
|
||||
function setupGUI(folder) {
|
||||
const params = { explosionStrength: uExplosionStrength.value };
|
||||
folder
|
||||
.add(params, "explosionStrength", 0.0, 10.0, 0.1)
|
||||
.name("Explosion Strength")
|
||||
.onChange((v) => {
|
||||
uExplosionStrength.value = v;
|
||||
});
|
||||
folder.add(transitionParams, "autoTransition").name("Auto Transition");
|
||||
folder
|
||||
.add({ explode: () => startTransition() }, "explode")
|
||||
.name("Trigger Explosion");
|
||||
return folder;
|
||||
}
|
||||
|
||||
function dispose() {
|
||||
window.removeEventListener("keydown", onKeyDown);
|
||||
// Disable controls to avoid interfering with other effects
|
||||
controls.fpsMovement.enable = false;
|
||||
controls.pointerControls.enable = false;
|
||||
scene.remove(group);
|
||||
}
|
||||
|
||||
return { group, update, dispose, setupGUI };
|
||||
}
|
||||
@@ -0,0 +1,306 @@
|
||||
import { SplatMesh, dyno } from "@sparkjsdev/spark";
|
||||
import * as THREE from "three";
|
||||
import { GLTFLoader } from "three/addons/loaders/GLTFLoader.js";
|
||||
import { getAssetFileURL } from "/examples/js/get-asset-url.js";
|
||||
|
||||
export async function init({ THREE: _THREE, scene, camera, renderer, spark }) {
|
||||
const group = new THREE.Group();
|
||||
scene.add(group);
|
||||
|
||||
const PARAMETERS = {
|
||||
speedMultiplier: 0.5,
|
||||
objectRotation: true,
|
||||
pause: false,
|
||||
fixedMinScale: false,
|
||||
waves: 0.5,
|
||||
cameraRotation: true,
|
||||
};
|
||||
const PAUSE_SECONDS = 2.0;
|
||||
|
||||
function getTransitionState(t, fadeInTime, fadeOutTime, period) {
|
||||
const one = dyno.dynoFloat(1.0);
|
||||
const pauseTime = dyno.dynoFloat(PAUSE_SECONDS);
|
||||
const cycleTime = dyno.add(one, pauseTime);
|
||||
const total = dyno.mul(period, cycleTime);
|
||||
const wrapT = dyno.mod(t, total);
|
||||
const pos = dyno.mod(wrapT, cycleTime);
|
||||
const inPause = dyno.greaterThan(pos, one);
|
||||
const normT = dyno.select(inPause, one, pos);
|
||||
const fadeIn = dyno.and(
|
||||
dyno.greaterThan(wrapT, dyno.mul(fadeInTime, cycleTime)),
|
||||
dyno.lessThan(wrapT, dyno.mul(dyno.add(fadeInTime, one), cycleTime)),
|
||||
);
|
||||
const fadeOut = dyno.and(
|
||||
dyno.greaterThan(wrapT, dyno.mul(fadeOutTime, cycleTime)),
|
||||
dyno.lessThan(wrapT, dyno.mul(dyno.add(fadeOutTime, one), cycleTime)),
|
||||
);
|
||||
return { inTransition: dyno.or(fadeIn, fadeOut), isFadeIn: fadeIn, normT };
|
||||
}
|
||||
|
||||
function contractionDyno(centerGLSL) {
|
||||
return new dyno.Dyno({
|
||||
inTypes: {
|
||||
gsplat: dyno.Gsplat,
|
||||
inTransition: "bool",
|
||||
fadeIn: "bool",
|
||||
t: "float",
|
||||
gt: "float",
|
||||
objectIndex: "int",
|
||||
fixedMinScale: "bool",
|
||||
waves: "float",
|
||||
},
|
||||
outTypes: { gsplat: dyno.Gsplat },
|
||||
globals: () => [
|
||||
dyno.unindent(`
|
||||
float hash13(vec3 p3) { p3 = fract(p3 * .1031); p3 += dot(p3, p3.yzx + 33.33); return fract((p3.x + p3.y) * p3.z); }
|
||||
float hash11(float p) { p = fract(p * .1031); p += dot(p, p + 33.33); return fract(p * p); }
|
||||
float fadeInOut(float t) { return abs(mix(-1., 1., t)); }
|
||||
${centerGLSL}
|
||||
float applyBrightness(float t) { return .5 + fadeInOut(t) * .5; }
|
||||
vec3 applyCenter(vec3 center, float t, float id, int idx, float waves) {
|
||||
int next = (idx + 1) % 3;
|
||||
vec3 cNext = getCenterOfMass(next);
|
||||
vec3 cOwn = getCenterOfMass(idx);
|
||||
float f = fadeInOut(t);
|
||||
float v = .5 + hash11(id) * 2.;
|
||||
vec3 p = t < .5 ? mix(cNext, center, pow(f, v)) : mix(cOwn, center, pow(f, v));
|
||||
return p + length(sin(p*2.5)) * waves * (1.-f)*smoothstep(0.5,0.,t) * 2.;
|
||||
}
|
||||
vec3 applyScale(vec3 s, float t, bool fixedMin) { return mix(fixedMin ? vec3(.02) : s * .2, s, pow(fadeInOut(t), 3.)); }
|
||||
float applyOpacity(float t, float gt, int idx) {
|
||||
float p = float(${PAUSE_SECONDS});
|
||||
float c = 1.0 + p;
|
||||
float tot = 3.0 * c;
|
||||
float w = mod(gt + p + .5, tot);
|
||||
int cur = int(floor(w / c));
|
||||
return cur == idx ? .1+fadeInOut(t) : 0.0;
|
||||
}
|
||||
`),
|
||||
],
|
||||
statements: ({ inputs, outputs }) =>
|
||||
dyno.unindentLines(`
|
||||
${outputs.gsplat} = ${inputs.gsplat};
|
||||
${outputs.gsplat}.center = applyCenter(${inputs.gsplat}.center, ${inputs.t}, float(${inputs.gsplat}.index), ${inputs.objectIndex}, ${inputs.waves});
|
||||
${outputs.gsplat}.scales = applyScale(${inputs.gsplat}.scales, ${inputs.t}, ${inputs.fixedMinScale});
|
||||
${outputs.gsplat}.rgba.a *= applyOpacity(${inputs.t}, ${inputs.gt}, ${inputs.objectIndex});
|
||||
${outputs.gsplat}.rgba.rgb *= applyBrightness(${inputs.t});
|
||||
`),
|
||||
});
|
||||
}
|
||||
|
||||
function getTransitionModifier(
|
||||
inTrans,
|
||||
fadeIn,
|
||||
t,
|
||||
idx,
|
||||
gt,
|
||||
centerGLSL,
|
||||
fixedMinScale,
|
||||
waves,
|
||||
) {
|
||||
const dyn = contractionDyno(centerGLSL);
|
||||
return dyno.dynoBlock(
|
||||
{ gsplat: dyno.Gsplat },
|
||||
{ gsplat: dyno.Gsplat },
|
||||
({ gsplat }) => ({
|
||||
gsplat: dyn.apply({
|
||||
gsplat,
|
||||
inTransition: inTrans,
|
||||
fadeIn,
|
||||
t,
|
||||
gt,
|
||||
objectIndex: idx,
|
||||
fixedMinScale,
|
||||
waves,
|
||||
}).gsplat,
|
||||
}),
|
||||
);
|
||||
}
|
||||
|
||||
async function loadGLB(file, isEnv = false) {
|
||||
const url = await getAssetFileURL(file);
|
||||
const loader = new GLTFLoader();
|
||||
const gltf = await new Promise((res, rej) =>
|
||||
loader.load(url, res, undefined, rej),
|
||||
);
|
||||
gltf.scene.traverse((child) => {
|
||||
if (child.isMesh && child.material) {
|
||||
const mat = new THREE.MeshBasicMaterial({
|
||||
color: child.material.color,
|
||||
map: child.material.map,
|
||||
});
|
||||
if (isEnv) {
|
||||
mat.side = THREE.BackSide;
|
||||
if (mat.map) {
|
||||
mat.map.mapping = THREE.EquirectangularReflectionMapping;
|
||||
mat.map.colorSpace = THREE.LinearSRGBColorSpace;
|
||||
mat.map.needsUpdate = true;
|
||||
}
|
||||
}
|
||||
child.material = mat;
|
||||
}
|
||||
});
|
||||
return gltf.scene;
|
||||
}
|
||||
|
||||
const time = dyno.dynoFloat(0.0);
|
||||
const splatFiles = ["woobles.spz", "dessert.spz", "robot-head.spz"];
|
||||
const skyFile = "dali-env.glb";
|
||||
|
||||
const env = await loadGLB(skyFile, true);
|
||||
group.add(env);
|
||||
|
||||
const meshes = [];
|
||||
const period = dyno.dynoFloat(splatFiles.length);
|
||||
const positions = [
|
||||
new THREE.Vector3(-5, -2.2, -3),
|
||||
new THREE.Vector3(5, -2.5, 0),
|
||||
new THREE.Vector3(0, 1.5, 2),
|
||||
];
|
||||
|
||||
for (let i = 0; i < splatFiles.length; i++) {
|
||||
const url = await getAssetFileURL(splatFiles[i]);
|
||||
const m = new SplatMesh({ url });
|
||||
await m.initialized;
|
||||
m.position.copy(positions[i]);
|
||||
m.rotateX(Math.PI);
|
||||
group.add(m);
|
||||
meshes.push(m);
|
||||
}
|
||||
|
||||
const centers = meshes.map((m) => {
|
||||
const box = new THREE.Box3();
|
||||
m.packedSplats.forEachSplat((_, c) => {
|
||||
box.expandByPoint(c);
|
||||
});
|
||||
const localCenter = box.getCenter(new THREE.Vector3());
|
||||
localCenter.y = -localCenter.y;
|
||||
return localCenter.add(m.position);
|
||||
});
|
||||
|
||||
const centerGLSL = `
|
||||
vec3 getCenterOfMass(int idx) {
|
||||
if (idx == 0) return vec3(${centers[0].x}, ${centers[0].y}, ${centers[0].z});
|
||||
if (idx == 1) return vec3(${centers[1].x}, ${centers[1].y}, ${centers[1].z});
|
||||
if (idx == 2) return vec3(${centers[2].x}, ${centers[2].y}, ${centers[2].z});
|
||||
return vec3(0.0);
|
||||
}
|
||||
`;
|
||||
|
||||
meshes.forEach((m, i) => {
|
||||
const { inTransition, isFadeIn, normT } = getTransitionState(
|
||||
time,
|
||||
dyno.dynoFloat(i),
|
||||
dyno.dynoFloat((i + 1) % splatFiles.length),
|
||||
period,
|
||||
);
|
||||
m.worldModifier = getTransitionModifier(
|
||||
inTransition,
|
||||
isFadeIn,
|
||||
normT,
|
||||
dyno.dynoInt(i),
|
||||
time,
|
||||
centerGLSL,
|
||||
dyno.dynoBool(PARAMETERS.fixedMinScale),
|
||||
dyno.dynoFloat(PARAMETERS.waves),
|
||||
);
|
||||
m.updateGenerator();
|
||||
});
|
||||
|
||||
function updateCamera() {
|
||||
const cTime = 1 + PAUSE_SECONDS;
|
||||
const tot = meshes.length * cTime;
|
||||
const w = (time.value + PAUSE_SECONDS) % tot;
|
||||
const cur = Math.floor(w / cTime);
|
||||
const nxt = (cur + 1) % meshes.length;
|
||||
const tr = w / cTime - cur;
|
||||
const s = tr * tr * (3 - 2 * tr);
|
||||
const tgt = new THREE.Vector3().lerpVectors(
|
||||
meshes[cur].position,
|
||||
meshes[nxt].position,
|
||||
s ** 5,
|
||||
);
|
||||
const radius = 4 + Math.abs(s - 0.5) ** 2 * 20;
|
||||
let x;
|
||||
let z;
|
||||
if (PARAMETERS.cameraRotation) {
|
||||
const angle = -time.value * 0.5;
|
||||
x = Math.cos(angle) * radius;
|
||||
z = Math.sin(angle) * radius;
|
||||
} else {
|
||||
x = 0;
|
||||
z = -radius;
|
||||
}
|
||||
const frm = tgt.clone().add(new THREE.Vector3(x, 2, z));
|
||||
camera.position.copy(frm);
|
||||
camera.lookAt(tgt);
|
||||
}
|
||||
|
||||
function update(dt, _t) {
|
||||
if (!PARAMETERS.pause) {
|
||||
time.value += dt * PARAMETERS.speedMultiplier;
|
||||
if (PARAMETERS.objectRotation) {
|
||||
for (const m of meshes) {
|
||||
m.rotation.y += dt * PARAMETERS.speedMultiplier * 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
updateCamera();
|
||||
}
|
||||
|
||||
function setupGUI(folder) {
|
||||
folder.add(PARAMETERS, "speedMultiplier", 0, 1, 0.01);
|
||||
folder.add(PARAMETERS, "objectRotation");
|
||||
folder.add(PARAMETERS, "pause");
|
||||
folder.add(PARAMETERS, "cameraRotation");
|
||||
folder.add(PARAMETERS, "fixedMinScale").onChange(() => {
|
||||
meshes.forEach((m, i) => {
|
||||
const { inTransition, isFadeIn, normT } = getTransitionState(
|
||||
time,
|
||||
dyno.dynoFloat(i),
|
||||
dyno.dynoFloat((i + 1) % splatFiles.length),
|
||||
dyno.dynoFloat(splatFiles.length),
|
||||
);
|
||||
m.worldModifier = getTransitionModifier(
|
||||
inTransition,
|
||||
isFadeIn,
|
||||
normT,
|
||||
dyno.dynoInt(i),
|
||||
time,
|
||||
centerGLSL,
|
||||
dyno.dynoBool(PARAMETERS.fixedMinScale),
|
||||
dyno.dynoFloat(PARAMETERS.waves),
|
||||
);
|
||||
m.updateGenerator();
|
||||
});
|
||||
});
|
||||
folder.add(PARAMETERS, "waves", 0, 1, 0.01).onChange(() => {
|
||||
meshes.forEach((m, i) => {
|
||||
const { inTransition, isFadeIn, normT } = getTransitionState(
|
||||
time,
|
||||
dyno.dynoFloat(i),
|
||||
dyno.dynoFloat((i + 1) % splatFiles.length),
|
||||
dyno.dynoFloat(splatFiles.length),
|
||||
);
|
||||
m.worldModifier = getTransitionModifier(
|
||||
inTransition,
|
||||
isFadeIn,
|
||||
normT,
|
||||
dyno.dynoInt(i),
|
||||
time,
|
||||
centerGLSL,
|
||||
dyno.dynoBool(PARAMETERS.fixedMinScale),
|
||||
dyno.dynoFloat(PARAMETERS.waves),
|
||||
);
|
||||
m.updateGenerator();
|
||||
});
|
||||
});
|
||||
return folder;
|
||||
}
|
||||
|
||||
function dispose() {
|
||||
scene.remove(group);
|
||||
}
|
||||
|
||||
return { group, update, dispose, setupGUI };
|
||||
}
|
||||
@@ -0,0 +1,226 @@
|
||||
import { SplatMesh, dyno } from "@sparkjsdev/spark";
|
||||
import * as THREE from "three";
|
||||
import { getAssetFileURL } from "/examples/js/get-asset-url.js";
|
||||
|
||||
export async function init({ THREE: _THREE, scene, camera, renderer, spark }) {
|
||||
const group = new THREE.Group();
|
||||
scene.add(group);
|
||||
|
||||
// Camera baseline for Morph effect
|
||||
camera.position.set(0, 2.2, 6.5);
|
||||
camera.lookAt(0, 1.0, 0);
|
||||
|
||||
const PARAMETERS = {
|
||||
speedMultiplier: 1.0,
|
||||
rotation: true,
|
||||
pause: false,
|
||||
staySeconds: 1.5,
|
||||
transitionSeconds: 2.0,
|
||||
randomRadius: 1.3,
|
||||
};
|
||||
|
||||
const time = dyno.dynoFloat(0.0);
|
||||
|
||||
// Tres splats de comida
|
||||
const splatFiles = [
|
||||
"branzino-amarin.spz",
|
||||
"pad-thai.spz",
|
||||
"primerib-tamos.spz",
|
||||
];
|
||||
|
||||
function morphDyno() {
|
||||
return new dyno.Dyno({
|
||||
inTypes: {
|
||||
gsplat: dyno.Gsplat,
|
||||
gt: "float",
|
||||
objectIndex: "int",
|
||||
stay: "float",
|
||||
trans: "float",
|
||||
numObjects: "int",
|
||||
randomRadius: "float",
|
||||
offsetY: "float",
|
||||
},
|
||||
outTypes: { gsplat: dyno.Gsplat },
|
||||
globals: () => [
|
||||
dyno.unindent(`
|
||||
vec3 hash3(int n) {
|
||||
float x = float(n);
|
||||
return fract(sin(vec3(x, x + 1.0, x + 2.0)) * 43758.5453123);
|
||||
}
|
||||
float ease(float x) { return x*x*(3.0 - 2.0*x); }
|
||||
vec3 randPos(int splatIndex, float radius) {
|
||||
// Uniform disk sampling on XZ plane
|
||||
vec3 h = hash3(splatIndex);
|
||||
float theta = 6.28318530718 * h.x;
|
||||
float r = radius * sqrt(h.y);
|
||||
return vec3(r * cos(theta), 0.0, r * sin(theta));
|
||||
}
|
||||
`),
|
||||
],
|
||||
statements: ({ inputs, outputs }) =>
|
||||
dyno.unindentLines(`
|
||||
${outputs.gsplat} = ${inputs.gsplat};
|
||||
float stay = ${inputs.stay};
|
||||
float trans = ${inputs.trans};
|
||||
float cycle = stay + trans;
|
||||
float tot = float(${inputs.numObjects}) * cycle;
|
||||
float w = mod(${inputs.gt}, tot);
|
||||
int cur = int(floor(w / cycle));
|
||||
int nxt = (cur + 1) % ${inputs.numObjects};
|
||||
float local = mod(w, cycle);
|
||||
bool inTrans = local > stay;
|
||||
float uPhase = inTrans ? clamp((local - stay) / trans, 0.0, 1.0) : 0.0;
|
||||
bool phaseScatter = uPhase < 0.5;
|
||||
float s = phaseScatter ? (uPhase / 0.5) : ((uPhase - 0.5) / 0.5);
|
||||
int idx = ${inputs.objectIndex};
|
||||
|
||||
vec3 rp = randPos(int(${inputs.gsplat}.index), ${inputs.randomRadius});
|
||||
rp.y -= ${inputs.offsetY};
|
||||
vec3 rpMid = mix(${inputs.gsplat}.center, rp, 0.7);
|
||||
|
||||
float alpha = 0.0;
|
||||
vec3 pos = ${inputs.gsplat}.center;
|
||||
vec3 origScale = ${inputs.gsplat}.scales;
|
||||
vec3 small = ${inputs.gsplat}.scales*.2;
|
||||
if (idx == cur) {
|
||||
if (!inTrans) {
|
||||
alpha = 1.0;
|
||||
pos = ${inputs.gsplat}.center;
|
||||
${outputs.gsplat}.scales = origScale;
|
||||
} else if (phaseScatter) {
|
||||
alpha = 1.0 - ease(s)*.5;
|
||||
pos = mix(${inputs.gsplat}.center, rpMid, ease(s));
|
||||
${outputs.gsplat}.scales = mix(origScale, small, ease(s));
|
||||
} else {
|
||||
alpha = 0.0;
|
||||
pos = rpMid;
|
||||
${outputs.gsplat}.scales = small;
|
||||
}
|
||||
} else if (idx == nxt) {
|
||||
if (!inTrans) {
|
||||
alpha = 0.0;
|
||||
pos = rpMid;
|
||||
${outputs.gsplat}.scales = small;
|
||||
} else if (phaseScatter) {
|
||||
alpha = 0.0;
|
||||
pos = rpMid;
|
||||
${outputs.gsplat}.scales = small;
|
||||
} else {
|
||||
alpha = max(ease(s), 0.5);
|
||||
pos = mix(rpMid, ${inputs.gsplat}.center, ease(s));
|
||||
${outputs.gsplat}.scales = mix(small, origScale, ease(s));
|
||||
}
|
||||
} else {
|
||||
alpha = 0.0;
|
||||
pos = ${inputs.gsplat}.center;
|
||||
${outputs.gsplat}.scales = origScale;
|
||||
}
|
||||
pos.y += ${inputs.offsetY};
|
||||
${outputs.gsplat}.center = pos;
|
||||
${outputs.gsplat}.rgba.a = ${inputs.gsplat}.rgba.a * alpha;
|
||||
`),
|
||||
});
|
||||
}
|
||||
|
||||
function getMorphModifier(
|
||||
gt,
|
||||
idx,
|
||||
stay,
|
||||
trans,
|
||||
numObjects,
|
||||
randomRadius,
|
||||
offsetY,
|
||||
) {
|
||||
const dyn = morphDyno();
|
||||
return dyno.dynoBlock(
|
||||
{ gsplat: dyno.Gsplat },
|
||||
{ gsplat: dyno.Gsplat },
|
||||
({ gsplat }) => ({
|
||||
gsplat: dyn.apply({
|
||||
gsplat,
|
||||
gt,
|
||||
objectIndex: idx,
|
||||
stay,
|
||||
trans,
|
||||
numObjects,
|
||||
randomRadius,
|
||||
offsetY,
|
||||
}).gsplat,
|
||||
}),
|
||||
);
|
||||
}
|
||||
|
||||
const meshes = [];
|
||||
const numObjectsDyn = dyno.dynoInt(splatFiles.length);
|
||||
const stayDyn = dyno.dynoFloat(PARAMETERS.staySeconds);
|
||||
const transDyn = dyno.dynoFloat(PARAMETERS.transitionSeconds);
|
||||
const radiusDyn = dyno.dynoFloat(PARAMETERS.randomRadius);
|
||||
const OFFSETS_Y = [
|
||||
dyno.dynoFloat(0.0),
|
||||
dyno.dynoFloat(0.3),
|
||||
dyno.dynoFloat(0.0),
|
||||
];
|
||||
|
||||
for (let i = 0; i < splatFiles.length; i++) {
|
||||
const url = await getAssetFileURL(splatFiles[i]);
|
||||
const mesh = new SplatMesh({ url });
|
||||
await mesh.initialized;
|
||||
// Orientación base similar a otros efectos
|
||||
mesh.rotateX(Math.PI);
|
||||
mesh.position.set(0, 0, 0);
|
||||
mesh.scale.set(1.5, 1.5, 1.5);
|
||||
group.add(mesh);
|
||||
meshes.push(mesh);
|
||||
}
|
||||
|
||||
// Asignar modificadores de morph (hold → scatter → morph)
|
||||
meshes.forEach((m, i) => {
|
||||
m.worldModifier = getMorphModifier(
|
||||
time,
|
||||
dyno.dynoInt(i),
|
||||
stayDyn,
|
||||
transDyn,
|
||||
numObjectsDyn,
|
||||
radiusDyn,
|
||||
OFFSETS_Y[i] ?? dyno.dynoFloat(0.0),
|
||||
);
|
||||
m.updateGenerator();
|
||||
});
|
||||
|
||||
function update(dt, _t) {
|
||||
if (!PARAMETERS.pause) {
|
||||
time.value += dt * PARAMETERS.speedMultiplier;
|
||||
for (const m of meshes) {
|
||||
if (PARAMETERS.rotation) {
|
||||
m.rotation.y += dt * PARAMETERS.speedMultiplier;
|
||||
}
|
||||
// Ensure dyno uniform updates are applied even without rotation
|
||||
m.updateVersion();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function setupGUI(folder) {
|
||||
folder.add(PARAMETERS, "speedMultiplier", 0.1, 3.0, 0.01);
|
||||
folder.add(PARAMETERS, "rotation");
|
||||
folder.add(PARAMETERS, "pause");
|
||||
folder.add(PARAMETERS, "staySeconds", 0.2, 5.0, 0.05).onChange((v) => {
|
||||
stayDyn.value = v;
|
||||
});
|
||||
folder
|
||||
.add(PARAMETERS, "transitionSeconds", 1.0, 3.0, 0.05)
|
||||
.onChange((v) => {
|
||||
transDyn.value = v;
|
||||
});
|
||||
folder.add(PARAMETERS, "randomRadius", 1, 5.0, 0.1).onChange((v) => {
|
||||
radiusDyn.value = v;
|
||||
});
|
||||
return folder;
|
||||
}
|
||||
|
||||
function dispose() {
|
||||
scene.remove(group);
|
||||
}
|
||||
|
||||
return { group, update, dispose, setupGUI };
|
||||
}
|
||||
@@ -0,0 +1,276 @@
|
||||
import { SplatMesh, dyno } from "@sparkjsdev/spark";
|
||||
import * as THREE from "three";
|
||||
import { GLTFLoader } from "three/addons/loaders/GLTFLoader.js";
|
||||
import { getAssetFileURL } from "/examples/js/get-asset-url.js";
|
||||
|
||||
export async function init({ THREE: _THREE, scene, camera, renderer, spark }) {
|
||||
const group = new THREE.Group();
|
||||
scene.add(group);
|
||||
|
||||
// Params and uniforms
|
||||
const PARAMETERS = {
|
||||
splatCoverage: 1.0,
|
||||
spereRadius: 1.0,
|
||||
sphereHeight: 2.0,
|
||||
speedMultiplier: 1.0,
|
||||
rotation: true,
|
||||
pause: false,
|
||||
};
|
||||
|
||||
const time = dyno.dynoFloat(0.0);
|
||||
|
||||
// Camera baseline
|
||||
const _prevPos = camera.position.clone();
|
||||
const prevLook = new THREE.Vector3();
|
||||
camera.getWorldDirection(prevLook);
|
||||
|
||||
const SPHERICAL_TARGET = new THREE.Vector3(0, 2, 0);
|
||||
camera.position.set(5, 4, 7);
|
||||
camera.lookAt(SPHERICAL_TARGET);
|
||||
|
||||
const skyFile = "dali-env.glb";
|
||||
const sceneFile = "dali-table.glb";
|
||||
const splatFiles = ["penguin.spz", "dessert.spz", "woobles.spz"];
|
||||
|
||||
async function loadDelitGLB(filename, isEnv = false) {
|
||||
const url = await getAssetFileURL(filename);
|
||||
const gltfLoader = new GLTFLoader();
|
||||
const gltf = await new Promise((resolve, reject) => {
|
||||
gltfLoader.load(url, resolve, undefined, reject);
|
||||
});
|
||||
const root = gltf.scene;
|
||||
root.traverse((child) => {
|
||||
if (child.isMesh && child.material) {
|
||||
const original = child.material;
|
||||
const basic = new THREE.MeshBasicMaterial();
|
||||
if (original.color) basic.color.copy(original.color);
|
||||
if (original.map) basic.map = original.map;
|
||||
if (isEnv) {
|
||||
basic.side = THREE.BackSide;
|
||||
if (basic.map) {
|
||||
basic.map.mapping = THREE.EquirectangularReflectionMapping;
|
||||
basic.map.colorSpace = THREE.LinearSRGBColorSpace;
|
||||
basic.map.needsUpdate = true;
|
||||
}
|
||||
}
|
||||
child.material = basic;
|
||||
}
|
||||
});
|
||||
return root;
|
||||
}
|
||||
|
||||
function getTransitionState(t, fadeInTime, fadeOutTime, period) {
|
||||
const dynoOne = dyno.dynoFloat(1.0);
|
||||
const wrapT = dyno.mod(t, period);
|
||||
const normT = dyno.mod(t, dynoOne);
|
||||
const isFadeIn = dyno.and(
|
||||
dyno.greaterThan(wrapT, fadeInTime),
|
||||
dyno.lessThan(wrapT, dyno.add(fadeInTime, dynoOne)),
|
||||
);
|
||||
const isFadeOut = dyno.and(
|
||||
dyno.greaterThan(wrapT, fadeOutTime),
|
||||
dyno.lessThan(wrapT, dyno.add(fadeOutTime, dynoOne)),
|
||||
);
|
||||
const inTransition = dyno.or(isFadeIn, isFadeOut);
|
||||
return { inTransition, isFadeIn, normT };
|
||||
}
|
||||
|
||||
function contractionDyno() {
|
||||
return new dyno.Dyno({
|
||||
inTypes: {
|
||||
gsplat: dyno.Gsplat,
|
||||
inTransition: "bool",
|
||||
fadeIn: "bool",
|
||||
t: "float",
|
||||
splatScale: "float",
|
||||
spereRadius: "float",
|
||||
sphereHeight: "float",
|
||||
},
|
||||
outTypes: { gsplat: dyno.Gsplat },
|
||||
globals: () => [
|
||||
dyno.unindent(`
|
||||
vec3 applyCenter(vec3 center, float t, float spereRadius, float sphereHeight) {
|
||||
float heightModifier = 0.5 + 0.5 * pow(abs(1.0 - 2.0*t), 0.2);
|
||||
vec3 targetCenter = vec3(0.0, heightModifier * sphereHeight, 0.0);
|
||||
vec3 dir = normalize(center - targetCenter);
|
||||
vec3 targetPoint = targetCenter + dir * spereRadius;
|
||||
if (t < 0.25 || t > 0.75) {
|
||||
return center;
|
||||
} else if (t < 0.45) {
|
||||
return mix(center, targetPoint, pow((t - 0.25) * 5.0, 4.0));
|
||||
} else if (t < 0.55) {
|
||||
float churn = 0.1;
|
||||
float transitionT = (t - 0.45) * 10.0;
|
||||
float angle = transitionT * 2.0 * PI;
|
||||
vec3 rotvec = vec3(sin(angle), 0.0, cos(angle));
|
||||
float strength = sin(transitionT * PI);
|
||||
return targetPoint + cross(dir, rotvec) * churn * strength;
|
||||
} else {
|
||||
return mix(targetPoint, center, pow((t - 0.55) * 5.0, 4.0));
|
||||
}
|
||||
}
|
||||
vec3 applyScale(vec3 scales, float t, float targetScale) {
|
||||
vec3 targetScales = targetScale * vec3(1.0);
|
||||
if (t < 0.25) return scales;
|
||||
else if (t < 0.45) return mix(scales, targetScales, pow((t - 0.25) * 5.0, 2.0));
|
||||
else if (t < 0.55) return targetScales;
|
||||
else if (t < 0.75) return mix(targetScales, scales, pow((t - 0.55) * 5.0, 2.0));
|
||||
else return scales;
|
||||
}
|
||||
float applyOpacity(float opacity, float t, bool fadeIn) {
|
||||
if (fadeIn) {
|
||||
if (t < 0.4) return 0.0;
|
||||
else if (t < 0.6) return mix(0.0, opacity, pow((t - 0.4) * 5.0, 2.0));
|
||||
else return opacity;
|
||||
} else {
|
||||
if (t < 0.4) return opacity;
|
||||
else if (t < 0.6) return mix(opacity, 0.0, pow((t - 0.4) * 5.0, 2.0));
|
||||
else return 0.0;
|
||||
}
|
||||
}
|
||||
`),
|
||||
],
|
||||
statements: ({ inputs, outputs }) =>
|
||||
dyno.unindentLines(`
|
||||
${outputs.gsplat} = ${inputs.gsplat};
|
||||
${outputs.gsplat}.center = applyCenter(${inputs.gsplat}.center, ${inputs.t}, ${inputs.spereRadius}, ${inputs.sphereHeight});
|
||||
${outputs.gsplat}.scales = applyScale(${inputs.gsplat}.scales, ${inputs.t}, ${inputs.splatScale});
|
||||
if (${inputs.inTransition}) {
|
||||
${outputs.gsplat}.rgba.a = applyOpacity(${inputs.gsplat}.rgba.a, ${inputs.t}, ${inputs.fadeIn});
|
||||
} else {
|
||||
${outputs.gsplat}.rgba.a = 0.0;
|
||||
}
|
||||
`),
|
||||
});
|
||||
}
|
||||
|
||||
function getTransitionModifier(
|
||||
inTransition,
|
||||
fadeIn,
|
||||
t,
|
||||
splatScale,
|
||||
spereRadius,
|
||||
sphereHeight,
|
||||
) {
|
||||
const contraction = contractionDyno();
|
||||
return dyno.dynoBlock(
|
||||
{ gsplat: dyno.Gsplat },
|
||||
{ gsplat: dyno.Gsplat },
|
||||
({ gsplat }) => {
|
||||
gsplat = contraction.apply({
|
||||
gsplat,
|
||||
inTransition,
|
||||
fadeIn,
|
||||
t,
|
||||
splatScale,
|
||||
spereRadius,
|
||||
sphereHeight,
|
||||
}).gsplat;
|
||||
return { gsplat };
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
async function morphableSplatMesh(
|
||||
assetName,
|
||||
time,
|
||||
fadeInTime,
|
||||
fadeOutTime,
|
||||
period,
|
||||
splatCoverage,
|
||||
spereRadius,
|
||||
sphereHeight,
|
||||
) {
|
||||
const url = await getAssetFileURL(assetName);
|
||||
const splatMesh = new SplatMesh({ url });
|
||||
await splatMesh.initialized;
|
||||
const splatScale = dyno.div(
|
||||
dyno.mul(splatCoverage, spereRadius),
|
||||
dyno.dynoFloat(splatMesh.packedSplats.numSplats / 1000.0),
|
||||
);
|
||||
const { inTransition, isFadeIn, normT } = getTransitionState(
|
||||
time,
|
||||
fadeInTime,
|
||||
fadeOutTime,
|
||||
period,
|
||||
);
|
||||
splatMesh.worldModifier = getTransitionModifier(
|
||||
inTransition,
|
||||
isFadeIn,
|
||||
normT,
|
||||
splatScale,
|
||||
spereRadius,
|
||||
sphereHeight,
|
||||
);
|
||||
splatMesh.updateGenerator();
|
||||
splatMesh.quaternion.set(1, 0, 0, 0);
|
||||
return splatMesh;
|
||||
}
|
||||
|
||||
// Load env and assets
|
||||
const sky = await loadDelitGLB(skyFile, true);
|
||||
group.add(sky);
|
||||
const table = await loadDelitGLB(sceneFile, false);
|
||||
const sceneScale = 3.5;
|
||||
table.scale.set(sceneScale, sceneScale, sceneScale);
|
||||
table.position.set(-1, 0, -0.8);
|
||||
group.add(table);
|
||||
|
||||
const period = dyno.dynoFloat(splatFiles.length);
|
||||
const spereRadiusDyno = dyno.dynoFloat(PARAMETERS.spereRadius);
|
||||
const splatCoverageDyno = dyno.dynoFloat(PARAMETERS.splatCoverage);
|
||||
const sphereHeightDyno = dyno.dynoFloat(PARAMETERS.sphereHeight);
|
||||
|
||||
const meshes = [];
|
||||
for (let i = 0; i < splatFiles.length; i++) {
|
||||
const mesh = await morphableSplatMesh(
|
||||
splatFiles[i],
|
||||
time,
|
||||
dyno.dynoFloat(i),
|
||||
dyno.dynoFloat((i + 1) % splatFiles.length),
|
||||
period,
|
||||
splatCoverageDyno,
|
||||
spereRadiusDyno,
|
||||
sphereHeightDyno,
|
||||
);
|
||||
group.add(mesh);
|
||||
meshes.push(mesh);
|
||||
}
|
||||
|
||||
function update(dt, _t) {
|
||||
if (!PARAMETERS.pause) {
|
||||
time.value += dt * 0.5 * PARAMETERS.speedMultiplier;
|
||||
if (PARAMETERS.rotation) {
|
||||
for (const m of meshes) {
|
||||
m.rotation.y += dt * PARAMETERS.speedMultiplier;
|
||||
}
|
||||
}
|
||||
}
|
||||
// Keep camera centered on spherical target
|
||||
camera.lookAt(SPHERICAL_TARGET);
|
||||
}
|
||||
|
||||
function setupGUI(folder) {
|
||||
folder.add(PARAMETERS, "spereRadius", 0.1, 8.0, 0.01).onChange((v) => {
|
||||
spereRadiusDyno.value = v;
|
||||
});
|
||||
folder.add(PARAMETERS, "sphereHeight", -1.0, 4.0, 0.01).onChange((v) => {
|
||||
sphereHeightDyno.value = v;
|
||||
});
|
||||
folder.add(PARAMETERS, "splatCoverage", 0.1, 2.0, 0.01).onChange((v) => {
|
||||
splatCoverageDyno.value = v;
|
||||
});
|
||||
folder.add(PARAMETERS, "speedMultiplier", 0.25, 4.0, 0.01);
|
||||
folder.add(PARAMETERS, "rotation");
|
||||
folder.add(PARAMETERS, "pause");
|
||||
return folder;
|
||||
}
|
||||
|
||||
function dispose() {
|
||||
// Remove group
|
||||
scene.remove(group);
|
||||
// No global listeners here; controls are managed by main
|
||||
}
|
||||
|
||||
return { group, update, dispose, setupGUI };
|
||||
}
|
||||
@@ -1,29 +1,14 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Spark • Splat Transitions</title>
|
||||
<style>
|
||||
html, body {
|
||||
margin: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background-color: black;
|
||||
}
|
||||
#canvas {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
outline: none; /* Remove default focus outline */
|
||||
touch-action: none;
|
||||
}
|
||||
html, body { margin: 0; height: 100%; width: 100%; background-color: black; }
|
||||
#canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; outline: none; touch-action: none; }
|
||||
.loading { position: absolute; top: 12px; left: 12px; color: white; font-family: Arial, sans-serif; font-size: 12px; opacity: .8; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<canvas id="canvas" tabindex="0"></canvas>
|
||||
<script type="importmap">
|
||||
{
|
||||
"imports": {
|
||||
@@ -34,347 +19,12 @@
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<script type="module">
|
||||
import {
|
||||
dyno,
|
||||
SparkRenderer,
|
||||
SplatMesh,
|
||||
} from "@sparkjsdev/spark";
|
||||
import * as THREE from "three";
|
||||
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
|
||||
import { GLTFLoader } from "three/addons/loaders/GLTFLoader.js";
|
||||
import { GLTFExporter } from "three/addons/exporters/GLTFExporter.js";
|
||||
import { getAssetFileURL } from "/examples/js/get-asset-url.js";
|
||||
import { GUI } from "lil-gui";
|
||||
|
||||
const splatFiles = [
|
||||
"penguin.spz",
|
||||
"dessert.spz",
|
||||
"woobles.spz",
|
||||
];
|
||||
const sceneFile = "dali-table.glb"
|
||||
const skyFile = "dali-env.glb"
|
||||
|
||||
const PARAMETERS = {
|
||||
splatCoverage: 1.0,
|
||||
spereRadius: 1.0,
|
||||
sphereHeight: 2.0,
|
||||
speedMultiplier: 1.0,
|
||||
rotation: true,
|
||||
pause: false,
|
||||
};
|
||||
|
||||
function getTransitionState(t, fadeInTime, fadeOutTime, period) {
|
||||
// inputs:
|
||||
// unnormalized time t
|
||||
// fade in and fade out (assumed to take 1.0 unnormalized time units)
|
||||
// period (assumed to be an integer number of unnormalized time units)
|
||||
// returns:
|
||||
// dynobool for whether transition is active
|
||||
// dynobool for whether transition is fading in or out
|
||||
// dynofloat for the normalized time of the transition
|
||||
const dynoOne = dyno.dynoFloat(1.0);
|
||||
const wrapT = dyno.mod(t, period);
|
||||
const normT= dyno.mod(t, dynoOne);
|
||||
const isFadeIn = dyno.and(
|
||||
dyno.greaterThan(wrapT, fadeInTime),
|
||||
dyno.lessThan(wrapT, dyno.add(fadeInTime, dynoOne)),
|
||||
);
|
||||
const isFadeOut = dyno.and(
|
||||
dyno.greaterThan(wrapT, fadeOutTime),
|
||||
dyno.lessThan(wrapT, dyno.add(fadeOutTime, dynoOne)),
|
||||
);
|
||||
const inTransition = dyno.or(isFadeIn, isFadeOut);
|
||||
return { inTransition, isFadeIn, normT};
|
||||
}
|
||||
|
||||
function contractionDyno() {
|
||||
// this is a looping shader that periodically contracts and expands the splat.
|
||||
// t is assumed to be in normalized time [0, 1], any retiming should be done before this function.
|
||||
// fadeIn is a boolean that indicates whether the splat is fading in or out.
|
||||
return new dyno.Dyno({
|
||||
inTypes: {
|
||||
gsplat: dyno.Gsplat,
|
||||
inTransition: "bool",
|
||||
fadeIn: "bool",
|
||||
t: "float",
|
||||
splatScale: "float",
|
||||
spereRadius: "float",
|
||||
sphereHeight: "float",
|
||||
},
|
||||
outTypes: { gsplat: dyno.Gsplat },
|
||||
globals: () => [
|
||||
dyno.unindent(`
|
||||
vec3 applyCenter(vec3 center, float t, float spereRadius, float sphereHeight) {
|
||||
float heightModifier = 0.5 + 0.5 * pow(abs(1.0 - 2.0*t), 0.2);
|
||||
vec3 targetCenter = vec3(0.0, heightModifier * sphereHeight, 0.0);
|
||||
vec3 dir = normalize(center - targetCenter);
|
||||
vec3 targetPoint = targetCenter + dir * spereRadius;
|
||||
if (t < 0.25 || t > 0.75) {
|
||||
return center;
|
||||
} else if (t < 0.45) {
|
||||
return mix(center, targetPoint, pow((t - 0.25) * 5.0, 4.0));
|
||||
} else if (t < 0.55) {
|
||||
float churn = 0.1;
|
||||
float transitionT = (t - 0.45) * 10.0;
|
||||
float angle = transitionT * 2.0 * PI;
|
||||
vec3 rotvec = vec3(sin(angle), 0.0, cos(angle));
|
||||
float strength = sin(transitionT * PI);
|
||||
return targetPoint + cross(dir, rotvec) * churn * strength;
|
||||
} else {
|
||||
return mix(targetPoint, center, pow((t - 0.55) * 5.0, 4.0));
|
||||
}
|
||||
}
|
||||
|
||||
vec3 applyScale(vec3 scales, float t, float targetScale) {
|
||||
vec3 targetScales = targetScale * vec3(1.0, 1.0, 1.0);
|
||||
if (t < 0.25) {
|
||||
return scales;
|
||||
} else if (t < 0.45) {
|
||||
return mix(scales, targetScales, pow((t - 0.25) * 5.0, 2.0));
|
||||
} else if (t < 0.55) {
|
||||
return targetScales;
|
||||
} else if (t < 0.75) {
|
||||
return mix(targetScales, scales, pow((t - 0.55) * 5.0, 2.0));
|
||||
} else {
|
||||
return scales;
|
||||
}
|
||||
}
|
||||
|
||||
float applyOpacity(float opacity, float t, bool fadeIn) {
|
||||
if (fadeIn) {
|
||||
if (t < 0.4) {
|
||||
return 0.0;
|
||||
} else if (t < 0.6) {
|
||||
return mix(0.0, opacity, pow((t - 0.4) * 5.0, 2.0));
|
||||
} else {
|
||||
return opacity;
|
||||
}
|
||||
} else {
|
||||
if (t < 0.4) {
|
||||
return opacity;
|
||||
} else if (t < 0.6) {
|
||||
return mix(opacity, 0.0, pow((t - 0.4) * 5.0, 2.0));
|
||||
} else {
|
||||
return 0.0;
|
||||
}
|
||||
}
|
||||
}
|
||||
`)
|
||||
],
|
||||
statements: ({ inputs, outputs }) => dyno.unindentLines(`
|
||||
${outputs.gsplat} = ${inputs.gsplat};
|
||||
${outputs.gsplat}.center = applyCenter(${inputs.gsplat}.center, ${inputs.t}, ${inputs.spereRadius}, ${inputs.sphereHeight});
|
||||
${outputs.gsplat}.scales = applyScale(${inputs.gsplat}.scales, ${inputs.t}, ${inputs.splatScale});
|
||||
if (${inputs.inTransition}) {
|
||||
${outputs.gsplat}.rgba.a = applyOpacity(${inputs.gsplat}.rgba.a, ${inputs.t}, ${inputs.fadeIn});
|
||||
} else {
|
||||
${outputs.gsplat}.rgba.a = 0.0;
|
||||
}
|
||||
`),
|
||||
});
|
||||
}
|
||||
|
||||
function getTransitionModifier(
|
||||
inTransition,
|
||||
fadeIn,
|
||||
t,
|
||||
splatScale,
|
||||
spereRadius,
|
||||
sphereHeight
|
||||
) {
|
||||
const contraction = contractionDyno();
|
||||
return dyno.dynoBlock(
|
||||
{ gsplat: dyno.Gsplat },
|
||||
{ gsplat: dyno.Gsplat },
|
||||
({ gsplat }) => {
|
||||
gsplat = contraction.apply({
|
||||
gsplat, inTransition, fadeIn, t, splatScale, spereRadius, sphereHeight
|
||||
}).gsplat;
|
||||
return { gsplat };
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
async function morphableSplatMesh(
|
||||
assetName,
|
||||
time,
|
||||
fadeInTime,
|
||||
fadeOutTime,
|
||||
period,
|
||||
splatCoverage,
|
||||
spereRadius,
|
||||
sphereHeight,
|
||||
) {
|
||||
|
||||
const url = await getAssetFileURL(assetName);
|
||||
const splatMesh = new SplatMesh({
|
||||
url: url,
|
||||
onFrame: ({ mesh, time }) => {
|
||||
mesh.needsUpdate = true;
|
||||
}
|
||||
});
|
||||
await splatMesh.initialized; // wait to get splatCount
|
||||
const splatScale = dyno.div(dyno.mul(splatCoverage, spereRadius),
|
||||
dyno.dynoFloat(splatMesh.packedSplats.numSplats / 1000.0)
|
||||
);
|
||||
|
||||
const { inTransition, isFadeIn, normT} =
|
||||
getTransitionState(time, fadeInTime, fadeOutTime, period);
|
||||
|
||||
splatMesh.worldModifier = getTransitionModifier(
|
||||
inTransition,
|
||||
isFadeIn,
|
||||
normT,
|
||||
splatScale,
|
||||
spereRadius,
|
||||
sphereHeight
|
||||
);
|
||||
splatMesh.updateGenerator();
|
||||
return splatMesh;
|
||||
}
|
||||
|
||||
async function loadDelitGLB(filename, isEnv = false) {
|
||||
const url = await getAssetFileURL(filename);
|
||||
console.log("Loading GLB", url);
|
||||
const gltfLoader = new GLTFLoader();
|
||||
const gltf = await new Promise((resolve, reject) => {
|
||||
gltfLoader.load(url, resolve, undefined, reject);
|
||||
});
|
||||
const scene = gltf.scene;
|
||||
// Switch all materials to albedo slot
|
||||
scene.traverse((child) => {
|
||||
if (child.isMesh && child.material) {
|
||||
const originalMaterial = child.material;
|
||||
const basicMaterial = new THREE.MeshBasicMaterial();
|
||||
if (originalMaterial.color) {
|
||||
basicMaterial.color.copy(originalMaterial.color);
|
||||
}
|
||||
if (originalMaterial.map) {
|
||||
basicMaterial.map = originalMaterial.map;
|
||||
}
|
||||
if (isEnv) { // sky sphere handling
|
||||
basicMaterial.side = THREE.BackSide;
|
||||
basicMaterial.map.mapping = THREE.EquirectangularReflectionMapping;
|
||||
basicMaterial.map.colorSpace = THREE.LinearSRGBColorSpace;
|
||||
basicMaterial.map.needsUpdate = true;
|
||||
}
|
||||
child.material = basicMaterial;
|
||||
}
|
||||
});
|
||||
return scene;
|
||||
}
|
||||
|
||||
|
||||
const canvas = document.getElementById("canvas");
|
||||
const renderer = new THREE.WebGLRenderer({ canvas, antialias: false });
|
||||
renderer.setClearColor(new THREE.Color(0x000000), 1);
|
||||
|
||||
const scene = new THREE.Scene();
|
||||
const spark = new SparkRenderer({
|
||||
renderer,
|
||||
});
|
||||
scene.add(spark);
|
||||
|
||||
const camera = new THREE.PerspectiveCamera(
|
||||
50,
|
||||
window.innerWidth / window.innerHeight,
|
||||
0.01,
|
||||
1000,
|
||||
);
|
||||
camera.position.set(5, 4, 7);
|
||||
camera.lookAt(0, 4, 0);
|
||||
scene.add(camera);
|
||||
|
||||
const orbitControls = new OrbitControls(camera, renderer.domElement);
|
||||
orbitControls.target.set(0, 2, 0);
|
||||
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 time = dyno.dynoFloat(0.0);
|
||||
|
||||
async function loadAssets(splatCoverage, spereRadius, sphereHeight) {
|
||||
console.log("Loading initial scene...");
|
||||
|
||||
// Load sky sphere
|
||||
const skySphere = await loadDelitGLB(skyFile, true);
|
||||
scene.add(skySphere);
|
||||
|
||||
// Load table GLB
|
||||
const sceneAssets = await loadDelitGLB(sceneFile);
|
||||
const sceneScale = 3.5;
|
||||
sceneAssets.scale.set(sceneScale, sceneScale, sceneScale);
|
||||
sceneAssets.position.set(-1, 0, -0.8);
|
||||
scene.add(sceneAssets);
|
||||
|
||||
const splatMeshes = [];
|
||||
const period = dyno.dynoFloat(splatFiles.length);
|
||||
for (let i=0; i<splatFiles.length; i++) {
|
||||
console.log(splatFiles[i], (i+1) % splatFiles.length);
|
||||
const splatMesh = await morphableSplatMesh(
|
||||
splatFiles[i],
|
||||
time,
|
||||
dyno.dynoFloat(i), //fadeInTime
|
||||
dyno.dynoFloat((i+1) % splatFiles.length), //fadeOutTime
|
||||
period,
|
||||
splatCoverage,
|
||||
spereRadius,
|
||||
sphereHeight,
|
||||
);
|
||||
splatMesh.quaternion.set(1, 0, 0, 0);
|
||||
scene.add(splatMesh);
|
||||
splatMeshes.push(splatMesh);
|
||||
}
|
||||
return splatMeshes;
|
||||
}
|
||||
|
||||
const spereRadiusDyno = dyno.dynoFloat(PARAMETERS.spereRadius)
|
||||
const splatCoverageDyno = dyno.dynoFloat(PARAMETERS.splatCoverage)
|
||||
const sphereHeightDyno = dyno.dynoFloat(PARAMETERS.sphereHeight)
|
||||
const splatMeshes = await loadAssets(splatCoverageDyno, spereRadiusDyno, sphereHeightDyno);
|
||||
|
||||
const gui = new GUI();
|
||||
gui.add(PARAMETERS, "spereRadius").min(0.1).max(8.0).step(0.01).onChange((value) => {
|
||||
spereRadiusDyno.value = value;
|
||||
});
|
||||
gui.add(PARAMETERS, "sphereHeight").min(-1.0).max(4.0).step(0.01).onChange((value) => {
|
||||
sphereHeightDyno.value = value;
|
||||
});
|
||||
gui.add(PARAMETERS, "splatCoverage").min(0.1).max(2.0).step(0.01).onChange((value) => {
|
||||
splatCoverageDyno.value = value;
|
||||
});
|
||||
gui.add(PARAMETERS, "speedMultiplier").min(0.25).max(4.0).step(0.01);
|
||||
gui.add(PARAMETERS, "rotation");
|
||||
gui.add(PARAMETERS, "pause");
|
||||
|
||||
console.log("Starting render loop");
|
||||
|
||||
// Animation loop
|
||||
let lastTime = 0;
|
||||
renderer.setAnimationLoop((rawTime) => {
|
||||
rawTime *= 0.0005;
|
||||
const deltaTime = rawTime - (lastTime ?? rawTime);
|
||||
lastTime = rawTime;
|
||||
orbitControls.update();
|
||||
renderer.render(scene, camera);
|
||||
|
||||
if (!PARAMETERS.pause) {
|
||||
time.value +=deltaTime * PARAMETERS.speedMultiplier;
|
||||
if (PARAMETERS.rotation) {
|
||||
for (const splatMesh of splatMeshes) {
|
||||
splatMesh.rotation.y += deltaTime * PARAMETERS.speedMultiplier;
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="loading" id="loading">Loading...</div>
|
||||
<canvas id="canvas" tabindex="0"></canvas>
|
||||
<script type="module" src="./main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
|
||||
@@ -0,0 +1,109 @@
|
||||
import { SparkRenderer } from "@sparkjsdev/spark";
|
||||
import { GUI } from "lil-gui";
|
||||
import * as THREE from "three";
|
||||
|
||||
// Central renderer/scene/camera shared by effects
|
||||
const canvas = document.getElementById("canvas");
|
||||
const renderer = new THREE.WebGLRenderer({ canvas, antialias: true });
|
||||
renderer.setPixelRatio(window.devicePixelRatio);
|
||||
renderer.setSize(canvas.clientWidth, canvas.clientHeight, false);
|
||||
renderer.setClearColor(0x000000, 1);
|
||||
|
||||
const scene = new THREE.Scene();
|
||||
const spark = new SparkRenderer({ renderer });
|
||||
scene.add(spark);
|
||||
|
||||
const camera = new THREE.PerspectiveCamera(
|
||||
50,
|
||||
canvas.clientWidth / canvas.clientHeight,
|
||||
0.01,
|
||||
2000,
|
||||
);
|
||||
camera.position.set(0, 3, 8);
|
||||
camera.lookAt(0, 0, 0);
|
||||
scene.add(camera);
|
||||
|
||||
// Resize handling
|
||||
function handleResize() {
|
||||
const w = canvas.clientWidth;
|
||||
const h = canvas.clientHeight;
|
||||
renderer.setSize(w, h, false);
|
||||
camera.aspect = w / h;
|
||||
camera.updateProjectionMatrix();
|
||||
}
|
||||
window.addEventListener("resize", handleResize);
|
||||
|
||||
// GUI
|
||||
const gui = new GUI();
|
||||
const params = { Effect: "Spherical" };
|
||||
const effectFiles = {
|
||||
Spherical: () => import("./effects/spheric.js"),
|
||||
Explosion: () => import("./effects/explosion.js"),
|
||||
Flow: () => import("./effects/flow.js"),
|
||||
Morph: () => import("./effects/morph.js"),
|
||||
};
|
||||
|
||||
let active = null; // { api, group }
|
||||
let last = 0;
|
||||
let effectFolder = null; // GUI folder for current effect
|
||||
|
||||
async function switchEffect(name) {
|
||||
const loading = document.getElementById("loading");
|
||||
loading.textContent = `Loading ${name}...`;
|
||||
loading.style.display = "block";
|
||||
|
||||
// Dispose previous
|
||||
if (active) {
|
||||
try {
|
||||
active.api.dispose?.();
|
||||
} catch {}
|
||||
if (active.group) scene.remove(active.group);
|
||||
active = null;
|
||||
}
|
||||
|
||||
// Destroy previous GUI folder to avoid accumulation
|
||||
if (effectFolder) {
|
||||
try {
|
||||
effectFolder.destroy();
|
||||
} catch {}
|
||||
effectFolder = null;
|
||||
}
|
||||
|
||||
const loader = effectFiles[name];
|
||||
if (!loader) return;
|
||||
const mod = await loader();
|
||||
|
||||
const context = { THREE, scene, camera, renderer, spark };
|
||||
const api = await mod.init(context);
|
||||
|
||||
if (api.group) scene.add(api.group);
|
||||
active = { api, group: api.group };
|
||||
|
||||
// Setup a per-effect GUI folder if exposed
|
||||
if (api.setupGUI) {
|
||||
effectFolder = gui.addFolder(name);
|
||||
api.setupGUI(effectFolder);
|
||||
}
|
||||
|
||||
loading.style.display = "none";
|
||||
|
||||
// Give focus back to the canvas so keyboard controls work immediately
|
||||
try {
|
||||
canvas.focus();
|
||||
} catch {}
|
||||
}
|
||||
|
||||
gui.add(params, "Effect", Object.keys(effectFiles)).onChange(switchEffect);
|
||||
|
||||
// Animation loop
|
||||
renderer.setAnimationLoop((timeMs) => {
|
||||
const t = timeMs * 0.001;
|
||||
const dt = t - (last || t);
|
||||
last = t;
|
||||
|
||||
if (active?.api?.update) active.api.update(dt, t);
|
||||
renderer.render(scene, camera);
|
||||
});
|
||||
|
||||
// Kickoff
|
||||
switchEffect(params.Effect);
|
||||
Reference in New Issue
Block a user