Release (#458)

Author: zardoy

renderer/viewer/lib/skyLight.ts

@@ -0,0 +1,124 @@
+/**
+ * Calculates sky light level based on Minecraft time of day.
+ *
+ * Minecraft time reference:
+ * - 0 ticks = 6:00 AM (sunrise complete)
+ * - 6000 ticks = 12:00 PM (noon) - brightest
+ * - 12000 ticks = 6:00 PM (sunset begins)
+ * - 13000 ticks = 7:00 PM (dusk/night begins)
+ * - 18000 ticks = 12:00 AM (midnight) - darkest
+ * - 23000 ticks = 5:00 AM (dawn begins)
+ * - 24000 ticks = 6:00 AM (same as 0)
+ *
+ * Sky light ranges from 4 (night) to 15 (day).
+ */
+
+/**
+ * Calculate celestial angle from time of day (0-1 range representing sun position)
+ */
+export const getCelestialAngle = (timeOfDay: number): number => {
+  // Normalize time to 0-1 range
+  let angle = ((timeOfDay % 24_000) / 24_000) - 0.25
+
+  if (angle < 0) angle += 1
+  if (angle > 1) angle -= 1
+
+  // Vanilla Minecraft applies a smoothing curve
+  const smoothedAngle = angle + (1 - Math.cos(angle * Math.PI)) / 2
+  return smoothedAngle
+}
+
+/**
+ * Calculate sky light level (0-15) based on time of day in ticks.
+ * Matches Minecraft vanilla behavior.
+ *
+ * @param timeOfDay - Time in ticks (0-24000)
+ * @returns Sky light level (4-15, where 15 is brightest day, 4 is darkest night)
+ */
+export const calculateSkyLight = (timeOfDay: number): number => {
+  // Normalize time to 0-24000 range
+  const normalizedTime = ((timeOfDay % 24_000) + 24_000) % 24_000
+
+  // Calculate celestial angle (0-1, where 0.25 is noon, 0.75 is midnight)
+  const celestialAngle = getCelestialAngle(normalizedTime)
+
+  // Calculate brightness factor based on celestial angle
+  // cos gives us smooth day/night transition
+  const cos = Math.cos(celestialAngle * Math.PI * 2)
+
+  // Map cos (-1 to 1) to brightness (0 to 1)
+  // At noon (celestialAngle ~0.25): cos(0.5π) = 0, but we want max brightness
+  // At midnight (celestialAngle ~0.75): cos(1.5π) = 0, but we want min brightness
+
+  // Vanilla-like calculation:
+  // brightness goes from 0 (dark) to 1 (bright)
+  const brightness = cos * 0.5 + 0.5
+
+  // Apply threshold - night should be darker
+  // Vanilla has minimum sky light of 4 during night
+  const skyLight = Math.round(4 + brightness * 11)
+
+  return Math.max(4, Math.min(15, skyLight))
+}
+
+/**
+ * Simplified sky light calculation that more closely matches vanilla behavior.
+ * Uses piecewise linear interpolation based on known Minecraft light levels.
+ *
+ * @param timeOfDay - Time in ticks (0-24000)
+ * @returns Sky light level (4-15)
+ */
+export const calculateSkyLightSimple = (timeOfDay: number): number => {
+  // Normalize to 0-24000
+  const time = ((timeOfDay % 24_000) + 24_000) % 24_000
+
+  // Vanilla Minecraft approximate sky light levels:
+  // 0-12000 (6AM-6PM): Day, sky light = 15
+  // 12000-13000 (6PM-7PM): Sunset transition, 15 -> 4
+  // 13000-23000 (7PM-5AM): Night, sky light = 4
+  // 23000-24000 (5AM-6AM): Sunrise transition, 4 -> 15
+
+  if (time >= 0 && time < 12_000) {
+    // Day time - full brightness
+    return 15
+  } else if (time >= 12_000 && time < 13_000) {
+    // Sunset transition (6PM to 7PM)
+    const progress = (time - 12_000) / 1000
+    return Math.round(15 - progress * 11)
+  } else if (time >= 13_000 && time < 23_000) {
+    // Night time - minimum brightness
+    return 4
+  } else {
+    // Sunrise transition (5AM to 6AM)
+    const progress = (time - 23_000) / 1000
+    return Math.round(4 + progress * 11)
+  }
+}
+
+// Test/debug helper - run this to see values at different times
+export const debugSkyLight = () => {
+  const testTimes = [
+    { ticks: 0, label: '6:00 AM (sunrise)' },
+    { ticks: 6000, label: '12:00 PM (noon)' },
+    { ticks: 12_000, label: '6:00 PM (sunset starts)' },
+    { ticks: 12_500, label: '6:30 PM (sunset mid)' },
+    { ticks: 13_000, label: '7:00 PM (night begins)' },
+    { ticks: 18_000, label: '12:00 AM (midnight)' },
+    { ticks: 19_000, label: '1:00 AM' },
+    { ticks: 23_000, label: '5:00 AM (dawn begins)' },
+    { ticks: 23_500, label: '5:30 AM (dawn mid)' },
+  ]
+
+  console.log('Sky Light Debug:')
+  console.log('================')
+  for (const { ticks, label } of testTimes) {
+    const smooth = calculateSkyLight(ticks)
+    const simple = calculateSkyLightSimple(ticks)
+    console.log(`${ticks.toString().padStart(5)} ticks (${label}): smooth=${smooth}, simple=${simple}`)
+  }
+}
+
+// Export for global access in console
+if (typeof window !== 'undefined') {
+  (window as any).debugSkyLight = debugSkyLight
+}

renderer/viewer/lib/worldrendererCommon.ts

@@ -19,6 +19,7 @@ import { WorldDataEmitterWorker } from './worldDataEmitter'
 import { getPlayerStateUtils, PlayerStateReactive, PlayerStateRenderer, PlayerStateUtils } from './basePlayerState'
 import { MesherLogReader } from './mesherlogReader'
 import { setSkinsConfig } from './utils/skins'
+import { calculateSkyLightSimple } from './skyLight'
 
 function mod (x, n) {
   return ((x % n) + n) % n
@@ -564,19 +565,8 @@ export abstract class WorldRendererCommon<WorkerSend = any, WorkerReceive = any>
   }
 
   getMesherConfig (): MesherConfig {
-    let skyLight = 15
     const timeOfDay = this.timeOfTheDay
-    if (timeOfDay < 0 || timeOfDay > 24_000) {
-      //
-    } else if (timeOfDay <= 6000 || timeOfDay >= 18_000) {
-      skyLight = 15
-    } else if (timeOfDay > 6000 && timeOfDay < 12_000) {
-      skyLight = 15 - ((timeOfDay - 6000) / 6000) * 15
-    } else if (timeOfDay >= 12_000 && timeOfDay < 18_000) {
-      skyLight = ((timeOfDay - 12_000) / 6000) * 15
-    }
-
-    skyLight = Math.floor(skyLight)
+    const skyLight = (timeOfDay < 0 || timeOfDay > 24_000) ? 15 : calculateSkyLightSimple(timeOfDay)
     return {
       version: this.version,
       enableLighting: this.worldRendererConfig.enableLighting,

renderer/viewer/three/entities.ts

@@ -276,6 +276,7 @@ export class Entities {
 
       void this.updatePlayerSkin(playerData.id, playerData.username, playerData.uuid ?? undefined, stevePngUrl)
     }
+    this.playerEntity.originalEntity = { ...playerData, name: 'player' } as SceneEntity['originalEntity']
 
     // Update position and rotation
     if (playerData.position) {
@@ -294,6 +295,7 @@ export class Entities {
       disposeObject(mesh)
     }
     this.entities = {}
+    this.currentSkinUrls = {}
 
     // Clean up player entity
     if (this.playerEntity) {
@@ -481,6 +483,7 @@ export class Entities {
   }
 
   uuidPerSkinUrlsCache = {} as Record<string, { skinUrl?: string, capeUrl?: string }>
+  currentSkinUrls = {} as Record<string, string>
 
   private isCanvasBlank (canvas: HTMLCanvasElement): boolean {
     return !canvas.getContext('2d')
@@ -517,6 +520,27 @@ export class Entities {
     }
 
     if (typeof skinUrl !== 'string') throw new Error('Invalid skin url')
+
+    // Skip if same skin URL is already loaded for this entity
+    if (this.currentSkinUrls[String(entityId)] === skinUrl) {
+      // Still handle cape if needed
+      if (capeUrl) {
+        if (capeUrl === true && username) {
+          const newCapeUrl = await loadSkinFromUsername(username, 'cape')
+          if (!this.getPlayerObject(entityId)) return
+          if (!newCapeUrl) return
+          capeUrl = newCapeUrl
+        }
+        if (typeof capeUrl === 'string') {
+          void this.loadAndApplyCape(entityId, capeUrl)
+        }
+      }
+      return
+    }
+
+    if (skinUrl !== stevePngUrl) {
+      this.currentSkinUrls[String(entityId)] = skinUrl
+    }
     const renderEars = this.worldRenderer.worldRendererConfig.renderEars || username === 'deadmau5'
     void this.loadAndApplySkin(entityId, skinUrl, renderEars).then(async () => {
       if (capeUrl) {
@@ -575,6 +599,7 @@ export class Entities {
       skinTexture.needsUpdate = true
       playerObject.skin.map = skinTexture as any
       playerObject.skin.modelType = inferModelType(skinCanvas)
+      playerObject.skin['isCustom'] = skinUrl !== stevePngUrl
 
       let earsCanvas: HTMLCanvasElement | undefined
       if (!playerCustomSkinImage) {
@@ -1155,6 +1180,7 @@ export class Entities {
   playerPerAnimation = {} as Record<number, string>
   onRemoveEntity (entity: import('prismarine-entity').Entity) {
     this.loadedSkinEntityIds.delete(entity.id.toString())
+    delete this.currentSkinUrls[entity.id.toString()]
   }
 
   updateMap (mapNumber: string | number, data: string) {

renderer/viewer/three/waypoints.ts

@@ -8,6 +8,7 @@ interface Waypoint {
   y: number
   z: number
   minDistance: number
+  maxDistance: number
   color: number
   label?: string
   sprite: WaypointSprite
@@ -17,6 +18,7 @@ interface WaypointOptions {
   color?: number
   label?: string
   minDistance?: number
+  maxDistance?: number
   metadata?: any
 }
 
@@ -54,7 +56,8 @@ export class WaypointsRenderer {
     for (const waypoint of this.waypoints.values()) {
       const waypointPos = new THREE.Vector3(waypoint.x, waypoint.y, waypoint.z)
       const distance = playerPos.distanceTo(waypointPos)
-      const visible = !waypoint.minDistance || distance >= waypoint.minDistance
+      const visible = (!waypoint.minDistance || distance >= waypoint.minDistance) &&
+        (waypoint.maxDistance === Infinity || distance <= waypoint.maxDistance)
 
       waypoint.sprite.setVisible(visible)
 
@@ -92,6 +95,7 @@ export class WaypointsRenderer {
     const color = options.color ?? 0xFF_00_00
     const { label, metadata } = options
     const minDistance = options.minDistance ?? 0
+    const maxDistance = options.maxDistance ?? Infinity
 
     const sprite = createWaypointSprite({
       position: new THREE.Vector3(x, y, z),
@@ -105,7 +109,7 @@ export class WaypointsRenderer {
     this.waypointScene.add(sprite.group)
 
     this.waypoints.set(id, {
-      id, x: x + 0.5, y: y + 0.5, z: z + 0.5, minDistance,
+      id, x: x + 0.5, y: y + 0.5, z: z + 0.5, minDistance, maxDistance,
       color, label,
       sprite,
     })

src/appStatus.ts

@@ -1,4 +1,5 @@
 import { resetStateAfterDisconnect } from './browserfs'
+import type { ConnectOptions } from './connect'
 import { hideModal, activeModalStack, showModal, miscUiState } from './globalState'
 import { appStatusState, resetAppStatusState } from './react/AppStatusProvider'
 
@@ -39,3 +40,9 @@ export const setLoadingScreenStatus = function (status: string | undefined | nul
   }
 }
 globalThis.setLoadingScreenStatus = setLoadingScreenStatus
+
+export const lastConnectOptions = {
+  value: null as ConnectOptions | null,
+  hadWorldLoaded: false
+}
+globalThis.lastConnectOptions = lastConnectOptions

src/controls.ts

@@ -22,7 +22,7 @@ import { getItemFromBlock } from './chatUtils'
 import { gamepadUiCursorState } from './react/GamepadUiCursor'
 import { completeResourcepackPackInstall, copyServerResourcePackToRegular, resourcePackState } from './resourcePack'
 import { showNotification } from './react/NotificationProvider'
-import { lastConnectOptions } from './react/AppStatusProvider'
+import { lastConnectOptions } from './appStatus'
 import { onCameraMove, onControInit } from './cameraRotationControls'
 import { createNotificationProgressReporter } from './core/progressReporter'
 import { appStorage } from './react/appStorageProvider'

src/customChannels.ts

@@ -1,14 +1,25 @@
 import PItem from 'prismarine-item'
 import * as THREE from 'three'
 import { getThreeJsRendererMethods } from 'renderer/viewer/three/threeJsMethods'
-import { options } from './optionsStorage'
+import { options, serverChangedSettings } from './optionsStorage'
 import { jeiCustomCategories } from './inventoryWindows'
 import { registerIdeChannels } from './core/ideChannels'
 import { serverSafeSettings } from './defaultOptions'
+import { lastConnectOptions } from './appStatus'
+
+const isWebSocketServer = (server: string | undefined) => {
+  if (!server) return false
+  return server.startsWith('ws://') || server.startsWith('wss://')
+}
+
+const getIsCustomChannelsEnabled = () => {
+  if (options.customChannels === 'websocket') return isWebSocketServer(lastConnectOptions.value?.server)
+  return options.customChannels
+}
 
 export default () => {
   customEvents.on('mineflayerBotCreated', async () => {
-    if (!options.customChannels) return
+    if (!getIsCustomChannelsEnabled()) return
     bot.once('login', () => {
       registerBlockModelsChannel()
       registerMediaChannels()
@@ -148,6 +159,7 @@ const registerWaypointChannels = () => {
 
     getThreeJsRendererMethods()?.addWaypoint(data.id, data.x, data.y, data.z, {
       minDistance: data.minDistance,
+      maxDistance: metadata.maxDistance,
       label: data.label || undefined,
       color: data.color || undefined,
       metadata
@@ -566,17 +578,8 @@ const registerServerSettingsChannel = () => {
           continue
         }
 
-        // Validate type matches
-        const currentValue = options[key]
-
-        // For union types, check if value is valid
-        if (Array.isArray(currentValue) && !Array.isArray(value)) {
-          console.warn(`Type mismatch for setting ${key}: expected array`)
-          skippedCount++
-          continue
-        }
-
-        // Apply the setting
+        // todo remove it later, let user take control back and make clear to user
+        serverChangedSettings.value.add(key)
         options[key] = value
         appliedCount++
       }

src/defaultOptions.ts

@@ -51,7 +51,7 @@ export const defaultOptions = {
   displayRecordButton: true,
   packetsLoggerPreset: 'all' as 'all' | 'no-buffers',
   serversAutoVersionSelect: 'auto' as 'auto' | 'latest' | '1.20.4' | string,
-  customChannels: false,
+  customChannels: 'websocket' as boolean | 'websocket',
   remoteContentNotSameOrigin: false as boolean | string[],
   packetsRecordingAutoStart: false,
   language: 'auto',
@@ -165,6 +165,7 @@ function getTouchControlsSize () {
  * Settings like modsSupport, customChannels, or security-related options are excluded.
  */
 export const serverSafeSettings: Partial<Record<keyof typeof defaultOptions, true>> = {
+  remoteContentNotSameOrigin: true, // allow server to change remote content not same origin policy
   renderEars: true,
   viewBobbing: true,
   mouseRawInput: true,

src/entities.ts

@@ -237,16 +237,10 @@ customEvents.on('gameLoaded', () => {
       const skinUrl = applySkinTexturesProxy(player.skinData.url)
       const capeUrl = applySkinTexturesProxy((player.skinData as any).capeUrl)
 
-      // Find entity with matching UUID and update skin
-      let entityId = ''
-      for (const [entId, entity] of Object.entries(bot.entities)) {
-        if (entity.uuid === player.uuid) {
-          entityId = entId
-          break
-        }
+      void getThreeJsRendererMethods()!.updatePlayerSkin(player.entity?.id ?? '', player.username, player.uuid, skinUrl ?? true, capeUrl)
+      if (player.entity === bot.entity) {
+        appViewer.playerState.reactive.playerSkin = skinUrl
       }
-      // even if not found, still record to cache
-      void getThreeJsRendererMethods()!.updatePlayerSkin(entityId, player.username, player.uuid, skinUrl ?? true, capeUrl)
     } catch (err) {
       reportError(new Error('Error applying skin texture:', { cause: err }))
     }