ネオンヴェイル・インフィニティ・オーバードライブ

import React, { useRef, useEffect, useMemo, useState, useCallback } 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 } from 'postprocessing'; import { OrbitControls } from '@react-three/drei'; import * as Tone from 'tone'; // ====== SHADERS ====== const GodRayShader = { uniforms: { tDiffuse: { value: null }, lightPosition: { value: new THREE.Vector2(0.5, 0.5) }, density: { value: 0.8 }, decay: { value: 0.9 }, weight: { value: 0.3 }, samples: { value: 60 } }, vertexShader: ` varying vec2 vUv; void main() { vUv = uv; gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); } `, fragmentShader: ` uniform sampler2D tDiffuse; uniform vec2 lightPosition; uniform float density; uniform float decay; uniform float weight; uniform int samples; varying vec2 vUv; void main() { vec2 texCoord = vUv; vec2 deltaTexCoord = (texCoord - lightPosition) * density / float(samples); vec2 illuminationDecay = vec2(1.0); vec4 color = texture2D(tDiffuse, texCoord); for(int i = 0; i < 60; i++) { if(i >= samples) break; texCoord -= deltaTexCoord; vec4 sample = texture2D(tDiffuse, texCoord); sample *= illuminationDecay * weight; color += sample; illuminationDecay *= decay; } gl_FragColor = color; } ` }; const AuroraShader = { uniforms: { time: { value: 0 }, color1: { value: new THREE.Color(0x00ff88) }, color2: { value: new THREE.Color(0x00aaff) }, color3: { value: new THREE.Color(0xff00aa) } }, vertexShader: ` varying vec2 vUv; void main() { vUv = uv; gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); } `, fragmentShader: ` uniform float time; uniform vec3 color1; uniform vec3 color2; uniform vec3 color3; varying vec2 vUv; void main() { float wave1 = sin(vUv.x * 10.0 + time * 2.0) * 0.5 + 0.5; float wave2 = sin(vUv.x * 15.0 - time * 1.5 + 2.0) * 0.5 + 0.5; float wave3 = cos(vUv.x * 8.0 + time * 3.0) * 0.5 + 0.5; vec3 color = mix(color1, color2, wave1); color = mix(color, color3, wave2 * 0.5); color *= wave3 * 0.8 + 0.2; float alpha = smoothstep(0.0, 0.3, vUv.y) * smoothstep(1.0, 0.7, vUv.y); alpha *= wave1 * 0.5 + wave2 * 0.3 + wave3 * 0.2; gl_FragColor = vec4(color, alpha * 0.6); } ` }; // ====== PARTICLE SYSTEM ====== class ParticleSystem { constructor(scene, count, color, size = 0.1) { this.scene = scene; this.count = count; const geometry = new THREE.BufferGeometry(); const positions = new Float32Array(count * 3); const colors = new Float32Array(count * 3); const sizes = new Float32Array(count); for (let i = 0; i < count; i++) { positions[i * 3] = (Math.random() - 0.5) * 50; positions[i * 3 + 1] = (Math.random() - 0.5) * 30; positions[i * 3 + 2] = (Math.random() - 0.5) * 50; const c = new THREE.Color(color); c.offsetHSL(Math.random() * 0.1, 0, Math.random() * 0.3); colors[i * 3] = c.r; colors[i * 3 + 1] = c.g; colors[i * 3 + 2] = c.b; sizes[i] = size * (0.5 + Math.random()); } geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3)); geometry.setAttribute('color', new THREE.BufferAttribute(colors, 3)); geometry.setAttribute('size', new THREE.BufferAttribute(sizes, 1)); const material = new THREE.ShaderMaterial({ uniforms: { time: { value: 0 }, pixelRatio: { value: window.devicePixelRatio } }, vertexShader: ` attribute float size; attribute vec3 color; varying vec3 vColor; uniform float time; uniform float pixelRatio; void main() { vColor = color; vec3 pos = position; pos.y += sin(time + position.x * 0.5) * 0.5; pos.x += cos(time * 0.8 + position.z * 0.3) * 0.3; vec4 mvPosition = modelViewMatrix * vec4(pos, 1.0); gl_PointSize = size * pixelRatio * (300.0 / -mvPosition.z); gl_Position = projectionMatrix * mvPosition; } `, fragmentShader: ` varying vec3 vColor; void main() { float dist = length(gl_PointCoord - vec2(0.5)); if (dist > 0.5) discard; float alpha = 1.0 - smoothstep(0.0, 0.5, dist); gl_FragColor = vec4(vColor, alpha); } `, transparent: true, blending: THREE.AdditiveBlending, depthWrite: false }); this.points = new THREE.Points(geometry, material); this.points.frustumCulled = false; scene.add(this.points); } update(time) { this.points.material.uniforms.time.value = time; } dispose() { this.scene.remove(this.points); this.points.geometry.dispose(); this.points.material.dispose(); } } // ====== RAIN SYSTEM ====== class RainSystem { constructor(scene, count = 5000) { this.scene = scene; this.count = count; const geometry = new THREE.BufferGeometry(); 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() * 40; positions[i * 3 + 2] = (Math.random() - 0.5) * 100; velocities[i] = 0.5 + Math.random() * 0.5; } geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3)); geometry.setAttribute('velocity', new THREE.BufferAttribute(velocities, 1)); const material = new THREE.PointsMaterial({ color: 0x88ccff, size: 0.05, transparent: true, opacity: 0.6, blending: THREE.AdditiveBlending, depthWrite: false }); this.points = new THREE.Points(geometry, material); this.points.frustumCulled = false; scene.add(this.points); } update(delta) { const positions = this.points.geometry.attributes.position.array; const velocities = this.points.geometry.attributes.velocity.array; for (let i = 0; i < this.count; i++) { positions[i * 3 + 1] -= velocities[i] * delta * 30; if (positions[i * 3 + 1] < -5) { positions[i * 3 + 1] = 35; positions[i * 3] = (Math.random() - 0.5) * 100; positions[i * 3 + 2] = (Math.random() - 0.5) * 100; } } this.points.geometry.attributes.position.needsUpdate = true; } dispose() { this.scene.remove(this.points); this.points.geometry.dispose(); this.points.material.dispose(); } } // ====== HOLOGRAM ====== function Hologram({ position, color, text }) { const mesh = useRef(); const canvas = useMemo(() => { const c = document.createElement('canvas'); c.width = 512; c.height = 256; const ctx = c.getContext('2d'); ctx.fillStyle = 'rgba(0,0,0,0)'; ctx.fillRect(0, 0, 512, 256); ctx.font = 'bold 48px Arial'; ctx.fillStyle = color; ctx.textAlign = 'center'; ctx.fillText(text, 256, 128); return c; }, [color, text]); const texture = useMemo(() => new THREE.CanvasTexture(canvas), [canvas]); useFrame(({ clock }) => { if (mesh.current) { mesh.current.material.opacity = 0.5 + Math.sin(clock.elapsedTime * 2) * 0.3; mesh.current.material.emissiveIntensity = 1 + Math.sin(clock.elapsedTime * 3) * 0.5; } }); return ( <mesh ref={mesh} position={position}> <planeGeometry args={[20, 10]} /> <meshStandardMaterial map={texture} transparent emissive={color} emissiveMap={texture} emissiveIntensity={1.5} side={THREE.DoubleSide} depthWrite={false} /> </mesh> ); } // ====== STAGE 1: NEON VEIL DISTRICT ====== function NeonVeilDistrict({ onComplete }) { const group = useRef(); const rain = useRef(); const particles = useRef(); const [holograms] = useState([ { pos: [-15, 8, -20], color: '#ff00ff', text: 'NEON VEIL' }, { pos: [15, 6, -30], color: '#00ffff', text: 'DISTRICT 7' }, { pos: [0, 10, -40], color: '#ff00aa', text: 'WELCOME' } ]); useEffect(() => { rain.current = new RainSystem(group.current, 8000); particles.current = new ParticleSystem(group.current, 3000, 0xff00ff, 0.15); const timer = setTimeout(onComplete, 20000); return () => { clearTimeout(timer); if (rain.current) rain.current.dispose(); if (particles.current) particles.current.dispose(); }; }, [onComplete]); useFrame(({ clock, camera }) => { const t = clock.elapsedTime; if (rain.current) rain.current.update(0.016); if (particles.current) particles.current.update(t); // Camera movement camera.position.x = Math.sin(t * 0.5) * 3; camera.position.y = 3 + Math.sin(t * 0.8) * 0.5; camera.lookAt(0, 2, -20); // Animate holograms group.current.children.forEach((child, i) => { if (child.isMesh) { child.rotation.y = Math.sin(t * 0.5 + i) * 0.2; } }); }); return ( <group ref={group}> {/* Ground with mirror reflection */} <mesh rotation={[-Math.PI / 2, 0, 0]} position={[0, 0, -20]}> <planeGeometry args={[100, 100]} /> <meshStandardMaterial color="#111122" metalness={0.9} roughness={0.1} envMapIntensity={2} /> </mesh> {/* Neon buildings */} {Array.from({ length: 20 }).map((_, i) => ( <mesh key={i} position={[ (Math.random() - 0.5) * 60, Math.random() * 10 + 2, -Math.random() * 40 - 5 ]} > <boxGeometry args={[2 + Math.random() * 3, 5 + Math.random() * 15, 2 + Math.random() * 3]} /> <meshStandardMaterial color="#0a0a2a" emissive={new THREE.Color().setHSL(Math.random(), 1, 0.5)} emissiveIntensity={0.5 + Math.random()} metalness={0.8} roughness={0.2} /> </mesh> ))} {/* Neon strips on ground */} {Array.from({ length: 10 }).map((_, i) => ( <mesh key={i} position={[(i - 5) * 8, 0.1, -20]} rotation={[-Math.PI / 2, 0, 0]}> <planeGeometry args={[1, 100]} /> <meshBasicMaterial color={new THREE.Color().setHSL(i / 10, 1, 0.5)} transparent opacity={0.8} /> </mesh> ))} {/* Holograms */} {holograms.map((h, i) => ( <Hologram key={i} position={h.pos} color={h.color} text={h.text} /> ))} {/* Light pillars */} {Array.from({ length: 8 }).map((_, i) => ( <mesh key={i} position={[(i - 4) * 10, 15, -30]}> <cylinderGeometry args={[0.5, 2, 30, 8, 1, true]} /> <meshBasicMaterial color={new THREE.Color().setHSL(i / 8, 1, 0.5)} transparent opacity={0.3} side={THREE.DoubleSide} blending={THREE.AdditiveBlending} /> </mesh> ))} {/* Point lights */} <pointLight position={[0, 10, 0]} color="#ff00ff" intensity={2} distance={30} /> <pointLight position={[-10, 5, -20]} color="#00ffff" intensity={2} distance={30} /> <pointLight position={[10, 5, -20]} color="#ff00aa" intensity={2} distance={30} /> </group> ); } // ====== STAGE 2: AETHER SPIRE ====== function AetherSpire({ onComplete }) { const group = useRef(); const particles = useRef(); useEffect(() => { particles.current = new ParticleSystem(group.current, 5000, 0x00ffff, 0.2); const timer = setTimeout(onComplete, 20000); return () => { clearTimeout(timer); if (particles.current) particles.current.dispose(); }; }, [onComplete]); useFrame(({ clock, camera }) => { const t = clock.elapsedTime; if (particles.current) particles.current.update(t); camera.position.x = Math.sin(t * 0.3) * 5; camera.position.y = 5 + Math.sin(t * 0.4) * 2; camera.lookAt(0, 0, -30); // Rotate floating structures group.current.children.forEach((child, i) => { if (child.isMesh && child.geometry.type === 'TorusGeometry') { child.rotation.x = t * 0.5 + i; child.rotation.y = t * 0.3 + i * 2; } }); }); return ( <group ref={group}> {/* Cloud floor */} <mesh rotation={[-Math.PI / 2, 0, 0]} position={[0, -2, -20]}> <planeGeometry args={[200, 200]} /> <meshStandardMaterial color="#ffffff" transparent opacity={0.3} emissive="#88ccff" emissiveIntensity={0.5} /> </mesh> {/* Floating mega structures */} {Array.from({ length: 12 }).map((_, i) => ( <group key={i} position={[ (Math.random() - 0.5) * 80, Math.random() * 20 + 5, -Math.random() * 60 - 10 ]}> <mesh> <torusGeometry args={[3 + Math.random() * 3, 0.5, 16, 32]} /> <meshStandardMaterial color="#0a0a3a" emissive={new THREE.Color().setHSL(Math.random(), 1, 0.7)} emissiveIntensity={1.5} metalness={0.9} roughness={0.1} /> </mesh> <mesh position={[0, 2, 0]}> <octahedronGeometry args={[1 + Math.random()]} /> <meshStandardMaterial color="#ffffff" emissive="#00ffff" emissiveIntensity={2} metalness={0.5} roughness={0.2} /> </mesh> </group> ))} {/* God ray sources */} {Array.from({ length: 6 }).map((_, i) => ( <mesh key={i} position={[(i - 3) * 15, 30, -30]}> <sphereGeometry args={[2, 16, 16]} /> <meshBasicMaterial color="#ffffff" /> </mesh> ))} {/* Light shafts */} {Array.from({ length: 6 }).map((_, i) => ( <mesh key={i} position={[(i - 3) * 15, 15, -30]}> <cylinderGeometry args={[0.1, 3, 30, 8, 1, true]} /> <meshBasicMaterial color="#ffffff" transparent opacity={0.2} side={THREE.DoubleSide} blending={THREE.AdditiveBlending} /> </mesh> ))} {/* Ambient lights */} <ambientLight intensity={0.5} color="#88ccff" /> <directionalLight position={[0, 20, 0]} intensity={2} color="#ffffff" /> <pointLight position={[0, 10, -20]} color="#00ffff" intensity={3} distance={50} /> </group> ); } // ====== STAGE 3: ECLIPSE NEXUS ====== function EclipseNexus({ onComplete }) { const group = useRef(); const particles = useRef(); const aurora = useRef(); useEffect(() => { particles.current = new ParticleSystem(group.current, 8000, 0xff00aa, 0.25); // Aurora shader const geometry = new THREE.PlaneGeometry(200, 50); const material = new THREE.ShaderMaterial({ uniforms: { time: { value: 0 }, color1: { value: new THREE.Color(0x00ff88) }, color2: { value: new THREE.Color(0x00aaff) }, color3: { value: new THREE.Color(0xff00aa) } }, vertexShader: AuroraShader.vertexShader, fragmentShader: AuroraShader.fragmentShader, transparent: true, side: THREE.DoubleSide, depthWrite: false }); aurora.current = new THREE.Mesh(geometry, material); aurora.current.position.set(0, 25, -50); aurora.current.rotation.x = Math.PI / 4; group.current.add(aurora.current); const timer = setTimeout(onComplete, 20000); return () => { clearTimeout(timer); if (particles.current) particles.current.dispose(); if (aurora.current) { group.current.remove(aurora.current); aurora.current.geometry.dispose(); aurora.current.material.dispose(); } }; }, [onComplete]); useFrame(({ clock, camera }) => { const t = clock.elapsedTime; if (particles.current) particles.current.update(t); if (aurora.current) { aurora.current.material.uniforms.time.value = t; aurora.current.rotation.z = Math.sin(t * 0.1) * 0.1; } camera.position.x = Math.sin(t * 0.8) * 8; camera.position.y = 3 + Math.sin(t * 1.2) * 2; camera.lookAt(0, 0, -30); // Glitch effect on structures group.current.children.forEach((child, i) => { if (child.isMesh && child.geometry.type === 'BoxGeometry') { if (Math.random() > 0.95) { child.position.x += (Math.random() - 0.5) * 2; child.position.y += (Math.random() - 0.5) * 2; } } }); }); return ( <group ref={group}> {/* Data stream floor */} <mesh rotation={[-Math.PI / 2, 0, 0]} position={[0, 0, -20]}> <planeGeometry args={[100, 100]} /> <meshStandardMaterial color="#0a0a2a" emissive="#ff00aa" emissiveIntensity={0.3} metalness={0.8} roughness={0.2} /> </mesh> {/* Glitchy structures */} {Array.from({ length: 15 }).map((_, i) => ( <mesh key={i} position={[ (Math.random() - 0.5) * 60, Math.random() * 15 + 2, -Math.random() * 50 - 5 ]} > <boxGeometry args={[2 + Math.random() * 4, 3 + Math.random() * 12, 2 + Math.random() * 4]} /> <meshStandardMaterial color="#0a0a3a" emissive={new THREE.Color().setHSL(Math.random(), 1, 0.5)} emissiveIntensity={1 + Math.random() * 2} metalness={0.7} roughness={0.3} /> </mesh> ))} {/* Data streams */} {Array.from({ length: 20 }).map((_, i) => ( <mesh key={i} position={[(i - 10) * 3, Math.random() * 20, -30]}> <boxGeometry args={[0.1, 20, 0.1]} /> <meshBasicMaterial color={new THREE.Color().setHSL(Math.random(), 1, 0.5)} transparent opacity={0.5} blending={THREE.AdditiveBlending} /> </mesh> ))} {/* Spectrum rings */} {Array.from({ length: 5 }).map((_, i) => ( <mesh key={i} position={[0, 5 + i * 3, -30]} rotation={[Math.PI / 2, 0, 0]}> <torusGeometry args={[10 + i * 3, 0.1, 8, 64]} /> <meshBasicMaterial color={new THREE.Color().setHSL(i / 5, 1, 0.5)} transparent opacity={0.8} blending={THREE.AdditiveBlending} /> </mesh> ))} {/* Lights */} <ambientLight intensity={0.3} color="#ff00aa" /> <pointLight position={[0, 10, 0]} color="#ff00aa" intensity={3} distance={40} /> <pointLight position={[-15, 5, -20]} color="#00ff88" intensity={2} distance={30} /> <pointLight position={[15, 5, -20]} color="#00aaff" intensity={2} distance={30} /> </group> ); } // ====== POST-PROCESSING ====== function PostProcessing({ stage }) { const { scene, camera } = useThree(); return ( <EffectComposer> <Bloom intensity={2.5} luminanceThreshold={0.1} luminanceSmoothing={0.9} mipmapBlur radius={0.8} /> <Bloom intensity={1.5} luminanceThreshold={0.5} luminanceSmoothing={0.5} mipmapBlur radius={0.5} /> <ChromaticAberration offset={[0.002, 0.002]} radialModulation modulationOffset={0.5} /> <Glitch delay={[1.5, 3.5]} duration={[0.1, 0.3]} strength={[0.3, 1]} 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} height={480} /> <MotionBlur strength={0.5} opacity={0.5} blendFunction={BlendFunction.NORMAL} /> </EffectComposer> ); } // ====== UI OVERLAY ====== function UIOverlay({ score, combo, stage, speed }) { return ( <div className="ui-overlay"> <div className="ui-header"> <div className="ui-title">NEON VEIL : INFINITY OVERDRIVE</div> <div className="ui-stage">STAGE {stage + 1}</div> </div> <div className="ui-score"> <div className="score-value">{Math.floor(score).toLocaleString()}</div> <div className="score-label">SCORE</div> </div> <div className="ui-combo"> <div className="combo-value">x{combo}</div> <div className="combo-label">COMBO</div> </div> <div className="ui-speed"> <div className="speed-bar"> <div className="speed-fill" style={{ width: `${speed}%` }} /> </div> <div className="speed-label">SPEED</div> </div> <div className="ui-controls"> <div className="control-hint">SWIPE TO MOVE</div> </div> </div> ); } // ====== MAIN GAME ====== function Game() { const [stage, setStage] = useState(0); const [score, setScore] = useState(0); const [combo, setCombo] = useState(1); const [speed, setSpeed] = useState(50); const [transitioning, setTransitioning] = useState(false); const handleStageComplete = useCallback(() => { setTransitioning(true); setTimeout(() => { setStage((prev) => (prev + 1) % 3); setTransitioning(false); }, 1000); }, []); useEffect(() => { const interval = setInterval(() => { setScore((prev) => prev + 10 * combo); setCombo((prev) => Math.min(prev + 0.1, 10)); setSpeed((prev) => Math.min(prev + 0.5, 100)); }, 100); return () => clearInterval(interval); }, [combo]); return ( <div className="game-container"> <Canvas camera={{ position: [0, 3, 10], fov: 75 }} gl={{ antialias: true, powerPreference: 'high-performance' }} > {stage === 0 && <NeonVeilDistrict onComplete={handleStageComplete} />} {stage === 1 && <AetherSpire onComplete={handleStageComplete} />} {stage === 2 && <EclipseNexus onComplete={handleStageComplete} />} <PostProcessing stage={stage} /> </Canvas> <UIOverlay score={score} combo={combo} stage={stage} speed={speed} /> {transitioning && ( <div className="transition-overlay"> <div className="transition-text">STAGE {stage + 1} COMPLETE</div> </div> )} <style jsx>{` .game-container { width: 100vw; height: 100vh; position: relative; overflow: hidden; background: #000; font-family: 'Orbitron', monospace; } .ui-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 10; } .ui-header { position: absolute; top: 20px; left: 50%; transform: translateX(-50%); text-align: center; color: #fff; text-shadow: 0 0 20px #ff00ff, 0 0 40px #00ffff; animation: pulse 2s infinite; } .ui-title { font-size: 24px; font-weight: bold; letter-spacing: 4px; } .ui-stage { font-size: 14px; letter-spacing: 2px; margin-top: 5px; color: #ff00aa; } .ui-score { position: absolute; top: 100px; right: 40px; text-align: right; color: #fff; text-shadow: 0 0 10px #00ffff; } .score-value { font-size: 48px; font-weight: bold; } .score-label { font-size: 12px; letter-spacing: 2px; color: #00ffff; } .ui-combo { position: absolute; top: 100px; left: 40px; color: #fff; text-shadow: 0 0 10px #ff00ff; } .combo-value { font-size: 36px; font-weight: bold; color: #ff00ff; } .combo-label { font-size: 12px; letter-spacing: 2px; } .ui-speed { position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%); width: 300px; color: #fff; } .speed-bar { height: 4px; background: rgba(255, 255, 255, 0.2); border-radius: 2px; overflow: hidden; } .speed-fill { height: 100%; background: linear-gradient(90deg, #00ffff, #ff00ff); transition: width 0.1s; box-shadow: 0 0 10px #00ffff; } .speed-label { text-align: center; font-size: 12px; letter-spacing: 2px; margin-top: 5px; color: #00ffff; } .ui-controls { position: absolute; bottom: 80px; left: 50%; transform: translateX(-50%); color: rgba(255, 255, 255, 0.5); font-size: 12px; letter-spacing: 2px; animation: fadeInOut 3s infinite; } .transition-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.9); display: flex; align-items: center; justify-content: center; z-index: 20; animation: flash 1s ease-out; } .transition-text { font-size: 48px; font-weight: bold; color: #000; text-shadow: 0 0 20px #ff00ff; animation: scaleIn 0.5s ease-out; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } } @keyframes fadeInOut { 0%, 100% { opacity: 0.3; } 50% { opacity: 1; } } @keyframes flash { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } } @keyframes scaleIn { 0% { transform: scale(0.5); opacity: 0; } 100% { transform: scale(1); opacity: 1; } } `}</style> </div> ); } export default function App() { return <Game />; }