|
| 1 | +import * as THREE from 'three' |
| 2 | +import { Vec3 } from 'vec3' |
| 3 | +import { createCanvas } from '../lib/utils' |
| 4 | +import type { WorldRendererThree } from './worldrendererThree' |
| 5 | + |
| 6 | +type BannerBlockEntity = { |
| 7 | + Patterns?: Array<{ |
| 8 | + Color?: number |
| 9 | + Pattern?: string |
| 10 | + }> |
| 11 | +} |
| 12 | + |
| 13 | +// Banner cloth size is 20x40 |
| 14 | +const BANNER_WIDTH = 20 |
| 15 | +const BANNER_HEIGHT = 40 |
| 16 | + |
| 17 | +// Map banner block names to base color IDs |
| 18 | +const BANNER_NAME_TO_COLOR: Record<string, number> = { |
| 19 | + 'white_banner': 15, |
| 20 | + 'orange_banner': 14, |
| 21 | + 'magenta_banner': 13, |
| 22 | + 'light_blue_banner': 12, |
| 23 | + 'yellow_banner': 11, |
| 24 | + 'lime_banner': 10, |
| 25 | + 'pink_banner': 9, |
| 26 | + 'gray_banner': 8, |
| 27 | + 'light_gray_banner': 7, |
| 28 | + 'cyan_banner': 6, |
| 29 | + 'purple_banner': 5, |
| 30 | + 'blue_banner': 4, |
| 31 | + 'brown_banner': 3, |
| 32 | + 'green_banner': 2, |
| 33 | + 'red_banner': 1, |
| 34 | + 'black_banner': 0, |
| 35 | +} |
| 36 | + |
| 37 | +// Basic Minecraft banner colors (DyeColor enum values) |
| 38 | +const BANNER_COLORS: Record<number, string> = { |
| 39 | + 0: '#1d1d21', // black |
| 40 | + 1: '#b02e26', // red |
| 41 | + 2: '#5e7c16', // green |
| 42 | + 3: '#835432', // brown |
| 43 | + 4: '#3c44aa', // blue |
| 44 | + 5: '#8932b8', // purple |
| 45 | + 6: '#169c9c', // cyan |
| 46 | + 7: '#9d9d97', // light_gray |
| 47 | + 8: '#474f52', // gray |
| 48 | + 9: '#f38baa', // pink |
| 49 | + 10: '#80c71f', // lime |
| 50 | + 11: '#fed83d', // yellow |
| 51 | + 12: '#3ab3da', // light_blue |
| 52 | + 13: '#c74ebd', // magenta |
| 53 | + 14: '#f9801d', // orange |
| 54 | + 15: '#f9fffe', // white |
| 55 | +} |
| 56 | + |
| 57 | +// Extract base color from banner block name |
| 58 | +function getBannerBaseColor (blockName: string): number { |
| 59 | + // Remove _wall_banner suffix if present |
| 60 | + const baseName = blockName.replace('_wall_banner', '_banner') |
| 61 | + return BANNER_NAME_TO_COLOR[baseName] ?? 15 // Default to white |
| 62 | +} |
| 63 | + |
| 64 | +// Basic pattern rendering (simplified - just solid colors for now) |
| 65 | +const renderPattern = ( |
| 66 | + ctx: OffscreenCanvasRenderingContext2D, |
| 67 | + pattern: string, |
| 68 | + color: string, |
| 69 | + x: number, |
| 70 | + y: number, |
| 71 | + width: number, |
| 72 | + height: number |
| 73 | +) => { |
| 74 | + ctx.fillStyle = color |
| 75 | + // For now, just render basic patterns as solid colors |
| 76 | + // TODO: Implement actual pattern shapes (stripes, crosses, etc.) |
| 77 | + switch (pattern) { |
| 78 | + case 'bs': // Base |
| 79 | + ctx.fillRect(x, y, width, height) |
| 80 | + break |
| 81 | + case 'ls': // Left stripe |
| 82 | + ctx.fillRect(x, y, width / 3, height) |
| 83 | + break |
| 84 | + case 'rs': // Right stripe |
| 85 | + ctx.fillRect(x + (width * 2 / 3), y, width / 3, height) |
| 86 | + break |
| 87 | + case 'ts': // Top stripe |
| 88 | + ctx.fillRect(x, y, width, height / 3) |
| 89 | + break |
| 90 | + case 'ms': // Middle stripe |
| 91 | + ctx.fillRect(x, y + (height / 3), width, height / 3) |
| 92 | + break |
| 93 | + case 'drs': // Down-right stripe |
| 94 | + ctx.fillRect(x, y, width / 2, height / 2) |
| 95 | + break |
| 96 | + case 'dls': // Down-left stripe |
| 97 | + ctx.fillRect(x + (width / 2), y, width / 2, height / 2) |
| 98 | + break |
| 99 | + case 'ss': // Small stripes |
| 100 | + for (let i = 0; i < width; i += 2) { |
| 101 | + ctx.fillRect(x + i, y, 1, height) |
| 102 | + } |
| 103 | + break |
| 104 | + case 'cr': // Cross |
| 105 | + ctx.fillRect(x, y + (height / 3), width, height / 3) |
| 106 | + ctx.fillRect(x + (width / 3), y, width / 3, height) |
| 107 | + break |
| 108 | + case 'sc': // Straight cross |
| 109 | + ctx.fillRect(x, y + (height / 2) - 1, width, 2) |
| 110 | + ctx.fillRect(x + (width / 2) - 1, y, 2, height) |
| 111 | + break |
| 112 | + default: |
| 113 | + // Default: fill entire area |
| 114 | + ctx.fillRect(x, y, width, height) |
| 115 | + } |
| 116 | +} |
| 117 | + |
| 118 | +// Create a cache key from banner content (base color + patterns) |
| 119 | +function createBannerCacheKey (baseColor: number, patterns: Array<{ Color?: number, Pattern?: string }> | undefined): string { |
| 120 | + if (!patterns || patterns.length === 0) { |
| 121 | + return `banner_${baseColor}_empty` |
| 122 | + } |
| 123 | + const patternStr = patterns.map(p => `${p.Pattern ?? 'bs'}_${p.Color ?? 0}`).join(',') |
| 124 | + return `banner_${baseColor}_${patternStr}` |
| 125 | +} |
| 126 | + |
| 127 | +export const renderBanner = ( |
| 128 | + baseColor: number, |
| 129 | + blockEntity: BannerBlockEntity, |
| 130 | + canvasCreator = (width: number, height: number): OffscreenCanvas => { |
| 131 | + return createCanvas(width, height) |
| 132 | + } |
| 133 | +) => { |
| 134 | + // Create canvas with banner cloth size (20x40) |
| 135 | + const scale = 1 |
| 136 | + const canvas = canvasCreator(BANNER_WIDTH * scale, BANNER_HEIGHT * scale) |
| 137 | + const ctx = canvas.getContext('2d')! |
| 138 | + |
| 139 | + if (!ctx) { |
| 140 | + console.warn('Failed to get 2d context for banner rendering') |
| 141 | + return undefined |
| 142 | + } |
| 143 | + |
| 144 | + ctx.imageSmoothingEnabled = false |
| 145 | + |
| 146 | + // Always render base color first (even if no patterns) |
| 147 | + const baseColorHex = BANNER_COLORS[baseColor] || BANNER_COLORS[15] |
| 148 | + ctx.fillStyle = baseColorHex |
| 149 | + ctx.fillRect(0, 0, BANNER_WIDTH * scale, BANNER_HEIGHT * scale) |
| 150 | + |
| 151 | + // Render patterns on top of base color (if any) |
| 152 | + if (blockEntity?.Patterns && blockEntity.Patterns.length > 0) { |
| 153 | + for (const patternData of blockEntity.Patterns) { |
| 154 | + const colorId = patternData.Color ?? 0 |
| 155 | + const pattern = patternData.Pattern ?? 'bs' |
| 156 | + const color = BANNER_COLORS[colorId] || BANNER_COLORS[0] |
| 157 | + |
| 158 | + // Render each pattern on top of previous ones |
| 159 | + renderPattern( |
| 160 | + ctx, |
| 161 | + pattern, |
| 162 | + color, |
| 163 | + 0, |
| 164 | + 0, |
| 165 | + BANNER_WIDTH * scale, |
| 166 | + BANNER_HEIGHT * scale |
| 167 | + ) |
| 168 | + } |
| 169 | + } |
| 170 | + |
| 171 | + return canvas |
| 172 | +} |
| 173 | + |
| 174 | + |
| 175 | +// Banner texture cache with reference counting |
| 176 | +const bannerTextureCache = new Map<string, { texture: THREE.Texture, refCount: number }>() |
| 177 | + |
| 178 | +export function getBannerTexture ( |
| 179 | + worldRenderer: WorldRendererThree, |
| 180 | + blockName: string, |
| 181 | + blockEntity: any |
| 182 | +): THREE.Texture | undefined { |
| 183 | + // Extract base color from block name |
| 184 | + const baseColor = getBannerBaseColor(blockName) |
| 185 | + |
| 186 | + // Create cache key from banner content (not position) |
| 187 | + const cacheKey = createBannerCacheKey(baseColor, blockEntity?.Patterns) |
| 188 | + |
| 189 | + // Check cache |
| 190 | + const cached = bannerTextureCache.get(cacheKey) |
| 191 | + if (cached) { |
| 192 | + cached.refCount++ |
| 193 | + return cached.texture |
| 194 | + } |
| 195 | + |
| 196 | + // Render new banner |
| 197 | + const canvas = renderBanner(baseColor, blockEntity) |
| 198 | + if (!canvas) return undefined |
| 199 | + |
| 200 | + const tex = new THREE.Texture(canvas) |
| 201 | + tex.magFilter = THREE.NearestFilter |
| 202 | + tex.minFilter = THREE.NearestFilter |
| 203 | + tex.needsUpdate = true |
| 204 | + |
| 205 | + // Store in cache with reference count |
| 206 | + bannerTextureCache.set(cacheKey, { texture: tex, refCount: 1 }) |
| 207 | + return tex |
| 208 | +} |
| 209 | + |
| 210 | +export function releaseBannerTexture (texture: THREE.Texture): void { |
| 211 | + // Find and decrement reference count |
| 212 | + for (const [key, cached] of bannerTextureCache.entries()) { |
| 213 | + if (cached.texture === texture) { |
| 214 | + cached.refCount-- |
| 215 | + if (cached.refCount <= 0) { |
| 216 | + // Cleanup unused texture |
| 217 | + cached.texture.dispose() |
| 218 | + bannerTextureCache.delete(key) |
| 219 | + } |
| 220 | + return |
| 221 | + } |
| 222 | + } |
| 223 | +} |
| 224 | + |
| 225 | +export function createBannerMesh ( |
| 226 | + position: Vec3, |
| 227 | + rotation: number, |
| 228 | + isWall: boolean, |
| 229 | + texture: THREE.Texture |
| 230 | +): THREE.Group & { bannerTexture?: THREE.Texture } { |
| 231 | + const bannerWidth = 13.6 / 16 |
| 232 | + const bannerHeight = 28 / 16 |
| 233 | + const clothXOffset = 0 |
| 234 | + |
| 235 | + let clothYOffset: number |
| 236 | + let clothZPosition: number |
| 237 | + let heightOffset: number |
| 238 | + |
| 239 | + if (isWall) { |
| 240 | + // Wall banner: Cloth from [1.2, -14.6, 14.5] to [14.8, 13.4, 15] |
| 241 | + clothYOffset = (-14.6 + 13.4) / 2 / 16 - 0.5 |
| 242 | + clothZPosition = 1 - 14.75 / 16 - 0.5 |
| 243 | + heightOffset = 1 / 2 |
| 244 | + } else { |
| 245 | + // Standing banner: Cloth from [1.2, 1.4, 7] to [14.8, 29.4, 7.5] |
| 246 | + clothYOffset = (1.4 + 29.4) / 2 / 16 |
| 247 | + clothZPosition = 1 - 7.25 / 16 - 0.5 |
| 248 | + heightOffset = 0 |
| 249 | + } |
| 250 | + |
| 251 | + const mesh = new THREE.Mesh( |
| 252 | + new THREE.PlaneGeometry(bannerWidth, bannerHeight), |
| 253 | + new THREE.MeshBasicMaterial({ map: texture, transparent: true }) |
| 254 | + ) |
| 255 | + mesh.renderOrder = 999 |
| 256 | + |
| 257 | + const thickness = 0.5 / 16 |
| 258 | + const wallSpacing = 0.25 / 16 |
| 259 | + if (isWall) { |
| 260 | + mesh.position.set(clothXOffset, clothYOffset, clothZPosition + wallSpacing + 0.004) |
| 261 | + } else { |
| 262 | + mesh.position.set(clothXOffset, clothYOffset, clothZPosition + thickness / 2 + 0.004) |
| 263 | + } |
| 264 | + |
| 265 | + const group = new THREE.Group() as THREE.Group & { bannerTexture?: THREE.Texture } |
| 266 | + group.rotation.set( |
| 267 | + 0, |
| 268 | + -THREE.MathUtils.degToRad(rotation * (isWall ? 90 : 45 / 2)), |
| 269 | + 0 |
| 270 | + ) |
| 271 | + group.add(mesh) |
| 272 | + group.bannerTexture = texture |
| 273 | + group.position.set(position.x + 0.5, position.y + heightOffset, position.z + 0.5) |
| 274 | + return group |
| 275 | +} |
0 commit comments