// Import ShaderMaterial components explicitly if needed, though they are part of THREE import * as THREE from 'three'; import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer.js'; import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass.js'; import { UnrealBloomPass } from 'three/examples/jsm/postprocessing/UnrealBloomPass.js'; import { createParticles, updateParticles } from 'particleUtils'; // Import particle functions // Removed SquiggleMaterial import const PARTICLE_COUNT = 80; // Significantly reduced particle count export class SceneSetup { constructor(container) { this.container = container; this.backgroundMaterial = null; this.bloomPass = null; this.clock = new THREE.Clock(); // Shared Clock for transitions and particles this.particleGeometry = null; this.particlePoints = null; this.originalParticleBaseColors = null; // Store original particle colors this.originalParticleSize = 0.5; // Store default particle size (matches creation) this.originalParticleOpacity = 0.7; // Store default opacity (matches creation) this.particleInteractionPoints = []; // Array to hold interaction coords for one frame // Removed squiggleMaterial reference // Original Shader Colors (using only 2 now for simpler gradient) this.originalColors = { color1: new THREE.Color(0xff9ce3), // Top color color2: new THREE.Color(0x90f2ff) // Bottom color }; this.whiteColor = new THREE.Color(0xffffff); // Target for bright mode // Transition state this.isTransitioning = false; this.transitionStartTime = 0; this.transitionDuration = 0.7; // seconds this.startBrightness = 1.0; this.targetBrightness = 1.0; this.startSaturation = 1.0; this.targetSaturation = 1.0; // Store start/target colors directly, avoid intermediate copy if possible this.startColor1 = this.originalColors.color1.clone(); this.startColor2 = this.originalColors.color2.clone(); this.targetColor1 = this.originalColors.color1.clone(); this.targetColor2 = this.originalColors.color2.clone(); this.targetIsBright = true; // Default to bright mode // Scene this.scene = new THREE.Scene(); this.createBackgroundGradient(); // Render order -1 // Removed createSquiggleLayer() call // Camera const aspect = container.clientWidth / container.clientHeight; this.camera = new THREE.PerspectiveCamera(50, aspect, 0.1, 100); this.resetCamera(); // Renderer this.renderer = new THREE.WebGLRenderer({ antialias: true }); this.renderer.setSize(container.clientWidth, container.clientHeight); this.renderer.setPixelRatio(window.devicePixelRatio); this.renderer.shadowMap.enabled = true; this.renderer.shadowMap.type = THREE.PCFSoftShadowMap; // Softer shadows container.appendChild(this.renderer.domElement); // Post-processing Composer this.composer = new EffectComposer(this.renderer); const renderPass = new RenderPass(this.scene, this.camera); this.composer.addPass(renderPass); // Create and store the bloom pass this.bloomPass = new UnrealBloomPass( new THREE.Vector2(container.clientWidth, container.clientHeight), 0.5, // Initial strength for bright mode (was 0.7) 0.5, // radius 0.05 // threshold for bright mode ); this.composer.addPass(this.bloomPass); // Lighting const ambientLight = new THREE.AmbientLight(0xffffff, 0.4); // Reduced ambient to let bloom shine this.scene.add(ambientLight); const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8); directionalLight.position.set(5, 10, 7.5); // Angled light directionalLight.castShadow = true; // Configure shadow properties for quality/performance directionalLight.shadow.mapSize.width = 1024; directionalLight.shadow.mapSize.height = 1024; directionalLight.shadow.camera.near = 0.5; directionalLight.shadow.camera.far = 50; directionalLight.shadow.camera.left = -15; directionalLight.shadow.camera.right = 15; directionalLight.shadow.camera.top = 15; directionalLight.shadow.camera.bottom = -15; this.scene.add(directionalLight); // Optional: Light Helper (Uncomment for debugging light direction) // import { DirectionalLightHelper } from 'three'; // const helper = new DirectionalLightHelper(directionalLight, 5); // this.scene.add(helper); this.scene.add(directionalLight); this.createParticleSystem(); // Create particles this.initializeParticlesForBrightMode(); // Set initial bright state for particles // Handle Resize window.addEventListener('resize', this.onWindowResize.bind(this), false); } createBackgroundGradient() { const geometry = new THREE.PlaneGeometry(2, 2); // Covers the entire viewport this.backgroundMaterial = new THREE.ShaderMaterial({ uniforms: { time: { value: 0 }, color1: { value: this.originalColors.color1.clone() }, // Already defaults to bright color2: { value: this.originalColors.color2.clone() }, // Already defaults to bright resolution: { value: new THREE.Vector2(this.container.clientWidth, this.container.clientHeight) }, brightnessFactor: { value: 1.0 }, // Already defaults to bright saturationFactor: { value: 1.0 } // Already defaults to bright }, vertexShader: ` varying vec2 vUv; void main() { vUv = uv; gl_Position = vec4(position.xy, 1.0, 1.0); // Directly map to screen } `, fragmentShader: ` uniform float time; uniform vec3 color1; // Top uniform vec3 color2; // Bottom uniform vec2 resolution; uniform float brightnessFactor; uniform float saturationFactor; varying vec2 vUv; // Function to convert RGB to HSL (approximation) vec3 rgb2hsl(vec3 color) { float maxC = max(max(color.r, color.g), color.b); float minC = min(min(color.r, color.g), color.b); float l = (maxC + minC) / 2.0; float h = 0.0, s = 0.0; if (maxC != minC) { float d = maxC - minC; s = l > 0.5 ? d / (2.0 - maxC - minC) : d / (maxC + minC); if (maxC == color.r) h = (color.g - color.b) / d + (color.g < color.b ? 6.0 : 0.0); else if (maxC == color.g) h = (color.b - color.r) / d + 2.0; else h = (color.r - color.g) / d + 4.0; h /= 6.0; } return vec3(h, s, l); } // Function to convert HSL to RGB (approximation) float hue2rgb(float p, float q, float t) { if (t < 0.0) t += 1.0; if (t > 1.0) t -= 1.0; if (t < 1.0/6.0) return p + (q - p) * 6.0 * t; if (t < 1.0/2.0) return q; if (t < 2.0/3.0) return p + (q - p) * (2.0/3.0 - t) * 6.0; return p; } vec3 hsl2rgb(vec3 hsl) { float h = hsl.x, s = hsl.y, l = hsl.z; float r, g, b; if (s == 0.0) { r = g = b = l; // achromatic } else { float q = l < 0.5 ? l * (1.0 + s) : l + s - l * s; float p = 2.0 * l - q; r = hue2rgb(p, q, h + 1.0/3.0); g = hue2rgb(p, q, h); b = hue2rgb(p, q, h - 1.0/3.0); } return vec3(r, g, b); } void main() { // Check for the explicit white mode condition first if (saturationFactor == 0.0 && brightnessFactor == 1.0) { gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0); // Pure white return; } // Simple vertical gradient mixing with time-based offset float timeFactor = time * 0.05; // Gentle vertical movement speed float mixFactor = smoothstep(0.2, 0.8, vUv.y + sin(timeFactor + vUv.x * 2.0) * 0.1); vec3 mixedColor = mix(color1, color2, mixFactor); // Mix between top (color1) and bottom (color2) // Adjust saturation and brightness using HSL conversion vec3 hsl = rgb2hsl(mixedColor); hsl.y *= saturationFactor; // Apply saturation hsl.z *= brightnessFactor; // Apply brightness vec3 finalColor = hsl2rgb(hsl); gl_FragColor = vec4(clamp(finalColor, 0.0, 1.0), 1.0); // Clamp final color } `, depthTest: false, // Render behind everything depthWrite: false }); const backgroundMesh = new THREE.Mesh(geometry, this.backgroundMaterial); backgroundMesh.renderOrder = -1; // Ensure it's rendered first/behind this.scene.add(backgroundMesh); } // Removed createSquiggleLayer() method createParticleSystem() { this.particleGeometry = createParticles(PARTICLE_COUNT, this.camera); // Create a simple square texture using Canvas const canvas = document.createElement('canvas'); canvas.width = 16; // Small texture size canvas.height = 16; const context = canvas.getContext('2d'); context.fillStyle = 'white'; context.fillRect(0, 0, 16, 16); // Fill with white const squareTexture = new THREE.CanvasTexture(canvas); // Store original size/opacity from material creation this.originalParticleSize = 0.5; this.originalParticleOpacity = 0.7; const particleMaterial = new THREE.PointsMaterial({ map: squareTexture, // Use the square texture size: this.originalParticleSize, // Use stored value vertexColors: true, sizeAttenuation: true, transparent: true, opacity: this.originalParticleOpacity, // Use stored value depthWrite: false, blending: THREE.NormalBlending // alphaTest: 0.5 // Optional: helps with hard edges if needed }); this.particlePoints = new THREE.Points(this.particleGeometry, particleMaterial); // Store the original generated colors if (this.particleGeometry.userData.baseColors) { this.originalParticleBaseColors = new Float32Array(this.particleGeometry.userData.baseColors); } // this.particlePoints.renderOrder = 0.5; // Render order less critical now this.scene.add(this.particlePoints); } // New method to set initial particle state for bright mode initializeParticlesForBrightMode() { if (!this.particleGeometry || !this.originalParticleBaseColors || !this.particlePoints) return; const baseColors = this.particleGeometry.userData.baseColors; const blackColor = new THREE.Color(0x000000); const particleCount = this.particleGeometry.userData.count; // Set colors to black for (let i = 0; i < particleCount; i++) { const i3 = i * 3; baseColors[i3] = blackColor.r; baseColors[i3 + 1] = blackColor.g; baseColors[i3 + 2] = blackColor.b; } this.particleGeometry.attributes.color.needsUpdate = true; // Set size and opacity this.particlePoints.material.size = this.originalParticleSize * 1.3; // Larger size this.particlePoints.material.opacity = this.originalParticleOpacity; // Original opacity this.particlePoints.material.needsUpdate = true; } // Called by Game logic to register an interaction at a world position addParticleInteraction(worldPosition) { // Add a copy to avoid issues if the original vector changes this.particleInteractionPoints.push(worldPosition.clone()); } updateParticles(lastMoveDirection) { // Accept lastMoveDirection if (this.particleGeometry && this.particlePoints) { // Pass the current interaction points and the direction, then clear interaction points updateParticles(this.particleGeometry, this.particlePoints, this.clock, this.camera, this.particleInteractionPoints, lastMoveDirection); // Pass direction this.particleInteractionPoints = []; // Reset interaction points for next frame } // Removed squiggle material time update } resetCamera() { const distance = 20; // Adjust distance based on grid size this.camera.position.set(0, -distance * 0.5, distance); // Position back and slightly up this.camera.lookAt(0, 0, 0); // Look at the center of the grid this.camera.updateProjectionMatrix(); } onWindowResize() { const width = this.container.clientWidth; const height = this.container.clientHeight; this.camera.aspect = width / height; this.camera.updateProjectionMatrix(); this.renderer.setSize(width, height); this.composer.setSize(width, height); // Update composer size too // Update background shader resolution uniform if (this.backgroundMaterial) { this.backgroundMaterial.uniforms.resolution.value.set(width, height); this.backgroundMaterial.uniforms.resolution.value.set(width, height); } // Removed squiggle shader resolution update // Optional: Update particle bounds on resize if necessary, // though the current implementation adapts reasonably well. } // Starts the background transition setGlowMode(isBright) { if (this.isTransitioning) return; // Don't start a new one if already transitioning this.targetIsBright = isBright; // Store the final target state // --- Immediately update particle base colors based on the target mode --- if (this.particleGeometry && this.originalParticleBaseColors) { const baseColors = this.particleGeometry.userData.baseColors; const blackColor = new THREE.Color(0x000000); // Pure black for bright mode const particleCount = this.particleGeometry.userData.count; if (isBright) { // Bright Mode: Black, larger particles this.particlePoints.material.size = this.originalParticleSize * 1.3; // Increase size slightly this.particlePoints.material.opacity = this.originalParticleOpacity; // Keep original opacity for now for (let i = 0; i < particleCount; i++) { const i3 = i * 3; baseColors[i3] = blackColor.r; baseColors[i3 + 1] = blackColor.g; baseColors[i3 + 2] = blackColor.b; } } else { // Dark Mode: Restore original colors, size, and opacity this.particlePoints.material.size = this.originalParticleSize; this.particlePoints.material.opacity = this.originalParticleOpacity; for (let i = 0; i < particleCount; i++) { const i3 = i * 3; baseColors[i3] = this.originalParticleBaseColors[i3]; baseColors[i3 + 1] = this.originalParticleBaseColors[i3 + 1]; baseColors[i3 + 2] = this.originalParticleBaseColors[i3 + 2]; } } // Mark the color attribute buffer as needing an update this.particleGeometry.attributes.color.needsUpdate = true; this.particlePoints.material.needsUpdate = true; // Update material properties too } // --- End Particle Appearance Update --- // Store starting values from current uniforms for background transition this.startBrightness = this.backgroundMaterial.uniforms.brightnessFactor.value; this.startSaturation = this.backgroundMaterial.uniforms.saturationFactor.value; this.startColor1.copy(this.backgroundMaterial.uniforms.color1.value); this.startColor2.copy(this.backgroundMaterial.uniforms.color2.value); // Define target values for background transition based on desired mode if (isBright) { // **Bright Mode: Restore original vaporwave colors** this.targetBrightness = 1.0; this.targetSaturation = 1.0; // Full saturation this.targetColor1.copy(this.originalColors.color1); // Original color 1 this.targetColor2.copy(this.originalColors.color2); // Original color 2 } else { // **Dark Mode: Pure Black Background** this.targetBrightness = 0.0; // Set brightness to 0 for black this.targetSaturation = 0.0; // Set saturation to 0 as well (optional, but reinforces black) // Target colors don't strictly matter when brightness is 0, but setting them doesn't hurt this.targetColor1.set(0x000000); // Target black this.targetColor2.set(0x000000); // Target black } this.isTransitioning = true; this.transitionStartTime = this.clock.getElapsedTime(); // Use internal clock // IMPORTANT: Bloom pass settings will be updated in updateShaderTransition when done } // Updates the transition progress - MUST be called in the main animation loop updateShaderTransition() { if (!this.isTransitioning || !this.backgroundMaterial) return; const elapsedTime = this.clock.getElapsedTime() - this.transitionStartTime; let progress = Math.min(elapsedTime / this.transitionDuration, 1.0); // Apply easing (e.g., ease-in-out cubic) const easedProgress = progress < 0.5 ? 4 * progress * progress * progress : 1 - Math.pow(-2 * progress + 2, 3) / 2; // Interpolate uniforms (Brightness, Saturation, and Colors) const currentBrightness = THREE.MathUtils.lerp(this.startBrightness, this.targetBrightness, easedProgress); const currentSaturation = THREE.MathUtils.lerp(this.startSaturation, this.targetSaturation, easedProgress); // Interpolate the two colors this.backgroundMaterial.uniforms.color1.value.lerpColors(this.startColor1, this.targetColor1, easedProgress); this.backgroundMaterial.uniforms.color2.value.lerpColors(this.startColor2, this.targetColor2, easedProgress); this.backgroundMaterial.uniforms.brightnessFactor.value = currentBrightness; this.backgroundMaterial.uniforms.saturationFactor.value = currentSaturation; // Check if transition finished if (progress >= 1.0) { this.isTransitioning = false; // Ensure final values are set exactly this.backgroundMaterial.uniforms.brightnessFactor.value = this.targetBrightness; this.backgroundMaterial.uniforms.saturationFactor.value = this.targetSaturation; this.backgroundMaterial.uniforms.color1.value.copy(this.targetColor1); this.backgroundMaterial.uniforms.color2.value.copy(this.targetColor2); // Now apply the bloom pass settings for the target state if (this.bloomPass) { if (this.targetIsBright) { // Now means original vaporwave colors // Apply bloom settings for vibrant background this.bloomPass.strength = 0.5; // Strength for bright mode this.bloomPass.threshold = 0.05; // Threshold for bright mode this.bloomPass.radius = 0.5; // Radius for bright mode } else { // Dark mode settings // Apply weaker bloom settings for dark background this.bloomPass.strength = 0.6; this.bloomPass.threshold = 0.8; // Higher threshold as background is darker this.bloomPass.radius = 0.5; } } // Removed extra closing brace here } } }