One Shot High Quality Scene
Prompt
Act as a world-class Graphics Engineer and Creative Technologist specializing in WebGL, Three.js, and browser game architecture. Your objective is to generate a complete, production-ready, single-file HTML document containing a playable micro-world (a tiny, hyper-detailed village scene). The visual fidelity, lighting, materials, atmospheric shaders, character controls, and interior details must feel like a AAA video game running in the browser. ### Tech Stack & System Requirements: 1. Single HTML File: Include all HTML, CSS (clean fullscreen HUD/UI overlays), and JavaScript in a single document. 2. Dependencies: Import Three.js (r128+), OrbitControls / PointerLockControls, and EffectComposer (with SSAOPass, UnrealBloomPass, and ShaderPass for custom color grading) via CDN. 3. Zero External Assets: Generate ALL geometries, character rigs, textures, normal/bump maps, and sound/visual effects procedurally via HTML5 Canvas or GLSL. Do NOT fetch external .gltf, .obj, or image files. ### 1. Playable Character & Gameplay Mechanics: - Character Model: Build a polished procedural character (e.g., a low-poly traveler/knight with articulated limbs, a cape, or hat) complete with walking/idle procedural animation cycles. - Controls & Physics: Implement smooth WASD movement, running (Shift), jumping (Space), and camera control (either Third-Person smoothly following the character, or First-Person with seamless toggling via 'V'). - Collision & Interiors: Implement basic raycast or bounding-box collision so the character cannot walk through walls/trees, can cross a stone bridge, and can **walk through open doors to explore detailed house interiors** (table, chair, burning fireplace with warm light and smoke particles). ### 2. Scene Architecture & AAA Detailing: - World Elements: A cozy, detailed village scene featuring cobblestone paths, micro-cottages with accessible interiors, sloped roofs, dynamic trees with fluttering leaves, a glowing lantern system, a wooden dock, and a pristine body of water. - Micro-Props: Barrels, tiny fences, potted plants, chimney smoke, and flickering fire/lantern light sources. - Water & Shaders: A custom ShaderMaterial for the lake with depth-based color blending, animated normal waves, specular reflections, and soft edge foam where it meets the shore. ### 3. Lighting & AAA Visual Fidelity: - Soft Shadows: Configure high-resolution directional light shadows (`PCFSoftShadowMap`) with finely tuned biases and shadow bounds. - Dual-Tone Dynamic Lighting: Cool ambient skylight paired with warm point lights (lanterns, fireplaces) featuring real-time soft attenuation. - Volumetric & Atmospheric FX: God rays / atmospheric haze, ambient floating dust motes (particle system), and subtle chimney smoke. ### 4. Materials & Procedural Texturing: - Material Depth: Maximize MeshStandardMaterial and MeshPhysicalMaterial properties (`roughness`, `metalness`, `clearcoat`, `roughnessMap`, `bumpMap`). - Canvas Texture Generators: Write utility functions that programmatically draw realistic tile textures (cobblestone, wood grain, roof shingles) with bump/normal maps generated on the fly. ### 5. Post-Processing Pipeline: - Setup `EffectComposer` with: 1. SSAO / SAO Pass for rich contact shadows around foliage, character feet, and interior corners. 2. Selective UnrealBloomPass for fireplaces, window glows, and street lanterns. 3. Custom Vignette & Film Grain Shader for a cinematic render finish. ### Execution Constraints: - Code Completeness: Provide 100% complete, executable code without any placeholders or commented-out sections (e.g., NO `// TODO: add interiors here`). - Optimization: Use instancing (`InstancedMesh`) or simple geometries where appropriate to ensure butter-smooth framerates with post-processing enabled. Generate the full HTML code now.
A system prompt was added to support web rendering
