4D Warped Glittering Particles

4D Warped Glittering Particles import * as THREE from 'three'; import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js'; import { RenderPass } from 'three/addons/postprocessing/RenderPass.js'; import { ShaderPass } from 'three/addons/postprocessing/ShaderPass.js'; import { UnrealBloomPass } from 'three/addons/postprocessing/UnrealBloomPass.js'; import { CopyShader } from 'three/addons/shaders/CopyShader.js'; // Scene setup const scene = new THREE.Scene(); scene.background = new THREE.Color(0x000000); // Camera const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); camera.position.z = 30; // Renderer const renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setSize(window.innerWidth, window.innerHeight); renderer.setPixelRatio(window.devicePixelRatio); document.body.appendChild(renderer.domElement); // Controls const controls = new OrbitControls(camera, renderer.domElement); controls.enableDamping = true; // Post-processing const composer = new EffectComposer(renderer); const renderPass = new RenderPass(scene, camera); composer.addPass(renderPass); const bloomPass = new UnrealBloomPass( new THREE.Vector2(window.innerWidth, window.innerHeight), 1.5, 0.4, 0.85 ); composer.addPass(bloomPass); const copyPass = new ShaderPass(CopyShader); composer.addPass(copyPass); // Particle system const PARTICLE_COUNT = 5000; const particles = new THREE.BufferGeometry(); const positions = new Float32Array(PARTICLE_COUNT * 3); const sizes = new Float32Array(PARTICLE_COUNT); const colors = new Float32Array(PARTICLE_COUNT * 3); const velocities = new Float32Array(PARTICLE_COUNT * 3); // Initialize particles for (let i = 0; i < PARTICLE_COUNT; i++) { // Random positions in a sphere const radius = 15 * Math.random(); const theta = Math.random() * Math.PI * 2; const phi = Math.acos(2 * Math.random() - 1); positions[i * 3] = radius * Math.sin(phi) * Math.cos(theta); positions[i * 3 + 1] = radius * Math.sin(phi) * Math.sin(theta); positions[i * 3 + 2] = radius * Math.cos(phi); // Random sizes sizes[i] = 0.1 + Math.random() * 0.5; // Random colors with gold/white tint colors[i * 3] = 0.9 + Math.random() * 0.1; colors[i * 3 + 1] = 0.8 + Math.random() * 0.2; colors[i * 3 + 2] = 0.5 + Math.random() * 0.2; // Random velocities velocities[i * 3] = (Math.random() - 0.5) * 0.1; velocities[i * 3 + 1] = (Math.random() - 0.5) * 0.1; velocities[i * 3 + 2] = (Math.random() - 0.5) * 0.1; } particles.setAttribute('position', new THREE.BufferAttribute(positions, 3)); particles.setAttribute('size', new THREE.BufferAttribute(sizes, 1)); particles.setAttribute('color', new THREE.BufferAttribute(colors, 3)); // Custom shader material for particles const particleMaterial = new THREE.ShaderMaterial({ uniforms: { time: { value: 0 }, warpFactor: { value: 1.0 } }, vertexShader: ` uniform float time; uniform float warpFactor; attribute float size; attribute vec3 color; varying vec3 vColor; void main() { vColor = color; // 4D warp effect vec4 pos = vec4(position, time * 0.1); float dist = length(pos); float warp = 1.0 + warpFactor * (1.0 - exp(-dist * 0.1)); vec3 warpedPos = position * warp; gl_Position = projectionMatrix * modelViewMatrix * vec4(warpedPos, 1.0); gl_PointSize = size * (100.0 / -gl_Position.z) * warp; } `, fragmentShader: ` varying vec3 vColor; void main() { // Circular particle with glitter effect vec2 coord = gl_PointCoord - vec2(0.5); float dist = length(coord); if (dist > 0.5) discard; // Glitter effect float sparkle = smoothstep(0.45, 0.5, dist) * (0.8 + 0.2 * sin(gl_PointCoord.x * 100.0 + gl_PointCoord.y * 100.0)); gl_FragColor = vec4(vColor * (1.0 + sparkle * 2.0), 1.0); } `, blending: THREE.AdditiveBlending, depthTest: false, transparent: true }); const particleSystem = new THREE.Points(particles, particleMaterial); scene.add(particleSystem); // Gravity centers const gravityCenters = [ new THREE.Vector3(10, 0, 0), new THREE.Vector3(-10, 0, 0), new THREE.Vector3(0, 10, 0), new THREE.Vector3(0, -10, 0) ]; // Resize handler window.addEventListener('resize', () => { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); composer.setSize(window.innerWidth, window.innerHeight); }); // Animation loop const clock = new THREE.Clock(); function animate() { requestAnimationFrame(animate); const time = clock.getElapsedTime(); particleMaterial.uniforms.time.value = time; // Update particles const positions = particles.attributes.position.array; for (let i = 0; i < PARTICLE_COUNT; i++) { const idx = i * 3; const pos = new THREE.Vector3(positions[idx], positions[idx + 1], positions[idx + 2]); // Apply velocity positions[idx] += velocities[idx]; positions[idx + 1] += velocities[idx + 1]; positions[idx + 2] += velocities[idx + 2]; // Apply gravitational pull from centers gravityCenters.forEach(center => { const dir = new THREE.Vector3().subVectors(center, pos).normalize(); const distSq = pos.distanceToSquared(center); const force = 0.1 / (distSq + 0.1); positions[idx] += dir.x * force; positions[idx + 1] += dir.y * force; positions[idx + 2] += dir.z * force; }); // Boundary check if (pos.length() > 20) { positions[idx] *= 0.95; positions[idx + 1] *= 0.95; positions[idx + 2] *= 0.95; } } particles.attributes.position.needsUpdate = true; // Update warp factor based on mouse position particleMaterial.uniforms.warpFactor.value = 1.0 + Math.sin(time * 0.5) * 0.5; controls.update(); composer.render(); } animate();