diff --git a/index.html b/index.html
index 9ff7f6f..3c759ff 100644
--- a/index.html
+++ b/index.html
@@ -285,83 +285,6 @@
-
-
-
-
-
-
-
180.0°
-
-
-
-
0.10
-
-
-
-
10.0
-
-
-
-
2.00
-
-
-
-
0.10
-
-
-
-
0.00
-
-
-
-
0.40
-
-
-
-
0.50
-
-
-
-
0.50
-
-
-
-
0.42
-
-
-
-
0.32
-
-
-
-
0.55
-
FPS: 60
diff --git a/src/OceanScene.js b/src/OceanScene.js
index e599f2f..58518aa 100644
--- a/src/OceanScene.js
+++ b/src/OceanScene.js
@@ -34,8 +34,6 @@ export class OceanScene {
this.fogLayers = [];
this.horizonFog = null;
this.skyHazeBand = null;
- this.horizonSoftBlend = null;
- this.horizonGlow = null;
this.params = {
elevation: 2,
@@ -53,9 +51,7 @@ export class OceanScene {
fogHeight: 0.32,
fogRange: 0.55,
mieCoefficient: 0.005,
- mieDirectionalG: 0.8,
- horizonBlend: 0.45,
- horizonGlow: 0.28
+ mieDirectionalG: 0.8
};
this.clock = new THREE.Clock();
@@ -289,10 +285,6 @@ export class OceanScene {
this.fogGroup.add(this.horizonFog);
this.skyHazeBand = this.createSkyHazeBand();
this.fogGroup.add(this.skyHazeBand);
- this.horizonSoftBlend = this.createHorizonSoftBlend();
- this.fogGroup.add(this.horizonSoftBlend);
- this.horizonGlow = this.createHorizonGlow();
- this.fogGroup.add(this.horizonGlow);
this.scene.add(this.fogGroup);
this.updateFog();
}
@@ -456,105 +448,6 @@ export class OceanScene {
mesh.userData.texture = texture;
return mesh;
}
-
- createHorizonSoftBlendTexture() {
- const canvas = document.createElement('canvas');
- canvas.width = 64;
- canvas.height = 512;
-
- const context = canvas.getContext('2d');
- const gradient = context.createLinearGradient(0, 0, 0, canvas.height);
- gradient.addColorStop(0, 'rgba(255,255,255,0)');
- gradient.addColorStop(0.15, 'rgba(255,255,255,0.01)');
- gradient.addColorStop(0.3, 'rgba(255,255,255,0.08)');
- gradient.addColorStop(0.45, 'rgba(255,255,255,0.25)');
- gradient.addColorStop(0.5, 'rgba(255,255,255,0.32)');
- gradient.addColorStop(0.55, 'rgba(255,255,255,0.25)');
- gradient.addColorStop(0.7, 'rgba(255,255,255,0.08)');
- gradient.addColorStop(0.85, 'rgba(255,255,255,0.01)');
- gradient.addColorStop(1, 'rgba(255,255,255,0)');
- context.fillStyle = gradient;
- context.fillRect(0, 0, canvas.width, canvas.height);
-
- const texture = new THREE.CanvasTexture(canvas);
- texture.colorSpace = THREE.SRGBColorSpace;
- texture.wrapS = THREE.RepeatWrapping;
- texture.wrapT = THREE.ClampToEdgeWrapping;
- texture.repeat.set(5, 1);
- texture.needsUpdate = true;
- return texture;
- }
-
- createHorizonSoftBlend() {
- const texture = this.createHorizonSoftBlendTexture();
- const material = new THREE.MeshBasicMaterial({
- map: texture,
- alphaMap: texture,
- color: 0xe8f0f5,
- transparent: true,
- opacity: 0.45,
- fog: false,
- depthWrite: false,
- side: THREE.BackSide,
- blending: THREE.NormalBlending
- });
-
- const geometry = new THREE.CylinderGeometry(4850, 4850, 1200, 72, 1, true);
- const mesh = new THREE.Mesh(geometry, material);
- mesh.position.y = 180;
- mesh.renderOrder = -3;
- mesh.userData.texture = texture;
- return mesh;
- }
-
- createHorizonGlowTexture() {
- const canvas = document.createElement('canvas');
- canvas.width = 64;
- canvas.height = 512;
-
- const context = canvas.getContext('2d');
- const gradient = context.createLinearGradient(0, 0, 0, canvas.height);
- gradient.addColorStop(0, 'rgba(255,255,255,0)');
- gradient.addColorStop(0.25, 'rgba(255,255,255,0.02)');
- gradient.addColorStop(0.4, 'rgba(255,255,255,0.12)');
- gradient.addColorStop(0.48, 'rgba(255,255,255,0.22)');
- gradient.addColorStop(0.52, 'rgba(255,255,255,0.22)');
- gradient.addColorStop(0.6, 'rgba(255,255,255,0.12)');
- gradient.addColorStop(0.75, 'rgba(255,255,255,0.02)');
- gradient.addColorStop(1, 'rgba(255,255,255,0)');
- context.fillStyle = gradient;
- context.fillRect(0, 0, canvas.width, canvas.height);
-
- const texture = new THREE.CanvasTexture(canvas);
- texture.colorSpace = THREE.SRGBColorSpace;
- texture.wrapS = THREE.RepeatWrapping;
- texture.wrapT = THREE.ClampToEdgeWrapping;
- texture.repeat.set(6, 1);
- texture.needsUpdate = true;
- return texture;
- }
-
- createHorizonGlow() {
- const texture = this.createHorizonGlowTexture();
- const material = new THREE.MeshBasicMaterial({
- map: texture,
- alphaMap: texture,
- color: 0xfff5e8,
- transparent: true,
- opacity: 0.28,
- fog: false,
- depthWrite: false,
- side: THREE.BackSide,
- blending: THREE.AdditiveBlending
- });
-
- const geometry = new THREE.CylinderGeometry(4600, 4600, 600, 72, 1, true);
- const mesh = new THREE.Mesh(geometry, material);
- mesh.position.y = 120;
- mesh.renderOrder = -4;
- mesh.userData.texture = texture;
- return mesh;
- }
async initWater() {
const waterGeometry = new THREE.PlaneGeometry(10000, 10000, 128, 128);
@@ -825,16 +718,6 @@ export class OceanScene {
this.updateFog();
}
- setHorizonBlend(value) {
- this.params.horizonBlend = value;
- this.updateFog();
- }
-
- setHorizonGlow(value) {
- this.params.horizonGlow = value;
- this.updateFog();
- }
-
updateClouds() {
if (!this.cloudGroup) return;
@@ -904,41 +787,6 @@ export class OceanScene {
);
this.skyHazeBand.visible = this.skyHazeBand.material.opacity > 0.01;
}
-
- if (this.horizonSoftBlend) {
- const softBlendColor = horizonColor.clone().lerp(skyBlendColor, 0.35);
- this.horizonSoftBlend.material.color.copy(softBlendColor);
- this.horizonSoftBlend.material.opacity =
- this.params.horizonBlend *
- THREE.MathUtils.lerp(0.8, 1.2, this.params.fogDensity) *
- THREE.MathUtils.lerp(0.85, 1.1, this.params.fogRange);
- this.horizonSoftBlend.position.y = THREE.MathUtils.lerp(120, 220, this.params.fogHeight);
- this.horizonSoftBlend.scale.set(
- THREE.MathUtils.lerp(0.9, 1.18, this.params.fogRange),
- THREE.MathUtils.lerp(0.85, 1.12, this.params.fogHeight),
- THREE.MathUtils.lerp(0.9, 1.18, this.params.fogRange)
- );
- this.horizonSoftBlend.visible = this.horizonSoftBlend.material.opacity > 0.01;
- }
-
- if (this.horizonGlow) {
- const warmGlow = new THREE.Color(0xfff5e8);
- const coolGlow = new THREE.Color(0xe8f4ff);
- const glowColor = warmGlow.clone().lerp(coolGlow, sunMix);
- this.horizonGlow.material.color.copy(glowColor);
- this.horizonGlow.material.opacity =
- this.params.horizonGlow *
- THREE.MathUtils.lerp(0.7, 1.1, this.params.fogDensity) *
- THREE.MathUtils.lerp(0.8, 1.05, this.params.fogRange) *
- THREE.MathUtils.clamp((this.params.elevation + 5) / 50, 0.1, 1);
- this.horizonGlow.position.y = THREE.MathUtils.lerp(80, 160, this.params.fogHeight);
- this.horizonGlow.scale.set(
- THREE.MathUtils.lerp(0.92, 1.15, this.params.fogRange),
- THREE.MathUtils.lerp(0.88, 1.1, this.params.fogHeight),
- THREE.MathUtils.lerp(0.92, 1.15, this.params.fogRange)
- );
- this.horizonGlow.visible = this.horizonGlow.material.opacity > 0.01;
- }
}
animate() {
@@ -970,12 +818,6 @@ export class OceanScene {
if (this.skyHazeBand?.userData.texture) {
this.skyHazeBand.userData.texture.offset.x = -time * 0.00018;
}
- if (this.horizonSoftBlend?.userData.texture) {
- this.horizonSoftBlend.userData.texture.offset.x = time * 0.00012;
- }
- if (this.horizonGlow?.userData.texture) {
- this.horizonGlow.userData.texture.offset.x = -time * 0.00008;
- }
}
if (this.vegetationSystem) {
diff --git a/src/main.js b/src/main.js
index db25070..9c48ea3 100644
--- a/src/main.js
+++ b/src/main.js
@@ -55,8 +55,6 @@ function setupControls(oceanScene) {
bindSlider('fog-density', (value) => value.toFixed(2), (value) => oceanScene.setFogDensity(value));
bindSlider('fog-height', (value) => value.toFixed(2), (value) => oceanScene.setFogHeight(value));
bindSlider('fog-range', (value) => value.toFixed(2), (value) => oceanScene.setFogRange(value));
- bindSlider('horizon-blend', (value) => value.toFixed(2), (value) => oceanScene.setHorizonBlend(value));
- bindSlider('horizon-glow', (value) => value.toFixed(2), (value) => oceanScene.setHorizonGlow(value));
}
main().catch(console.error);