aiquiral/yp-rubix
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

overlay redone

Browse source
This commit is contained in:
Anuj K 2025-09-06 03:30:32 +05:30
parent a2de17c581
commit 63c6e78b18
2 changed files with 213 additions and 224 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

342
src/fluidDistortion.js
View file

@ -1,19 +1,21 @@
import * as THREE from 'three'; import * as THREE from 'three';
// Enhanced ripple simulation with multiple trailing ripples and lighting const InkSimShader = {
const FluidSimShader = {
uniforms: { uniforms: {
tPrev: { value: null }, tPrev: { value: null },
iResolution: { value: new THREE.Vector2() }, iResolution: { value: new THREE.Vector2() },
iTime: { value: 0.0 }, iTime: { value: 0.0 },
mouse: { value: new THREE.Vector3(-1, -1, 0.0) }, mouse: { value: new THREE.Vector3(-1, -1, 0.0) },
dissipation: { value: 0.95 }, // Slightly more persistent for trails dissipation: { value: 0.96 },
tension: { value: 2.2 }, // Higher tension for stronger ripples turbulence: { value: 2.2 },
radius: { value: 20.0 }, // Larger splat radius scale: { value: 0.9 },
trailLength: { value: 5 }, // Number of trailing ripples speed: { value: 1.0 },
octaves: { value: 4 },
lacunarity: { value: 2.0 },
gain: { value: 0.5 },
mouseRadius: { value: 0.25 },
globalChaos: { value: 0.15 }
}, },
vertexShader: ` vertexShader: `
varying vec2 vUv; varying vec2 vUv;
void main() { void main() {
@ -21,7 +23,6 @@ const FluidSimShader = {
gl_Position = vec4(position.xy, 0.0, 1.0); gl_Position = vec4(position.xy, 0.0, 1.0);
} }
`, `,
fragmentShader: ` fragmentShader: `
precision highp float; precision highp float;
varying vec2 vUv; varying vec2 vUv;
@ -30,86 +31,119 @@ const FluidSimShader = {
uniform float iTime; uniform float iTime;
uniform vec3 mouse; uniform vec3 mouse;
uniform float dissipation; uniform float dissipation;
uniform float tension; uniform float turbulence;
uniform float radius; uniform float scale;
uniform float trailLength; uniform float speed;
uniform float octaves;
uniform float lacunarity;
uniform float gain;
uniform float mouseRadius;
uniform float globalChaos;
vec2 readRG(vec2 uv) { vec2 hash22(vec2 p) {
vec4 c = texture2D(tPrev, uv); p = vec2(dot(p, vec2(127.1, 311.7)), dot(p, vec2(269.5, 183.3)));
return c.rg; return -1.0 + 2.0 * fract(sin(p) * 43758.5453123);
}
float noise(vec2 p) {
vec2 i = floor(p);
vec2 f = fract(p);
vec2 u = f * f * (3.0 - 2.0 * f);
return mix(
mix(dot(hash22(i + vec2(0.0, 0.0)), f - vec2(0.0, 0.0)),
dot(hash22(i + vec2(1.0, 0.0)), f - vec2(1.0, 0.0)), u.x),
mix(dot(hash22(i + vec2(0.0, 1.0)), f - vec2(0.0, 1.0)),
dot(hash22(i + vec2(1.0, 1.0)), f - vec2(1.0, 1.0)), u.x), u.y);
}
float fbm(vec2 p) {
float value = 0.0;
float amplitude = 0.5;
float frequency = scale;
for(float i = 0.0; i < 8.0; i++) {
if(i >= octaves) break;
value += amplitude * noise(p * frequency);
frequency *= lacunarity;
amplitude *= gain;
}
return value;
} }
void main() { void main() {
vec2 texel = 1.0 / iResolution; vec2 uv = vUv;
vec2 currPrev = readRG(vUv); vec4 prev = texture2D(tPrev, uv);
float curr = currPrev.r; float time = iTime * speed;
float prev = currPrev.g;
float distortion = 0.0;
// Global background chaos - always present but subtle
vec2 globalP = uv * 3.0 + time * 0.12;
vec2 q = vec2(fbm(globalP), fbm(globalP + vec2(5.2, 1.3)));
distortion = fbm(globalP + 2.0 * q) * globalChaos;
// Enhanced 8-neighbor laplacian for stronger ripples // Mouse-driven intense ink distortion
float up = readRG(vUv + vec2(0.0, texel.y)).r; if(mouse.z > 0.001) {
float down = readRG(vUv + vec2(0.0, -texel.y)).r; vec2 mouseUv = mouse.xy / iResolution;
float right = readRG(vUv + vec2( texel.x, 0.0)).r; vec2 diff = uv - mouseUv;
float left = readRG(vUv + vec2(-texel.x, 0.0)).r; float dist = length(diff);
// Diagonal neighbors for smoother ripples // Larger, softer falloff around mouse cursor
float upLeft = readRG(vUv + vec2(-texel.x, texel.y)).r; float falloff = 1.0 - smoothstep(0.0, mouseRadius * 2.0, dist);
float upRight = readRG(vUv + vec2( texel.x, texel.y)).r; float coreFalloff = 1.0 - smoothstep(0.0, mouseRadius * 0.5, dist);
float downLeft = readRG(vUv + vec2(-texel.x, -texel.y)).r;
float downRight = readRG(vUv + vec2( texel.x, -texel.y)).r; if(falloff > 0.0) {
// Domain warping near cursor
// Enhanced laplacian with diagonal weights vec2 p = uv * 6.0 + time * 0.3;
float lap = (up + down + left + right) * 0.2 + vec2 warpQ = vec2(fbm(p), fbm(p + vec2(5.2, 1.3)));
(upLeft + upRight + downLeft + downRight) * 0.05 - curr; vec2 warpR = vec2(fbm(p + 3.0 * warpQ + vec2(1.7, 9.2) + time * 0.15),
fbm(p + 3.0 * warpQ + vec2(8.3, 2.8) + time * 0.12));
// Wave equation with enhanced parameters
float next = curr + (curr - prev) * dissipation + lap * tension;
// Multiple trailing ripples from mouse movement
if (mouse.z > 0.0001) {
vec2 uvPx = vUv * iResolution;
vec2 d = uvPx - mouse.xy;
float dist = length(d);
// Create multiple concentric ripples
for (float i = 0.0; i < 4.0; i++) {
if (i >= trailLength) break;
float offset = i * radius * 0.4; // Spacing between ripples // Chaotic ink splash effect
float r = radius + offset; float inkDistortion = fbm(p + 4.0 * warpR + diff * 8.0) * turbulence;
float timeOffset = i * 0.3; // Temporal offset for trailing effect
// Gaussian with sine wave for ripple pattern // Add swirling motion around cursor
float g = exp(-pow(dist - offset, 2.0) / (r * r * 0.5)); float angle = atan(diff.y, diff.x);
float ripple = sin(dist * 0.2 - iTime * 16.0 + timeOffset) * g; float spiral = sin(angle * 4.0 + time * 10.0 + dist * 15.0) * 0.6;
inkDistortion += spiral * coreFalloff;
// Diminishing strength for trailing ripples // Add noise based on mouse movement speed
float strength = mouse.z * (1.0 - i * 0.2) * 0.8; float mouseNoise = fbm(uv * 10.0 + time * 4.0 + mouseUv * 6.0);
next += ripple * strength; inkDistortion += mouseNoise * mouse.z * 1.2;
// Apply falloff and strength
distortion += inkDistortion * falloff * mouse.z * 0.8;
}
// Add trailing effect that persists even outside main radius
float trailFalloff = 1.0 - smoothstep(0.0, mouseRadius * 4.0, dist);
if(trailFalloff > 0.0) {
float trail = fbm(uv * 8.0 + time * 2.0 + mouseUv * 4.0) * mouse.z * 0.3;
distortion += trail * trailFalloff;
} }
} }
gl_FragColor = vec4(next, curr, 0.0, 1.0); // Apply dissipation and combine
float newValue = prev.r * dissipation + distortion * 0.12;
newValue = clamp(newValue, -2.0, 2.0);
gl_FragColor = vec4(newValue, prev.r, 0.0, 1.0);
} }
` `
}; };
// Enhanced distortion shader with dynamic lighting and ripple whiteness export const InkDistortionShader = {
export const FluidDistortionShader = {
uniforms: { uniforms: {
tDiffuse: { value: null }, tDiffuse: { value: null },
tSim: { value: null }, tSim: { value: null },
iResolution: { value: new THREE.Vector2() }, iResolution: { value: new THREE.Vector2() },
amount: { value: 0.12 }, // Stronger base distortion amount: { value: 0.035 },
chromaticAmount: { value: 0.015 }, // Enhanced chromatic aberration chromaticAmount: { value: 0.015 },
lightPosition: { value: new THREE.Vector3(0.5, 0.5, 1.0) }, // Light position time: { value: 0.0 },
lightIntensity: { value: 1.5 }, // Light brightness noiseScale: { value: 2.0 },
lightColor: { value: new THREE.Color(0.8, 0.9, 1.0) }, // Cool light color flowSpeed: { value: 1.0 },
normalStrength: { value: 2.0 }, // How pronounced the lighting effect is inkDensity: { value: 0.4 },
ambientLight: { value: 0.15 }, // Base ambient lighting chaosAmount: { value: 1.3 }
rippleWhiteness: { value: 0.15 }, // Amount of white tint for ripples
rippleBrightness: { value: 1.8 }, // Brightness multiplier for ripple areas
}, },
vertexShader: ` vertexShader: `
varying vec2 vUv; varying vec2 vUv;
void main() { void main() {
@ -117,7 +151,6 @@ export const FluidDistortionShader = {
gl_Position = vec4(position.xy, 0.0, 1.0); gl_Position = vec4(position.xy, 0.0, 1.0);
} }
`, `,
fragmentShader: ` fragmentShader: `
precision highp float; precision highp float;
varying vec2 vUv; varying vec2 vUv;
@ -126,121 +159,126 @@ export const FluidDistortionShader = {
uniform vec2 iResolution; uniform vec2 iResolution;
uniform float amount; uniform float amount;
uniform float chromaticAmount; uniform float chromaticAmount;
uniform vec3 lightPosition; uniform float time;
uniform float lightIntensity; uniform float noiseScale;
uniform vec3 lightColor; uniform float flowSpeed;
uniform float normalStrength; uniform float inkDensity;
uniform float ambientLight; uniform float chaosAmount;
uniform float rippleWhiteness;
uniform float rippleBrightness; vec2 hash22(vec2 p) {
p = vec2(dot(p, vec2(127.1, 311.7)), dot(p, vec2(269.5, 183.3)));
return -1.0 + 2.0 * fract(sin(p) * 43758.5453123);
}
float noise(vec2 p) {
vec2 i = floor(p);
vec2 f = fract(p);
vec2 u = f * f * (3.0 - 2.0 * f);
return mix(
mix(dot(hash22(i + vec2(0.0, 0.0)), f - vec2(0.0, 0.0)),
dot(hash22(i + vec2(1.0, 0.0)), f - vec2(1.0, 0.0)), u.x),
mix(dot(hash22(i + vec2(0.0, 1.0)), f - vec2(0.0, 1.0)),
dot(hash22(i + vec2(1.0, 1.0)), f - vec2(1.0, 1.0)), u.x), u.y);
}
float fbm(vec2 p) {
float value = 0.0;
float amplitude = 0.5;
float frequency = 1.0;
for(int i = 0; i < 4; i++) {
value += amplitude * noise(p * frequency);
frequency *= 2.0;
amplitude *= 0.5;
}
return value;
}
void main() { void main() {
vec2 texel = 1.0 / iResolution; float distortionField = texture2D(tSim, vUv).r;
// Sample height field for normal calculation
float hC = texture2D(tSim, vUv).r;
float hL = texture2D(tSim, vUv - vec2(texel.x, 0.0)).r;
float hR = texture2D(tSim, vUv + vec2(texel.x, 0.0)).r;
float hD = texture2D(tSim, vUv - vec2(0.0, texel.y)).r;
float hU = texture2D(tSim, vUv + vec2(0.0, texel.y)).r;
// Calculate gradient and normal
vec2 grad = vec2(hR - hL, hU - hD) * normalStrength;
vec3 normal = normalize(vec3(-grad.x, -grad.y, 1.0));
// Enhanced distortion with trailing effect
vec2 baseOffset = grad * amount;
// Add subtle trailing distortion based on height // Apply base distortion everywhere there's simulation data
vec2 trailOffset = grad * abs(hC) * amount * 0.3; vec2 totalDistortion = vec2(distortionField) * amount;
vec2 totalOffset = baseOffset + trailOffset;
// Add procedural chaos based on distortion intensity
float distortionIntensity = abs(distortionField);
if(distortionIntensity > 0.005) {
vec2 flowTime = vec2(time * flowSpeed * 0.3, time * flowSpeed * 0.2);
vec2 flowNoise = vec2(
fbm(vUv * noiseScale + flowTime),
fbm(vUv * noiseScale + flowTime + vec2(100.0, 50.0))
);
totalDistortion += flowNoise * chaosAmount * 0.02 * distortionIntensity;
// Swirls based on distortion field
float swirl = sin(time * 2.0 + vUv.x * 15.0) * cos(time * 1.7 + vUv.y * 12.0);
vec2 swirlOffset = vec2(-swirl, swirl) * 0.01 * chaosAmount * distortionIntensity;
totalDistortion += swirlOffset;
}
// Chromatic aberration with enhanced separation // Enhanced chromatic aberration
vec2 chromaticOffset = grad * chromaticAmount; vec2 chromaticOffset = totalDistortion * chromaticAmount;
vec2 uvR = vUv + totalOffset + chromaticOffset; vec2 chaosChromatic = totalDistortion * 0.3;
vec2 uvG = vUv + totalOffset;
vec2 uvB = vUv + totalOffset - chromaticOffset; vec2 uvR = vUv + totalDistortion + chromaticOffset + chaosChromatic;
vec2 uvG = vUv + totalDistortion;
vec2 uvB = vUv + totalDistortion - chromaticOffset - chaosChromatic * 0.5;
// Clamp UVs
uvR = clamp(uvR, vec2(0.0), vec2(1.0)); uvR = clamp(uvR, vec2(0.0), vec2(1.0));
uvG = clamp(uvG, vec2(0.0), vec2(1.0)); uvG = clamp(uvG, vec2(0.0), vec2(1.0));
uvB = clamp(uvB, vec2(0.0), vec2(1.0)); uvB = clamp(uvB, vec2(0.0), vec2(1.0));
// Sample distorted colors
float r = texture2D(tDiffuse, uvR).r; float r = texture2D(tDiffuse, uvR).r;
float g = texture2D(tDiffuse, uvG).g; float g = texture2D(tDiffuse, uvG).g;
float b = texture2D(tDiffuse, uvB).b; float b = texture2D(tDiffuse, uvB).b;
vec3 distortedColor = vec3(r, g, b);
// Dynamic lighting calculation vec3 color = vec3(r, g, b);
vec3 lightDir = normalize(vec3(lightPosition.xy - vUv, lightPosition.z));
float NdotL = max(dot(normal, lightDir), 0.0);
// Create rim lighting effect for ripples // Apply ink effects based on distortion intensity
float rimLight = pow(1.0 - abs(dot(normal, vec3(0.0, 0.0, 1.0))), 2.0); if(distortionIntensity > 0.005) {
float density = distortionIntensity * inkDensity;
float inkEffect = 1.0 + density * 0.5;
color *= inkEffect;
float bleeding = smoothstep(0.02, 0.6, distortionIntensity);
color = mix(color, color * 0.92, bleeding * 0.3);
}
// Combine lighting effects gl_FragColor = vec4(color, 1.0);
vec3 lighting = lightColor * (NdotL * lightIntensity + rimLight * 0.3) + ambientLight;
// Calculate ripple intensity for both lighting and whiteness
float rippleIntensity = abs(hC) + length(grad) * 0.5;
rippleIntensity = clamp(rippleIntensity, 0.0, 1.0);
// Apply lighting selectively - stronger where there are ripples
vec3 litColor = mix(distortedColor, distortedColor * lighting, rippleIntensity);
// Add white tint to ripples for visibility over black areas
vec3 whiteColor = vec3(1.0, 1.0, 1.0);
// Create a smooth falloff for the whiteness effect
float whiteIntensity = smoothstep(0.0, 0.3, rippleIntensity) * rippleWhiteness;
// Blend in the white tint
vec3 rippleColor = mix(litColor, whiteColor, whiteIntensity);
// Brighten areas with ripples
rippleColor = mix(rippleColor, rippleColor * rippleBrightness, rippleIntensity * 0.5);
gl_FragColor = vec4(rippleColor, 1.0);
} }
` `
}; };
// Enhanced fluid simulation factory export function createInkSimulation(renderer, dpr = 1) {
export function createFluidSimulation(renderer, dpr = 1) {
const simScene = new THREE.Scene(); const simScene = new THREE.Scene();
const simCamera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1); const simCamera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1);
const quad = new THREE.Mesh( const quad = new THREE.Mesh(
new THREE.PlaneGeometry(2, 2), new THREE.PlaneGeometry(2, 2),
new THREE.ShaderMaterial({ new THREE.ShaderMaterial({
uniforms: THREE.UniformsUtils.clone(FluidSimShader.uniforms), uniforms: THREE.UniformsUtils.clone(InkSimShader.uniforms),
vertexShader: FluidSimShader.vertexShader, vertexShader: InkSimShader.vertexShader,
fragmentShader: FluidSimShader.fragmentShader, fragmentShader: InkSimShader.fragmentShader,
depthTest: false, depthTest: false,
depthWrite: false depthWrite: false
}) })
); );
simScene.add(quad); simScene.add(quad);
// Higher precision for better ripple quality
const params = { const params = {
minFilter: THREE.LinearFilter, minFilter: THREE.LinearFilter,
magFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter,
format: THREE.RGBAFormat, format: THREE.RGBAFormat,
type: THREE.FloatType, // Use float for better precision type: THREE.FloatType,
depthBuffer: false, depthBuffer: false,
stencilBuffer: false stencilBuffer: false
}; };
let width = Math.max(2, Math.floor(window.innerWidth * dpr)); let width = Math.max(2, Math.floor(window.innerWidth * dpr * 0.5));
let height = Math.max(2, Math.floor(window.innerHeight * dpr)); let height = Math.max(2, Math.floor(window.innerHeight * dpr * 0.5));
let rtA = new THREE.WebGLRenderTarget(width, height, params); let rtA = new THREE.WebGLRenderTarget(width, height, params);
let rtB = new THREE.WebGLRenderTarget(width, height, params); let rtB = new THREE.WebGLRenderTarget(width, height, params);
// Initialize
renderer.setRenderTarget(rtA); renderer.setRenderTarget(rtA);
renderer.clear(); renderer.clear();
renderer.setRenderTarget(rtB); renderer.setRenderTarget(rtB);
@ -251,25 +289,23 @@ export function createFluidSimulation(renderer, dpr = 1) {
quad.material.uniforms.tPrev.value = rtA.texture; quad.material.uniforms.tPrev.value = rtA.texture;
function swap() { function swap() {
const tmp = rtA; rtA = rtB; rtB = tmp; const tmp = rtA;
rtA = rtB;
rtB = tmp;
} }
function update(mouseX, mouseY, strength, timeSec) { function update(mouseX, mouseY, strength, timeSec) {
quad.material.uniforms.iTime.value = timeSec; quad.material.uniforms.iTime.value = timeSec;
if (mouseX < 0.0 || mouseY < 0.0) { if (mouseX < 0.0 || mouseY < 0.0) {
quad.material.uniforms.mouse.value.set(-1, -1, 0.0); quad.material.uniforms.mouse.value.set(-1, -1, 0.0);
} else { } else {
// Enhanced strength for better trailing effect const enhancedStrength = Math.max(0.0, Math.min(1.0, strength * 2.5));
const enhancedStrength = Math.max(0.0, Math.min(1.0, strength * 1.5)); quad.material.uniforms.mouse.value.set(mouseX * 0.5, mouseY * 0.5, enhancedStrength);
quad.material.uniforms.mouse.value.set(mouseX, mouseY, enhancedStrength);
} }
quad.material.uniforms.tPrev.value = rtA.texture; quad.material.uniforms.tPrev.value = rtA.texture;
renderer.setRenderTarget(rtB); renderer.setRenderTarget(rtB);
renderer.render(simScene, simCamera); renderer.render(simScene, simCamera);
renderer.setRenderTarget(null); renderer.setRenderTarget(null);
swap(); swap();
} }
@ -278,8 +314,8 @@ export function createFluidSimulation(renderer, dpr = 1) {
} }
function resize(w, h, newDpr = dpr) { function resize(w, h, newDpr = dpr) {
width = Math.max(2, Math.floor(w * newDpr)); width = Math.max(2, Math.floor(w * newDpr * 0.5));
height = Math.max(2, Math.floor(h * newDpr)); height = Math.max(2, Math.floor(h * newDpr * 0.5));
rtA.setSize(width, height); rtA.setSize(width, height);
rtB.setSize(width, height); rtB.setSize(width, height);
quad.material.uniforms.iResolution.value.set(width, height); quad.material.uniforms.iResolution.value.set(width, height);

95
src/main.js
View file

@ -1,10 +1,8 @@
import './style.css'; import './style.css';
import * as THREE from 'three'; import * as THREE from 'three';
import { SceneLoader } from './sceneLoader.js'; import { SceneLoader } from './sceneLoader.js';
import { createScene, setupLighting, setupControls } from './sceneSetup.js'; import { createScene, setupLighting, setupControls } from './sceneSetup.js';
import { createModelFromPreloaded } from './modelManager.js'; import { createModelFromPreloaded } from './modelManager.js';
import { import {
currentModel, currentModel,
nextModel, nextModel,
@ -16,64 +14,47 @@ import {
setCurrentModel, setCurrentModel,
setMixer, setMixer,
setGLBRepulsionSystem, setGLBRepulsionSystem,
calculateTransitionVectors // ⬅ added calculateTransitionVectors
} from './transitionManager.js'; } from './transitionManager.js';
import { import {
startBoldRoughnessAnimation, startBoldRoughnessAnimation,
updateBoldRoughnessAnimation, updateBoldRoughnessAnimation,
updateInnovationGlassAnimation updateInnovationGlassAnimation
} from './animationManager.js'; } from './animationManager.js';
import { ShaderPass } from 'three/addons/postprocessing/ShaderPass.js'; import { ShaderPass } from 'three/addons/postprocessing/ShaderPass.js';
import { createFluidSimulation, FluidDistortionShader } from './fluidDistortion.js'; import { createInkSimulation, InkDistortionShader } from './fluidDistortion.js';
import { createStarfield } from './starfield.js'; import { createStarfield } from './starfield.js';
/* ------------------------------------------------------------------ */
/* loader */
const sceneLoader = new SceneLoader(); const sceneLoader = new SceneLoader();
sceneLoader.setLoadingMessage('Preparing Your Experience...'); sceneLoader.setLoadingMessage('Preparing Your Experience...');
/* ------------------------------------------------------------------ */
/* scene */
const { scene, camera, renderer, composer } = createScene(); const { scene, camera, renderer, composer } = createScene();
setupLighting(scene, camera); setupLighting(scene, camera);
const controls = setupControls(camera, renderer); const controls = setupControls(camera, renderer);
/* realign transition vectors whenever user moves the camera */
controls.addEventListener('change', () => calculateTransitionVectors(camera)); controls.addEventListener('change', () => calculateTransitionVectors(camera));
/* ------------------------------------------------------------------ */
/* starfield, turntable & global vars */
const starfield = createStarfield(scene); const starfield = createStarfield(scene);
const turntableSpeed = 0.5; const turntableSpeed = 0.5;
let preloadedModels = {}; let preloadedModels = {};
/* ------------------------------------------------------------------ */
/* post-processing: fluid distortion */
const dpr = renderer.getPixelRatio ? renderer.getPixelRatio() : Math.min(window.devicePixelRatio || 1, 2); const dpr = renderer.getPixelRatio ? renderer.getPixelRatio() : Math.min(window.devicePixelRatio || 1, 2);
const fluid = createFluidSimulation(renderer, dpr); const inkSim = createInkSimulation(renderer, dpr);
const distortionPass = new ShaderPass(FluidDistortionShader); const distortionPass = new ShaderPass(InkDistortionShader);
distortionPass.material.uniforms.tSim.value = fluid.getTexture(); distortionPass.material.uniforms.tSim.value = inkSim.getTexture();
distortionPass.material.uniforms.iResolution.value.set(window.innerWidth * dpr, window.innerHeight * dpr); distortionPass.material.uniforms.iResolution.value.set(window.innerWidth * dpr, window.innerHeight * dpr);
distortionPass.material.uniforms.amount.value = 0.005; distortionPass.material.uniforms.amount.value = 0.025;
distortionPass.material.uniforms.chromaticAmount.value = 0.002; distortionPass.material.uniforms.chromaticAmount.value = 0.100;
distortionPass.material.uniforms.lightIntensity.value = 0; distortionPass.material.uniforms.noiseScale.value = 2.5;
distortionPass.material.uniforms.lightColor.value.set(1, 1, 1); distortionPass.material.uniforms.flowSpeed.value = 1.2;
distortionPass.material.uniforms.normalStrength.value = 2.0; distortionPass.material.uniforms.inkDensity.value = 0.35;
distortionPass.material.uniforms.ambientLight.value = 1; distortionPass.material.uniforms.chaosAmount.value = 1.5;
distortionPass.material.uniforms.rippleWhiteness.value = 0.025;
distortionPass.material.uniforms.rippleBrightness.value = 1;
composer.addPass(distortionPass); composer.addPass(distortionPass);
/* ------------------------------------------------------------------ */
/* pointer + mouse utilities */
const pointer = { x: -1, y: -1, strength: 0, prevX: -1, prevY: -1 }; const pointer = { x: -1, y: -1, strength: 0, prevX: -1, prevY: -1 };
const mouse = new THREE.Vector2(); const mouse = new THREE.Vector2();
const raycaster = new THREE.Raycaster(); const raycaster = new THREE.Raycaster();
/* ------------------------------------------------------------------ */
/* GLB cursor repulsion system */
const glbRepulsion = { const glbRepulsion = {
radius: 30, radius: 30,
maxDistance: 2, maxDistance: 2,
@ -84,8 +65,6 @@ const glbRepulsion = {
}; };
setGLBRepulsionSystem(glbRepulsion); setGLBRepulsionSystem(glbRepulsion);
/* ------------------------------------------------------------------ */
/* helper: convert DOM coords → simulation coords */
function toSimPixels(e) { function toSimPixels(e) {
const rect = renderer.domElement.getBoundingClientRect(); const rect = renderer.domElement.getBoundingClientRect();
const x = (e.clientX - rect.left) * dpr; const x = (e.clientX - rect.left) * dpr;
@ -93,21 +72,19 @@ function toSimPixels(e) {
return { x, y }; return { x, y };
} }
/* ------------------------------------------------------------------ */
/* pointer events */
renderer.domElement.addEventListener('pointermove', (e) => { renderer.domElement.addEventListener('pointermove', (e) => {
const { x, y } = toSimPixels(e); const { x, y } = toSimPixels(e);
const dx = pointer.prevX < 0 ? 0 : Math.abs(x - pointer.prevX); const dx = pointer.prevX < 0 ? 0 : Math.abs(x - pointer.prevX);
const dy = pointer.prevY < 0 ? 0 : Math.abs(y - pointer.prevY); const dy = pointer.prevY < 0 ? 0 : Math.abs(y - pointer.prevY);
const speed = Math.min(Math.sqrt(dx * dx + dy * dy) / (6 * dpr), 1); const speed = Math.min(Math.sqrt(dx * dx + dy * dy) / (3 * dpr), 1);
pointer.x = x; pointer.y = y; pointer.strength = speed * 1.2; pointer.x = x;
pointer.prevX = x; pointer.prevY = y; pointer.y = y;
pointer.strength = speed * 4.0;
pointer.prevX = x;
pointer.prevY = y;
const rect = renderer.domElement.getBoundingClientRect(); const rect = renderer.domElement.getBoundingClientRect();
const nx = (e.clientX - rect.left) / rect.width; const nx = (e.clientX - rect.left) / rect.width;
const ny = 1 - (e.clientY - rect.top) / rect.height; const ny = 1 - (e.clientY - rect.top) / rect.height;
distortionPass.material.uniforms.lightPosition.value.set(nx, ny, 1);
mouse.x = nx * 2 - 1; mouse.x = nx * 2 - 1;
mouse.y = -ny * 2 + 1; mouse.y = -ny * 2 + 1;
}, { passive: true }); }, { passive: true });
@ -115,14 +92,10 @@ renderer.domElement.addEventListener('pointermove', (e) => {
renderer.domElement.addEventListener('pointerleave', () => { renderer.domElement.addEventListener('pointerleave', () => {
Object.assign(pointer, { x: -1, y: -1, strength: 0 }); Object.assign(pointer, { x: -1, y: -1, strength: 0 });
mouse.set(-999, -999); mouse.set(-999, -999);
distortionPass.material.uniforms.lightPosition.value.set(0.5, 0.5, 1);
}, { passive: true }); }, { passive: true });
/* ------------------------------------------------------------------ */
/* GLB repulsion update */
function updateGLBRepulsion(camera, mouse, dt) { function updateGLBRepulsion(camera, mouse, dt) {
if (mouse.x === -999) { if (mouse.x === -999) {
// return objects to original pos
[currentModel, nextModel].forEach(m => { [currentModel, nextModel].forEach(m => {
if (!m) return; if (!m) return;
const orig = glbRepulsion.originalPositions.get(m); const orig = glbRepulsion.originalPositions.get(m);
@ -134,22 +107,18 @@ function updateGLBRepulsion(camera, mouse, dt) {
}); });
return; return;
} }
raycaster.setFromCamera(mouse, camera); raycaster.setFromCamera(mouse, camera);
const mouseWorld = raycaster.ray.direction.clone().multiplyScalar(50).add(raycaster.ray.origin); const mouseWorld = raycaster.ray.direction.clone().multiplyScalar(50).add(raycaster.ray.origin);
[currentModel, nextModel].forEach(m => { [currentModel, nextModel].forEach(m => {
if (!m) return; if (!m) return;
if (!glbRepulsion.originalPositions.has(m)) if (!glbRepulsion.originalPositions.has(m))
glbRepulsion.originalPositions.set(m, m.position.clone()); glbRepulsion.originalPositions.set(m, m.position.clone());
const orig = glbRepulsion.originalPositions.get(m); const orig = glbRepulsion.originalPositions.get(m);
const dx = m.position.x - mouseWorld.x; const dx = m.position.x - mouseWorld.x;
const dy = m.position.y - mouseWorld.y; const dy = m.position.y - mouseWorld.y;
const dz = m.position.z - mouseWorld.z; const dz = m.position.z - mouseWorld.z;
const dist = Math.sqrt(dx * dx + dy * dy + dz * dz); const dist = Math.sqrt(dx * dx + dy * dy + dz * dz);
let target = orig.clone(); let target = orig.clone();
if (dist < glbRepulsion.radius && dist > 0) { if (dist < glbRepulsion.radius && dist > 0) {
const force = (1 - dist / glbRepulsion.radius) * glbRepulsion.strength; const force = (1 - dist / glbRepulsion.radius) * glbRepulsion.strength;
target.add(new THREE.Vector3(dx, dy, dz).normalize().multiplyScalar(force)); target.add(new THREE.Vector3(dx, dy, dz).normalize().multiplyScalar(force));
@ -157,14 +126,11 @@ function updateGLBRepulsion(camera, mouse, dt) {
if (offset.length() > glbRepulsion.maxDistance) if (offset.length() > glbRepulsion.maxDistance)
target = orig.clone().add(offset.normalize().multiplyScalar(glbRepulsion.maxDistance)); target = orig.clone().add(offset.normalize().multiplyScalar(glbRepulsion.maxDistance));
} }
glbRepulsion.currentTargets.set(m, target); glbRepulsion.currentTargets.set(m, target);
m.position.lerp(target, Math.min(glbRepulsion.interpolationSpeed * dt, 1)); m.position.lerp(target, Math.min(glbRepulsion.interpolationSpeed * dt, 1));
}); });
} }
/* ------------------------------------------------------------------ */
/* first scene setup */
function initializeScene() { function initializeScene() {
const { model, animMixer } = createModelFromPreloaded('bold', preloadedModels, camera, controls); const { model, animMixer } = createModelFromPreloaded('bold', preloadedModels, camera, controls);
setCurrentModel(model); setCurrentModel(model);
@ -174,54 +140,42 @@ function initializeScene() {
startBoldRoughnessAnimation(true); startBoldRoughnessAnimation(true);
} }
/* ------------------------------------------------------------------ */
/* animation loop */
const clock = new THREE.Clock(); const clock = new THREE.Clock();
function animate() { function animate() {
requestAnimationFrame(animate); requestAnimationFrame(animate);
const dt = clock.getDelta(); const dt = clock.getDelta();
const elapsedTime = clock.getElapsedTime();
if (mixer) mixer.update(dt); if (mixer) mixer.update(dt);
if (nextMixer) nextMixer.update(dt); if (nextMixer) nextMixer.update(dt);
if (isTransitioning) updateTransition(dt, scene); if (isTransitioning) updateTransition(dt, scene);
else updateGLBRepulsion(camera, mouse, dt); else updateGLBRepulsion(camera, mouse, dt);
// turntable
if (currentModel) currentModel.rotation.y += turntableSpeed * dt; if (currentModel) currentModel.rotation.y += turntableSpeed * dt;
if (nextModel) nextModel.rotation.y += turntableSpeed * dt; if (nextModel) nextModel.rotation.y += turntableSpeed * dt;
// material anims
updateBoldRoughnessAnimation(); updateBoldRoughnessAnimation();
updateInnovationGlassAnimation(); updateInnovationGlassAnimation();
// stars + fluid
starfield.animateStars(camera, mouse, dt); starfield.animateStars(camera, mouse, dt);
fluid.update(pointer.x, pointer.y, pointer.strength, performance.now() / 1000); inkSim.update(pointer.x, pointer.y, pointer.strength, elapsedTime);
distortionPass.material.uniforms.tSim.value = fluid.getTexture(); distortionPass.material.uniforms.tSim.value = inkSim.getTexture();
distortionPass.material.uniforms.time.value = elapsedTime;
controls.update(); controls.update();
composer.render(); composer.render();
} }
/* ------------------------------------------------------------------ */
/* init workflow */
async function init() { async function init() {
try { try {
preloadedModels = await sceneLoader.loadAllModels(); preloadedModels = await sceneLoader.loadAllModels();
initializeScene(); initializeScene();
animate(); animate();
window.addEventListener('wheel', (e) => onMouseScroll(e, preloadedModels, scene, camera, controls), { passive: true }); window.addEventListener('wheel', (e) => onMouseScroll(e, preloadedModels, scene, camera, controls), { passive: true });
window.addEventListener('resize', () => { window.addEventListener('resize', () => {
const w = window.innerWidth, h = window.innerHeight; const w = window.innerWidth, h = window.innerHeight;
camera.aspect = w / h; camera.updateProjectionMatrix(); camera.aspect = w / h;
camera.updateProjectionMatrix();
renderer.setSize(w, h); renderer.setSize(w, h);
composer.setSize(w, h); composer.setSize(w, h);
const pr = renderer.getPixelRatio ? renderer.getPixelRatio() : Math.min(window.devicePixelRatio || 1, 2); const pr = renderer.getPixelRatio ? renderer.getPixelRatio() : Math.min(window.devicePixelRatio || 1, 2);
distortionPass.material.uniforms.iResolution.value.set(w * pr, h * pr); distortionPass.material.uniforms.iResolution.value.set(w * pr, h * pr);
fluid.resize(w, h, pr); inkSim.resize(w, h, pr);
}); });
} catch (err) { } catch (err) {
console.error('Failed to initialise:', err); console.error('Failed to initialise:', err);
@ -229,5 +183,4 @@ async function init() {
} }
} }
/* ------------------------------------------------------------------ */
init(); init();