Pagoda Bench

Prompt

# ROLE You are an expert in Three.js r160, voxel art, and procedural generation. Your challenge is to create a museum-quality voxel diorama that runs flawlessly as a SINGLE HTML file in Chrome, within the 128K output limit. # ABSOLUTE CONSTRAINTS [Fail if violated - Score 0] 1. Deliverable is ONE `index.html` file. Double-click to run. No build step, no server required. 2. Dependencies LOCKED to this exact importmap. No other version, CDN, or path allowed. ```html <script async src="https://unpkg.com/es-module-shims@1.8.0/dist/es-module-shims.js"></script> <script type="importmap">{"imports":{"three":"https://unpkg.com/three@0.160.0/build/three.module.js","three/addons/":"https://unpkg.com/three@0.160.0/examples/jsm/"}}</script> 3. NO external assets. No jpg/png/glb/hdr/wav. EVERYTHING procedural: voxels = BoxGeometry + InstancedMesh, textures = CanvasTexture generated in code, lighting = code. 4. All logic inside ONE <script type="module">. CSS inline. Total file < 700KB. 5. Expose for hidden tests: window.__VOXEL__ = { voxelCount, fps, pagodaFloors, timeOfDay } TASK: VOXEL PAGODA GARDEN - Opus 5 Showcase Diorama 1. ART DIRECTION This is what makes it impressive, not just a toy - Theme: "Spring Festival at the Five-Story Pagoda" - vibrant, colorful, varied, not monochrome - Palette (STRICT - use these voxel colors): Vermillion #C73E1D, Gold #E8B86D, Deep Teak #4A2C1A, Jade Roof #2D6A4F / #40916C (gradient per floor), Sakura Pink #FFB7C5 / #FF8FAB / #FFE5EC, Stone Grey #9AA0A6, Pond Jade #7ED6DF, Moss #606C38 - Atmosphere: Ukiyo-e meets Monument Valley - crisp AO shadows, warm sunset light, slight bloom on lanterns 2. PAGODA Centerpiece - 5 stories, must be architecturally correct - 5-tier Goju-no-To, 28m tall in voxel scale (1 voxel = 0.5m). Each floor 10% smaller than the one below - Curved irimoya roofs (use stepped voxels to approximate sorin curve, not flat slabs), upturned corners with gold chigi - Details per floor: vermillion pillars, white walls (CanvasTexture with wood grain), sliding doors, gold finial (sorin) on top, interior light glow - Construction: Use InstancedMesh per color (NOT one mesh per voxel). Target: pagoda alone ~4,000 voxels 3. GARDEN WORLD Varied and dense - where Opus 5 is tested on composition - Terrain: 64x64 voxel base with 2-level elevation, stone path (zig-zag) leading to pagoda, moss scattered via noise - Pond (south side): 12x8 voxel water (semi-transparent voxels + animated CanvasTexture ripple), with 6 voxel koi (orange/white) circling via simple steering, arched taiko bridge over it (3 voxels wide) - Trees: 8 trees total - 3 Sakura (pink voxel canopy using 3 shades, 200 voxels each, with falling petal particles via Points), 2 Pine (layered cone), 2 Maple, 1 Willow by pond - Props (scattered, makes scene varied): 4 stone lanterns (tōrō, emissive voxels + PointLight flicker), torii gate at entrance, bamboo fence, 2 stone jizo statues, field of 40 small flower voxels - All voxels must have AO: darken bottom face and occluded edges via vertexColors or material trick. No flat shading. 4. TECHNICAL SPEC Hidden tests check these numerically - Voxel Engine: 15,000 - 30,000 visible voxels total. Use InstancedMesh grouped by color (max 12 draw calls). Implement frustum culling + simple greedy meshing on flat terrain areas to stay >55fps - Lighting: 1 DirectionalLight (sun, PCFSoft shadows, 2048 map), HemisphereLight (sky), 4 PointLights inside lanterns + pagoda. Shadows enabled. renderer.toneMapping = THREE.ACESFilmicToneMapping - Materials: MeshStandardMaterial with roughness 0.8, metalness 0.1 for wood/stone. Roof tiles have slight metalness 0.3 - Interactivity: OrbitControls (enableDamping), auto-rotate slowly when idle, click lantern to toggle its light, click pagoda floor to open/close doors (scale animation) - Environment Animation: Day-Night cycle (90 sec loop, sun orbits, sky color lerp, lanterns auto-on at dusk), wind (sakura petals fall with Perlin drift, pine leaves sway 2 degrees), koi loop, pond ripple 5. QUALITY / PERFORMANCE - Single requestAnimationFrame loop. pixelRatio = Math.min(devicePixelRatio, 1.5) - Resize handler mandatory. antialias:true, powerPreference:"high-performance" - Intro: 2.5s camera dolly from torii gate to pagoda, title overlay fades out. HUD minimal: bottom-left "VOXEL GARDEN | 24k voxels | 60fps | Click lanterns" 6. ANTI-PATTERNS Do NOT do - Do NOT use voxel libraries (voxel.js, noa, etc) - write voxels from scratch - Do NOT use React-Three-Fiber, Drei, or any framework - vanilla Three.js only - Do NOT import from three/addons/ beyond OrbitControls and EffectComposer/UnrealBloomPass (bloom optional but allowed) - Do NOT hallucinate APIs (e.g. THREE.VoxelEngine does not exist) THINKING PROCESS Opus 5: adaptive thinking is ON by default Internally plan 4 layers before coding: 1) Voxel Engine (InstancedMesh pool + palette) 2) Pagoda Generator (floor function with roof curve math) 3) Garden Scatter (noise + tree generators) 4) Lighting/Animation Loop. Build in order: Scene -> Voxel Pool -> Pagoda -> Terrain/Pond -> Trees/Props -> Lights/Animation SELF-CHECK Fix before output - hidden tests will fail otherwise - Single HTML opens with ZERO console errors? - 5 floors clearly visible, each smaller, roofs curved not flat? - Count >15k voxels, <12 draw calls, >55fps on Chrome? - 3 sakura trees with 3 pinks + falling petals, pond with moving koi, 4 lanterns glow? - AO/depth visible (voxels not flat), shadows cast, day-night cycles? - window.VOXEL.voxelCount returns correct number? - No external fetch, no 404, file <700KB? OUTPUT - No preamble, no explanation. Output ONLY the complete index.html in ONE code block, ready to paste into Chrome.

A system prompt was added to support web rendering