@marble.fun/track-catalog 3.0.0

package/src/pages/play/race/portal-visual.ts

@@ -0,0 +1,1108 @@
+import * as THREE from 'three'
+
+import { VisualSphereGeometry, VisualCylinderGeometry, VisualTorusGeometry, VisualBoxGeometry } from '../../../three/visual-geometry'
+
+import { createSoftAdditiveParticleMaterial } from '../../../three/soft-additive-particles'
+import { addEgyptPortalFrame, EGYPT_PORTAL_FRAME_THEME_ID, type EgyptPortalFrameMaterials } from './egypt-portal-frame'
+import {
+  addJunglePortalFrame,
+  JUNGLE_PORTAL_FRAME_THEME_ID,
+  type JunglePortalFrameMaterials,
+} from './jungle-portal-frame'
+import {
+  addJapaneseSakuraPortalFrame,
+  JAPANESE_SAKURA_PORTAL_FRAME_THEME_ID,
+  type JapaneseSakuraPortalFrameMaterials,
+} from './japanese-sakura-portal-frame'
+import {
+  addSpaceStationPortalFrame,
+  SPACE_STATION_PORTAL_FRAME_THEME_ID,
+  type SpaceStationPortalFrameMaterials,
+  updateSpaceStationPortalFrame,
+} from './space-station-portal-frame'
+import {
+  PORTAL_APERTURE_HALF_WIDTH,
+  PORTAL_DECK_WIDTH,
+  PORTAL_DUST_PLUME_WIDTH,
+  PORTAL_RIFT_HALF_HEIGHT,
+  PORTAL_RIFT_HALF_WIDTH,
+} from './portal-proportions'
+import type { PortalVisualStyle } from './track-definition'
+
+export const PORTAL_LIVE_WINDOW_ID = 'portal.live-window'
+export const PORTAL_FROZEN_RIFT_ID = 'portal.frozen-rift'
+export const PORTAL_RENDER_TARGET_TEXTURE = 'portalRenderTargetTexture'
+
+const PORTAL_AUXILIARY_EFFECT = 'portalAuxiliaryEffect'
+
+export const PORTAL_VISUAL_OPTIONS = [{ id: PORTAL_LIVE_WINDOW_ID, label: 'Paired portal' }] as const
+
+export interface PortalVisualMaterials {
+  activeThemeId?: string
+  structure: THREE.Material
+  timber: THREE.Material
+  metal: THREE.Material
+  portal: THREE.Material
+  energy: THREE.Material
+  jungle?: JunglePortalFrameMaterials
+  egypt?: EgyptPortalFrameMaterials
+  sakura?: JapaneseSakuraPortalFrameMaterials
+  spaceStation?: SpaceStationPortalFrameMaterials
+}
+
+export interface PortalEndpointVisual {
+  group: THREE.Group
+  screen: THREE.Mesh
+  setTransparentAperture(): void
+  setFallback(color: string): void
+  markLiveTextureStale(): void
+  setLiveTexture(texture: THREE.Texture): void
+  setLiveBlend(blend: number): void
+  update(timeSeconds: number): void
+}
+
+export const PORTAL_LIVE_VIEW_FADE_START_RATIO = 0.017
+const PORTAL_LIVE_VIEW_FADE_END_RATIO = 0.04
+
+export function portalLiveViewBlend(screenRatio: number): number {
+  return THREE.MathUtils.smoothstep(
+    screenRatio,
+    PORTAL_LIVE_VIEW_FADE_START_RATIO,
+    PORTAL_LIVE_VIEW_FADE_END_RATIO,
+  )
+}
+
+const portalViewFlip = new THREE.Matrix4().makeRotationY(Math.PI)
+const portalViewFlipQuaternion = new THREE.Quaternion().setFromAxisAngle(THREE.Object3D.DEFAULT_UP, Math.PI)
+const portalViewSourceInverse = new THREE.Matrix4()
+const portalViewWorldMatrix = new THREE.Matrix4()
+const portalViewScale = new THREE.Vector3()
+const portalViewDestinationQuaternion = new THREE.Quaternion()
+const portalViewCorner = new THREE.Vector3()
+const portalViewCornerSelectors = [
+  [false, false],
+  [true, false],
+  [true, true],
+  [false, true],
+] as const
+const fixedPortalViewPosition = new THREE.Vector3()
+const fixedPortalViewQuaternion = new THREE.Quaternion()
+const fixedPortalViewScale = new THREE.Vector3()
+
+/** Places a stable security-camera-style view immediately beyond a doorway. */
+export function positionFixedPortalViewCamera(
+  portalCamera: THREE.PerspectiveCamera,
+  viewerCamera: THREE.Camera,
+  destinationPortal: THREE.Object3D,
+  targetAspect: number,
+): void {
+  destinationPortal.updateWorldMatrix(true, false)
+  destinationPortal.matrixWorld.decompose(fixedPortalViewPosition, fixedPortalViewQuaternion, fixedPortalViewScale)
+  fixedPortalViewQuaternion.multiply(portalViewFlipQuaternion)
+  portalCamera.position.copy(fixedPortalViewPosition)
+  portalCamera.quaternion.copy(fixedPortalViewQuaternion)
+  portalCamera.up.set(0, 1, 0).applyQuaternion(fixedPortalViewQuaternion).normalize()
+  portalCamera.fov = 62
+  portalCamera.zoom = 1
+  portalCamera.near = 0.08
+  portalCamera.far = 260
+  portalCamera.filmGauge = 35
+  portalCamera.filmOffset = 0
+  portalCamera.aspect = targetAspect
+  portalCamera.layers.mask = viewerCamera.layers.mask
+  portalCamera.updateProjectionMatrix()
+  portalCamera.updateMatrixWorld(true)
+}
+
+/**
+ * Places the auxiliary camera at the viewer's equivalent position through a
+ * paired doorway. This is allocation-free and changes only the existing
+ * portal pass; it does not add another render or alter simulation state.
+ */
+export function positionPortalViewCamera(
+  portalCamera: THREE.PerspectiveCamera,
+  viewerCamera: THREE.Camera,
+  sourcePortal: THREE.Object3D,
+  destinationPortal: THREE.Object3D,
+  destinationAperture: THREE.Mesh,
+  targetAspect: number,
+): void {
+  viewerCamera.updateWorldMatrix(true, false)
+  sourcePortal.updateWorldMatrix(true, false)
+  destinationPortal.updateWorldMatrix(true, false)
+
+  portalViewSourceInverse.copy(sourcePortal.matrixWorld).invert()
+  portalViewWorldMatrix
+    .copy(destinationPortal.matrixWorld)
+    .multiply(portalViewFlip)
+    .multiply(portalViewSourceInverse)
+    .multiply(viewerCamera.matrixWorld)
+  portalViewWorldMatrix.decompose(portalCamera.position, portalCamera.quaternion, portalViewScale)
+  destinationPortal.getWorldQuaternion(portalViewDestinationQuaternion)
+  portalCamera.quaternion.copy(portalViewDestinationQuaternion).multiply(portalViewFlipQuaternion)
+  portalCamera.up.set(0, 1, 0).applyQuaternion(portalCamera.quaternion).normalize()
+
+  if (viewerCamera instanceof THREE.PerspectiveCamera) {
+    portalCamera.fov = viewerCamera.fov
+    portalCamera.zoom = viewerCamera.zoom
+    portalCamera.filmGauge = viewerCamera.filmGauge
+    portalCamera.filmOffset = viewerCamera.filmOffset
+  } else {
+    portalCamera.fov = 62
+    portalCamera.zoom = 1
+    portalCamera.filmGauge = 35
+    portalCamera.filmOffset = 0
+  }
+  portalCamera.near = 0.08
+  portalCamera.far = 260
+  portalCamera.aspect = targetAspect
+  portalCamera.layers.mask = viewerCamera.layers.mask
+  portalCamera.updateMatrixWorld(true)
+
+  if (!destinationAperture.geometry.boundingBox) destinationAperture.geometry.computeBoundingBox()
+  const apertureBounds = destinationAperture.geometry.boundingBox
+  if (!apertureBounds) {
+    portalCamera.updateProjectionMatrix()
+    return
+  }
+  destinationAperture.updateWorldMatrix(true, false)
+  let left = Number.POSITIVE_INFINITY
+  let right = Number.NEGATIVE_INFINITY
+  let bottom = Number.POSITIVE_INFINITY
+  let top = Number.NEGATIVE_INFINITY
+  let minimumDistance = Number.POSITIVE_INFINITY
+  for (const [useMaximumX, useMaximumY] of portalViewCornerSelectors) {
+    portalViewCorner
+      .set(
+        useMaximumX ? apertureBounds.max.x : apertureBounds.min.x,
+        useMaximumY ? apertureBounds.max.y : apertureBounds.min.y,
+        0,
+      )
+      .applyMatrix4(destinationAperture.matrixWorld)
+      .applyMatrix4(portalCamera.matrixWorldInverse)
+    const distance = -portalViewCorner.z
+    if (distance <= 0.001) {
+      portalCamera.updateProjectionMatrix()
+      return
+    }
+    minimumDistance = Math.min(minimumDistance, distance)
+    left = Math.min(left, portalViewCorner.x / distance)
+    right = Math.max(right, portalViewCorner.x / distance)
+    bottom = Math.min(bottom, portalViewCorner.y / distance)
+    top = Math.max(top, portalViewCorner.y / distance)
+  }
+  portalCamera.near = Math.max(0.01, Math.min(0.08, minimumDistance * 0.5))
+  left *= portalCamera.near
+  right *= portalCamera.near
+  bottom *= portalCamera.near
+  top *= portalCamera.near
+  portalCamera.projectionMatrix.makePerspective(
+    left,
+    right,
+    top,
+    bottom,
+    portalCamera.near,
+    portalCamera.far,
+    portalCamera.coordinateSystem,
+  )
+  portalCamera.projectionMatrixInverse.copy(portalCamera.projectionMatrix).invert()
+}
+
+export function renderFixedPortalView(
+  renderer: THREE.WebGLRenderer,
+  scene: THREE.Object3D,
+  camera: THREE.PerspectiveCamera,
+  target: THREE.WebGLRenderTarget,
+): void {
+  const panorama = scene.getObjectByName('lobby-panorama')
+  const material = panorama instanceof THREE.Mesh ? panorama.material : undefined
+  const shader = material instanceof THREE.ShaderMaterial ? material : undefined
+  const cameraMatrixUniform = shader?.uniforms.uCameraWorldMatrix
+  const projectionInverseUniform = shader?.uniforms.uProjectionMatrixInverse
+  const projectionModeUniform = shader?.uniforms.uUseProjectionMatrixInverse
+  const resolutionUniform = shader?.uniforms.uResolution
+  const aspectUniform = shader?.uniforms.uAspect
+  const fovUniform = shader?.uniforms.uTanHalfPanoramaFov
+  const panoramaFromUniform = shader?.uniforms.uPanoramaFrom
+  const panoramaToUniform = shader?.uniforms.uPanoramaTo
+  const panoramaTransitionUniform = shader?.uniforms.uRiftProgress
+  const previousCameraMatrix =
+    cameraMatrixUniform?.value instanceof THREE.Matrix4 ? cameraMatrixUniform.value.clone() : undefined
+  const previousProjectionInverse =
+    projectionInverseUniform?.value instanceof THREE.Matrix4 ? projectionInverseUniform.value.clone() : undefined
+  const previousProjectionMode = projectionModeUniform?.value
+  const previousResolution =
+    resolutionUniform?.value instanceof THREE.Vector2 ? resolutionUniform.value.clone() : undefined
+  const previousAspect = aspectUniform?.value
+  const previousFov = fovUniform?.value
+  const previousPanoramaFrom = panoramaFromUniform?.value
+  const previousPanoramaTransition = panoramaTransitionUniform?.value
+  const vignette = scene.getObjectByName('lobby-vignette')
+  const previousVignetteVisibility = vignette?.visible
+  const shadowMap = renderer.shadowMap
+  const previousShadowAutoUpdate = shadowMap?.autoUpdate
+  const previousShadowNeedsUpdate = shadowMap?.needsUpdate
+  const hiddenPortalEffects: Array<{ object: THREE.Object3D; visible: boolean }> = []
+
+  scene.traverse(object => {
+    if (object.userData[PORTAL_AUXILIARY_EFFECT] !== true) return
+    hiddenPortalEffects.push({ object, visible: object.visible })
+    object.visible = false
+  })
+
+  if (cameraMatrixUniform?.value instanceof THREE.Matrix4) cameraMatrixUniform.value.copy(camera.matrixWorld)
+  if (projectionInverseUniform?.value instanceof THREE.Matrix4) {
+    projectionInverseUniform.value.copy(camera.projectionMatrixInverse)
+  }
+  if (projectionModeUniform) projectionModeUniform.value = 1
+  if (resolutionUniform?.value instanceof THREE.Vector2) resolutionUniform.value.set(target.width, target.height)
+  if (aspectUniform) aspectUniform.value = camera.aspect
+  if (fovUniform) fovUniform.value = Math.tan(THREE.MathUtils.degToRad(camera.fov * 0.5))
+  // A Lab/race theme transition deliberately keeps the outgoing panorama in
+  // uPanoramaFrom for its visible crossfade. Portal views are cached, though:
+  // capturing that intermediate frame would freeze the old theme (for example
+  // Jungle inside a Wild West course) after the transition has completed.
+  // Capture the already-loaded destination panorama directly, then restore the
+  // transition uniforms for the main view.
+  if (panoramaFromUniform && panoramaToUniform?.value) panoramaFromUniform.value = panoramaToUniform.value
+  if (panoramaTransitionUniform) panoramaTransitionUniform.value = 1
+  if (vignette) vignette.visible = false
+  if (shadowMap) {
+    shadowMap.autoUpdate = false
+    // Portal cameras are auxiliary views. They must never consume the one
+    // event-driven shadow refresh requested for the main race camera.
+    shadowMap.needsUpdate = false
+  }
+
+  try {
+    renderer.setRenderTarget(target)
+    renderer.clear(true, true, true)
+    renderer.render(scene, camera)
+  } finally {
+    if (previousCameraMatrix && cameraMatrixUniform?.value instanceof THREE.Matrix4) {
+      cameraMatrixUniform.value.copy(previousCameraMatrix)
+    }
+    if (previousProjectionInverse && projectionInverseUniform?.value instanceof THREE.Matrix4) {
+      projectionInverseUniform.value.copy(previousProjectionInverse)
+    }
+    if (projectionModeUniform) projectionModeUniform.value = previousProjectionMode
+    if (previousResolution && resolutionUniform?.value instanceof THREE.Vector2) {
+      resolutionUniform.value.copy(previousResolution)
+    }
+    if (aspectUniform) aspectUniform.value = previousAspect
+    if (fovUniform) fovUniform.value = previousFov
+    if (panoramaFromUniform) panoramaFromUniform.value = previousPanoramaFrom
+    if (panoramaTransitionUniform) panoramaTransitionUniform.value = previousPanoramaTransition
+    if (vignette && previousVignetteVisibility !== undefined) vignette.visible = previousVignetteVisibility
+    if (shadowMap && previousShadowAutoUpdate !== undefined) shadowMap.autoUpdate = previousShadowAutoUpdate
+    if (shadowMap && previousShadowNeedsUpdate !== undefined) shadowMap.needsUpdate = previousShadowNeedsUpdate
+    for (const { object, visible } of hiddenPortalEffects) object.visible = visible
+  }
+}
+
+const WILD_WEST_THEME_ID = 'rocky-mountain-wild-west'
+const APERTURE_BOTTOM = -1.66
+const RIFT_CENTER_Y = -0.14
+const RIFT_FIT_SCALE = 0.9
+
+export function portalVisualStyleFromId(id: string | undefined): PortalVisualStyle {
+  void id
+  return 'live-window'
+}
+
+export function createPortalEndpointVisual(
+  name: string,
+  style: PortalVisualStyle,
+  color: string,
+  materials: PortalVisualMaterials,
+): PortalEndpointVisual {
+  const group = new THREE.Group()
+  group.name = name
+  // Portal descendants must never be merged into a static overview batch.
+  // The auxiliary camera hides this complete group while rendering the
+  // destination view; moving a descendant elsewhere can expose an
+  // uninitialised/recursive portal surface as a black frame.
+  group.userData.isPortalViewSurface = true
+
+  void style
+  const riftPoints = createRiftOutlinePoints()
+  const thresholdFloor = createPortalThresholdFloor(`${name}-threshold-floor`, materials.timber)
+  const screen = createLiveWindow(`${name}-live-window`, color, riftPoints)
+  const riftFill = createPortalRiftFill(`${name}-rift-fill`, color, screen.geometry)
+  screen.add(riftFill)
+  let cachedLiveTexture: THREE.Texture | null = null
+  let fallbackColor = color
+  const riftEdge = createRiftEdge(`${name}-rift-edge`, color, riftPoints)
+  const rearGlow = createRearRiftGlow(`${name}-rift-rear-glow`, color)
+  const rearRiftEdge = createRiftEdge(`${name}-rift-rear-edge`, color, riftPoints, THREE.BackSide)
+  const particles = createRiftParticles(`${name}-rift-particles`, color, riftPoints)
+  for (const layer of [screen, riftEdge, rearGlow, rearRiftEdge, particles]) {
+    layer.scale.setScalar(RIFT_FIT_SCALE)
+    // Portal cameras should show the physical doorway, but never another
+    // portal's live surface or layered rift. Besides avoiding visual feedback
+    // when portals face one another, this prevents clustered auxiliary views
+    // from redrawing every portal's transparent effects and particles.
+    layer.userData[PORTAL_AUXILIARY_EFFECT] = true
+  }
+  group.add(thresholdFloor, rearGlow, screen, riftEdge, rearRiftEdge, particles)
+  if (materials.activeThemeId === WILD_WEST_THEME_ID) {
+    addWildWestMinePortalFrame(group, name, color, materials)
+  }
+  if (materials.activeThemeId === JUNGLE_PORTAL_FRAME_THEME_ID && materials.jungle) {
+    addJunglePortalFrame({ root: group, name, color, materials: materials.jungle })
+  }
+  if (materials.activeThemeId === EGYPT_PORTAL_FRAME_THEME_ID && materials.egypt) {
+    addEgyptPortalFrame(group, name, color, materials.egypt)
+  }
+  if (materials.activeThemeId === JAPANESE_SAKURA_PORTAL_FRAME_THEME_ID && materials.sakura) {
+    addJapaneseSakuraPortalFrame(group, name, color, materials.sakura)
+  }
+  const spaceStationFrame =
+    materials.activeThemeId === SPACE_STATION_PORTAL_FRAME_THEME_ID && materials.spaceStation
+      ? addSpaceStationPortalFrame(group, name, color, materials.spaceStation)
+      : undefined
+
+  return {
+    group,
+    screen,
+    setTransparentAperture() {
+      if (!(screen.material instanceof THREE.MeshBasicMaterial)) return
+      cachedLiveTexture = null
+      screen.material.map = null
+      screen.material.color.set('#ffffff')
+      screen.material.opacity = 0
+      riftFill.visible = false
+      screen.visible = true
+      screen.material.needsUpdate = true
+      screen.userData.liveTextureReady = false
+      rearGlow.visible = false
+    },
+    setFallback(nextFallbackColor) {
+      if (!(screen.material instanceof THREE.MeshBasicMaterial)) return
+      cachedLiveTexture = null
+      fallbackColor = nextFallbackColor
+      screen.material.map = null
+      screen.material.color.set('#ffffff')
+      screen.material.opacity = 0
+      riftFill.material.color.set(nextFallbackColor)
+      riftFill.material.opacity = 1
+      riftFill.visible = false
+      screen.visible = true
+      screen.material.needsUpdate = true
+      screen.userData.liveTextureReady = false
+      // Static rifts use the existing dark animated back on both faces.
+      if (rearGlow.material.side !== THREE.DoubleSide) {
+        rearGlow.material.side = THREE.DoubleSide
+        rearGlow.material.needsUpdate = true
+      }
+      rearGlow.material.uniforms.uColor!.value.set(nextFallbackColor)
+      rearGlow.visible = true
+    },
+    markLiveTextureStale() {
+      // Keep the last complete capture on screen while its render target is
+      // queued for replacement. Rendering the new frame is synchronous, so
+      // the same texture updates between main-scene frames without exposing a
+      // blank/fallback aperture.
+      screen.userData.liveTextureReady = false
+    },
+    setLiveTexture(texture) {
+      if (!(screen.material instanceof THREE.MeshBasicMaterial)) return
+      // This texture is owned by the portal render target, not by the piece
+      // visual's material lifecycle. It must survive a visual-only rebuild so
+      // the replacement doorway can display the last complete frame.
+      texture.userData[PORTAL_RENDER_TARGET_TEXTURE] = true
+      cachedLiveTexture = texture
+      if (rearGlow.material.side !== THREE.BackSide) {
+        rearGlow.material.side = THREE.BackSide
+        rearGlow.material.needsUpdate = true
+      }
+      const textureChanged = screen.material.map !== texture
+      if (textureChanged) screen.material.map = texture
+      screen.material.color.set('#ffffff')
+      screen.material.opacity = 1
+      riftFill.material.opacity = 1
+      riftFill.visible = true
+      screen.visible = true
+      // The render target's contents update in place. Recompiling the portal
+      // material on every refresh can expose a black program/texture frame on
+      // some mobile GPUs; only the first attachment or a replaced target
+      // changes the shader's USE_MAP variant.
+      if (textureChanged) screen.material.needsUpdate = true
+      screen.userData.liveTextureReady = true
+      rearGlow.visible = true
+    },
+    setLiveBlend(blend) {
+      if (!(screen.material instanceof THREE.MeshBasicMaterial) || !cachedLiveTexture) return
+      const clampedBlend = THREE.MathUtils.clamp(blend, 0, 1)
+      const textureChanged = screen.material.map !== cachedLiveTexture
+      screen.material.map = cachedLiveTexture
+      screen.material.color.set('#ffffff')
+      screen.material.opacity = clampedBlend
+      riftFill.material.color.set(fallbackColor)
+      // The cached camera alpha-composites over an opaque pair-colour base.
+      // Keeping the base opaque prevents real scene geometry behind the
+      // doorway from bleeding through during the crossfade.
+      riftFill.material.opacity = 1
+      riftFill.visible = true
+      if (textureChanged) screen.material.needsUpdate = true
+      rearGlow.visible = true
+    },
+    update(timeSeconds) {
+      updateRiftWarp(screen, timeSeconds)
+      updateRiftGlow(riftEdge, timeSeconds)
+      updateRiftGlow(rearGlow, timeSeconds)
+      updateRiftGlow(rearRiftEdge, timeSeconds)
+      updateRiftDust(particles, timeSeconds)
+      updateSpaceStationPortalFrame(spaceStationFrame, timeSeconds)
+    },
+  }
+}
+
+function createPortalThresholdFloor(name: string, timber: THREE.Material): THREE.Mesh {
+  const depth = 0.48
+  const geometry = createMetricBeamGeometry(PORTAL_DECK_WIDTH - 0.08, 0.1, depth)
+  geometry.userData.portalThreshold = {
+    width: PORTAL_DECK_WIDTH - 0.08,
+    depth,
+    front: depth * 0.5,
+    back: -depth * 0.5,
+    top: APERTURE_BOTTOM,
+  }
+  const floor = new THREE.Mesh(geometry, timber)
+  floor.name = name
+  floor.position.set(0, APERTURE_BOTTOM - 0.05, 0)
+  floor.castShadow = true
+  floor.receiveShadow = true
+  floor.userData.portalFloorRole = 'shared-frame-depth-threshold'
+  floor.userData.decorative = true
+  return floor
+}
+
+function createLiveWindow(name: string, color: string, points: readonly THREE.Vector2[]): THREE.Mesh {
+  void color
+  const material = new THREE.MeshBasicMaterial({
+    color: '#ffffff',
+    map: null,
+    side: THREE.FrontSide,
+    toneMapped: false,
+    transparent: true,
+    opacity: 0,
+    depthWrite: false,
+  })
+  material.name = `${name}-material`
+  const screen = new THREE.Mesh(createRiftGeometry(points), material)
+  screen.name = name
+  screen.renderOrder = 2
+  screen.userData.ownsMaterial = true
+  screen.userData.portalSurfaceStyle = 'live-window'
+  screen.userData.decorative = true
+  screen.frustumCulled = false
+  return screen
+}
+
+function createPortalRiftFill(
+  name: string,
+  color: string,
+  geometry: THREE.BufferGeometry,
+): THREE.Mesh<THREE.BufferGeometry, THREE.MeshBasicMaterial> {
+  const material = new THREE.MeshBasicMaterial({
+    color,
+    side: THREE.FrontSide,
+    toneMapped: false,
+    transparent: false,
+    opacity: 1,
+    depthWrite: true,
+  })
+  material.name = `${name}-material`
+  const fill = new THREE.Mesh(geometry, material)
+  fill.name = name
+  fill.position.z = -0.004
+  fill.renderOrder = 1
+  fill.userData.ownsMaterial = true
+  fill.userData.portalRiftFill = true
+  fill.frustumCulled = false
+  return fill
+}
+
+function createRiftOutlinePoints(): THREE.Vector2[] {
+  const pointCount = 128
+  return Array.from({ length: pointCount }, (_, index) => {
+    const angle = (index / pointCount) * Math.PI * 2
+    const broadVariation =
+      Math.sin(angle * 3 + 0.7) * 0.038 +
+      Math.sin(angle * 7 - 0.4) * 0.022 +
+      Math.sin(angle * 13 + 1.2) * 0.015 +
+      Math.sin(angle * 19 - 0.3) * 0.009 +
+      Math.sin(angle * 31) * 0.006
+    const radius = 1 + broadVariation
+    return new THREE.Vector2(
+      Math.cos(angle) * PORTAL_RIFT_HALF_WIDTH * radius,
+      RIFT_CENTER_Y + Math.sin(angle) * PORTAL_RIFT_HALF_HEIGHT * radius,
+    )
+  })
+}
+
+function createRiftGeometry(points: readonly THREE.Vector2[]): THREE.ShapeGeometry {
+  const shape = shapeFromPoints(points)
+  const geometry = new THREE.ShapeGeometry(shape, 12)
+  normalizeShapeUvs(geometry)
+  prepareRiftWarpGeometry(geometry)
+  geometry.computeBoundingBox()
+  const bounds = geometry.boundingBox
+  geometry.userData.portalAperture = {
+    halfWidth: bounds ? Math.max(Math.abs(bounds.min.x), Math.abs(bounds.max.x)) : 1.8,
+    bottom: bounds?.min.y ?? -1.7,
+    top: bounds?.max.y ?? 1.26,
+    shape: 'smooth-rift',
+  }
+  return geometry
+}
+
+function normalizeShapeUvs(geometry: THREE.BufferGeometry): void {
+  geometry.computeBoundingBox()
+  const bounds = geometry.boundingBox
+  const positions = geometry.getAttribute('position')
+  const uvs = geometry.getAttribute('uv')
+  if (!bounds || !uvs) return
+  const width = Math.max(0.001, bounds.max.x - bounds.min.x)
+  const height = Math.max(0.001, bounds.max.y - bounds.min.y)
+  for (let index = 0; index < positions.count; index += 1) {
+    uvs.setXY(index, (positions.getX(index) - bounds.min.x) / width, (positions.getY(index) - bounds.min.y) / height)
+  }
+  uvs.needsUpdate = true
+}
+
+const RIFT_EFFECT_VERTEX_SHADER = /* glsl */ `
+  varying vec2 vRiftPosition;
+
+  void main() {
+    vRiftPosition = position.xy;
+    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+  }
+`
+
+const RIFT_EFFECT_FRAGMENT_HEADER = /* glsl */ `
+  uniform float uTime;
+  uniform vec3 uColor;
+  varying vec2 vRiftPosition;
+
+  float riftDistance(out float angle) {
+    vec2 q = vRiftPosition / vec2(${PORTAL_RIFT_HALF_WIDTH.toFixed(6)}, ${PORTAL_RIFT_HALF_HEIGHT.toFixed(6)});
+    angle = atan(q.y, q.x);
+    float variation = sin(angle * 3.0 + uTime * 0.38 + 0.7) * 0.038
+      + sin(angle * 7.0 - uTime * 0.55 - 0.4) * 0.022
+      + sin(angle * 13.0 + uTime * 0.82 + 1.2) * 0.015
+      + sin(angle * 19.0 - uTime * 0.96 - 0.3) * 0.009
+      + sin(angle * 31.0 + uTime * 1.28) * 0.006;
+    return length(q) - (1.0 + variation);
+  }
+`
+
+const RIFT_AURA_FRAGMENT_SHADER = /* glsl */ `
+  ${RIFT_EFFECT_FRAGMENT_HEADER}
+
+  void main() {
+    float angle;
+    float distanceToEdge = riftDistance(angle);
+    float travelling = 0.5 + 0.5 * sin(angle * 6.0 - uTime * 1.7 + sin(angle * 3.0 + uTime * 0.35) * 1.8);
+    float hotspots = pow(travelling, 5.0);
+    float broadAura = exp(-abs(distanceToEdge) * 5.2) * 0.34
+      + exp(-abs(distanceToEdge) * 13.0) * 0.4;
+    float turbulentOffset = sin(angle * 19.0 - uTime * 2.3) * 0.008
+      + sin(angle * 37.0 + uTime * 3.1) * 0.0035;
+    float energyBand = 1.0 - smoothstep(0.022, 0.115, abs(distanceToEdge + turbulentOffset));
+    float intensity = broadAura + energyBand * (0.52 + hotspots * 0.68);
+    if (intensity < 0.018) discard;
+    gl_FragColor = vec4(uColor * intensity, 0.96);
+  }
+`
+
+const RIFT_CORE_FRAGMENT_SHADER = /* glsl */ `
+  ${RIFT_EFFECT_FRAGMENT_HEADER}
+
+  void main() {
+    float angle;
+    float distanceToEdge = riftDistance(angle);
+    float travelling = 0.5 + 0.5 * sin(angle * 6.0 - uTime * 1.7 + sin(angle * 3.0 + uTime * 0.35) * 1.8);
+    float hotspots = pow(travelling, 5.0);
+    float flicker = 0.82 + 0.18 * sin(uTime * 7.0 + angle * 17.0);
+    float coreOffset = sin(angle * 23.0 + uTime * 2.6) * 0.006
+      + sin(angle * 53.0 - uTime * 4.1) * 0.0024;
+    float core = 1.0 - smoothstep(0.004, 0.016, abs(distanceToEdge + coreOffset));
+    float branchGateA = pow(max(0.0, sin(angle * 2.5 - uTime * 0.72 + 0.8)), 18.0);
+    float branchGateB = pow(max(0.0, sin(angle * 3.5 + uTime * 0.54 - 1.1)), 24.0);
+    float branchDistanceA = abs(distanceToEdge - 0.045 - sin(angle * 31.0 + uTime * 3.8) * 0.026);
+    float branchDistanceB = abs(distanceToEdge + 0.04 - sin(angle * 41.0 - uTime * 3.2) * 0.021);
+    float branches = (1.0 - smoothstep(0.004, 0.014, branchDistanceA)) * branchGateA
+      + (1.0 - smoothstep(0.004, 0.012, branchDistanceB)) * branchGateB;
+    float intensity = core * (1.42 + hotspots * 0.9) * flicker + branches * 1.35;
+    if (intensity < 0.012) discard;
+    vec3 hotColor = mix(uColor, vec3(1.0), clamp(core * 0.76 + branches * 0.7, 0.0, 0.92));
+    gl_FragColor = vec4(hotColor * intensity, 0.98);
+  }
+`
+
+const RIFT_REAR_GLOW_FRAGMENT_SHADER = /* glsl */ `
+  ${RIFT_EFFECT_FRAGMENT_HEADER}
+
+  void main() {
+    float angle;
+    float distanceToEdge = riftDistance(angle);
+    if (distanceToEdge > 0.018) discard;
+    float edgeLift = 1.0 - smoothstep(-0.12, 0.0, distanceToEdge);
+    float pulse = 0.82 + 0.18 * sin(uTime * 1.25 + angle * 4.0);
+    float intensity = 0.72 + pulse * 0.12 + edgeLift * 0.16;
+    gl_FragColor = vec4(uColor * intensity, 1.0);
+  }
+`
+
+function createRiftShaderMaterial(
+  name: string,
+  color: string,
+  fragmentShader: string,
+  side: THREE.Side = THREE.FrontSide,
+): THREE.ShaderMaterial {
+  const material = new THREE.ShaderMaterial({
+    uniforms: {
+      uTime: { value: 0 },
+      uColor: { value: new THREE.Color(color) },
+    },
+    vertexShader: RIFT_EFFECT_VERTEX_SHADER,
+    fragmentShader,
+    transparent: true,
+    depthWrite: false,
+    blending: THREE.AdditiveBlending,
+    side,
+    toneMapped: false,
+  })
+  material.name = name
+  return material
+}
+
+function createRiftEffectGeometry(): THREE.PlaneGeometry {
+  return new THREE.PlaneGeometry(PORTAL_RIFT_HALF_WIDTH * 3.9, PORTAL_RIFT_HALF_HEIGHT * 3.2)
+}
+
+function createRiftEdge(
+  name: string,
+  color: string,
+  _points: readonly THREE.Vector2[],
+  side: THREE.Side = THREE.FrontSide,
+): THREE.Mesh {
+  const edge = new THREE.Mesh(
+    createRiftEffectGeometry(),
+    createRiftShaderMaterial(`${name}-aura-material`, color, RIFT_AURA_FRAGMENT_SHADER, side),
+  )
+  edge.name = name
+  edge.position.set(0, RIFT_CENTER_Y, side === THREE.BackSide ? -0.035 : 0.035)
+  edge.renderOrder = 3
+  edge.frustumCulled = false
+  edge.userData.ownsMaterial = true
+  edge.userData.portalEffectRole = side === THREE.BackSide ? 'pair-color-rift-rear-edge' : 'pair-color-rift-edge'
+  edge.userData.decorative = true
+
+  const core = new THREE.Mesh(
+    createRiftEffectGeometry(),
+    createRiftShaderMaterial(`${name}-core-material`, color, RIFT_CORE_FRAGMENT_SHADER, side),
+  )
+  core.name = `${name}-core`
+  core.position.z = side === THREE.BackSide ? -0.004 : 0.004
+  core.renderOrder = 4
+  core.frustumCulled = false
+  core.userData.ownsMaterial = true
+  core.userData.portalEffectRole = side === THREE.BackSide ? 'pair-color-rift-rear-core' : 'pair-color-rift-core'
+  core.userData.decorative = true
+  edge.add(core)
+  return edge
+}
+
+function createRearRiftGlow(name: string, color: string): THREE.Mesh<THREE.BufferGeometry, THREE.ShaderMaterial> {
+  const material = new THREE.ShaderMaterial({
+    uniforms: {
+      uTime: { value: 0 },
+      uColor: { value: new THREE.Color(color) },
+    },
+    vertexShader: RIFT_EFFECT_VERTEX_SHADER,
+    fragmentShader: RIFT_REAR_GLOW_FRAGMENT_SHADER,
+    transparent: false,
+    depthWrite: true,
+    blending: THREE.NormalBlending,
+    side: THREE.BackSide,
+    toneMapped: false,
+  })
+  material.name = `${name}-material`
+  const glow = new THREE.Mesh(createRiftEffectGeometry(), material)
+  glow.name = name
+  glow.position.set(0, RIFT_CENTER_Y, -0.012)
+  glow.renderOrder = 2
+  glow.frustumCulled = false
+  glow.userData.ownsMaterial = true
+  glow.userData.portalEffectRole = 'pair-color-rift-rear-glow'
+  glow.userData.decorative = true
+  return glow
+}
+
+interface RiftWarpGeometryData {
+  basePositions: Float32Array
+}
+
+function prepareRiftWarpGeometry(geometry: THREE.BufferGeometry): void {
+  const positions = geometry.getAttribute('position')
+  if (!(positions instanceof THREE.BufferAttribute)) return
+  geometry.userData.riftWarp = {
+    basePositions: Float32Array.from(positions.array as ArrayLike<number>),
+  } satisfies RiftWarpGeometryData
+  positions.setUsage(THREE.DynamicDrawUsage)
+}
+
+function updateRiftWarp(root: THREE.Object3D, timeSeconds: number): void {
+  root.traverse(object => {
+    if (!(object instanceof THREE.Mesh)) return
+    if (object.userData.portalRiftFill === true) return
+    const warp = object.geometry.userData.riftWarp as RiftWarpGeometryData | undefined
+    const positions = object.geometry.getAttribute('position')
+    if (!warp || !(positions instanceof THREE.BufferAttribute)) return
+    for (let index = 0; index < positions.count; index += 1) {
+      const baseX = warp.basePositions[index * 3]!
+      const baseY = warp.basePositions[index * 3 + 1]!
+      const deltaX = baseX
+      const deltaY = baseY - RIFT_CENTER_Y
+      const angle = Math.atan2(deltaY / PORTAL_RIFT_HALF_HEIGHT, deltaX / PORTAL_RIFT_HALF_WIDTH)
+      const radius = Math.min(1, Math.hypot(deltaX / PORTAL_RIFT_HALF_WIDTH, deltaY / PORTAL_RIFT_HALF_HEIGHT))
+      const breathing =
+        Math.sin(angle * 3 + timeSeconds * 0.82) * 0.014 + Math.sin(angle * 5 - timeSeconds * 1.08 + 0.6) * 0.008
+      const surfaceRipple = Math.sin(baseY * 5.4 + timeSeconds * 1.35) * 0.009 * radius
+      const scale = 1 + breathing * (0.35 + radius * 0.65)
+      positions.setXYZ(
+        index,
+        deltaX * scale + surfaceRipple,
+        RIFT_CENTER_Y + deltaY * scale + Math.sin(baseX * 4.2 - timeSeconds * 1.1) * 0.005 * radius,
+        warp.basePositions[index * 3 + 2]!,
+      )
+    }
+    positions.needsUpdate = true
+  })
+}
+
+function updateRiftGlow(edge: THREE.Mesh, timeSeconds: number): void {
+  if (edge.material instanceof THREE.ShaderMaterial) edge.material.uniforms.uTime!.value = timeSeconds
+  const core = edge.children[0]
+  if (core instanceof THREE.Mesh && core.material instanceof THREE.ShaderMaterial) {
+    core.material.uniforms.uTime!.value = timeSeconds
+  }
+}
+
+function shapeFromPoints(points: readonly THREE.Vector2[]): THREE.Shape {
+  const shape = new THREE.Shape()
+  shape.moveTo(points[0]!.x, points[0]!.y)
+  for (const point of points.slice(1)) shape.lineTo(point.x, point.y)
+  shape.closePath()
+  return shape
+}
+
+interface RiftDustMotion {
+  basePositions: Float32Array
+  modes: Uint8Array
+  phases: Float32Array
+  speeds: Float32Array
+  tangents: Float32Array
+}
+
+function createRiftParticles(name: string, color: string, outline: readonly THREE.Vector2[]): THREE.Points {
+  const edgeCount = 138
+  const plumeCount = 42
+  const count = edgeCount + plumeCount
+  const positions = new Float32Array(count * 3)
+  const modes = new Uint8Array(count)
+  const phases = new Float32Array(count)
+  const speeds = new Float32Array(count)
+  const tangents = new Float32Array(count * 2)
+  const center = new THREE.Vector2(0, RIFT_CENTER_Y)
+  for (let index = 0; index < count; index += 1) {
+    phases[index] = deterministic(`${name}:${index}:phase`) * Math.PI * 2
+    speeds[index] = 0.45 + deterministic(`${name}:${index}:speed`) * 0.65
+
+    if (index >= edgeCount) {
+      const progress = deterministic(`${name}:${index}:progress`)
+      const horizontal = (deterministic(`${name}:${index}:horizontal`) - 0.5) * PORTAL_DUST_PLUME_WIDTH
+      const startY = -1.22 + deterministic(`${name}:${index}:height`) * 0.82
+      modes[index] = 1
+      positions[index * 3] = horizontal
+      positions[index * 3 + 1] = THREE.MathUtils.lerp(startY, -1.58, THREE.MathUtils.smoothstep(progress, 0, 1))
+      positions[index * 3 + 2] = 0.08 + progress * 2.25
+      tangents[index * 2] = horizontal
+      tangents[index * 2 + 1] = startY
+      continue
+    }
+
+    const outlineIndex = Math.floor(deterministic(`${name}:${index}:position`) * outline.length)
+    const point = outline[outlineIndex]!
+    const outward = point.clone().sub(center).normalize()
+    const tangent = new THREE.Vector2(-outward.y, outward.x)
+    const distanceNoise = deterministic(`${name}:${index}:distance`)
+    const distance = 0.018 + distanceNoise * distanceNoise * 0.2
+    const tangentScatter = (deterministic(`${name}:${index}:scatter`) - 0.5) * 0.16
+    positions[index * 3] = point.x + outward.x * distance + tangent.x * tangentScatter
+    positions[index * 3 + 1] = point.y + outward.y * distance + tangent.y * tangentScatter
+    positions[index * 3 + 2] = 0.06 + deterministic(`${name}:${index}:depth`) * 0.035
+    tangents[index * 2] = tangent.x
+    tangents[index * 2 + 1] = tangent.y
+  }
+  const geometry = new THREE.BufferGeometry()
+  geometry.setAttribute('position', new THREE.BufferAttribute(positions.slice(), 3))
+  const material = createSoftAdditiveParticleMaterial({
+    color,
+    size: 2.2,
+    sizeAttenuation: false,
+    opacity: 0.44,
+    fog: false,
+  })
+  material.name = `${name}-material`
+  const particles = new THREE.Points(geometry, material)
+  particles.name = name
+  particles.renderOrder = 5
+  particles.userData.ownsMaterial = true
+  particles.userData.portalParticleStyle = 'portal-colored-dust'
+  particles.userData.portalParticleCount = count
+  particles.userData.portalParticlePlumeCount = plumeCount
+  particles.userData.riftDustMotion = {
+    basePositions: positions,
+    modes,
+    phases,
+    speeds,
+    tangents,
+  } satisfies RiftDustMotion
+  particles.userData.decorative = true
+  particles.frustumCulled = false
+  return particles
+}
+
+function updateRiftDust(particles: THREE.Points, timeSeconds: number): void {
+  const motion = particles.userData.riftDustMotion as RiftDustMotion | undefined
+  const positions = particles.geometry.getAttribute('position')
+  if (!motion || !(positions instanceof THREE.BufferAttribute)) return
+  for (let index = 0; index < motion.phases.length; index += 1) {
+    const phase = motion.phases[index]!
+    const speed = motion.speeds[index]!
+    if (motion.modes[index] === 1) {
+      const progress = (phase / (Math.PI * 2) + timeSeconds * speed * 0.11) % 1
+      const startX = motion.tangents[index * 2]!
+      const startY = motion.tangents[index * 2 + 1]!
+      const floorFall = THREE.MathUtils.smoothstep(progress, 0.08, 0.92)
+      positions.setXYZ(
+        index,
+        startX + Math.sin(timeSeconds * 0.72 + phase) * (0.025 + progress * 0.1),
+        THREE.MathUtils.lerp(startY, -1.58, floorFall) + Math.sin(timeSeconds * speed + phase) * 0.025,
+        0.08 + progress * 2.25,
+      )
+      continue
+    }
+    const drift = Math.sin(timeSeconds * speed + phase) * 0.035
+    const lift = ((timeSeconds * speed * 0.045 + phase / (Math.PI * 2)) % 0.09) - 0.045
+    positions.setXYZ(
+      index,
+      motion.basePositions[index * 3]! + motion.tangents[index * 2]! * drift,
+      motion.basePositions[index * 3 + 1]! + motion.tangents[index * 2 + 1]! * drift + lift,
+      motion.basePositions[index * 3 + 2]!,
+    )
+  }
+  positions.needsUpdate = true
+  if (particles.material instanceof THREE.PointsMaterial) {
+    particles.material.opacity = 0.4 + Math.sin(timeSeconds * 0.85) * 0.04
+  }
+}
+
+function addWildWestMinePortalFrame(
+  root: THREE.Group,
+  name: string,
+  color: string,
+  materials: PortalVisualMaterials,
+): void {
+  const frame = new THREE.Group()
+  frame.name = `${name}-wild-west-mine-frame`
+  frame.userData.themeOnly = WILD_WEST_THEME_ID
+  frame.userData.portalFrameStyle = 'wild-west-mine-shaft'
+
+  const postCenterX = 1.78
+  const beams = [
+    [new THREE.Vector3(-postCenterX, -1.66, 0), new THREE.Vector3(-postCenterX, 1.62, 0), 0.42],
+    [new THREE.Vector3(postCenterX, -1.66, 0), new THREE.Vector3(postCenterX, 1.62, 0), 0.42],
+    [new THREE.Vector3(-2.52, 1.5, 0), new THREE.Vector3(2.52, 1.5, 0), 0.52],
+    [new THREE.Vector3(-postCenterX, 0.56, 0), new THREE.Vector3(-0.92, 1.48, 0), 0.23],
+    [new THREE.Vector3(postCenterX, 0.56, 0), new THREE.Vector3(0.92, 1.48, 0), 0.23],
+  ] as const
+  beams.forEach(([start, end, thickness], index) => {
+    const beam = createBeam(start, end, thickness, materials.timber)
+    beam.name = `${name}-wild-west-timber-${index + 1}`
+    frame.add(beam)
+  })
+
+  const crownBandGeometry = new VisualBoxGeometry(0.26, 0.6, 0.47, 2, 0.035)
+  for (const [bandIndex, x] of [-1.48, 0, 1.48].entries()) {
+    const band = new THREE.Mesh(crownBandGeometry, materials.metal)
+    band.name = `${name}-wild-west-crown-band-${bandIndex + 1}`
+    band.position.set(x, 1.5, 0)
+    frame.add(band)
+    for (const boltY of [-0.14, 0.14]) {
+      const bolt = new THREE.Mesh(new VisualCylinderGeometry(0.047, 0.047, 0.08, 10), materials.metal)
+      bolt.name = `${name}-wild-west-crown-band-${bandIndex + 1}-bolt`
+      bolt.position.set(x, 1.5 + boltY, 0.265)
+      bolt.rotation.x = Math.PI / 2
+      frame.add(bolt)
+    }
+  }
+
+  const strapGeometry = new VisualBoxGeometry(0.48, 0.16, 0.39, 2, 0.025)
+  for (const [sideIndex, x] of [-postCenterX, postCenterX].entries()) {
+    for (const [strapIndex, y] of [-0.72, 0.62].entries()) {
+      const strap = new THREE.Mesh(strapGeometry, materials.metal)
+      strap.name = `${name}-wild-west-strap-${sideIndex + 1}-${strapIndex + 1}`
+      strap.position.set(x, y, 0)
+      frame.add(strap)
+      for (const boltX of [-0.13, 0.13]) {
+        const bolt = new THREE.Mesh(new VisualCylinderGeometry(0.045, 0.045, 0.075, 10), materials.metal)
+        bolt.position.set(x + boltX, y, 0.225)
+        bolt.rotation.x = Math.PI / 2
+        frame.add(bolt)
+      }
+    }
+  }
+  const lantern = createWildWestPortalLantern(name, color, materials.metal)
+  lantern.position.set(0, 0.94, 0.3)
+  frame.add(lantern)
+
+  frame.userData.portalApertureClearHalfWidth = PORTAL_APERTURE_HALF_WIDTH
+  frame.traverse(object => {
+    object.userData.themeOnly = WILD_WEST_THEME_ID
+    object.userData.portalFrameStyle = 'wild-west-mine-shaft'
+    object.userData.decorative = true
+    object.castShadow = object.type !== 'PointLight'
+    object.receiveShadow = object.type !== 'PointLight'
+  })
+  root.add(frame)
+}
+
+export function createWildWestPortalLantern(name: string, color: string, metal: THREE.Material): THREE.Group {
+  const lantern = new THREE.Group()
+  lantern.name = `${name}-wild-west-pair-lantern`
+  lantern.userData.portalPairColor = color
+
+  const chainGeometry = new VisualTorusGeometry(0.038, 0.009, 6, 12)
+  for (const [index, y] of [0.43, 0.51, 0.59].entries()) {
+    const link = new THREE.Mesh(chainGeometry, metal)
+    link.name = `${name}-wild-west-lantern-chain-${index + 1}`
+    link.position.y = y
+    link.rotation.y = index % 2 === 0 ? 0 : Math.PI / 2
+    lantern.add(link)
+  }
+
+  const handle = new THREE.Mesh(new VisualTorusGeometry(0.16, 0.012, 7, 20, Math.PI), metal)
+  handle.name = `${name}-wild-west-lantern-handle`
+  handle.position.y = 0.2
+  lantern.add(handle)
+
+  const roof = new THREE.Mesh(new VisualCylinderGeometry(0.09, 0.205, 0.11, 16), metal)
+  roof.name = `${name}-wild-west-lantern-roof`
+  roof.position.y = 0.18
+  lantern.add(roof)
+  const vent = new THREE.Mesh(new VisualCylinderGeometry(0.065, 0.085, 0.09, 12), metal)
+  vent.position.y = 0.275
+  lantern.add(vent)
+  const base = new THREE.Mesh(new VisualCylinderGeometry(0.18, 0.15, 0.11, 16), metal)
+  base.name = `${name}-wild-west-lantern-base`
+  base.position.y = -0.235
+  lantern.add(base)
+
+  const glowMaterial = new THREE.MeshBasicMaterial({
+    color,
+    transparent: true,
+    opacity: 0.68,
+    depthWrite: false,
+    toneMapped: false,
+  })
+  const glass = new THREE.Mesh(new VisualCylinderGeometry(0.13, 0.13, 0.3, 16, 1, true), glowMaterial)
+  glass.name = `${name}-wild-west-pair-lantern-glass`
+  glass.position.y = -0.045
+  glass.userData.ownsMaterial = true
+  glass.userData.portalPairColor = color
+  lantern.add(glass)
+
+  const cageBarGeometry = new VisualCylinderGeometry(0.009, 0.009, 0.32, 6)
+  for (const [index, angle] of [Math.PI * 0.25, Math.PI * 0.75, Math.PI * 1.25, Math.PI * 1.75].entries()) {
+    const bar = new THREE.Mesh(cageBarGeometry, metal)
+    bar.name = `${name}-wild-west-lantern-cage-${index + 1}`
+    bar.position.set(Math.cos(angle) * 0.14, -0.045, Math.sin(angle) * 0.14)
+    lantern.add(bar)
+  }
+  const cageRingGeometry = new VisualTorusGeometry(0.14, 0.012, 6, 18)
+  for (const y of [-0.19, 0.1]) {
+    const ring = new THREE.Mesh(cageRingGeometry, metal)
+    ring.position.y = y
+    ring.rotation.x = Math.PI / 2
+    lantern.add(ring)
+  }
+
+  const flameMaterial = new THREE.MeshBasicMaterial({
+    color: new THREE.Color(color).lerp(new THREE.Color('#fff5d8'), 0.5),
+    transparent: true,
+    opacity: 0.92,
+    depthWrite: false,
+    toneMapped: false,
+  })
+  const flame = new THREE.Mesh(new VisualSphereGeometry(0.075, 10, 8), flameMaterial)
+  flame.name = `${name}-wild-west-lantern-flame`
+  flame.position.y = -0.07
+  flame.scale.set(0.72, 1.35, 0.72)
+  flame.userData.ownsMaterial = true
+  flame.userData.portalPairColor = color
+  lantern.add(flame)
+
+  const light = new THREE.PointLight(color, 0.72, 2.8, 2)
+  light.name = `${name}-wild-west-pair-light`
+  light.position.set(0, -0.05, 0.38)
+  light.userData.portalPairColor = color
+  light.userData.portalLightRole = 'pair-color-lantern'
+  lantern.add(light)
+  return lantern
+}
+
+function createBeam(start: THREE.Vector3, end: THREE.Vector3, thickness: number, material: THREE.Material): THREE.Mesh {
+  const direction = end.clone().sub(start)
+  const length = direction.length()
+  const beam = new THREE.Mesh(createMetricBeamGeometry(thickness, length, thickness * 0.82), material)
+  beam.position.copy(start).lerp(end, 0.5)
+  beam.quaternion.setFromUnitVectors(new THREE.Vector3(0, 1, 0), direction.normalize())
+  return beam
+}
+
+function createMetricBeamGeometry(width: number, height: number, depth: number): THREE.BufferGeometry {
+  const geometry = new VisualBoxGeometry(width, height, depth, 3, Math.min(width, depth) * 0.075)
+  const positions = geometry.getAttribute('position')
+  const normals = geometry.getAttribute('normal')
+  const uvs = geometry.getAttribute('uv')
+  const metricFlags = new Float32Array(positions.count * 4)
+  for (let index = 0; index < positions.count; index += 1) {
+    const x = positions.getX(index)
+    const y = positions.getY(index)
+    const z = positions.getZ(index)
+    const nx = Math.abs(normals.getX(index))
+    const ny = Math.abs(normals.getY(index))
+    const nz = Math.abs(normals.getZ(index))
+    if (ny > nx && ny > nz) uvs.setXY(index, x, z)
+    else if (nx > nz) uvs.setXY(index, y, z)
+    else uvs.setXY(index, y, x)
+    metricFlags[index * 4 + 2] = 1
+  }
+  uvs.needsUpdate = true
+  geometry.setAttribute('themeNetUv', new THREE.BufferAttribute(metricFlags, 4))
+  return geometry
+}
+
+function deterministic(seed: string): number {
+  let hash = 2_166_136_261
+  for (const character of seed) {
+    hash ^= character.charCodeAt(0)
+    hash = Math.imul(hash, 16_777_619)
+  }
+  return (hash >>> 0) / 4_294_967_296
+}