minecraft-renderer 0.1.47 → 0.1.49

package/src/three/worldGeometryExport.ts

@@ -2,6 +2,9 @@
 import * as THREE from 'three'
 import type { WorldRendererThree } from './worldRendererThree'
 import type { ExportedSection, ExportedWorldGeometry } from '../mesher-shared/exportedGeometryTypes'
+import { getShaderCubeResources } from '../wasm-mesher/bridge/shaderCubeBridge'
+import { createCubeBlockMaterial } from './shaders/cubeBlockShader'
+import { createShaderCubeMesh } from './shaderCubeMesh'
 
 export type { ExportedSection, ExportedWorldGeometry } from '../mesher-shared/exportedGeometryTypes'
 
@@ -114,40 +117,62 @@ export async function loadWorldGeometryFromUrl(url: string): Promise<ExportedWor
  * Recreate THREE.js meshes from exported geometry
  * Returns an array of mesh groups that can be added to a scene
  */
+function shaderMaterialForExport(legacyMaterial: THREE.Material): THREE.ShaderMaterial | null {
+  const atlas = (legacyMaterial as THREE.MeshBasicMaterial).map
+    ?? (legacyMaterial as THREE.MeshLambertMaterial).map
+  if (!atlas) return null
+  const shaderMat = createCubeBlockMaterial()
+  shaderMat.uniforms.u_atlas.value = atlas
+  const { tintPalette } = getShaderCubeResources()
+  if (!tintPalette.isReady()) tintPalette.createTexture()
+  shaderMat.uniforms.u_tintPalette.value = tintPalette.getTexture()
+  return shaderMat
+}
+
 export function createMeshesFromExport(
   exportData: ExportedWorldGeometry,
-  material: THREE.Material
+  material: THREE.Material,
+  shaderMaterial?: THREE.ShaderMaterial | null,
 ): THREE.Group[] {
   const groups: THREE.Group[] = []
+  const resolvedShaderMat = shaderMaterial ?? shaderMaterialForExport(material)
 
   for (const section of exportData.sections) {
-    const geometry = new THREE.BufferGeometry()
+    const group = new THREE.Group()
+    group.name = 'chunk'
 
-    geometry.setAttribute('position', new THREE.Float32BufferAttribute(section.geometry.positions, 3))
-    if (section.geometry.normals.length) {
-      geometry.setAttribute('normal', new THREE.Float32BufferAttribute(section.geometry.normals, 3))
-    }
-    if (section.geometry.colors.length) {
-      geometry.setAttribute('color', new THREE.Float32BufferAttribute(section.geometry.colors, 3))
-    }
-    if (section.geometry.uvs.length) {
-      geometry.setAttribute('uv', new THREE.Float32BufferAttribute(section.geometry.uvs, 2))
+    const hasLegacy = section.geometry.positions.length > 0 && section.geometry.indices.length > 0
+    if (hasLegacy) {
+      const geometry = new THREE.BufferGeometry()
+      geometry.setAttribute('position', new THREE.Float32BufferAttribute(section.geometry.positions, 3))
+      if (section.geometry.normals.length) {
+        geometry.setAttribute('normal', new THREE.Float32BufferAttribute(section.geometry.normals, 3))
+      }
+      if (section.geometry.colors.length) {
+        geometry.setAttribute('color', new THREE.Float32BufferAttribute(section.geometry.colors, 3))
+      }
+      if (section.geometry.uvs.length) {
+        geometry.setAttribute('uv', new THREE.Float32BufferAttribute(section.geometry.uvs, 2))
+      }
+      const maxIndex = Math.max(...section.geometry.indices)
+      const IndexArrayType = maxIndex > 65_535 ? Uint32Array : Uint16Array
+      geometry.setIndex(new THREE.BufferAttribute(new IndexArrayType(section.geometry.indices), 1))
+      const mesh = new THREE.Mesh(geometry, material)
+      mesh.position.set(section.position.x, section.position.y, section.position.z)
+      mesh.name = 'mesh'
+      group.add(mesh)
     }
 
-    // Use appropriate index type based on vertex count
-    const maxIndex = Math.max(...section.geometry.indices)
-    const IndexArrayType = maxIndex > 65_535 ? Uint32Array : Uint16Array
-    geometry.setIndex(new THREE.BufferAttribute(new IndexArrayType(section.geometry.indices), 1))
-
-    const mesh = new THREE.Mesh(geometry, material)
-    mesh.position.set(section.position.x, section.position.y, section.position.z)
-    mesh.name = 'mesh'
-
-    const group = new THREE.Group()
-    group.name = 'chunk'
-    group.add(mesh)
+    const shaderCubes = section.shaderCubes
+    if (shaderCubes && shaderCubes.count > 0 && resolvedShaderMat) {
+      const shaderMesh = createShaderCubeMesh(shaderCubes, resolvedShaderMat)
+      shaderMesh.position.set(section.position.x, section.position.y, section.position.z)
+      group.add(shaderMesh)
+    }
 
-    groups.push(group)
+    if (group.children.length > 0) {
+      groups.push(group)
+    }
   }
 
   return groups
@@ -222,7 +247,10 @@ export async function applyWorldGeometryExport(
     material = rendererMaterial
   }
 
-  const groups = createMeshesFromExport(exportData, material)
+  const shaderMat = exportData.sections.some(s => (s.shaderCubes?.count ?? 0) > 0)
+    ? shaderMaterialForExport(material)
+    : null
+  const groups = createMeshesFromExport(exportData, material, shaderMat)
   const container = new THREE.Group()
   container.name = GEOMETRY_EXPORT_GROUP_NAME
   if (hasEmbeddedTexture) {

package/src/three/worldRendererThree.ts

@@ -42,6 +42,11 @@ type SectionKey = string
 
 export class WorldRendererThree extends WorldRendererCommon {
   outputFormat = 'threeJs' as const
+
+  protected override isShaderCubeBlocksEnabled(): boolean {
+    return this.worldRendererConfig.shaderCubeBlocks === true
+      && !!this.renderer?.capabilities?.isWebGL2
+  }
   chunkMeshManager: ChunkMeshManager
   get sectionObjects() {
     return this.chunkMeshManager.sectionObjects
@@ -65,6 +70,9 @@ export class WorldRendererThree extends WorldRendererCommon {
   cursorBlock: CursorBlock
   onRender: Array<(deltaTime: number) => void> = []
   private lastRenderTime = 0
+  private animatedFov = 0
+  private lastFovAnimTime = 0
+  private static readonly FOV_TRANSITION_MS = 200
   cameraShake: CameraShake
   cameraContainer!: THREE.Object3D
   media: ThreeJsMedia
@@ -519,6 +527,12 @@ export class WorldRendererThree extends WorldRendererCommon {
     this.onReactiveConfigUpdated('defaultSkybox', (value) => {
       this.skyboxRenderer.updateDefaultSkybox(value)
     })
+    this.onReactiveConfigUpdated('shaderCubeDebugMode', () => {
+      this.chunkMeshManager.syncCubeShaderUniforms()
+    })
+    this.onReactiveConfigUpdated('futuristicReveal', () => {
+      this.updateModulesFromConfig()
+    })
 
     let currentHandRenderer = this.displayOptions.inWorldRenderingConfig.handRenderer
     this.onReactiveConfigUpdated('handRenderer', (value) => {
@@ -615,6 +629,7 @@ export class WorldRendererThree extends WorldRendererCommon {
     texture.needsUpdate = true
     texture.flipY = false
     this.material.map = texture
+    this.chunkMeshManager.syncCubeShaderUniforms()
 
     const itemsTexture = loadThreeJsTextureFromBitmap(resources.itemsAtlasImage!)
     itemsTexture.needsUpdate = true
@@ -731,12 +746,21 @@ export class WorldRendererThree extends WorldRendererCommon {
    * Optionally update data that are depedendent on the viewer position
    */
   updatePosDataChunk(key: string) {
+    const sectionObj = this.sectionObjects[key]
+    if (!sectionObj) return
+
     const [x, y, z] = key.split(',').map(x => Math.floor(+x / 16))
     // sum of distances: x + y + z
     const chunkDistance = Math.abs(x - this.cameraSectionPos.x) + Math.abs(y - this.cameraSectionPos.y) + Math.abs(z - this.cameraSectionPos.z)
-    const sectionObj = this.sectionObjects[key]
-    const section = (sectionObj as any).mesh ?? sectionObj.children.find(child => child.name === 'mesh')!
-    section.renderOrder = 500 - chunkDistance
+    const renderOrder = 500 - chunkDistance
+
+    // Cubes in globalBlockBuffer may leave sectionObj.mesh unset.
+    const drawable = sectionObj.mesh
+      ?? sectionObj.shaderMesh
+      ?? sectionObj.children.find(child => child.name === 'mesh' || child.name === 'shaderMesh')
+    if (drawable) {
+      drawable.renderOrder = renderOrder
+    }
   }
 
   override updateViewerPosition(pos: Vec3): void {
@@ -817,7 +841,7 @@ export class WorldRendererThree extends WorldRendererCommon {
         continue
       }
 
-      if (!update.geometry.positions.length) {
+      if (!this.chunkMeshManager.sectionHasRenderableContent(update.geometry)) {
         this.chunkMeshManager.releaseSection(update.key)
         continue
       }
@@ -856,7 +880,7 @@ export class WorldRendererThree extends WorldRendererCommon {
         return
       }
 
-      if (!data.geometry.positions.length) {
+      if (!this.chunkMeshManager.sectionHasRenderableContent(data.geometry)) {
         this.chunkMeshManager.releaseSection(data.key)
         return
       }
@@ -962,25 +986,22 @@ export class WorldRendererThree extends WorldRendererCommon {
     raycaster.set(scenePos, direction)
     raycaster.far = distance // Limit raycast distance
 
-    // Filter to only nearby chunks for performance
-    const nearbyChunks = Object.values(this.sectionObjects)
-      .filter(obj => obj.name === 'chunk' && obj.visible)
-      .filter(obj => {
-        // Get the mesh child which has the actual geometry
-        const mesh = obj.children.find(child => child.name === 'mesh')
-        if (!mesh) return false
-
-        // Check distance from player position to chunk
-        const chunkWorldPos = this._tpChunkWorldPos
-        mesh.getWorldPosition(chunkWorldPos)
-        const distance = scenePos.distanceTo(chunkWorldPos)
-        return distance < 80 // Only check chunks within 80 blocks
-      })
+    const maxCenterDistance = 80
+    const maxCenterDistSq = maxCenterDistance * maxCenterDistance
+    const ox = pos.x
+    const oy = pos.y
+    const oz = pos.z
 
-    // Get all mesh children for raycasting
+    // Legacy / deferred-shader meshes (scene-relative raycast)
     const meshes: THREE.Object3D[] = []
-    for (const chunk of nearbyChunks) {
-      const mesh = chunk.children.find(child => child.name === 'mesh')
+    for (const obj of Object.values(this.sectionObjects)) {
+      if (obj.name !== 'chunk' || !obj.visible) continue
+      if (obj.worldX === undefined) continue
+      const dcx = obj.worldX - ox
+      const dcy = obj.worldY! - oy
+      const dcz = obj.worldZ! - oz
+      if (dcx * dcx + dcy * dcy + dcz * dcz > maxCenterDistSq) continue
+      const mesh = obj.children.find(child => child.name === 'mesh' || child.name === 'shaderMesh')
       if (mesh) meshes.push(mesh)
     }
 
@@ -988,10 +1009,20 @@ export class WorldRendererThree extends WorldRendererCommon {
 
     let finalDistance = distance
     if (intersects.length > 0) {
-      // Use intersection distance minus a small offset to prevent clipping
       finalDistance = Math.max(0.5, intersects[0].distance - 0.2)
     }
 
+    // Shader cubes in global buffer: tight per-section AABBs (no mesh raycast).
+    const boxHit = this.chunkMeshManager.raycastShaderSectionAABBs(
+      pos,
+      direction,
+      finalDistance,
+      maxCenterDistance,
+    )
+    if (boxHit !== undefined) {
+      finalDistance = Math.max(0.5, boxHit - 0.2)
+    }
+
     const finalPos = new Vec3(
       pos.x + direction.x * finalDistance,
       pos.y + direction.y * finalDistance,
@@ -1055,10 +1086,42 @@ export class WorldRendererThree extends WorldRendererCommon {
   }
 
   setCinimaticFov(fov: number): void {
+    this.animatedFov = fov
     this.camera.fov = fov
     this.camera.updateProjectionMatrix()
   }
 
+  private updateSmoothFov(): void {
+    if (this.cinimaticScript.running) return
+
+    const baseFov = this.displayOptions.inWorldRenderingConfig.fov
+    const mult = this.playerStateReactive.fovMultiplier
+    const targetFov = baseFov * (Number.isFinite(mult) ? mult : 1)
+
+    const now = performance.now()
+    if (this.animatedFov === 0) {
+      this.animatedFov = targetFov
+    }
+
+    if (Math.abs(this.animatedFov - targetFov) >= 0.01) {
+      const elapsed = now - this.lastFovAnimTime
+      const progress = Math.min(elapsed / WorldRendererThree.FOV_TRANSITION_MS, 1)
+      const easeOutCubic = (t: number) => 1 - (1 - t) ** 3
+      this.animatedFov += (targetFov - this.animatedFov) * easeOutCubic(progress)
+      if (Math.abs(this.animatedFov - targetFov) < 0.01) {
+        this.animatedFov = targetFov
+      }
+    } else {
+      this.animatedFov = targetFov
+    }
+    this.lastFovAnimTime = now
+
+    if (this.camera.fov !== this.animatedFov) {
+      this.camera.fov = this.animatedFov
+      this.camera.updateProjectionMatrix()
+    }
+  }
+
   updateCamera(pos: Vec3 | null, yaw: number, pitch: number): void {
     // Skip position/rotation updates if cinematic script is running
     if (this.cinimaticScript.running) {
@@ -1200,11 +1263,10 @@ export class WorldRendererThree extends WorldRendererCommon {
     const cameraPos = this.getCameraPosition()
     this.skyboxRenderer.update(cameraPos, this.viewDistance)
 
-    const sizeOrFovChanged = sizeChanged || this.displayOptions.inWorldRenderingConfig.fov !== this.camera.fov
-    if (sizeOrFovChanged) {
+    this.updateSmoothFov()
+    if (sizeChanged) {
       const size = this.renderer.getSize(new THREE.Vector2())
       this.camera.aspect = size.width / size.height
-      this.camera.fov = this.displayOptions.inWorldRenderingConfig.fov
       this.camera.updateProjectionMatrix()
     }
 
@@ -1218,6 +1280,11 @@ export class WorldRendererThree extends WorldRendererCommon {
     // eslint-disable-next-line @typescript-eslint/non-nullable-type-assertion-style
     const cam = this.cameraGroupVr instanceof THREE.Group ? this.cameraGroupVr.children.find(child => child instanceof THREE.PerspectiveCamera) as THREE.PerspectiveCamera : this.camera
     this.applyPendingSectionUpdates()
+    const globalBuffer = this.chunkMeshManager.globalBlockBuffer
+    if (globalBuffer) {
+      globalBuffer.setCameraOrigin(this.cameraWorldPos.x, this.cameraWorldPos.y, this.cameraWorldPos.z)
+      globalBuffer.uploadDirtyRange()
+    }
     this.renderer.render(this.scene, cam)
 
     if (

package/src/wasm-mesher/bridge/render-from-wasm.ts

@@ -12,8 +12,14 @@ import { Vec3 } from 'vec3'
 import { elemFaces, buildRotationMatrix, matmul3, matmulmat3, vecadd3, vecsub3 } from '../../mesher-shared/modelsGeometryCommon'
 import type { ExportedWorldGeometry, ExportedSection } from '../../mesher-shared/exportedGeometryTypes'
 import type { MesherGeometryOutput } from '../../mesher-shared/shared'
+import { SECTION_HEIGHT } from '../../mesher-shared/shared'
 import type { World } from '../../mesher-shared/world'
 import { resolveBlockPropertiesForMeshing } from '../../mesher-shared/blockPropertiesForMeshing'
+import {
+  buildShaderCubesFromWords,
+  getShaderCubeResources,
+  tryBuildShaderCubeInstances,
+} from './shaderCubeBridge'
 import { getSideShading, vertexLightFromAo } from '../../mesher-shared/vertexShading'
 import tintsJson from 'minecraft-data/minecraft-data/data/pc/1.16.2/tints.json'
 
@@ -82,6 +88,7 @@ interface WasmBlockFaceData {
   visible_faces: number
   ao_data: number[][]
   light_data: number[][]
+  light_combined?: number[][] // Packed combined light for shader path ([u8; 4] per visible face)
 }
 
 export interface WasmGeometryOutput {
@@ -445,6 +452,16 @@ const renderLiquidToGeometry = (
   }
 }
 
+export type RenderWasmOptions = {
+  /** Section height in blocks. Shader-cube path requires 16; other values keep legacy. */
+  sectionHeight?: number
+  /**
+   * Pack full-cube blocks into instanced shader words.
+   * Set false in parity tests that expect legacy vertex buffers only.
+   */
+  shaderCubes?: boolean
+}
+
 /**
  * Render WASM mesher output to Three.js geometry
  */
@@ -453,7 +470,8 @@ export function renderWasmOutputToGeometry(
   version: string,
   sectionKey: string,
   sectionPosition: { x: number, y: number, z: number },
-  world?: World
+  world?: World,
+  options?: RenderWasmOptions,
 ): ExportedSection {
   const DEBUG = false
   const log = (...args) => {
@@ -496,6 +514,12 @@ export function renderWasmOutputToGeometry(
 
   let currentIndex = 0
 
+  const sectionHeight = options?.sectionHeight ?? SECTION_HEIGHT
+  const shaderCubesEnabled = options?.shaderCubes !== false
+  const [sectionOx, sectionOy, sectionOz] = sectionKey.split(',').map((v) => parseInt(v, 10))
+  const shaderWordBuffer: number[] = []
+  const shaderResources = shaderCubesEnabled ? getShaderCubeResources() : null
+
   for (const block of wasmOutput.blocks) {
     const [bx, by, bz] = block.position
     const blockStateId = block.block_state_id
@@ -548,185 +572,32 @@ export function renderWasmOutputToGeometry(
     )
     if (!cachedModel) continue
 
-    if (false) {
-      // For now, use first model variant (can be extended later)
-      const modelVariant = cachedModel!.modelVariants[0]
-      if (!modelVariant) continue
-
-      const { model, globalMatrix, globalShift, elements } = modelVariant
-
-      // Get biome for tint calculation if world is provided
-      let biome: string | undefined
-      if (world) {
-        const blockObj = world!.getBlock(new Vec3(bx, by, bz))
-        biome = blockObj?.biome?.name
-      }
-
-      // Process faces in the same order as TypeScript (iterate through model's faces)
-      // TypeScript uses: for (const face in element.faces)
-      // We need to match this order to get the same vertex ordering
-
-      // Find the element that contains faces (use cached element data)
-      const faceElements = elements.filter(elemData => elemData.element.faces && Object.keys(elemData.element.faces).length > 0)
-
-      if (faceElements.length === 0) continue
-
-      // Map face names to their index in WASM output
-      const faceNameToIndex: Record<string, number> = {
-        'up': 0,
-        'down': 1,
-        'east': 2,
-        'west': 3,
-        'south': 4,
-        'north': 5
-      }
-
-      // WASM processes faces in fixed order: [up, down, east, west, south, north]
-      // Build a mapping from WASM face order to data index
-      const wasmFaceOrder = ['up', 'down', 'east', 'west', 'south', 'north']
-      const wasmFaceToDataIndex: Record<string, number> = {}
-      let dataIndex = 0
-      for (const faceName of wasmFaceOrder) {
-        const faceIdx = faceNameToIndex[faceName]
-        if ((block.visible_faces & (1 << faceIdx)) !== 0) {
-          wasmFaceToDataIndex[faceName] = dataIndex++
-        }
-      }
-
-      // Process faces in the order they appear in the model (matching TS)
-      for (const elemData of faceElements) {
-        const element = elemData.element
-        const localMatrix = elemData.localMatrix
-        const localShift = elemData.localShift
-
-        // eslint-disable-next-line guard-for-in
-        for (const faceName in element.faces) {
-          const faceIdx = faceNameToIndex[faceName]
-          if (faceIdx === undefined) continue
-
-          // Check if this face is visible in WASM output
-          if ((block.visible_faces & (1 << faceIdx)) === 0) {
-            continue
-          }
-
-          const matchingEFace = element.faces[faceName]
-          const { dir, corners, mask1, mask2 } = elemFaces[faceName]
-
-          // Get the correct data index for this face based on WASM's processing order
-          const faceDataIndex = wasmFaceToDataIndex[faceName]
-          if (faceDataIndex === undefined) continue
-
-          const aoValues = block.ao_data[faceDataIndex]
-          const lightValues = block.light_data[faceDataIndex]
-
-          log(`[WASM]   Face ${faceIdx} (${faceName}): dir=[${dir.join(',')}], ao=[${aoValues.join(',')}], light=[${lightValues.map(l => l.toFixed(3)).join(',')}]`)
-
-          const texture = matchingEFace.texture as any
-          const u = texture.u || 0
-          const v = texture.v || 0
-          const su = texture.su || 1
-          const sv = texture.sv || 1
-
-          // UV rotation (matching reference implementation)
-          let r = matchingEFace.rotation || 0
-          if (faceName === 'down') {
-            r += 180
-          }
-          const uvcs = Math.cos(r * Math.PI / 180)
-          const uvsn = -Math.sin(r * Math.PI / 180)
-
-          // Get tint (use cached model data and world if available)
-          const tint = getTint(matchingEFace, cachedModel!.blockName, cachedModel!.blockProps, biome, world)
-
-          const minx = element.from[0]
-          const miny = element.from[1]
-          const minz = element.from[2]
-          const maxx = element.to[0]
-          const maxy = element.to[1]
-          const maxz = element.to[2]
-
-          // Calculate transformed direction
-          const transformedDir = matmul3(globalMatrix, dir)
-
-          // Add 4 vertices for this face
-          const baseIndex = currentIndex
-          for (let cornerIdx = 0; cornerIdx < 4; cornerIdx++) {
-            const pos = corners[cornerIdx]
-
-            // Calculate vertex position (matching reference)
-            let vertex = [
-              (pos[0] ? maxx : minx),
-              (pos[1] ? maxy : miny),
-              (pos[2] ? maxz : minz)
-            ]
-
-            // Apply element rotation
-            vertex = vecadd3(matmul3(localMatrix, vertex), localShift)
-            // Apply model rotation
-            vertex = vecadd3(matmul3(globalMatrix, vertex), globalShift)
-            // Convert to block coordinates (0-1)
-            vertex = vertex.map(v => v / 16)
-
-            // World position (relative to section)
-            const worldPos = [
-              vertex[0] + (bx & 15) - 8,
-              vertex[1] + (by & 15) - 8,
-              vertex[2] + (bz & 15) - 8
-            ]
-
-            log(`[WASM]     Corner ${cornerIdx}: corner=[${pos.join(',')}], vertex=[${vertex.map(v => v.toFixed(3)).join(',')}], worldPos=[${worldPos.map(v => v.toFixed(3)).join(',')}]`)
-
-            positions.push(...worldPos)
-
-            // Normal (transformed direction)
-            normals.push(transformedDir[0], transformedDir[1], transformedDir[2])
-
-            // Color (with AO and light from WASM) - matching TS formula exactly
-            const ao = aoValues[cornerIdx]
-
-            // TS calculation:
-            // baseLight = world.getLight(neighborPos, ...) / 15  (0-1 range)
-            // cornerLightResult = baseLight * 15  (0-15 range, or interpolated if smooth lighting)
-            // light = (ao + 1) / 4 * (cornerLightResult / 15)
-            // finalColor = baseLight * tint * light
-
-            // WASM provides lightValues in 0-1 range (already divided by 15)
-            // But WASM light calculation seems to return 0.0, so we need to handle that
-            // In the test case, TypeScript gets baseLight = 1.0 (full brightness)
-            // So we should use 1.0 as the base light value when WASM returns 0
-            const cornerLight15 = (lightValues[cornerIdx] ?? 1) * 15
-            const faceDir = transformedDir as [number, number, number]
-            const light = computeMesherVertexLight(world, ao, cornerLight15, faceDir)
-
-            colors.push(tint[0] * light, tint[1] * light, tint[2] * light)
-
-            // UV calculation (matching reference exactly)
-            const baseu = (pos[3] - 0.5) * uvcs - (pos[4] - 0.5) * uvsn + 0.5
-            const basev = (pos[3] - 0.5) * uvsn + (pos[4] - 0.5) * uvcs + 0.5
-            const finalU = baseu * su + u
-            const finalV = basev * sv + v
-            log(`[WASM]       UV: cornerUV=[${pos[3]},${pos[4]}], baseUV=[${baseu.toFixed(6)},${basev.toFixed(6)}], finalUV=[${finalU.toFixed(6)},${finalV.toFixed(6)}], texture=[u=${u},v=${v},su=${su},sv=${sv}], rotation=${r}`)
-            uvs.push(finalU, finalV)
-
-            currentIndex++
-          }
-
-          // Add indices (2 triangles) - matching TS AO-optimized winding
-          // TS uses: if (doAO && aos[0] + aos[3] >= aos[1] + aos[2]) { optimized } else { standard }
-          let tri1: number[], tri2: number[]
-          if (aoValues[0] + aoValues[3] >= aoValues[1] + aoValues[2]) {
-            // AO-optimized winding
-            tri1 = [baseIndex, baseIndex + 3, baseIndex + 2]
-            tri2 = [baseIndex, baseIndex + 1, baseIndex + 3]
-            log(`[WASM]     Indices (AO optimized): tri1=[${tri1.join(',')}], tri2=[${tri2.join(',')}], aos=[${aoValues.join(',')}]`)
-          } else {
-            // Standard winding
-            tri1 = [baseIndex, baseIndex + 1, baseIndex + 2]
-            tri2 = [baseIndex + 2, baseIndex + 1, baseIndex + 3]
-            log(`[WASM]     Indices (standard): tri1=[${tri1.join(',')}], tri2=[${tri2.join(',')}], aos=[${aoValues.join(',')}]`)
-          }
-          indices.push(...tri1, ...tri2)
-        }
+    if (shaderResources) {
+      const modelVars = cachedModel.models[0]
+      const model = modelVars?.[0]
+      const element = model?.elements?.[0]
+      if (model && element) {
+        const doAO = (model as { ao?: boolean }).ao ?? cachedModel.boundingBox !== 'empty'
+        const emitted = tryBuildShaderCubeInstances(
+          block,
+          {
+            blockName: cachedModel.blockName,
+            blockProps: cachedModel.blockProps,
+            isCube: cachedModel.isCube,
+            model,
+          },
+          model,
+          {
+            sectionOrigin: { x: sectionOx, y: sectionOy, z: sectionOz },
+            sectionHeight,
+            biome,
+            tintPalette: shaderResources.tintPalette,
+            textureIndexMapping: shaderResources.textureIndexMapping,
+            doAO,
+          },
+          shaderWordBuffer,
+        )
+        if (emitted) continue
       }
     }
 
@@ -1002,7 +873,9 @@ export function renderWasmOutputToGeometry(
     }
   }
 
-  const result = {
+  const shaderCubes = buildShaderCubesFromWords(shaderWordBuffer)
+
+  const result: ExportedSection = {
     key: sectionKey,
     position: sectionPosition,
     geometry: {
@@ -1012,6 +885,7 @@ export function renderWasmOutputToGeometry(
       uvs,
       indices,
     },
+    ...(shaderCubes ? { shaderCubes } : {}),
   }
 
   log(`[WASM] Final geometry summary:`)
@@ -1059,10 +933,10 @@ export function renderWasmOutputToGeometry(
 export function splitColumnWasmOutputToSections(
   fullColumnOutput: WasmGeometryOutput,
   requestedSectionKeys: Array<{ x: number, y: number, z: number }>,
-  ctx: { version: string, world?: World, sectionHeight?: number }
+  ctx: { version: string, world?: World, sectionHeight?: number, shaderCubes?: boolean }
 ): Map<string, { exported: ExportedSection, blocksCount: number }> {
   const { version, world } = ctx
-  const sectionHeight = ctx.sectionHeight ?? 16
+  const sectionHeight = ctx.sectionHeight ?? SECTION_HEIGHT
 
   // Bucket blocks by section Y once, so we don't re-scan the full column
   // for every requested section. Bucket key = section-relative chunk Y
@@ -1101,7 +975,8 @@ export function splitColumnWasmOutputToSections(
       version,
       sectionKey,
       sectionPosition,
-      world
+      world,
+      { sectionHeight, shaderCubes: ctx.shaderCubes },
     )
     out.set(sectionKey, { exported, blocksCount: sectionBlocks.length })
   }
@@ -1121,7 +996,9 @@ export function wasmOutputToExportFormat(
   cameraRotation = { pitch: 0, yaw: 0 },
   world?: World
 ): ExportedWorldGeometry {
-  const section = renderWasmOutputToGeometry(wasmOutput, version, sectionKey, sectionPosition, world)
+  const section = renderWasmOutputToGeometry(wasmOutput, version, sectionKey, sectionPosition, world, {
+    shaderCubes: true,
+  })
 
   return {
     version,