Iris Energy Core

Iris Energy Core export const pointVert = /* glsl */` uniform float uTime; uniform float uPointSize; attribute float aSize; attribute float aSeed; varying float vIntensity; void main() { // subtle pulsation by seed and time float pulse = 0.6 + 0.4 * sin(uTime * 1.2 + aSeed * 12.989); vIntensity = pulse; vec4 mvPosition = modelViewMatrix * vec4(position, 1.0); gl_PointSize = uPointSize * aSize * (300.0 / -mvPosition.z); gl_Position = projectionMatrix * mvPosition; } `; export const pointFrag = /* glsl */` precision highp float; uniform vec3 uColorA; uniform vec3 uColorB; uniform float uTime; varying float vIntensity; void main() { // circular soft point vec2 uv = gl_PointCoord - 0.5; float dist = length(uv); float mask = smoothstep(0.5, 0.0, dist); // radial glow falloff float glow = pow(mask, 2.0); // color shift hue between cyan-blue range float t = 0.5 + 0.5 * sin(uTime * 0.6 + vIntensity * 2.0); vec3 color = mix(uColorA, uColorB, t); vec3 col = color * (0.25 + glow * 1.5 * vIntensity); gl_FragColor = vec4(col, glow * 0.9 * vIntensity); // additive blending will make it glow } `; export const strandVert = /* glsl */` uniform float uTime; uniform float uPulse; attribute float aSeed; varying float vAlong; varying float vSeed; // simple hash float hash(float n){ return fract(sin(n) * 43758.5453123); } void main() { vSeed = aSeed; vAlong = position.y; // tube's param along its axis (we'll set Y as along) // compute wave displace orthogonally using a seed-derived orientation float seed = aSeed * 10.0; // wave that travels along the strand float wave = sin((vAlong * 8.0) + uTime * (0.6 + hash(seed) * 0.8) + seed) * (0.03 + hash(seed + 1.0) * 0.08); // curvature / bend per strand using seed float bend = (hash(seed + 2.0) - 0.5) * 0.8; vec3 displaced = position; // apply radial outward push and wave perpendicular on local xz plane displaced.x += normal.x * wave + bend * (1.0 - smoothstep(0.0, 1.0, vAlong)) * 0.2; displaced.z += normal.z * wave; // mild breathing scale float scale = 1.0 + 0.08 * sin(uTime * 1.2 + aSeed * 6.28) * uPulse; displaced *= scale; vec4 mvPosition = modelViewMatrix * vec4(displaced, 1.0); gl_Position = projectionMatrix * mvPosition; } `; export const strandFrag = /* glsl */` precision highp float; uniform vec3 uColor; uniform vec3 uColorAlt; uniform float uTime; uniform float uOpacity; uniform float uGlow; varying float vAlong; varying float vSeed; void main() { // color shifts slightly along the strand and time float t = smoothstep(0.0, 1.0, vAlong); float flicker = 0.5 + 0.5 * sin(uTime * 3.0 + vSeed * 10.0); vec3 col = mix(uColor, uColorAlt, 0.2 + 0.8 * t); col = mix(col, vec3(1.0), 0.2 * pow(flicker, 2.0)); // alpha falloff at tips float alpha = smoothstep(0.0, 0.2, t) * (1.0 - smoothstep(0.98, 1.0, t)); // add glow factor float glow = uGlow * (0.5 + 0.5 * sin(vSeed * 12.0 + uTime * 2.0)); gl_FragColor = vec4(col * (0.6 + glow), alpha * uOpacity); } `; export const bgVert = /* glsl */` varying vec2 vUv; void main(){ vUv = uv; gl_Position = vec4(position, 1.0); } `; export const bgFrag = /* glsl */` precision highp float; varying vec2 vUv; uniform float uTime; // rainbow beams with soft blending vec3 palette(float t){ // smooth rainbow return vec3( 0.5 + 0.5 * cos(6.28318 * (t + 0.0) + 0.0), 0.5 + 0.5 * cos(6.28318 * (t + 0.33) + 0.0), 0.5 + 0.5 * cos(6.28318 * (t + 0.66) + 0.0) ); } void main(){ vec2 uv = vUv; vec2 center = vec2(0.5, 0.45); vec2 p = uv - center; float r = length(p); float angle = atan(p.y, p.x); // beam pattern float beams = 0.0; float N = 6.0; for(float i=0.0;i<6.0;i++){ float a = (i / N) * 6.2831 + uTime * 0.03; float d = abs(sin( (angle - a) * 0.5 )) ; beams += smoothstep(0.0, 0.5, 1.0 - d); } beams = clamp(beams / 3.0, 0.0, 1.0); // radial vignette float vignette = smoothstep(0.9, 0.2, r); // color gradient by angle combined with beams float t = (angle + 3.14159) / 6.28318; vec3 col = palette(t); // pastel + desaturated mix col = mix(col * 0.9, vec3(0.05,0.02,0.08), 0.2); // combine beams (brighter center beams + gradient) float centerGlow = smoothstep(0.6, 0.0, r) * 1.2; vec3 final = col * (0.2 + 0.8 * beams) + palette(t + 0.1) * centerGlow; final = mix(vec3(0.02,0.01,0.02), final, vignette); gl_FragColor = vec4(final, 1.0); } `; import * as THREE from 'three'; import { pointVert, pointFrag } from './shaders.js'; export function createPointCloud(radius = 3.0, count = 18000, holeAngle = Math.PI * 0.22) { const geometry = new THREE.BufferGeometry(); const positions = new Float32Array(count * 3); const sizes = new Float32Array(count); const seeds = new Float32Array(count); let i3 = 0; for (let i = 0; i < count; i++) { // sample spherical coordinates const u = Math.random(); const v = Math.random(); const theta = 2.0 * Math.PI * u; // polar angle from 0..PI const phi = Math.acos(2.0 * v - 1.0); // create central hole by skipping points within a polar cone around forward direction (phi near PI/2) const polarFromCenter = Math.abs(Math.PI / 2.0 - phi); if (polarFromCenter < holeAngle && Math.random() < 0.78) { // bias skip to create clear pupil; not exact count but fine i--; continue; } const r = radius + (Math.random() - 0.5) * 0.02; // slight jitter const x = r * Math.sin(phi) * Math.cos(theta); const y = r * Math.cos(phi); const z = r * Math.sin(phi) * Math.sin(theta); positions[i3] = x; positions[i3 + 1] = y; positions[i3 + 2] = z; sizes[i] = 0.6 + Math.random() * 1.6; seeds[i] = Math.random(); i3 += 3; } // slice arrays to actual filled count if we skipped const actualCount = i3 / 3; geometry.setAttribute('position', new THREE.BufferAttribute(positions.slice(0, i3), 3)); geometry.setAttribute('aSize', new THREE.BufferAttribute(sizes.slice(0, actualCount), 1)); geometry.setAttribute('aSeed', new THREE.BufferAttribute(seeds.slice(0, actualCount), 1)); const material = new THREE.ShaderMaterial({ vertexShader: pointVert, fragmentShader: pointFrag, transparent: true, depthWrite: false, blending: THREE.AdditiveBlending, uniforms: { uTime: { value: 0 }, uPointSize: { value: 24.0 }, uColorA: { value: new THREE.Color(0x66f0ff) }, uColorB: { value: new THREE.Color(0x3aa6ff) } } }); const points = new THREE.Points(geometry, material); return { mesh: points, update: (t) => { material.uniforms.uTime.value = t; } }; } import * as THREE from 'three'; import { strandVert, strandFrag } from './shaders.js'; function randomOnRing(radius, angle) { const a = angle; const x = Math.cos(a) * radius; const z = Math.sin(a) * radius; return new THREE.Vector3(x, 0, z); } export class Strands { constructor(opts = {}) { this.count = opts.count || 140; this.innerRadius = opts.innerRadius || 0.9; this.outerRadius = opts.outerRadius || 2.6; this.strands = []; this.group = new THREE.Group(); // params for shaders this.uniforms = { uTime: { value: 0 }, uPulse: { value: 1.0 }, uColor: { value: new THREE.Color(0xffffff) }, uColorAlt: { value: new THREE.Color(0xc8ffff) }, uOpacity: { value: 0.9 }, uGlow: { value: 0.9 } }; this._build(); } _build() { for (let i = 0; i < this.count; i++) { const angle = (i / this.count) * Math.PI * 2.0; const baseRadius = this.innerRadius + (Math.random() * (this.outerRadius - this.innerRadius)); // create control points of a curve that bends outward and up const p0 = randomOnRing(baseRadius, angle); const p1 = p0.clone().lerp(new THREE.Vector3(0, 0.8, 0), 0.2); // slight inward const bend = new THREE.Vector3( p0.x * (1.0 + 0.2 * Math.random()), 0.6 + Math.random() * 0.8, p0.z * (1.0 + 0.2 * Math.random()) ); const p2 = bend; const p3 = p2.clone().add(new THREE.Vector3((Math.random()-0.5)*0.4, 0.6 + Math.random()*1.6, (Math.random()-0.5)*0.4)); const curve = new THREE.CatmullRomCurve3([p0, p1, p2, p3]); const tubularSegments = 120; const radius = 0.02 + Math.random() * 0.04; const radialSegments = 6; const closed = false; const geometry = new THREE.TubeBufferGeometry(curve, tubularSegments, radius, radialSegments, closed); // add an attribute for seed per vertex (we'll set constant per strand) const seedVal = Math.random(); const vertexCount = geometry.attributes.position.count; const seeds = new Float32Array(vertexCount); for (let v = 0; v < vertexCount; v++) seeds[v] = seedVal; geometry.setAttribute('aSeed', new THREE.BufferAttribute(seeds, 1)); const material = new THREE.ShaderMaterial({ vertexShader: strandVert, fragmentShader: strandFrag, transparent: true, depthWrite: false, blending: THREE.AdditiveBlending, side: THREE.DoubleSide, uniforms: this.uniforms }); const mesh = new THREE.Mesh(geometry, material); // rotate outward slightly for variety mesh.lookAt(new THREE.Vector3(0, 0.5, 0)); this.group.add(mesh); this.strands.push({ mesh, seed: seedVal }); } } addTo(scene) { scene.add(this.group); } update(t) { this.uniforms.uTime.value = t; // breathing pulse oscillation const pulse = 0.6 + 0.4 * (0.5 + 0.5 * Math.sin(t * 1.4)); this.uniforms.uPulse.value = pulse; // optionally small per-strand rotation over time for organic motion for (let i = 0; i < this.strands.length; i++) { const s = this.strands[i]; s.mesh.rotation.y = 0.002 * Math.sin(t * 0.6 + s.seed * 10.0); } } } import * as THREE from 'three'; import { bgVert, bgFrag } from './shaders.js'; export function createBackground() { const geometry = new THREE.PlaneGeometry(2, 2); const material = new THREE.ShaderMaterial({ vertexShader: bgVert, fragmentShader: bgFrag, uniforms: { uTime: { value: 0 } }, depthWrite: false, depthTest: false, side: THREE.DoubleSide }); const mesh = new THREE.Mesh(geometry, material); // render background on a separate scene with an orthographic camera const scene = new THREE.Scene(); const camera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1); scene.add(mesh); return { scene, camera, mesh, update: (t) => { material.uniforms.uTime.value = t; } }; } 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 { UnrealBloomPass } from 'three/addons/postprocessing/UnrealBloomPass.js'; import { GUI } from 'three/addons/libs/lil-gui.module.min.js'; import { createPointCloud } from './pointCloud.js'; import { Strands } from './strands.js'; import { createBackground } from './background.js'; // Renderer const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: false }); renderer.setSize(window.innerWidth, window.innerHeight); renderer.setPixelRatio(window.devicePixelRatio); renderer.toneMappingExposure = 1.0; document.body.appendChild(renderer.domElement); // Scene and Camera const scene = new THREE.Scene(); // We'll keep background rendered via a secondary scene and composer // Main perspective camera: const camera = new THREE.PerspectiveCamera(48, window.innerWidth / window.innerHeight, 0.1, 100); camera.position.set(0.0, 0.6, 6.0); camera.lookAt(0, 0.2, 0); // Controls (for interactive exploration) const controls = new OrbitControls(camera, renderer.domElement); controls.enableDamping = true; controls.enablePan = false; controls.minDistance = 3.5; controls.maxDistance = 12; controls.minPolarAngle = 0.2; controls.maxPolarAngle = Math.PI / 2.0; // Background (fullscreen quad) const bg = createBackground(); // Lights const ambient = new THREE.AmbientLight(0xffffff, 0.12); scene.add(ambient); // soft directional rim light (not critical because glow uses additive) const rim = new THREE.DirectionalLight(0xeeffee, 0.25); rim.position.set(-1, 1, 1); scene.add(rim); // Objects: point cloud sphere const pointCloud = createPointCloud(2.6, 16000, Math.PI * 0.28); pointCloud.mesh.rotation.y = 0.0; scene.add(pointCloud.mesh); // Strands (feathers) const strands = new Strands({ count: 160, innerRadius: 1.0, outerRadius: 2.4 }); strands.addTo(scene); // subtle inner rim disk to hint central pupil edge (non-emissive) const pupilGeometry = new THREE.CircleGeometry(0.9, 64); const pupilMaterial = new THREE.MeshBasicMaterial({ color: 0x020205, side: THREE.DoubleSide }); const pupil = new THREE.Mesh(pupilGeometry, pupilMaterial); pupil.rotation.x = -Math.PI / 2; pupil.position.y = -0.02; scene.add(pupil); // Postprocessing: composer that renders background scene first, then main scene with bloom const composer = new EffectComposer(renderer); const renderPassBG = new RenderPass(bg.scene, bg.camera); // background quad composer.addPass(renderPassBG); // main main scene pass with same camera const renderPassMain = new RenderPass(scene, camera); composer.addPass(renderPassMain); // surreal bloom const bloomPass = new UnrealBloomPass(new THREE.Vector2(window.innerWidth, window.innerHeight), 0.9, 0.6, 0.9); bloomPass.threshold = 0.12; bloomPass.strength = 0.9; bloomPass.radius = 0.8; composer.addPass(bloomPass); // Animation loop timing const clock = new THREE.Clock(); // GUI for tuning (optional) const gui = new GUI({ width: 300 }); const bloomFolder = gui.addFolder('Bloom'); bloomFolder.add(bloomPass, 'strength', 0.0, 3.0, 0.01); bloomFolder.add(bloomPass, 'radius', 0.0, 2.0, 0.01); bloomFolder.add(bloomPass, 'threshold', 0.0, 1.0, 0.01); bloomFolder.open(); function onWindowResize() { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); renderer.setPixelRatio(window.devicePixelRatio); composer.setSize(window.innerWidth, window.innerHeight); } window.addEventListener('resize', onWindowResize, false); function animate() { const t = clock.getElapsedTime(); requestAnimationFrame(animate); // update background bg.update(t * 0.6); // update point cloud and strands pointCloud.update(t); strands.update(t); // slowly rotate sphere pointCloud.mesh.rotation.y = t * 0.06; controls.update(); // render background + scene + bloom through composer composer.render(); } animate();