Voile Néon Infini Overdrive

import React, { useRef, useEffect, useMemo, useState } from 'react'; import * as THREE from 'three'; import { Canvas, useFrame, useThree } from '@react-three/fiber'; import { EffectComposer, Bloom, ChromaticAberration, Glitch, Noise, Vignette, DepthOfField, MotionBlur } from '@react-three/postprocessing'; import { BlendFunction, GlitchMode } from 'postprocessing'; import { UnrealBloomPass } from 'three-stdlib'; import { useTexture } from '@react-three/drei'; // ========== SHADERS ========== const ParticleShader = { vertexShader: ` attribute float size; attribute vec3 customColor; attribute float alpha; varying vec3 vColor; varying float vAlpha; void main() { vColor = customColor; vAlpha = alpha; vec4 mvPosition = modelViewMatrix * vec4(position, 1.0); gl_PointSize = size * (300.0 / -mvPosition.z); gl_Position = projectionMatrix * mvPosition; } `, fragmentShader: ` varying vec3 vColor; varying float vAlpha; void main() { float d = distance(gl_PointCoord, vec2(0.5)); if (d > 0.5) discard; float strength = 1.0 - smoothstep(0.0, 0.5, d); gl_FragColor = vec4(vColor, strength * vAlpha); } ` }; const GodRayShader = { vertexShader: ` varying vec2 vUv; void main() { vUv = uv; gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); } `, fragmentShader: ` uniform float time; uniform vec3 color; varying vec2 vUv; void main() { float ray = sin(vUv.x * 20.0 + time * 2.0) * 0.5 + 0.5; float fade = smoothstep(0.0, 0.3, vUv.y) * smoothstep(1.0, 0.7, vUv.y); vec3 finalColor = color * ray * fade * 2.0; gl_FragColor = vec4(finalColor, ray * fade); } ` }; // ========== STAGE 1: NEON VEIL DISTRICT ========== function NeonVeilStage({ playerRef, score }) { const rainRef = useRef(); const particlesRef = useRef(); const hologramRef = useRef(); const rainParticles = useMemo(() => { const count = 5000; const positions = new Float32Array(count * 3); const velocities = new Float32Array(count); for (let i = 0; i < count; i++) { positions[i * 3] = (Math.random() - 0.5) * 100; positions[i * 3 + 1] = Math.random() * 50; positions[i * 3 + 2] = (Math.random() - 0.5) * 100; velocities[i] = 0.5 + Math.random() * 0.5; } return { positions, velocities }; }, []); const neonParticles = useMemo(() => { const count = 2000; const positions = new Float32Array(count * 3); const colors = new Float32Array(count * 3); const sizes = new Float32Array(count); const alphas = new Float32Array(count); for (let i = 0; i < count; i++) { positions[i * 3] = (Math.random() - 0.5) * 80; positions[i * 3 + 1] = Math.random() * 30; positions[i * 3 + 2] = (Math.random() - 0.5) * 80; const colorChoice = Math.random(); if (colorChoice < 0.33) { colors[i * 3] = 1; colors[i * 3 + 1] = 0.2; colors[i * 3 + 2] = 0.8; } else if (colorChoice < 0.66) { colors[i * 3] = 0.2; colors[i * 3 + 1] = 1; colors[i * 3 + 2] = 0.8; } else { colors[i * 3] = 1; colors[i * 3 + 1] = 0.8; colors[i * 3 + 2] = 0.2; } sizes[i] = 0.5 + Math.random() * 2; alphas[i] = 0.3 + Math.random() * 0.7; } return { positions, colors, sizes, alphas }; }, []); useFrame((state) => { const time = state.clock.getElapsedTime(); // Rain animation if (rainRef.current) { const positions = rainRef.current.geometry.attributes.position.array; for (let i = 0; i < rainParticles.positions.length / 3; i++) { positions[i * 3 + 1] -= rainParticles.velocities[i] * 0.5; if (positions[i * 3 + 1] < 0) positions[i * 3 + 1] = 50; } rainRef.current.geometry.attributes.position.needsUpdate = true; } // Neon particles pulse if (particlesRef.current) { particlesRef.current.rotation.y = time * 0.1; const alphas = particlesRef.current.geometry.attributes.alpha; for (let i = 0; i < alphas.count; i++) { alphas.array[i] = 0.3 + Math.sin(time * 2 + i) * 0.3; } alphas.needsUpdate = true; } // Hologram pulse if (hologramRef.current) { hologramRef.current.material.emissiveIntensity = 2 + Math.sin(time * 3) * 1.5; hologramRef.current.rotation.y = time * 0.5; } }); return ( <group> {/* Ground with mirror reflection */} <mesh rotation={[-Math.PI / 2, 0, 0]} position={[0, -1, 0]}> <planeGeometry args={[200, 200]} /> <meshStandardMaterial color="#0a0a2e" metalness={0.9} roughness={0.1} envMapIntensity={2} /> </mesh> {/* Rain particles */} <points ref={rainRef}> <bufferGeometry> <bufferAttribute attach="attributes-position" args={[rainParticles.positions, 3]} /> </bufferGeometry> <pointsMaterial color="#88ccff" size={0.15} transparent opacity={0.6} blending={THREE.AdditiveBlending} /> </points> {/* Neon particles */} <points ref={particlesRef}> <bufferGeometry> <bufferAttribute attach="attributes-position" args={[neonParticles.positions, 3]} /> <bufferAttribute attach="attributes-customColor" args={[neonParticles.colors, 3]} /> <bufferAttribute attach="attributes-size" args={[neonParticles.sizes, 1]} /> <bufferAttribute attach="attributes-alpha" args={[neonParticles.alphas, 1]} /> </bufferGeometry> <shaderMaterial vertexShader={ParticleShader.vertexShader} fragmentShader={ParticleShader.fragmentShader} transparent blending={THREE.AdditiveBlending} depthWrite={false} /> </points> {/* Holographic buildings */} {[...Array(20)].map((_, i) => ( <mesh key={i} position={[ (Math.random() - 0.5) * 80, Math.random() * 20 + 2, (Math.random() - 0.5) * 80 ]} > <boxGeometry args={[2, 10 + Math.random() * 20, 2]} /> <meshStandardMaterial color={i % 3 === 0 ? '#ff00ff' : i % 3 === 1 ? '#00ffff' : '#ff8800'} emissive={i % 3 === 0 ? '#ff00ff' : i % 3 === 1 ? '#00ffff' : '#ff8800'} emissiveIntensity={1 + Math.random() * 2} transparent opacity={0.8} /> </mesh> ))} {/* Massive hologram */} <mesh ref={hologramRef} position={[0, 15, -30]}> <torusKnotGeometry args={[5, 1.5, 128, 32]} /> <meshStandardMaterial color="#ff00ff" emissive="#ff00ff" emissiveIntensity={2} wireframe /> </mesh> {/* Neon strips on ground */} {[...Array(10)].map((_, i) => ( <mesh key={i} position={[-40 + i * 8, 0.01, 0]} rotation={[-Math.PI / 2, 0, 0]}> <planeGeometry args={[4, 80]} /> <meshBasicMaterial color={i % 2 === 0 ? '#ff00ff' : '#00ffff'} transparent opacity={0.8} blending={THREE.AdditiveBlending} /> </mesh> ))} </group> ); } // ========== STAGE 2: AETHER SPIRE ========== function AetherSpireStage({ playerRef }) { const godRaysRef = useRef(); const floatingStructuresRef = useRef([]); const cloudParticles = useMemo(() => { const count = 3000; const positions = new Float32Array(count * 3); const colors = new Float32Array(count * 3); for (let i = 0; i < count; i++) { positions[i * 3] = (Math.random() - 0.5) * 100; positions[i * 3 + 1] = Math.random() * 20 - 5; positions[i * 3 + 2] = (Math.random() - 0.5) * 100; const brightness = 0.5 + Math.random() * 0.5; colors[i * 3] = brightness; colors[i * 3 + 1] = brightness * 0.9; colors[i * 3 + 2] = brightness; } return { positions, colors }; }, []); useFrame((state) => { const time = state.clock.getElapsedTime(); // God rays animation if (godRaysRef.current) { godRaysRef.current.children.forEach((ray, i) => { ray.material.uniforms.time.value = time; ray.rotation.z = time * 0.1 + i * 0.5; }); } // Floating structures floatingStructuresRef.current.forEach((structure, i) => { if (structure) { structure.position.y = Math.sin(time * 0.5 + i) * 2; structure.rotation.y = time * 0.2 + i; } }); }); return ( <group> {/* Sky */} <color attach="background" args={['#1a0a3e']} /> {/* Cloud layer */} <points> <bufferGeometry> <bufferAttribute attach="attributes-position" args={[cloudParticles.positions, 3]} /> <bufferAttribute attach="attributes-customColor" args={[cloudParticles.colors, 3]} /> </bufferGeometry> <pointsMaterial size={0.8} vertexColors transparent opacity={0.4} blending={THREE.AdditiveBlending} depthWrite={false} /> </points> {/* God rays */} <group ref={godRaysRef}> {[...Array(8)].map((_, i) => ( <mesh key={i} position={[0, 20, -20 + i * 5]}> <planeGeometry args={[3, 40]} /> <shaderMaterial vertexShader={GodRayShader.vertexShader} fragmentShader={GodRayShader.fragmentShader} uniforms={{ time: { value: 0 }, color: { value: new THREE.Color(i % 2 === 0 ? '#ffdd88' : '#88ddff') } }} transparent blending={THREE.AdditiveBlending} depthWrite={false} side={THREE.DoubleSide} /> </mesh> ))} </group> {/* Floating mega structures */} {[...Array(6)].map((_, i) => ( <group key={i} ref={(el) => (floatingStructuresRef.current[i] = el)} position={[ (Math.random() - 0.5) * 60, Math.random() * 10 + 5, -20 - Math.random() * 40 ]} > <mesh> <octahedronGeometry args={[3 + Math.random() * 3, 0]} /> <meshStandardMaterial color={i % 2 === 0 ? '#ffaa00' : '#00aaff'} emissive={i % 2 === 0 ? '#ffaa00' : '#00aaff'} emissiveIntensity={1.5} metalness={0.8} roughness={0.2} /> </mesh> <mesh position={[0, 5, 0]}> <torusGeometry args={[2, 0.5, 16, 32]} /> <meshStandardMaterial color="#ffffff" emissive="#ffffff" emissiveIntensity={2} metalness={0.9} roughness={0.1} /> </mesh> </group> ))} {/* Light pillars */} {[...Array(5)].map((_, i) => ( <mesh key={i} position={[-20 + i * 10, 10, -30]}> <cylinderGeometry args={[0.5, 2, 30, 8, 1, true]} /> <meshBasicMaterial color={i % 2 === 0 ? '#ffdd88' : '#88ddff'} transparent opacity={0.3} blending={THREE.AdditiveBlending} side={THREE.DoubleSide} /> </mesh> ))} </group> ); } // ========== STAGE 3: ECLIPSE NEXUS ========== function EclipseNexusStage({ playerRef, score }) { const auroraRef = useRef(); const dataStreamsRef = useRef([]); const auroraParticles = useMemo(() => { const count = 4000; const positions = new Float32Array(count * 3); const colors = new Float32Array(count * 3); for (let i = 0; i < count; i++) { positions[i * 3] = (Math.random() - 0.5) * 100; positions[i * 3 + 1] = Math.random() * 40; positions[i * 3 + 2] = (Math.random() - 0.5) * 100; const colorChoice = Math.random(); if (colorChoice < 0.33) { colors[i * 3] = 0.2; colors[i * 3 + 1] = 1; colors[i * 3 + 2] = 0.8; } else if (colorChoice < 0.66) { colors[i * 3] = 1; colors[i * 3 + 1] = 0.2; colors[i * 3 + 2] = 0.8; } else { colors[i * 3] = 0.8; colors[i * 3 + 1] = 0.2; colors[i * 3 + 2] = 1; } } return { positions, colors }; }, []); useFrame((state) => { const time = state.clock.getElapsedTime(); // Aurora animation if (auroraRef.current) { auroraRef.current.rotation.y = time * 0.2; auroraRef.current.material.opacity = 0.5 + Math.sin(time * 2) * 0.3; } // Data streams dataStreamsRef.current.forEach((stream, i) => { if (stream) { stream.position.y = (time * 10 + i * 5) % 60 - 30; stream.material.opacity = 0.3 + Math.sin(time * 3 + i) * 0.3; } }); }); return ( <group> {/* Aurora particles */} <points ref={auroraRef}> <bufferGeometry> <bufferAttribute attach="attributes-position" args={[auroraParticles.positions, 3]} /> <bufferAttribute attach="attributes-customColor" args={[auroraParticles.colors, 3]} /> </bufferGeometry> <pointsMaterial size={0.5} vertexColors transparent opacity={0.8} blending={THREE.AdditiveBlending} depthWrite={false} /> </points> {/* Data streams */} {[...Array(15)].map((_, i) => ( <mesh key={i} ref={(el) => (dataStreamsRef.current[i] = el)} position={[ (Math.random() - 0.5) * 80, 0, (Math.random() - 0.5) * 80 ]} > <boxGeometry args={[0.2, 60, 0.2]} /> <meshBasicMaterial color={i % 3 === 0 ? '#00ff88' : i % 3 === 1 ? '#ff0088' : '#ff8800'} transparent opacity={0.5} blending={THREE.AdditiveBlending} /> </mesh> ))} {/* Spectrum explosions */} {[...Array(5)].map((_, i) => ( <mesh key={i} position={[0, 0, -20 - i * 15]}> <sphereGeometry args={[3 + Math.sin(i) * 2, 32, 32]} /> <meshStandardMaterial color={i % 2 === 0 ? '#ff00ff' : '#00ffff'} emissive={i % 2 === 0 ? '#ff00ff' : '#00ffff'} emissiveIntensity={3} wireframe /> </mesh> ))} {/* Glitch floor */} <mesh rotation={[-Math.PI / 2, 0, 0]} position={[0, -1, 0]}> <planeGeometry args={[200, 200, 50, 50]} /> <meshStandardMaterial color="#0a0a2e" metalness={0.9} roughness={0.1} wireframe /> </mesh> </group> ); } // ========== PLAYER ========== function Player({ position, onScore, onCombo }) { const meshRef = useRef(); const trailRef = useRef(); const { camera } = useThree(); const trailParticles = useMemo(() => { const count = 100; const positions = new Float32Array(count * 3); return { positions }; }, []); useFrame((state) => { const time = state.clock.getElapsedTime(); if (meshRef.current) { meshRef.current.rotation.x = time * 5; meshRef.current.rotation.y = time * 3; meshRef.current.position.copy(position); // Trail effect const trailPositions = trailRef.current.geometry.attributes.position.array; for (let i = trailPositions.length / 3 - 1; i > 0; i--) { trailPositions[i * 3] = trailPositions[(i - 1) * 3]; trailPositions[i * 3 + 1] = trailPositions[(i - 1) * 3 + 1]; trailPositions[i * 3 + 2] = trailPositions[(i - 1) * 3 + 2]; } trailPositions[0] = position.x; trailPositions[1] = position.y; trailPositions[2] = position.z; trailRef.current.geometry.attributes.position.needsUpdate = true; } // Camera follow camera.position.lerp( new THREE.Vector3(position.x * 0.5, position.y * 0.5 + 5, position.z + 10), 0.1 ); camera.lookAt(position); }); return ( <group> <mesh ref={meshRef}> <icosahedronGeometry args={[1, 0]} /> <meshStandardMaterial color="#ffffff" emissive="#00ffff" emissiveIntensity={3} metalness={0.9} roughness={0.1} /> </mesh> {/* Trail */} <points ref={trailRef}> <bufferGeometry> <bufferAttribute attach="attributes-position" args={[trailParticles.positions, 3]} /> </bufferGeometry> <pointsMaterial color="#00ffff" size={0.3} transparent opacity={0.8} blending={THREE.AdditiveBlending} depthWrite={false} /> </points> </group> ); } // ========== OBSTACLES ========== function Obstacles({ position, onHit }) { const meshRef = useRef(); useFrame((state) => { if (meshRef.current) { meshRef.current.rotation.x += 0.05; meshRef.current.rotation.y += 0.03; } }); return ( <mesh ref={meshRef} position={position} onPointerOver={onHit} > <boxGeometry args={[2, 2, 2]} /> <meshStandardMaterial color="#ff0044" emissive="#ff0044" emissiveIntensity={2} metalness={0.5} roughness={0.5} /> </mesh> ); } // ========== MAIN GAME ========== function Game() { const [score, setScore] = useState(0); const [combo, setCombo] = useState(0); const [stage, setStage] = useState(0); const [gameOver, setGameOver] = useState(false); const [playerPos, setPlayerPos] = useState(new THREE.Vector3(0, 0, 0)); const [obstacles, setObstacles] = useState([]); const [flash, setFlash] = useState(false); const playerRef = useRef(); const keysRef = useRef({}); const touchRef = useRef({ x: 0, y: 0 }); const stageNames = ['NEON VEIL DISTRICT', 'AETHER SPIRE', 'ECLIPSE NEXUS']; useEffect(() => { const handleKeyDown = (e) => { keysRef.current[e.key.toLowerCase()] = true; }; const handleKeyUp = (e) => { keysRef.current[e.key.toLowerCase()] = false; }; const handleTouchStart = (e) => { touchRef.current = { x: e.touches[0].clientX, y: e.touches[0].clientY }; }; const handleTouchMove = (e) => { const dx = e.touches[0].clientX - touchRef.current.x; const dy = e.touches[0].clientY - touchRef.current.y; if (Math.abs(dx) > Math.abs(dy)) { keysRef.current[dx > 0 ? 'd' : 'a'] = true; keysRef.current[dx > 0 ? 'a' : 'd'] = false; } else { keysRef.current[dy > 0 ? 's' : 'w'] = true; keysRef.current[dy > 0 ? 'w' : 's'] = false; } touchRef.current = { x: e.touches[0].clientX, y: e.touches[0].clientY }; }; window.addEventListener('keydown', handleKeyDown); window.addEventListener('keyup', handleKeyUp); window.addEventListener('touchstart', handleTouchStart); window.addEventListener('touchmove', handleTouchMove); return () => { window.removeEventListener('keydown', handleKeyDown); window.removeEventListener('keyup', handleKeyUp); window.removeEventListener('touchstart', handleTouchStart); window.removeEventListener('touchmove', handleTouchMove); }; }, []); useEffect(() => { // Spawn obstacles const interval = setInterval(() => { if (!gameOver) { setObstacles(prev => [ ...prev, { id: Date.now(), position: new THREE.Vector3( (Math.random() - 0.5) * 8, Math.random() * 4, -30 ) } ]); } }, 1000); return () => clearInterval(interval); }, [gameOver]); useEffect(() => { // Score increment const interval = setInterval(() => { if (!gameOver) { setScore(prev => prev + 1); setCombo(prev => prev + 1); } }, 100); return () => clearInterval(interval); }, [gameOver]); useEffect(() => { // Stage transitions if (score > 0 && score % 500 === 0) { setFlash(true); setTimeout(() => { setStage(prev => (prev + 1) % 3); setFlash(false); }, 500); } }, [score]); useFrame(() => { if (!gameOver) { const speed = 0.3; const newPos = playerPos.clone(); if (keysRef.current['w'] || keysRef.current['arrowup']) newPos.y += speed; if (keysRef.current['s'] || keysRef.current['arrowdown']) newPos.y -= speed; if (keysRef.current['a'] || keysRef.current['arrowleft']) newPos.x -= speed; if (keysRef.current['d'] || keysRef.current['arrowright']) newPos.x += speed; newPos.x = Math.max(-8, Math.min(8, newPos.x)); newPos.y = Math.max(0, Math.min(8, newPos.y)); newPos.z -= 0.5; setPlayerPos(newPos); // Check collisions obstacles.forEach(obstacle => { if (newPos.distanceTo(obstacle.position) < 2) { setGameOver(true); } }); } }); return ( <div style={{ width: '100vw', height: '100vh', position: 'relative' }}> <Canvas camera={{ position: [0, 5, 10], fov: 75 }} gl={{ antialias: true, powerPreference: 'high-performance' }} > <color attach="background" args={['#000000']} /> <ambientLight intensity={0.2} /> <pointLight position={[10, 10, 10]} intensity={2} color="#ffffff" /> <pointLight position={[-10, 5, -10]} intensity={1.5} color="#ff00ff" /> <pointLight position={[0, 10, -20]} intensity={2} color="#00ffff" /> {stage === 0 && <NeonVeilStage playerRef={playerRef} score={score} />} {stage === 1 && <AetherSpireStage playerRef={playerRef} />} {stage === 2 && <EclipseNexusStage playerRef={playerRef} score={score} />} <Player position={playerPos} onScore={setScore} onCombo={setCombo} /> {obstacles.map(obstacle => ( <Obstacles key={obstacle.id} position={obstacle.position} onHit={() => setGameOver(true)} /> ))} <EffectComposer> <Bloom intensity={2.5} luminanceThreshold={0.2} luminanceSmoothing={0.9} mipmapBlur /> <ChromaticAberration blendFunction={BlendFunction.NORMAL} offset={[0.002, 0.002]} /> <Glitch delay={new THREE.Vector2(1.5, 3.5)} duration={new THREE.Vector2(0.1, 0.3)} strength={new THREE.Vector2(0.3, 1.0)} mode={GlitchMode.SPORADIC} /> <Noise opacity={0.02} /> <Vignette eskil={false} offset={0.1} darkness={0.9} /> <DepthOfField focusDistance={0.01} focalLength={0.02} bokehScale={2} /> <MotionBlur amplitude={0.5} blendFunction={BlendFunction.SCREEN} /> </EffectComposer> </Canvas> {/* HUD */} <div style={{ position: 'absolute', top: 20, left: 20, color: '#00ffff', fontFamily: 'monospace', fontSize: '24px', textShadow: '0 0 10px #00ffff', zIndex: 10 }}> <div>SCORE: {score}</div> <div>COMBO: x{combo}</div> <div style={{ fontSize: '16px', marginTop: '10px' }}> STAGE: {stageNames[stage]} </div> </div> {/* Stage transition flash */} {flash && ( <div style={{ position: 'absolute', top: 0, left: 0, width: '100%', height: '100%', backgroundColor: 'white', opacity: 0.8, zIndex: 20, animation: 'flash 0.5s ease-out' }} /> )} {/* Game over overlay */} {gameOver && ( <div style={{ position: 'absolute', top: 0, left: 0, width: '100%', height: '100%', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', backgroundColor: 'rgba(0, 0, 0, 0.8)', zIndex: 30 }}> <h1 style={{ color: '#ff0044', fontFamily: 'monospace', fontSize: '48px', textShadow: '0 0 20px #ff0044' }}> GAME OVER </h1> <p style={{ color: '#00ffff', fontFamily: 'monospace', fontSize: '24px' }}> FINAL SCORE: {score} </p> <button onClick={() => { setScore(0); setCombo(0); setStage(0); setGameOver(false); setObstacles([]); setPlayerPos(new THREE.Vector3(0, 0, 0)); }} style={{ marginTop: '20px', padding: '15px 30px', fontSize: '20px', backgroundColor: '#00ffff', color: '#000000', border: 'none', cursor: 'pointer', fontFamily: 'monospace', textTransform: 'uppercase' }} > RESTART </button> </div> )} <style>{` @keyframes flash { 0% { opacity: 1; } 100% { opacity: 0; } } `}</style> </div> ); } export default function App() { return <Game />; }