minecraft-renderer 0.1.43 → 0.1.44

package/src/three/menuBackground/index.ts

@@ -0,0 +1,36 @@
+//@ts-nocheck
+export { MENU_BACKGROUND_MC_VERSION } from './shared'
+export type { MenuBackgroundView } from './activeView'
+export { resizeMenuBackgroundCamera } from './activeView'
+export type { MenuBackgroundMode, MenuBackgroundOptions } from './types'
+export { resolveMenuBackgroundMode } from './types'
+export { ClassicMenuBackground } from './classic'
+export type {
+  FuturisticSceneId,
+  FuturisticCameraId,
+  FuturisticMenuBackgroundOptions,
+  MinecraftBlockGroupId
+} from './futuristic'
+export {
+  FuturisticMenuBackground,
+  FUTURISTIC_SCENE_IDS,
+  FUTURISTIC_CAMERA_IDS,
+  FUTURISTIC_SCENE_LABELS,
+  FUTURISTIC_CAMERA_LABELS,
+  MINECRAFT_BLOCK_GROUPS,
+  MINECRAFT_BLOCK_GROUP_IDS,
+  MINECRAFT_BLOCK_GROUP_LABELS
+} from './futuristic'
+export { WorldBlocksMenuBackground } from './worldBlocks'
+export { MenuBackgroundRenderer } from './renderer'
+export {
+  MENU_BACKGROUND_OPTION_DEFAULTS,
+  MENU_BACKGROUND_MOTION_DEFAULTS,
+  menuBackgroundSpeedToMultiplier
+} from './config'
+export {
+  RENDERER_DEFAULT_OPTIONS,
+  RENDERER_OPTIONS_META,
+  RENDERER_RENDER_GUI_SECTIONS
+} from './defaultOptions'
+export type { RendererDefaultOptionKey, RendererOptionMeta } from './defaultOptions'

package/src/three/menuBackground/renderer.ts

@@ -0,0 +1,97 @@
+//@ts-nocheck
+import * as THREE from 'three'
+import type { GraphicsInitOptions } from '../../graphicsBackend/types'
+import type { DocumentRenderer } from '../documentRenderer'
+import { ClassicMenuBackground } from './classic'
+import { FuturisticMenuBackground } from './futuristic'
+import { WorldBlocksMenuBackground } from './worldBlocks'
+import type { MenuBackgroundView } from './activeView'
+import type { MenuBackgroundOptions } from './types'
+import { resolveMenuBackgroundMode } from './types'
+
+/**
+ * Orchestrates main-menu background rendering (dispatches to classic / futuristic / world-blocks).
+ */
+export class MenuBackgroundRenderer {
+  private active?: MenuBackgroundView
+  private readonly abortController = new AbortController()
+  private readonly mode: ReturnType<typeof resolveMenuBackgroundMode>
+  private lastFrameTime = 0
+
+  constructor(
+    private readonly documentRenderer: DocumentRenderer,
+    private readonly options: GraphicsInitOptions,
+    menuBackgroundOptions: MenuBackgroundOptions = {},
+    singleFileBuild = false
+  ) {
+    this.mode = resolveMenuBackgroundMode(menuBackgroundOptions, singleFileBuild)
+  }
+
+  /** Active futuristic instance when that style is running. */
+  get futuristic(): FuturisticMenuBackground | undefined {
+    return this.active instanceof FuturisticMenuBackground ? this.active : undefined
+  }
+
+  get scene(): THREE.Scene | undefined {
+    return this.active?.scene
+  }
+
+  get camera(): THREE.PerspectiveCamera | undefined {
+    return this.active?.camera
+  }
+
+  async start(menuBackgroundOptions: MenuBackgroundOptions = {}) {
+    this.active = this.createImplementation(menuBackgroundOptions)
+    await this.active.init()
+
+    if (this.active.scene.background instanceof THREE.Color) {
+      this.documentRenderer.renderer.setClearColor(this.active.scene.background)
+    }
+
+    this.lastFrameTime = performance.now()
+    this.documentRenderer.render = (sizeChanged = false) => {
+      const now = performance.now()
+      const dt = Math.min((now - this.lastFrameTime) / 1000, 0.05)
+      this.lastFrameTime = now
+
+      const view = this.active
+      if (!view) return
+
+      view.update(dt, sizeChanged)
+      this.documentRenderer.renderer.render(view.scene, view.camera)
+    }
+  }
+
+  private createImplementation(options: MenuBackgroundOptions): MenuBackgroundView {
+    switch (this.mode) {
+      case 'futuristic':
+        return new FuturisticMenuBackground(
+          this.documentRenderer,
+          {
+            useMinecraftTextures: options.useMinecraftTextures,
+            initialScene: options.futuristicScene,
+            initialCamera: options.futuristicCamera,
+            initialBlockGroup: options.futuristicBlockGroup,
+            initialCameraSpeed: options.futuristicCameraSpeed,
+            initialBlockSpeed: options.futuristicBlockSpeed,
+            resourcesManager: options.resourcesManager
+          },
+          this.abortController.signal
+        )
+      case 'worldBlocks':
+        return new WorldBlocksMenuBackground(
+          this.documentRenderer,
+          this.options,
+          this.abortController.signal
+        )
+      default:
+        return new ClassicMenuBackground(this.documentRenderer)
+    }
+  }
+
+  dispose() {
+    this.active?.dispose()
+    this.active = undefined
+    this.abortController.abort()
+  }
+}

package/src/three/menuBackground/shared.ts

@@ -0,0 +1,3 @@
+//@ts-nocheck
+/** Minecraft version used when the menu background loads block assets (world-blocks / textured cubes). */
+export const MENU_BACKGROUND_MC_VERSION = '1.21.4'

package/src/three/menuBackground/types.ts

@@ -0,0 +1,37 @@
+//@ts-nocheck
+import type { ResourcesManager } from '../../resourcesManager/resourcesManager'
+import type { FuturisticCameraId, FuturisticSceneId, MinecraftBlockGroupId } from './futuristic'
+import { MENU_BACKGROUND_OPTION_DEFAULTS } from './config'
+
+export type { FuturisticCameraId, FuturisticSceneId, MinecraftBlockGroupId } from './futuristic'
+
+export type MenuBackgroundMode = 'classic' | 'futuristic' | 'worldBlocks'
+
+export interface MenuBackgroundOptions {
+  /** Visual style. Defaults to {@link MENU_BACKGROUND_OPTION_DEFAULTS.mode}, or `worldBlocks` in single-file build. */
+  mode?: MenuBackgroundMode
+  /** Futuristic style: load block atlas and render textured cubes (requires assets / mcData). */
+  useMinecraftTextures?: boolean
+  futuristicScene?: FuturisticSceneId
+  futuristicCamera?: FuturisticCameraId
+  /** Block pool when {@link useMinecraftTextures} is enabled. */
+  futuristicBlockGroup?: MinecraftBlockGroupId
+  /** Camera path speed (1 = 100%). */
+  futuristicCameraSpeed?: number
+  /** Block fly-through + sky drift speed (1 = 100%). */
+  futuristicBlockSpeed?: number
+  /**
+   * Optional shared resource manager (e.g. appViewer.resourcesManager).
+   * Caller should run `updateAssetsData` after mcData is loaded when using textured cubes.
+   */
+  resourcesManager?: ResourcesManager
+}
+
+export function resolveMenuBackgroundMode(
+  options?: MenuBackgroundOptions,
+  singleFileBuild = false
+): MenuBackgroundMode {
+  if (options?.mode) return options.mode
+  if (singleFileBuild) return 'worldBlocks'
+  return MENU_BACKGROUND_OPTION_DEFAULTS.mode
+}

package/src/three/menuBackground/worldBlocks.ts

@@ -0,0 +1,144 @@
+//@ts-nocheck
+import * as THREE from 'three'
+import { Vec3 } from 'vec3'
+import * as tweenJs from '@tweenjs/tween.js'
+import { getSyncWorld } from '../../playground/shared'
+import type { GraphicsInitOptions } from '../../graphicsBackend/types'
+import { WorldRendererCommon } from '../../lib/worldrendererCommon'
+import { defaultWorldRendererConfig, getDefaultRendererState } from '../../graphicsBackend/config'
+import { ResourcesManager, ResourcesManagerTransferred } from '../../resourcesManager/resourcesManager'
+import { getInitialPlayerStateRenderer } from '../../graphicsBackend/playerState'
+import { WorldRendererThree } from '../worldRendererThree'
+import type { DocumentRenderer } from '../documentRenderer'
+import { MENU_BACKGROUND_MC_VERSION } from './shared'
+import { WorldView } from '../../worldView'
+import type { MenuBackgroundView } from './activeView'
+import { resizeMenuBackgroundCamera } from './activeView'
+
+/**
+ * Menu background built from a wall of random stained-glass blocks (single-file / demo style).
+ */
+export class WorldBlocksMenuBackground implements MenuBackgroundView {
+  private _scene: THREE.Scene
+  private _camera: THREE.PerspectiveCamera
+
+  get scene() { return this._scene }
+  get camera() { return this._camera }
+
+  private worldRenderer?: WorldRendererCommon | WorldRendererThree
+  WorldRendererClass = WorldRendererThree
+
+  constructor(
+    private readonly documentRenderer: DocumentRenderer,
+    private readonly options: GraphicsInitOptions,
+    private readonly abortSignal: AbortSignal
+  ) {
+    this._scene = new THREE.Scene()
+    this._scene.background = new THREE.Color(0x32_45_68)
+    this._camera = new THREE.PerspectiveCamera(
+      85,
+      documentRenderer.canvas.width / documentRenderer.canvas.height,
+      0.05,
+      1000
+    )
+    this.camera.position.set(0, 0, 0)
+    this.camera.rotation.set(0, 0, 0)
+  }
+
+  async init() {
+    const version = MENU_BACKGROUND_MC_VERSION
+    const fullResourceManager = new ResourcesManager()
+    fullResourceManager.currentConfig = { version, noInventoryGui: true }
+    await fullResourceManager.updateAssetsData?.({})
+    if (this.abortSignal.aborted) return
+
+    console.time('load menu background scene')
+    const world = getSyncWorld(version)
+    const PrismarineBlock = require('prismarine-block')
+    const Block = PrismarineBlock(version)
+    const mcData = (globalThis as any).mcData
+    const fullBlocks = mcData.blocksArray.filter((block: { name: string, defaultState: number }) => {
+      if (!block.name.includes('stained_glass')) return false
+      const b = Block.fromStateId(block.defaultState, 0)
+      if (b.shapes?.length !== 1) return false
+      const shape = b.shapes[0]
+      return shape[0] === 0 && shape[1] === 0 && shape[2] === 0 && shape[3] === 1 && shape[4] === 1 && shape[5] === 1
+    })
+
+    const Z = -15
+    const sizeX = 100
+    const sizeY = 100
+    for (let x = -sizeX; x < sizeX; x++) {
+      for (let y = -sizeY; y < sizeY; y++) {
+        const block = fullBlocks[Math.floor(Math.random() * fullBlocks.length)]
+        world.setBlockStateId(new Vec3(x, y, Z), block.defaultState)
+      }
+    }
+
+    this._camera.updateProjectionMatrix()
+    this._camera.position.set(0.5, sizeY / 2 + 0.5, 0.5)
+    this._camera.rotation.set(0, 0, 0)
+    const initPos = new Vec3(...this._camera.position.toArray())
+    const worldView = new WorldView(world, 2, initPos)
+    if (this.abortSignal.aborted) return
+
+    this.worldRenderer = new this.WorldRendererClass(
+      this.documentRenderer.renderer,
+      this.options,
+      {
+        version,
+        worldView,
+        inWorldRenderingConfig: defaultWorldRendererConfig,
+        playerStateReactive: getInitialPlayerStateRenderer().reactive,
+        rendererState: getDefaultRendererState().reactive,
+        nonReactiveState: getDefaultRendererState().nonReactive,
+        resourcesManager: fullResourceManager as ResourcesManagerTransferred
+      }
+    )
+
+    if (this.worldRenderer instanceof WorldRendererThree) {
+      this._scene = this.worldRenderer.realScene
+      this._camera = this.worldRenderer.camera
+    }
+
+    void worldView.init(initPos)
+    await this.worldRenderer.waitForChunksToRender()
+    if (this.abortSignal.aborted) return
+
+    this.setupMouseParallax()
+    console.timeEnd('load menu background scene')
+  }
+
+  update(_dt: number, sizeChanged: boolean) {
+    if (sizeChanged) {
+      resizeMenuBackgroundCamera(this.camera, this.documentRenderer.canvas)
+    }
+  }
+
+  dispose() {
+    this.worldRenderer?.destroy()
+    this.worldRenderer = undefined
+    this._scene.clear()
+  }
+
+  private setupMouseParallax() {
+    const camera = this._camera
+    const initX = camera.position.x
+    const initY = camera.position.y
+    let prevTween: tweenJs.Tween<THREE.Vector3> | undefined
+
+    document.body.addEventListener('pointermove', (e) => {
+      if (e.pointerType !== 'mouse') return
+      const SCALE = 0.2
+      const xRel = e.clientX / window.innerWidth - 0.5
+      const yRel = -(e.clientY / window.innerHeight - 0.5)
+      prevTween?.stop()
+      prevTween = new tweenJs.Tween(camera.position).to({
+        x: initX + xRel * SCALE,
+        y: initY + yRel * SCALE
+      }, 0)
+      prevTween.start()
+      camera.updateProjectionMatrix()
+    }, { signal: this.abortSignal })
+  }
+}

package/src/three/waypointSprite.ts

@@ -2,6 +2,15 @@
 import * as THREE from 'three'
 import { createCanvas } from '../lib/utils'
 
+/**
+ * Limits label texture resolution on high-DPR devices (sprite still sizes in screen px via Three.js;
+ * main win is fewer canvas pixels / less GPU memory — especially on iOS).
+ */
+const LABEL_CANVAS_MAX_DEVICE_PIXEL_RATIO = 1
+
+/** Distance label repaints when this bucket (meters) changes — fewer canvas uploads while moving. */
+const DISTANCE_LABEL_STEP_M = 10
+
 // Centralized visual configuration (in screen pixels)
 export const WAYPOINT_CONFIG = {
   // Target size in screen pixels (this controls the final sprite size)
@@ -60,9 +69,8 @@ export function createWaypointSprite (options: {
   visualScale?: number,
   opacity?: number,
 }): WaypointSprite {
-  const color = options.color ?? 0xFF_00_00
+  let displayColor = options.color ?? 0xFF_00_00
   const depthTest = options.depthTest ?? false
-  const labelYOffset = options.labelYOffset ?? 1.5
 
   // Get visual scale from options, metadata, server metadata, or default
   // Priority: options.visualScale > metadata.visualScale > window.serverMetadata?.waypointVisualScale > DEFAULT
@@ -78,61 +86,87 @@ export function createWaypointSprite (options: {
     ?? (typeof window === 'undefined' ? undefined : (window as any).serverMetadata?.waypointOpacity)
     ?? WAYPOINT_CONFIG.DEFAULT_OPACITY
 
-  // Build combined sprite
-  const sprite = createCombinedSprite(color, options.label ?? '', '0m', depthTest, visualScale)
+  const labelCanvas = createCanvas(getLabelCanvasSize(), getLabelCanvasSize())
+  drawCombinedOntoCanvas(labelCanvas, displayColor, options.label ?? '', '0m', visualScale)
+
+  const labelTexture = new THREE.CanvasTexture(labelCanvas)
+  labelTexture.anisotropy = 1
+  labelTexture.magFilter = THREE.LinearFilter
+  labelTexture.minFilter = THREE.LinearFilter
+  const material = new THREE.SpriteMaterial({
+    map: labelTexture,
+    transparent: true,
+    opacity: 1,
+    depthTest,
+    depthWrite: false,
+  })
+  const sprite = new THREE.Sprite(material)
+  sprite.position.set(0, 0, 0)
   sprite.renderOrder = 10
   sprite.material.opacity = opacity
   let currentLabel = options.label ?? ''
 
-  // Performance optimization: cache distance text to avoid unnecessary updates
   let lastDistanceText = '0m'
-  let lastDistance = 0
+  let lastDistanceBucket = Number.NaN
 
-  // Offscreen arrow (detached by default)
   let arrowSprite: THREE.Sprite | undefined
+  let arrowCanvas: OffscreenCanvas | undefined
+  let arrowCtx: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D | undefined
+  let arrowTexture: THREE.CanvasTexture | undefined
   let arrowParent: THREE.Object3D | null = null
   let arrowEnabled = WAYPOINT_CONFIG.ARROW.enabledDefault
 
-  // Group for easy add/remove
   const group = new THREE.Group()
   group.add(sprite)
 
-  // Initial position
   const { x, y, z } = options.position
   group.position.set(x, y, z)
 
+  function refreshLabelTexture () {
+    labelTexture.needsUpdate = true
+  }
+
+  function paintArrowOnCanvas () {
+    if (!arrowCanvas || !arrowCtx) return
+    const size = arrowCanvas.width
+    arrowCtx.clearRect(0, 0, size, size)
+    arrowCtx.beginPath()
+    arrowCtx.moveTo(size * 0.15, size * 0.5)
+    arrowCtx.lineTo(size * 0.85, size * 0.5)
+    arrowCtx.lineTo(size * 0.5, size * 0.15)
+    arrowCtx.closePath()
+    const colorHex = `#${displayColor.toString(16).padStart(6, '0')}`
+    arrowCtx.lineWidth = 6
+    arrowCtx.strokeStyle = 'black'
+    arrowCtx.stroke()
+    arrowCtx.fillStyle = colorHex
+    arrowCtx.fill()
+    if (arrowTexture) arrowTexture.needsUpdate = true
+  }
+
   function setColor (newColor: number) {
-    const canvas = drawCombinedCanvas(newColor, currentLabel, '0m', visualScale)
-    const texture = new THREE.CanvasTexture(canvas)
-    const mat = sprite.material
-    mat.map?.dispose()
-    mat.map = texture
-    mat.needsUpdate = true
+    displayColor = newColor
+    lastDistanceText = '0m'
+    lastDistanceBucket = 0
+    drawCombinedOntoCanvas(labelCanvas, displayColor, currentLabel, '0m', visualScale)
+    refreshLabelTexture()
+    if (arrowSprite) paintArrowOnCanvas()
   }
 
   function setLabel (newLabel?: string) {
     currentLabel = newLabel ?? ''
-    const canvas = drawCombinedCanvas(color, currentLabel, '0m', visualScale)
-    const texture = new THREE.CanvasTexture(canvas)
-    const mat = sprite.material
-    mat.map?.dispose()
-    mat.map = texture
-    mat.needsUpdate = true
+    drawCombinedOntoCanvas(labelCanvas, displayColor, currentLabel, lastDistanceText, visualScale)
+    refreshLabelTexture()
   }
 
   function updateDistanceText (label: string, distanceText: string) {
-    // Performance optimization: only update if distance text actually changed
     if (distanceText === lastDistanceText) {
       return
     }
     lastDistanceText = distanceText
 
-    const canvas = drawCombinedCanvas(color, label, distanceText, visualScale)
-    const texture = new THREE.CanvasTexture(canvas)
-    const mat = sprite.material
-    mat.map?.dispose()
-    mat.map = texture
-    mat.needsUpdate = true
+    drawCombinedOntoCanvas(labelCanvas, displayColor, label, distanceText, visualScale)
+    refreshLabelTexture()
   }
 
   function setVisible (visible: boolean) {
@@ -143,7 +177,6 @@ export function createWaypointSprite (options: {
     group.position.set(nx, ny, nz)
   }
 
-  // Keep constant pixel size on screen using global config
   function updateScaleScreenPixels (
     cameraPosition: THREE.Vector3,
     cameraFov: number,
@@ -152,7 +185,6 @@ export function createWaypointSprite (options: {
   ) {
     const vFovRad = cameraFov * Math.PI / 180
     const worldUnitsPerScreenHeightAtDist = Math.tan(vFovRad / 2) * 2 * distance
-    // Use configured target screen size with visual scale multiplier
     const scale = worldUnitsPerScreenHeightAtDist * (WAYPOINT_CONFIG.TARGET_SCREEN_PX * visualScale / viewportHeightPx)
     sprite.scale.set(scale, scale, 1)
   }
@@ -160,28 +192,15 @@ export function createWaypointSprite (options: {
   function ensureArrow () {
     if (arrowSprite) return
     const size = 128
-    const canvas = createCanvas(size, size)
-    const ctx = canvas.getContext('2d')!
-    ctx.clearRect(0, 0, size, size)
-
-    // Draw arrow shape
-    ctx.beginPath()
-    ctx.moveTo(size * 0.15, size * 0.5)
-    ctx.lineTo(size * 0.85, size * 0.5)
-    ctx.lineTo(size * 0.5, size * 0.15)
-    ctx.closePath()
-
-    // Use waypoint color for arrow
-    const colorHex = `#${color.toString(16).padStart(6, '0')}`
-    ctx.lineWidth = 6
-    ctx.strokeStyle = 'black'
-    ctx.stroke()
-    ctx.fillStyle = colorHex
-    ctx.fill()
-
-    const texture = new THREE.CanvasTexture(canvas)
-    const material = new THREE.SpriteMaterial({ map: texture, transparent: true, depthTest: false, depthWrite: false, opacity })
-    arrowSprite = new THREE.Sprite(material)
+    arrowCanvas = createCanvas(size, size)
+    arrowCtx = arrowCanvas.getContext('2d')!
+    paintArrowOnCanvas()
+    arrowTexture = new THREE.CanvasTexture(arrowCanvas)
+    arrowTexture.anisotropy = 1
+    arrowTexture.magFilter = THREE.LinearFilter
+    arrowTexture.minFilter = THREE.LinearFilter
+    const matTex = new THREE.SpriteMaterial({ map: arrowTexture, transparent: true, depthTest: false, depthWrite: false, opacity })
+    arrowSprite = new THREE.Sprite(matTex)
     arrowSprite.renderOrder = 12
     arrowSprite.visible = false
     if (arrowParent) arrowParent.add(arrowSprite)
@@ -306,9 +325,8 @@ export function createWaypointSprite (options: {
     return false
   }
 
-  function computeDistance (_cameraPosition: THREE.Vector3): number {
-    // group.position is in scene space; camera is at scene origin (0,0,0)
-    return group.position.length()
+  function computeDistance (cameraPosition: THREE.Vector3): number {
+    return cameraPosition.distanceTo(group.position)
   }
 
   function updateForCamera (
@@ -318,17 +336,14 @@ export function createWaypointSprite (options: {
     viewportHeightPx: number
   ): boolean {
     const distance = computeDistance(cameraPosition)
-    // Keep constant pixel size
     updateScaleScreenPixels(cameraPosition, camera.fov, distance, viewportHeightPx)
 
-    // Performance optimization: only update distance text if distance changed significantly
-    const roundedDistance = Math.round(distance)
-    if (Math.abs(roundedDistance - lastDistance) >= 1) {
-      lastDistance = roundedDistance
-      updateDistanceText(currentLabel, `${roundedDistance}m`)
+    const bucket = Math.round(distance / DISTANCE_LABEL_STEP_M) * DISTANCE_LABEL_STEP_M
+    if (bucket !== lastDistanceBucket) {
+      lastDistanceBucket = bucket
+      updateDistanceText(currentLabel, `${Math.max(0, bucket)}m`)
     }
 
-    // Update arrow and visibility
     const onScreen = updateOffscreenArrow(camera, viewportWidthPx, viewportHeightPx)
     setVisible(onScreen)
     return onScreen
@@ -339,7 +354,6 @@ export function createWaypointSprite (options: {
     mat.map?.dispose()
     mat.dispose()
     if (arrowSprite) {
-      // Remove arrow from parent before disposing
       if (arrowSprite.parent) {
         arrowSprite.parent.remove(arrowSprite)
       }
@@ -347,6 +361,10 @@ export function createWaypointSprite (options: {
       am.map?.dispose()
       am.dispose()
     }
+    arrowSprite = undefined
+    arrowCanvas = undefined
+    arrowCtx = undefined
+    arrowTexture = undefined
   }
 
   return {
@@ -365,41 +383,46 @@ export function createWaypointSprite (options: {
 }
 
 // Internal helpers
-function drawCombinedCanvas (color: number, id: string, distance: string, visualScale = 1): OffscreenCanvas {
-  const scale = WAYPOINT_CONFIG.CANVAS_SCALE * (globalThis.devicePixelRatio || 1)
-  const size = WAYPOINT_CONFIG.CANVAS_SIZE * scale
-  const canvas = createCanvas(size, size)
+function computeLabelCanvasLineScale (): number {
+  const dpr = globalThis.devicePixelRatio || 1
+  const effectiveDpr = Math.min(dpr, LABEL_CANVAS_MAX_DEVICE_PIXEL_RATIO)
+  return WAYPOINT_CONFIG.CANVAS_SCALE * effectiveDpr
+}
+
+function getLabelCanvasSize (): number {
+  return Math.round(WAYPOINT_CONFIG.CANVAS_SIZE * computeLabelCanvasLineScale())
+}
+
+function drawCombinedOntoCanvas (
+  canvas: OffscreenCanvas,
+  color: number,
+  id: string,
+  distance: string,
+  visualScale: number
+): void {
+  const size = canvas.width
+  const scale = computeLabelCanvasLineScale()
   const ctx = canvas.getContext('2d')!
 
-  // Clear canvas
   ctx.clearRect(0, 0, size, size)
 
-  // Draw dot with visual scale applied
   const centerX = size / 2
   const dotY = Math.round(size * WAYPOINT_CONFIG.LAYOUT.DOT_Y)
-  const radius = Math.round(size * 0.05 * visualScale) // Dot takes up ~5% of canvas height, scaled
-  const borderWidth = Math.max(2, Math.round(4 * scale * visualScale))
+  const innerRadius = Math.round(size * 0.05 * visualScale)
+  const outlinePad = Math.max(2, Math.round(4 * scale * visualScale))
+  const dotRadius = innerRadius + outlinePad
 
-  // Outer border (black)
   ctx.beginPath()
-  ctx.arc(centerX, dotY, radius + borderWidth, 0, Math.PI * 2)
-  ctx.fillStyle = 'black'
-  ctx.fill()
-
-  // Inner circle (colored)
-  ctx.beginPath()
-  ctx.arc(centerX, dotY, radius, 0, Math.PI * 2)
+  ctx.arc(centerX, dotY, dotRadius, 0, Math.PI * 2)
   ctx.fillStyle = `#${color.toString(16).padStart(6, '0')}`
   ctx.fill()
 
-  // Text properties
   ctx.textAlign = 'center'
   ctx.textBaseline = 'middle'
 
-  // Title with visual scale applied
-  const nameFontPx = Math.round(size * 0.08 * visualScale) // ~8% of canvas height, scaled
-  const distanceFontPx = Math.round(size * 0.06 * visualScale) // ~6% of canvas height, scaled
-  ctx.font = `bold ${nameFontPx}px mojangles`
+  const nameFontPx = Math.round(size * 0.08 * visualScale)
+  const distanceFontPx = Math.round(size * 0.06 * visualScale)
+  ctx.font = `800 ${nameFontPx}px mojangles`
   ctx.lineWidth = Math.max(2, Math.round(3 * scale * visualScale))
   const nameY = Math.round(size * WAYPOINT_CONFIG.LAYOUT.NAME_Y)
 
@@ -408,8 +431,7 @@ function drawCombinedCanvas (color: number, id: string, distance: string, visual
   ctx.fillStyle = 'white'
   ctx.fillText(id, centerX, nameY)
 
-  // Distance with visual scale applied
-  ctx.font = `bold ${distanceFontPx}px mojangles`
+  ctx.font = `800 ${distanceFontPx}px mojangles`
   ctx.lineWidth = Math.max(2, Math.round(2 * scale * visualScale))
   const distanceY = Math.round(size * WAYPOINT_CONFIG.LAYOUT.DISTANCE_Y)
 
@@ -417,26 +439,6 @@ function drawCombinedCanvas (color: number, id: string, distance: string, visual
   ctx.strokeText(distance, centerX, distanceY)
   ctx.fillStyle = '#CCCCCC'
   ctx.fillText(distance, centerX, distanceY)
-
-  return canvas
-}
-
-function createCombinedSprite (color: number, id: string, distance: string, depthTest: boolean, visualScale = 1): THREE.Sprite {
-  const canvas = drawCombinedCanvas(color, id, distance, visualScale)
-  const texture = new THREE.CanvasTexture(canvas)
-  texture.anisotropy = 1
-  texture.magFilter = THREE.LinearFilter
-  texture.minFilter = THREE.LinearFilter
-  const material = new THREE.SpriteMaterial({
-    map: texture,
-    transparent: true,
-    opacity: 1,
-    depthTest,
-    depthWrite: false,
-  })
-  const sprite = new THREE.Sprite(material)
-  sprite.position.set(0, 0, 0)
-  return sprite
 }
 
 export const WaypointHelpers = {