Compare commits

...
Sign in to create a new pull request.

2 commits

Author SHA1 Message Date
Vitaly Turovsky
ac47a375e4 disable debug 2025-09-19 05:42:13 +03:00
Vitaly Turovsky
5c82276fad try to improve fog! 2025-09-11 20:24:09 +03:00

View file

@ -1,4 +1,5 @@
import * as THREE from 'three' import * as THREE from 'three'
import { DebugGui } from '../lib/DebugGui'
export const DEFAULT_TEMPERATURE = 0.75 export const DEFAULT_TEMPERATURE = 0.75
@ -17,11 +18,33 @@ export class SkyboxRenderer {
private waterBreathing = false private waterBreathing = false
private fogBrightness = 0 private fogBrightness = 0
private prevFogBrightness = 0 private prevFogBrightness = 0
private readonly fogOrangeness = 0 // Debug property to control sky color orangeness
private readonly distanceFactor = 2.7
private readonly brightnessAtPosition = 1
debugGui: DebugGui
constructor (private readonly scene: THREE.Scene, public defaultSkybox: boolean, public initialImage: string | null) { constructor (private readonly scene: THREE.Scene, public defaultSkybox: boolean, public initialImage: string | null) {
this.debugGui = new DebugGui('skybox_renderer', this, [
'temperature',
'worldTime',
'inWater',
'waterBreathing',
'fogOrangeness',
'brightnessAtPosition',
'distanceFactor'
], {
brightnessAtPosition: { min: 0, max: 1, step: 0.01 },
temperature: { min: 0, max: 1, step: 0.01 },
worldTime: { min: 0, max: 24_000, step: 1 },
fogOrangeness: { min: -1, max: 1, step: 0.01 },
distanceFactor: { min: 0, max: 5, step: 0.01 },
})
if (!initialImage) { if (!initialImage) {
this.createGradientSky() this.createGradientSky()
} }
// this.debugGui.activate()
} }
async init () { async init () {
@ -95,6 +118,7 @@ export class SkyboxRenderer {
// Update world time // Update world time
updateTime (timeOfDay: number, partialTicks = 0) { updateTime (timeOfDay: number, partialTicks = 0) {
if (this.debugGui.visible) return
this.worldTime = timeOfDay this.worldTime = timeOfDay
this.partialTicks = partialTicks this.partialTicks = partialTicks
this.updateSkyColors() this.updateSkyColors()
@ -108,12 +132,14 @@ export class SkyboxRenderer {
// Update temperature (for biome support) // Update temperature (for biome support)
updateTemperature (temperature: number) { updateTemperature (temperature: number) {
if (this.debugGui.visible) return
this.temperature = temperature this.temperature = temperature
this.updateSkyColors() this.updateSkyColors()
} }
// Update water state // Update water state
updateWaterState (inWater: boolean, waterBreathing: boolean) { updateWaterState (inWater: boolean, waterBreathing: boolean) {
if (this.debugGui.visible) return
this.inWater = inWater this.inWater = inWater
this.waterBreathing = waterBreathing this.waterBreathing = waterBreathing
this.updateSkyColors() this.updateSkyColors()
@ -121,6 +147,7 @@ export class SkyboxRenderer {
// Update default skybox setting // Update default skybox setting
updateDefaultSkybox (defaultSkybox: boolean) { updateDefaultSkybox (defaultSkybox: boolean) {
if (this.debugGui.visible) return
this.defaultSkybox = defaultSkybox this.defaultSkybox = defaultSkybox
this.updateSkyColors() this.updateSkyColors()
} }
@ -229,8 +256,15 @@ export class SkyboxRenderer {
if (temperature < -1) temperature = -1 if (temperature < -1) temperature = -1
if (temperature > 1) temperature = 1 if (temperature > 1) temperature = 1
const hue = 0.622_222_2 - temperature * 0.05 // Apply debug fog orangeness to hue - positive values make it more orange, negative make it less orange
const saturation = 0.5 + temperature * 0.1 const baseHue = 0.622_222_2 - temperature * 0.05
// Orange is around hue 0.08-0.15, so we need to shift from blue-purple (0.62) toward orange
// Use a more dramatic shift and also increase saturation for more noticeable effect
const orangeHue = 0.12 // Orange hue value
const hue = this.fogOrangeness > 0
? baseHue + (orangeHue - baseHue) * this.fogOrangeness * 0.8 // Blend toward orange
: baseHue + this.fogOrangeness * 0.1 // Subtle shift for negative values
const saturation = 0.5 + temperature * 0.1 + Math.abs(this.fogOrangeness) * 0.3 // Increase saturation with orangeness
const brightness = 1 const brightness = 1
return this.hsbToRgb(hue, saturation, brightness) return this.hsbToRgb(hue, saturation, brightness)
@ -305,8 +339,7 @@ export class SkyboxRenderer {
// Update fog brightness with smooth transition // Update fog brightness with smooth transition
this.prevFogBrightness = this.fogBrightness this.prevFogBrightness = this.fogBrightness
const renderDistance = this.viewDistance / 32 const renderDistance = this.viewDistance / 32
const brightnessAtPosition = 1 // Could be affected by light level in future const targetBrightness = this.brightnessAtPosition * (1 - renderDistance) + renderDistance
const targetBrightness = brightnessAtPosition * (1 - renderDistance) + renderDistance
this.fogBrightness += (targetBrightness - this.fogBrightness) * 0.1 this.fogBrightness += (targetBrightness - this.fogBrightness) * 0.1
// Handle water fog // Handle water fog
@ -340,7 +373,7 @@ export class SkyboxRenderer {
const blue = (fogColor.z + (skyColor.z - fogColor.z) * viewFactor) * clampedBrightness * interpolatedBrightness const blue = (fogColor.z + (skyColor.z - fogColor.z) * viewFactor) * clampedBrightness * interpolatedBrightness
this.scene.background = new THREE.Color(red, green, blue) this.scene.background = new THREE.Color(red, green, blue)
this.scene.fog = new THREE.Fog(new THREE.Color(red, green, blue), 0.0025, viewDistance * 2) this.scene.fog = new THREE.Fog(new THREE.Color(red, green, blue), 0.0025, viewDistance * this.distanceFactor)
;(this.skyMesh.material as THREE.MeshBasicMaterial).color.set(new THREE.Color(skyColor.x, skyColor.y, skyColor.z)) ;(this.skyMesh.material as THREE.MeshBasicMaterial).color.set(new THREE.Color(skyColor.x, skyColor.y, skyColor.z))
;(this.voidMesh.material as THREE.MeshBasicMaterial).color.set(new THREE.Color( ;(this.voidMesh.material as THREE.MeshBasicMaterial).color.set(new THREE.Color(