Compare commits
2 commits
next
...
fog-adjust
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
ac47a375e4 | ||
|
|
5c82276fad |
1 changed files with 38 additions and 5 deletions
|
|
@ -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(
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue