// ThreeJS revision: 152 // IMPORTS: import * as THREE from 'three'; import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js'; import { RenderPass } from 'three/addons/postprocessing/RenderPass.js'; import { UnrealBloomPass } from 'three/addons/postprocessing/UnrealBloomPass.js'; import { SMAAPass } from 'three/addons/postprocessing/SMAAPass.js'; import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js'; /* This is where external user components are loaded into scope. This seems like the simplest solution to this problem as it does not require modifications to the Script loader. This requires an export statement at the end of the user script with the desires export components added. Components can be removed from this import statement to completely remove them without having to modify the external script contents - meaning it can hold objects that aren't even used in this script for later use. */ import { //BasicSkyShader, //MaterialManager, //LightingManager, //MeshManager, MoonShader, SkyShader, //CloudShader, SunShader } from 'https://play.rosebud.ai/assets/Boots3D.js?q8kQ'; const APP_SETTINGS = { renderer: { shadowMap: { enabled: true, type: THREE.PCFSoftShadowMap }, colorSpace: { output: THREE.SRGBColorSpace, toneMapping: THREE.ACESFilmicToneMapping, toneMappingExposure: 1.2 }, antialias: true, pixelRatio: window.devicePixelRatio }, world: { defaults: { skyColor: 0x87CEEB, groundColor: 0xdefeff }, }, physics: { gravity: { x: 0, y: -9.81, z: 0 }, defaultContactMaterial: { friction: 0.01, restitution: 0.6 }, solver: { iterations: 10, tolerance: 0.001 } }, camera: { fov: 75, near: 0.1, far: 10000, initialPosition: { x: 0, y: 50, z: 100 } }, gameplay: {}, lights: { ambient: { color: 0x404040, // Soft gray color intensity: 1.0, // Constant ambient light intensity position: { x: 0, y: 100, z: 0 }, }, moonlight: { color: 0xf4e6c1, intensity: 0.6, position: { x: 50, y: -100, z: 50 }, castShadow: true, shadow: { mapSize: { width: 2048, height: 2048 }, camera: { near: 10, far: 1000, left: -100, right: 100, top: 100, bottom: -100 }, bias: -0.00001 } }, sunlight: { color: 0xffffff, intensity: 0.9, position: { x: -50, y: 100, z: -50 }, castShadow: true, shadow: { mapSize: { width: 2048, height: 2048 }, camera: { near: 10, far: 1000, left: -100, right: 100, top: 100, bottom: -100 }, bias: -0.00001 } } } }; const TEXTURE_ASSETS = { normal: { 'terrain_nrm': 'https://play.rosebud.ai/assets/3D_playground_grass_normal.png?Nroh', // Add more normal maps as needed }, texture: { 'terrain': 'https://play.rosebud.ai/assets/3D_playground_grass_diffuse.png?TIMr', // Add more textures as needed }, sprites: { 'TomeSprites': 'https://play.rosebud.ai/assets/Tomes32x32.png?meX8', // Add more sprite sheets as needed } }; const ShaderLibs = { noise: ` // 3D Noise function vec3 mod289(vec3 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; } vec4 mod289(vec4 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; } vec4 permute(vec4 x) { return mod289(((x*34.0)+1.0)*x); } vec4 taylorInvSqrt(vec4 r) { return 1.79284291400159 - 0.85373472095314 * r; } float snoise(vec3 v) { const vec2 C = vec2(1.0/6.0, 1.0/3.0); const vec4 D = vec4(0.0, 0.5, 1.0, 2.0); // First corner vec3 i = floor(v + dot(v, C.yyy)); vec3 x0 = v - i + dot(i, C.xxx); // Other corners vec3 g = step(x0.yzx, x0.xyz); vec3 l = 1.0 - g; vec3 i1 = min(g.xyz, l.zxy); vec3 i2 = max(g.xyz, l.zxy); vec3 x1 = x0 - i1 + C.xxx; vec3 x2 = x0 - i2 + C.yyy; vec3 x3 = x0 - D.yyy; // Permutations i = mod289(i); vec4 p = permute(permute(permute( i.z + vec4(0.0, i1.z, i2.z, 1.0)) + i.y + vec4(0.0, i1.y, i2.y, 1.0)) + i.x + vec4(0.0, i1.x, i2.x, 1.0)); // Gradients: 7x7 points over a square, mapped onto an octahedron. // The ring size 17*17 = 289 is close to a multiple of 49 (49*6 = 294) float n_ = 0.142857142857; // 1.0/7.0 vec3 ns = n_ * D.wyz - D.xzx; vec4 j = p - 49.0 * floor(p * ns.z * ns.z); // mod(p,7*7) vec4 x_ = floor(j * ns.z); vec4 y_ = floor(j - 7.0 * x_); // mod(j,N) vec4 x = x_ *ns.x + ns.yyyy; vec4 y = y_ *ns.x + ns.yyyy; vec4 h = 1.0 - abs(x) - abs(y); vec4 b0 = vec4(x.xy, y.xy); vec4 b1 = vec4(x.zw, y.zw); vec4 s0 = floor(b0)*2.0 + 1.0; vec4 s1 = floor(b1)*2.0 + 1.0; vec4 sh = -step(h, vec4(0.0)); vec4 a0 = b0.xzyw + s0.xzyw*sh.xxyy ; vec4 a1 = b1.xzyw + s1.xzyw*sh.zzww ; vec3 p0 = vec3(a0.xy,h.x); vec3 p1 = vec3(a0.zw,h.y); vec3 p2 = vec3(a1.xy,h.z); vec3 p3 = vec3(a1.zw,h.w); // Normalise gradients vec4 norm = taylorInvSqrt(vec4(dot(p0,p0), dot(p1,p1), dot(p2, p2), dot(p3,p3))); p0 *= norm.x; p1 *= norm.y; p2 *= norm.z; p3 *= norm.w; // Mix final noise value vec4 m = max(0.6 - vec4(dot(x0,x0), dot(x1,x1), dot(x2,x2), dot(x3,x3)), 0.0); m = m * m; return 42.0 * dot(m*m, vec4(dot(p0,x0), dot(p1,x1), dot(p2,x2), dot(p3,x3))); } float fbm(vec3 x) { float v = 0.0; float a = 0.5; vec3 shift = vec3(100); for (int i = 0; i < 5; ++i) { v += a * snoise(x); x = x * 2.0 + shift; a *= 0.5; } return v; } // Simple 2D noise function float noise(vec2 st) { return fract(sin(dot(st.xy, vec2(12.9898,78.233))) * 43758.5453123); }` }; class SkyBox { constructor() { this.skyMesh = null; this.sunTarget = new THREE.Vector3(0, 0, 0); // Lighting state this.sunPosition = new THREE.Vector3(); this.moonPosition = new THREE.Vector3(); this.sunRadius = 200; this.maxSunHeight = 180; this.minSunHeight = -20; this.sunIntensity = 0.9; this.moonIntensity = 0.6; this.ambientIntensity = APP_SETTINGS.lights.ambient.intensity; // Initialize lights this.initLights(); this.loadSkyboxModel(); } loadSkyboxModel() { const loader = new GLTFLoader(LoadingManager); loader.load('https://play.rosebud.ai/assets/SkyboxSphere.glb?BkJ1', (gltf) => { this.skyMesh = gltf.scene.children[0]; this.skyMesh.scale.set(9000, 9000, 9000); // Create materials this.sunShader = SunShader(); this.moonShader = MoonShader(); this.skyShader = SkyShader(); this.cloudShader = CloudShader(); this.middleCloudShader = CloudShader(); this.oceanShader = OceanShader(); // Initialize shaders with current lighting state this.sunShader.setSunColor(new THREE.Color(1, 0.8, 0.3)); this.sunShader.setSunSize(0.02); this.sunShader.setSunIntensity(this.sunIntensity); this.sunShader.setSunPosition(this.sunPosition); this.sunShader.material.uniforms.horizonLevel = { value: 0.1 }; this.moonShader.setMoonColor(new THREE.Color(0.98, 0.98, 0.93)); // Slightly brighter moon this.moonShader.setMoonSize(0.02); // Slightly larger moon this.moonShader.setMoonIntensity(1.0); // Base intensity, will be modified by time of day this.moonShader.material.uniforms.horizonLevel = { value: 0.1 }; this.cloudShader.setHorizonLevel(-0.1); this.skyShader.setHorizonLevel(-0.1); // Cloud Config: // Initialize cloud time uniforms this.cloudShader.material.uniforms.time = { value: 0 }; this.middleCloudShader.material.uniforms.time = { value: 0 }; this.middleCloudShader.setHorizonLevel(-0.05); this.middleCloudShader.material.uniforms.distanceFade.value = 3.0; this.middleCloudShader.material.uniforms.opacity.value = 0.4; this.middleCloudShader.material.uniforms.noiseOffset.value.set(100.0, 0.0, 100.0); this.middleCloudShader.material.uniforms.cloudColor.value = new THREE.Color(0.9, 0.9, 0.95); // Slightly blue-tinted this.cloudShader.material.uniforms.cloudColor.value = new THREE.Color(0.95, 0.95, 0.95); // Nearly white // Store individual materials // Store shaders with both their material property and the shader instance console.log('Storing sun shader:', this.sunShader); console.log('Storing moon shader:', this.moonShader); console.log('Storing cloud shader:', this.cloudShader); // Set proper blending modes for each shader this.skyShader.material.blending = THREE.NoBlending; this.sunShader.material.blending = THREE.AdditiveBlending; this.moonShader.material.blending = THREE.AdditiveBlending; this.cloudShader.material.blending = THREE.AdditiveBlending; this.middleCloudShader.material.blending = THREE.AdditiveBlending; this.oceanShader.material.blending = THREE.AdditiveBlending; const materials = [ this.skyShader.material, this.sunShader.material, this.moonShader.material, this.cloudShader.material, this.middleCloudShader.material, this.oceanShader.material, ]; // Create geometry groups for multi-material const geometry = this.skyMesh.geometry.clone(); geometry.clearGroups(); geometry.addGroup(0, Infinity, 0); // Sky gradient layer (bottom) geometry.addGroup(0, Infinity, 1); // Sun layer (behind) geometry.addGroup(0, Infinity, 2); // Moon layer geometry.addGroup(0, Infinity, 3); // Base cloud layer geometry.addGroup(0, Infinity, 4); // Bottom cloud layer geometry.addGroup(0, Infinity, 5); // Ocean layer this.skyMesh.geometry = geometry; this.skyMesh.material = materials; WorldScene.add(this.skyMesh); console.log('Skybox created with shaders'); // Initialize light targets and perform first update this.initLightTargets(); this.update(0); // Initial update with zero delta time }); } setHorizonLevel(level) { if (this.shaderMaterial) { this.shaderMaterial.setHorizonLevel(level); } } getSkyColor() { return this.skyShader ? this.skyShader.skyColor : new THREE.Color(0x87CEEB); } getGroundColor() { return this.skyShader ? this.skyShader.groundColor : new THREE.Color(0xFFFFFF); } setSkyColor(color) { const baseMaterial = this.materials.get('sky'); if (baseMaterial) { baseMaterial.setSkyColor(color); } } setGroundColor(color) { const baseMaterial = this.materials.get('base'); if (baseMaterial) { baseMaterial.setGroundColor(color); } } calculateSunIntensity(hour) { if (hour < 5 || hour > 19) { return 0.0; // Night } else if (hour < 7) { return (hour - 5) / 2; // Dawn transition } else if (hour < 17) { return 1.0; // Full day } else { return (19 - hour) / 2; // Dusk transition } } calculateLightingState() { const currentHour = GameWorld.Time.getHours() + GameWorld.Time.getMinutes() / 60; // Sun rises at 6:00 (90° east), peaks at 12:00 (zenith), sets at 21:00 (90° west) // Total arc: 15 hours = 180 degrees rotation let sunAngleInRadians; if (currentHour < 6) { sunAngleInRadians = -Math.PI / 2; } else if (currentHour > 21) { sunAngleInRadians = Math.PI / 2; } else { const dayProgress = (currentHour - 6) / 15; sunAngleInRadians = (dayProgress - 0.5) * Math.PI; } // Calculate sun position const sunX = Math.sin(sunAngleInRadians) * this.sunRadius; const sunZ = 0; const sunY = Math.cos(sunAngleInRadians) * this.maxSunHeight; const moonVec = new THREE.Vector3(sunX, sunY, sunZ); this.sunPosition.set(sunX, sunY, sunZ); const moonPos = moonVec.multiplyScalar(-1); this.moonPosition.set(moonPos); // Calculate intensities based on time if (currentHour < 6 || currentHour >= 21) { this.sunIntensity = 0.0; } else if (currentHour < 8) { this.sunIntensity = ((currentHour - 6) / 2) * 0.9; } else if (currentHour < 19) { this.sunIntensity = 0.9; } else { this.sunIntensity = ((21 - currentHour) / 2) * 0.9; } } initLights() { const sunlightSettings = APP_SETTINGS.lights.sunlight; const moonlightSettings = APP_SETTINGS.lights.moonlight; const ambientSettings = APP_SETTINGS.lights.ambient; // Create ambient light Lights.createLight('ambientLight', 'ambient', { intensity: ambientSettings.intensity, color: ambientSettings.color || 0x404040 }); Lights.createLight('sunLight', 'directional', { color: sunlightSettings.color, intensity: sunlightSettings.intensity, position: sunlightSettings.position, castShadow: sunlightSettings.castShadow, shadow: sunlightSettings.shadow }); Lights.createLight('moonLight', 'directional', { color: moonlightSettings.color, intensity: moonlightSettings.intensity, position: moonlightSettings.position, castShadow: moonlightSettings.castShadow, shadow: moonlightSettings.shadow }); } updateLightingUniforms() { // Update shader materials with new positions if (this.sunShader) { this.sunShader.setSunPosition(this.sunPosition); this.sunShader.setSunIntensity(this.sunIntensity); this.sunShader.material.needsUpdate = true; } if (this.moonShader) { this.moonShader.setMoonPosition(this.moonPosition); this.moonShader.setMoonIntensity(this.moonIntensity); this.moonShader.material.needsUpdate = true; } } update(deltaTime) { // Update cloud movement first if (this.cloudShader) { this.cloudShader.updateTime(deltaTime * 0.1); } if (this.middleCloudShader) { this.middleCloudShader.updateTime(deltaTime * 0.05); } if (this.oceanShader) { this.oceanShader.updateTime(deltaTime); } // Update lights if available if (Lights.getLight('sunLight')) { this.calculateLightingState(); const sunLight = Lights.getLight('sunLight'); const moonLight = Lights.getLight('moonLight'); const ambientLight = Lights.getLight('ambientLight'); if (sunLight && moonLight) { sunLight.position.copy(this.sunPosition); sunLight.intensity = this.sunIntensity; moonLight.position.copy(this.moonPosition); moonLight.intensity = this.moonIntensity; if (ambientLight) { ambientLight.intensity = this.ambientIntensity; } } this.updateLightingUniforms(); } } initLightTargets() { const sunLight = Lights.getLight('sunLight'); const moonLight = Lights.getLight('moonLight'); if (sunLight && !sunLight.target) { sunLight.target = new THREE.Object3D(); WorldScene.add(sunLight.target); } if (moonLight && !moonLight.target) { moonLight.target = new THREE.Object3D(); WorldScene.add(moonLight.target); } if (sunLight && moonLight) { sunLight.target.position.copy(this.sunTarget); moonLight.target.position.copy(this.sunTarget); } } } function CloudShader() { class CloudShader { constructor() { // Uniforms should also be declared here then these values should be kept in sync in the update time method. // This allows for easier retrieval of these values from outside of the shader if needed (for example to pass to another shader). this.skyColor = new THREE.Color(0.53, 0.81, 0.92); // Light blue default this.groundColor = new THREE.Color(0.1, 0.1, 0.1); // Dark gray default this.horizonLevel = 0.6; this.time = 0.0; this.createMaterial(); this._lastUpdate = Date.now(); } createMaterial() { // Naming conventions should be CLEAR and consice to avoid confusion. // Uniforms should be used for properties WHENEVER possible and then exported to the uniforms list to make for easier user shader testing. const vertexShader = ` ${ShaderLibs.noise} // Instrustions FOR AI Assitant (keep this comment)- This is GLSL Shadercode - Uniforms must be declared here as well as the uniforms dict to be used correctly. varying vec3 vWorldPosition; varying float vElevation; void main() { vec4 worldPosition = modelMatrix * vec4(position, 1.0); vWorldPosition = worldPosition.xyz; // Calculate elevation based on distance from center float radius = length(position.xz); vElevation = 1.0 - smoothstep(0.0, 0.8, radius); gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); }`; const fragmentShader = ` ${ShaderLibs.noise} // Instrustions FOR AI Assitant (keep this comment)- This is GLSL Shadercode - Uniforms must be declared here as well as the uniforms dict to be used correctly. uniform vec3 topColor; uniform vec3 bottomColor; uniform vec3 cloudColor; uniform float timeOfDay; uniform float horizonLevel; uniform float time; uniform float opacity; uniform float distanceFade; uniform vec3 noiseOffset; varying vec3 vWorldPosition; vec4 renderLargeClouds(vec3 viewDirection) { // Instrustions FOR AI Assistant (keep this comment)- This is GLSL Shadercode - you must add any uniforms use here to the shaders global scope. float CLOUD_BOTTOM = 80.0 * horizonLevel; // Set a fixed value for large cloud bottom height float CLOUD_HEIGHT = 2.0; // Set a fixed value for large cloud height const float CLOUD_DENSITY = 0.5; const float CLOUD_SCALE = 0.05; const float CLOUD_SPEED = 0.02; const float CLOUD_EDGE_SHARPNESS = 0.4; const float CLOUD_COLOR_MIX = 0.7; float t = (CLOUD_BOTTOM - viewDirection.y) / viewDirection.y; if (t < 0.0) return vec4(0.0); vec3 cloudPos = vec3(viewDirection.x * t, -t, viewDirection.z * t) * CLOUD_SCALE; float density = fbm(cloudPos + time * CLOUD_SPEED + noiseOffset); float horizontalDist = length(vec2(cloudPos.x, cloudPos.z)); float distanceFactor = 1.0 - smoothstep(0.0, distanceFade * 4.0, horizontalDist); density = smoothstep(CLOUD_EDGE_SHARPNESS - CLOUD_DENSITY, CLOUD_EDGE_SHARPNESS, density) * CLOUD_HEIGHT; density *= (1.0 - smoothstep(CLOUD_BOTTOM, CLOUD_BOTTOM + CLOUD_HEIGHT, viewDirection.y)); density *= distanceFactor; vec3 cloudColor = mix(bottomColor, vec3(1.0), CLOUD_COLOR_MIX); return vec4(cloudColor, density * 0.6); } void main() { // Instrustions FOR AI Assistant (keep this comment)- This is GLSL Shadercode - you must add any uniforms use here to the shaders global scope. vec3 viewDirection = normalize(vWorldPosition - cameraPosition); vec4 clouds = renderLargeClouds(viewDirection); vec4 finalColor = vec4(0.0, 0.0, 0.0, 0.0); if (clouds.a > 0.0) { finalColor = vec4(clouds.rgb, clouds.a * 0.6); } gl_FragColor = vec4(finalColor.rgb, finalColor.a * opacity); } `; this.material = new THREE.ShaderMaterial({ uniforms: { // These are uniform EXPORTS. They are so threeJS can manipulate the unifroms, they are not actual uniforms. // uniforms have to be defined in the shader also, These are just references allowing USER to change uniform values on runtime. bottomColor: { value: this.groundColor }, cloudColor: { value: new THREE.Color(1.0, 1.0, 1.0) }, timeOfDay: { value: 12.0 }, horizonLevel: { value: 0.5 }, time: { value: this.time }, opacity: { value: 1.0 }, distanceFade: { value: 2.5 }, noiseOffset: { value: new THREE.Vector3(0.0, 0.0, 0.0) }, cloudScale: { value: 1.0 }, cloudDensity: { value: 40.0 }, }, vertexShader: vertexShader, fragmentShader: fragmentShader, side: THREE.BackSide, transparent: true, depthWrite: false, blending: THREE.CustomBlending, blendEquation: THREE.AddEquation, blendSrc: THREE.OneFactor, blendDst: THREE.OneMinusSrcAlphaFactor }); } setSkyColor(color) { this.skyColor.copy(color); this.material.uniforms.topColor.value.copy(color); } setGroundColor(color) { this.groundColor.copy(color); this.material.uniforms.bottomColor.value.copy(color); } setHorizonLevel(level) { this.horizonLevel = level; this.material.uniforms.horizonLevel.value = level; } updateTime(deltaTime) { // Time based material uniform updates are performed here. const timeScale = GameWorld.Time.timeScale || 1.0; this.time += deltaTime * timeScale; if (this.material && this.material.uniforms && this.material.uniforms.time) { this.material.uniforms.time.value = this.time; this.material.needsUpdate = true; } } } return new CloudShader(); } function OceanShader() { class OceanShader { constructor() { this.createMaterial(); this._lastUpdate = Date.now(); } createMaterial() { // Naming conventions should be CLEAR and consice to avoid confusion. // Uniforms should be used for properties WHENEVER possible and then exported to the uniforms list to make for easier user shader testing. const vertexShader = ` varying vec3 vWorldPosition; void main() { vec4 worldPosition = modelMatrix * vec4(position, 1.0); vWorldPosition = worldPosition.xyz; gl_Position = projectionMatrix * viewMatrix * worldPosition; }`; const fragmentShader = ` varying vec3 vWorldPosition; uniform float iTime; uniform vec2 iResolution; uniform vec3 ambientLightColor; uniform vec3 directionalLightColor; uniform vec3 directionalLightDirection; uniform float uWaveHeight; uniform float uWaveChoppy; uniform float uWaveSpeed; uniform vec3 uWaterDepth; uniform vec3 uWaterColor; #define SEA_TIME (1.0 + iTime * uWaveSpeed) const mat2 octave_m = mat2(1.6, 1.2, -1.2, 1.6); float hash(vec2 p) { float h = dot(p, vec2(127.1, 311.7)); return fract(sin(h) * 43758.5453123); } float noise(vec2 p) { vec2 i = floor(p); vec2 f = fract(p); vec2 u = f * f * (3.0 - 2.0 * f); return -1.0 + 2.0 * mix( mix(hash(i + vec2(0.0, 0.0)), hash(i + vec2(1.0, 0.0)), u.x), mix(hash(i + vec2(0.0, 1.0)), hash(i + vec2(1.0, 1.0)), u.x), u.y ); } float sea_octave(vec2 uv, float choppy) { uv += noise(uv); vec2 wv = 1.0 - abs(sin(uv)); vec2 swv = abs(cos(uv)); wv = mix(wv, swv, wv); return pow(1.0 - pow(wv.x * wv.y, 0.65), choppy); } float map(vec3 p) { float freq = 0.16; float amp = uWaveHeight; float choppy = uWaveChoppy; vec2 uv = p.xz; uv.x *= 0.75; float d, h = 0.0; for (int i = 0; i < 3; i++) { d = sea_octave((uv + SEA_TIME) * freq, choppy); d += sea_octave((uv - SEA_TIME) * freq, choppy); h += d * amp; uv *= octave_m; freq *= 1.9; amp *= 0.22; choppy = mix(choppy, 1.0, 0.2); } return p.y - h; } float map_detailed(vec3 p) { float freq = 0.16; float amp = uWaveHeight; float choppy = uWaveChoppy; vec2 uv = p.xz; uv.x *= 0.75; float d, h = 0.0; for (int i = 0; i < 5; i++) { d = sea_octave((uv + SEA_TIME) * freq, choppy); d += sea_octave((uv - SEA_TIME) * freq, choppy); h += d * amp; uv *= octave_m; freq *= 1.9; amp *= 0.22; choppy = mix(choppy, 1.0, 0.2); } return p.y - h; } vec3 getNormal(vec3 p, float eps) { vec3 n; n.y = map_detailed(p); n.x = map_detailed(vec3(p.x + eps, p.y, p.z)) - n.y; n.z = map_detailed(vec3(p.x, p.y, p.z + eps)) - n.y; n.y = eps; return normalize(n); } float heightMapTracing(vec3 ori, vec3 dir, out vec3 p) { float tm = 0.0; float tx = 2000.0; // Increased max distance // Initial bounds check float hx = map(ori + dir * tx); if (hx > 0.0) { p = ori + dir * tx; return tx; } // Ray start height float hm = map(ori); // Refined intersection search float tmid = 0.0; for(int i = 0; i < 12; i++) { // Increased iterations tmid = mix(tm, tx, hm / (hm - hx)); p = ori + dir * tmid; float hmid = map(p); if(hmid < 0.0) { tx = tmid; hx = hmid; } else { tm = tmid; hm = hmid; } if(abs(hmid) < 0.001) break; } return tmid; } vec3 getSeaColor(vec3 p, vec3 n, vec3 l, vec3 eye, vec3 dist) { float fresnel = clamp(1.0 - dot(n, -eye), 0.0, 1.0); fresnel = pow(fresnel, 3.0) * 0.5; vec3 reflected = vec3(0.0); // No sky color vec3 refracted = uWaterDepth * 0.6 + uWaterColor * 0.12; vec3 color = mix(refracted, reflected, fresnel); float atten = max(1.0 - dot(dist, dist) * 0.001, 0.0); color += (uWaterColor * 0.6) * (p.y - uWaveHeight) * 0.18 * atten; return color; } void main() { vec3 rayDirection = normalize(vWorldPosition - cameraPosition); // tracing vec3 p; heightMapTracing(cameraPosition, rayDirection, p); vec3 dist = p - cameraPosition; float eps = 0.1 / iResolution.x; vec3 n = getNormal(p, dot(dist, dist) * eps); // lighting vec3 lightDir = normalize(directionalLightDirection); vec3 color = getSeaColor(p, n, lightDir, rayDirection, dist); // apply ambient light color += ambientLightColor * 0.1; // Calculate view angle and distance-based transparency float viewAngle = dot(n, -rayDirection); float distanceFade = 1.0 - smoothstep(0.0, 2000.0, length(dist)); float alpha = clamp(viewAngle * distanceFade, 0.1, 1.0); // final color with transparency gl_FragColor = vec4(pow(color, vec3(0.65)), alpha); }`; this.material = new THREE.ShaderMaterial({ uniforms: { iTime: { value: 0 }, iResolution: { value: new THREE.Vector2() }, uWaveHeight: { value: 0.6 }, uWaveSpeed: { value: 0.8 }, uWaveChoppy: { value: 4.0 }, uWaterColor: { value: new THREE.Vector3(0.8, 0.9, 0.6) }, uWaterDepth: { value: new THREE.Vector3(0.0, 0.09, 0.18) }, ambientLightColor: { value: new THREE.Color(0xffffff) }, directionalLightColor: { value: new THREE.Color(0xffffff) }, directionalLightDirection: { value: new THREE.Vector3() } }, vertexShader: vertexShader, fragmentShader: fragmentShader, transparent: true, side: THREE.BackSide, depthWrite: false }); } updateTime(deltaTime) { if (this.material && this.material.uniforms) { this.material.uniforms.iTime.value += deltaTime; this.material.uniforms.iResolution.value.set(window.innerWidth, window.innerHeight); } } } return new OceanShader(); } // Core: function TextureManager() { // Functions to load tetures and store them in the textures map to allow for // reuse of textures across different components. class TextureManager { constructor() { this.textures = new Map(); this.loader = null; this.texturesLoaded = false; } load(key, url, onLoad = () => {}, onProgress = () => {}, onError = () => {}) { if (this.textures.has(key)) { onLoad(this.textures.get(key)); return Promise.resolve(this.textures.get(key)); } return new Promise((resolve, reject) => { this.loader.load( url, (texture) => { this.textures.set(key, texture); onLoad(texture); resolve(texture); }, onProgress, (error) => { onError(error); reject(error); } ); }); } loadTextures(textureDict) { if (!this.loader) { this.loader = new THREE.TextureLoader(); } return new Promise((resolve, reject) => { const texturePromises = []; // Iterate through each category in TEXTURE_ASSETS for (const category in textureDict) { for (const textureName in textureDict[category]) { const textureUrl = textureDict[category][textureName]; const key = textureName; texturePromises.push( this.load( key, textureUrl, (texture) => { if (category === 'sprites') { texture.minFilter = THREE.NearestFilter; texture.magFilter = THREE.NearestFilter; texture.generateMipmaps = false; } console.log(`Loaded ${category} texture: ${key}`); } ) ); } } Promise.all(texturePromises) .then((loadedTextures) => { this.texturesLoaded = true; console.log('All textures loaded successfully'); console.log('Loaded textures:'); this.textures.forEach((texture, key) => { console.log(`- ${key}: ${texture.image.src}`); }); resolve(); }) .catch((error) => { console.error('Error loading textures:', error); reject(error); }); }); } getTexture(key) { const texture = this.textures.get(key); if (!texture) { console.warn(`Texture with key "${key}" not found.`); } return texture; } dispose(key) { if (this.textures.has(key)) { this.textures.get(key).dispose(); this.textures.delete(key); } } disposeAll() { for (let texture of this.textures.values()) { texture.dispose(); } this.textures.clear(); } } return new TextureManager(); } function MaterialManager() { // class MaterialManager { constructor() { this.materials = new Map(); } create(key, type, parameters) { let material; switch (type) { case 'basic': material = new THREE.MeshBasicMaterial(parameters); break; case 'standard': material = new THREE.MeshStandardMaterial(parameters); break; case 'phong': material = new THREE.MeshPhongMaterial(parameters); break; // Add more material types as needed default: console.warn(`Unsupported material type: ${type}`); return null; } this.materials.set(key, material); return material; } getMaterial(key) { return this.materials.get(key); } dispose(key) { if (this.materials.has(key)) { this.materials.get(key).dispose(); this.materials.delete(key); } } disposeAll() { for (let material of this.materials.values()) { material.dispose(); } this.materials.clear(); } } return new MaterialManager(); } function MeshManager() { class MeshManager { constructor() { this.meshes = new Map(); } add(key, mesh) { this.meshes.set(key, mesh); } getMesh(key) { const originalMesh = this.meshes.get(key); if (!originalMesh) return null; // Create a clone of the mesh const clonedMesh = originalMesh.clone(); // Handle materials properly if (Array.isArray(originalMesh.material)) { // For multi-material meshes clonedMesh.material = originalMesh.material.map(mat => mat.clone()); } else { // For single material meshes clonedMesh.material = originalMesh.material.clone(); } // Clone geometry (reference is fine as geometry is typically shared) clonedMesh.geometry = originalMesh.geometry; // Copy other essential properties clonedMesh.castShadow = originalMesh.castShadow; clonedMesh.receiveShadow = originalMesh.receiveShadow; return clonedMesh; } remove(key) { if (this.meshes.has(key)) { const mesh = this.meshes.get(key); if (mesh.parent) { mesh.parent.remove(mesh); } if (mesh.geometry) { mesh.geometry.dispose(); } if (mesh.material) { if (Array.isArray(mesh.material)) { mesh.material.forEach(material => material.dispose()); } else { mesh.material.dispose(); } } this.meshes.delete(key); } } clear() { this.meshes.forEach((mesh, key) => { this.remove(key); }); this.meshes.clear(); } loadGlb(url, key) { return new Promise((resolve, reject) => { const loader = new GLTFLoader(LoadingManager); loader.load(url, (gltf) => { // Add the loaded mesh to the MeshManager if (gltf.scene) { this.add(key, gltf.scene); } else if (gltf.scenes && gltf.scenes.length > 0) { this.add(key, gltf.scenes[0]); } else { console.warn('Loaded GLB does not contain a scene'); } resolve(gltf); }, (xhr) => { console.log((xhr.loaded / xhr.total * 100) + '% loaded'); }, (error) => { console.error('An error happened', error); reject(error); } ); }); } } return new MeshManager(); } function LightingManager() { class LightingManager { constructor() { this.lights = {}; } createLight(name, type, parameters = {}) { let light; switch (type) { case 'ambient': light = new THREE.AmbientLight(parameters.color, parameters.intensity); break; case 'directional': light = new THREE.DirectionalLight(parameters.color, parameters.intensity); if (parameters.castShadow) { light.castShadow = true; light.shadow.mapSize.width = parameters.shadow?.mapSize?.width || 1024; light.shadow.mapSize.height = parameters.shadow?.mapSize?.height || 1024; light.shadow.camera.near = parameters.shadow?.camera?.near || 1; light.shadow.camera.far = parameters.shadow?.camera?.far || 6000; light.shadow.camera.left = parameters.shadow?.camera?.left || -1000; light.shadow.camera.right = parameters.shadow?.camera?.right || 1000; light.shadow.camera.top = parameters.shadow?.camera?.top || 1000; light.shadow.camera.bottom = parameters.shadow?.camera?.bottom || -1000; light.shadow.bias = parameters.shadow?.bias || -0.0001; } break; case 'hemisphere': light = new THREE.HemisphereLight(parameters.skyColor, parameters.groundColor, parameters.intensity); break; case 'point': light = new THREE.PointLight(parameters.color, parameters.intensity, parameters.distance, parameters.decay); break; case 'spot': light = new THREE.SpotLight(parameters.color, parameters.intensity, parameters.distance, parameters.angle, parameters.penumbra, parameters.decay); break; default: console.warn(`Unsupported light type: ${type}`); return null; } if (parameters.position) { light.position.set(parameters.position.x, parameters.position.y, parameters.position.z); } this.addLight(name, light); return light; } addLight(name, light) { this.lights[name] = light; WorldScene.add(light); } removeLight(name) { if (this.lights[name]) { WorldScene.remove(this.lights[name]); delete this.lights[name]; } } getLight(name) { return this.lights[name]; } updateLight(name, updateFunction) { if (this.lights[name] && typeof updateFunction === 'function') { updateFunction(this.lights[name]); } } } return new LightingManager(); } class Renderer { constructor() { this.postProcessing = null; this.renderer = new THREE.WebGLRenderer({ antialias: APP_SETTINGS.renderer.antialias, canvas: canvas, powerPreference: "high-performance" }); this.init(); } init() { this.renderer.setPixelRatio(APP_SETTINGS.renderer.pixelRatio); this.renderer.setSize(canvas.offsetWidth, canvas.offsetHeight); this.renderer.shadowMap.enabled = APP_SETTINGS.renderer.shadowMap.enabled; this.renderer.shadowMap.type = APP_SETTINGS.renderer.shadowMap.type; this.renderer.outputColorSpace = APP_SETTINGS.renderer.colorSpace.output; this.renderer.toneMapping = APP_SETTINGS.renderer.colorSpace.toneMapping; this.renderer.toneMappingExposure = APP_SETTINGS.renderer.colorSpace.toneMappingExposure; console.log('Renderer initialized with APP_SETTINGS parameters'); } initPostProcessing() { this.postProcessing = new PostProcessing(this.renderer, WorldScene, MainCamera); window.PostProcessing = this.postProcessing; } render() { if (this.postProcessing) { this.postProcessing.render(); } else { this.renderer.render(WorldScene, MainCamera); } } setSize(width, height) { this.renderer.setSize(width, height); if (this.postProcessing) { this.postProcessing.setSize(width, height); } } } class PostProcessing { constructor() { this.composer = null; this.bloomPass = null; this.smaaPass = null; this.initComposer(); } initComposer() { this.composer = new EffectComposer(GameRenderer.renderer); const renderPass = new RenderPass(WorldScene, MainCamera); this.addPasses(renderPass); } addPasses(renderPass) { this.composer.addPass(renderPass); this.bloomPass = new UnrealBloomPass( new THREE.Vector2(innerWidth, innerHeight), 0.2, // bloom strength 0.4, // radius 0.9 // threshold ); this.composer.addPass(this.bloomPass); this.smaaPass = new SMAAPass( innerWidth * GameRenderer.renderer.getPixelRatio(), innerHeight * GameRenderer.renderer.getPixelRatio() ); this.composer.addPass(this.smaaPass); } setSize(width, height) { this.composer.setSize(width, height); this.bloomPass.resolution.set(width, height); this.smaaPass.setSize(width, height); } render() { this.composer.render(); } } class InputHandler { constructor() { this.controls = new OrbitControls(MainCamera, GameRenderer.renderer.domElement); this.initControls(); } initControls() { this.controls.enableDamping = true; this.controls.dampingFactor = 0.25; this.controls.screenSpacePanning = false; this.controls.maxPolarAngle = Math.PI / 2; } update() { this.controls.update(); } } class WorldTime { constructor() { this.currentTime = 43200; // Start at noon (12:00) (12*60)*60) this.timeScale = 2100; // Much faster time scale for testing this.tweening = false; this.tweenStartTime = 0; this.tweenEndTime = 0; this.tweenDuration = 0; } setTimeScale(scale) { this.timeScale = scale; } getHours() { return Math.floor(this.currentTime / 3600) % 24; } getMinutes() { return Math.floor((this.currentTime % 3600) / 60); } getSeconds() { return Math.floor(this.currentTime % 60); } getTimeString() { const hours = this.getHours().toString().padStart(2, '0'); const minutes = this.getMinutes().toString().padStart(2, '0'); const seconds = this.getSeconds().toString().padStart(2, '0'); return `${hours}:${minutes}:${seconds}`; } setTime(hours) { const targetTime = hours * 3600; // Convert hours to seconds this.tweenStartTime = this.currentTime; this.tweenEndTime = targetTime; this.tweenDuration = 2; // Duration of the tween in seconds this.tweening = true; } updateTween(deltaTime) { const elapsedTime = Math.min(deltaTime, this.tweenDuration); const progress = elapsedTime / this.tweenDuration; this.currentTime = this.tweenStartTime + (this.tweenEndTime - this.tweenStartTime) * progress; this.tweenDuration -= elapsedTime; if (this.tweenDuration <= 0) { this.currentTime = this.tweenEndTime; this.tweening = false; } } update(deltaTime) { if (this.tweening) { this.updateTween(deltaTime); } else { this.currentTime += deltaTime * this.timeScale; } } getTimeOfDay() { return this.getHours() + this.getMinutes() / 60; } } class World { constructor() { window.WorldScene = new THREE.Scene(); this.skybox = new SkyBox(WorldScene); this.lights = {}; this.physicsWorld = new CANNON.World(); this.setupPhysicsWorld(); this.initCamera(); this.initRenderer(); this.terrain = null; this.Time = new WorldTime(); this.createCube(); this.createDetailOcean(); } createCube() { const geometry = new THREE.BoxGeometry(10, 10, 10); const material = new THREE.MeshStandardMaterial({ color: 0x0077be, roughness: 0.9, envMapIntensity: 1.0, aoMapIntensity: 1.0 }); const cube = new THREE.Mesh(geometry, material); cube.castShadow = true; cube.receiveShadow = true; cube.position.set(0, 5, 0); // Slightly above the ground WorldScene.add(cube); Meshes.add('centerCube', cube); } setupPhysicsWorld() { this.physicsWorld.gravity.set( APP_SETTINGS.physics.gravity.x, APP_SETTINGS.physics.gravity.y, APP_SETTINGS.physics.gravity.z ); this.physicsWorld.defaultContactMaterial.friction = APP_SETTINGS.physics.defaultContactMaterial.friction; this.physicsWorld.defaultContactMaterial.restitution = APP_SETTINGS.physics.defaultContactMaterial.restitution; this.physicsWorld.solver.iterations = APP_SETTINGS.physics.solver.iterations; this.physicsWorld.solver.tolerance = APP_SETTINGS.physics.solver.tolerance; this.groundPhysMaterial = new CANNON.Material('ground'); } getLight(name) { return Lights.getLight(name); } initCamera() { window.MainCamera = new THREE.PerspectiveCamera( APP_SETTINGS.camera.fov, canvas.offsetWidth / canvas.offsetHeight, APP_SETTINGS.camera.near, APP_SETTINGS.camera.far ); MainCamera.position.set( APP_SETTINGS.camera.initialPosition.x, APP_SETTINGS.camera.initialPosition.y, APP_SETTINGS.camera.initialPosition.z ); MainCamera.lookAt(0, 0, 0); console.log('Camera initialized with APP_SETTINGS parameters'); } initRenderer() { window.GameRenderer = new Renderer(MainCamera); GameRenderer.initPostProcessing(WorldScene); } createTerrain() { if (Meshes.getMesh('terrain')) { return Meshes.getMesh('terrain'); } const size = 200; const geometry = new THREE.PlaneGeometry(size, size); const texture = Textures.getTexture('terrain'); const normalMap = Textures.getTexture('terrain_nrm'); if (texture) { texture.wrapS = texture.wrapT = THREE.RepeatWrapping; texture.repeat.set(5, 5); texture.colorSpace = THREE.SRGBColorSpace; texture.opacity = 0; // Make texture fully transparent } if (normalMap) { normalMap.wrapS = normalMap.wrapT = THREE.RepeatWrapping; normalMap.repeat.set(5, 5); } const materialParams = { roughness: 0.8, metalness: 0.1, envMapIntensity: 1.0 }; if (texture) materialParams.map = texture; if (normalMap) { materialParams.normalMap = normalMap; materialParams.normalScale = new THREE.Vector2(2, 2); } materialParams.transparent = true; // Enable transparency materialParams.opacity = 0; // Make material fully transparent Materials.create('terrainMaterial', 'standard', materialParams); const terrain = new THREE.Mesh(geometry, Materials.getMaterial('terrainMaterial')); terrain.rotation.x = -Math.PI / 2; terrain.receiveShadow = true; terrain.position.y = -20; terrain.visible = false; // Hide the terrain mesh const groundShape = new CANNON.Box(new CANNON.Vec3(size / 2, 0.1, size / 2)); const groundBody = new CANNON.Body({ mass: 0, material: this.groundPhysMaterial }); groundBody.addShape(groundShape); groundBody.position.set(0, -20.1, 0); this.physicsWorld.addBody(groundBody); WorldScene.add(terrain); Meshes.add('terrain', terrain); return terrain; } createDetailOcean() { if (Meshes.getMesh('detailOcean')) { return Meshes.getMesh('detailOcean'); } const size = 11000; const geometry = new THREE.PlaneGeometry(size, size, 1, 1); const material = new THREE.MeshStandardMaterial({ color: 0x0077be, roughness: 0.9, envMapIntensity: 1.0, aoMapIntensity: 1.0 }); const ocean = new THREE.Mesh(geometry, material); ocean.rotation.x = -Math.PI / 2; ocean.position.y = 0; ocean.receiveShadow = true; //WorldScene.add(ocean); Meshes.add('detailOcean', ocean); return ocean; } update(deltaTime) { this.Time.update(deltaTime); this.physicsWorld.step(deltaTime); if (this.skybox) { this.skybox.update(deltaTime); } GameRenderer.render(); } } class DevUI { constructor() {} createUI() { // Create UI elements uiDiv.appendChild(this.createShaderUniformsPanel()); uiDiv.appendChild(this.createClockElement()); } createClockElement() { const clockElement = document.createElement('div'); clockElement.id = 'worldClock'; clockElement.style.position = 'absolute'; clockElement.style.top = '20px'; clockElement.style.right = '20px'; clockElement.style.padding = '10px'; clockElement.style.backgroundColor = 'rgba(0, 0, 0, 0.5)'; clockElement.style.color = 'white'; clockElement.style.fontFamily = 'Arial, sans-serif'; clockElement.style.fontSize = '16px'; clockElement.style.borderRadius = '5px'; clockElement.style.pointerEvents = 'none'; window.worldClockElement = clockElement; return clockElement; } createShaderUniformsPanel() { const uniformsPanel = document.createElement('div'); uniformsPanel.style.position = 'absolute'; uniformsPanel.id = 'shaderUniforms'; uniformsPanel.style.backgroundColor = 'rgba(0, 0, 0, 0.7)'; uniformsPanel.style.padding = '15px'; uniformsPanel.style.borderRadius = '5px'; uniformsPanel.style.top = '80px'; uniformsPanel.style.left = '10px'; uniformsPanel.style.color = 'white'; uniformsPanel.style.fontFamily = 'Arial, sans-serif'; uniformsPanel.style.fontSize = '14px'; uniformsPanel.style.pointerEvents = 'auto'; uniformsPanel.style.width = '200px'; const uniformsPanelTitle = document.createElement('h3'); uniformsPanelTitle.textContent = 'Shader Uniforms'; uniformsPanelTitle.style.margin = '0 0 10px 0'; uniformsPanel.appendChild(uniformsPanelTitle); // Create collapsible sections for each shader const shaders = [{ name: 'Sky', key: 'sky' }, { name: 'Sun', key: 'sun' }, { name: 'Moon', key: 'moon' }, { name: 'Base Clouds', key: 'clouds' }, { name: 'Middle Clouds', key: 'middleClouds' }, { name: 'Ocean', key: 'ocean' }]; shaders.forEach(shader => { const container = this.createCollapsibleContainer(shader.name); const content = container.querySelector('.content'); // Get shader material and ensure it exists let shaderInstance; switch (shader.key) { case 'sky': shaderInstance = GameWorld.skybox.skyShader; break; case 'sun': shaderInstance = GameWorld.skybox.sunShader; break; case 'moon': shaderInstance = GameWorld.skybox.moonShader; break; case 'clouds': shaderInstance = GameWorld.skybox.cloudShader; break; case 'middleClouds': shaderInstance = GameWorld.skybox.middleCloudShader; break; case 'ocean': shaderInstance = GameWorld.skybox.oceanShader; break; } if (!shaderInstance) { console.warn(`Shader ${shader.name} not found, waiting for initialization...`); return; } const shaderMaterial = shaderInstance.material; const shaderUniforms = shaderMaterial.uniforms; if (shaderMaterial) { // Only log once per shader if (!this._processedShaders) { this._processedShaders = new Set(); } if (!this._processedShaders.has(shader.key)) { this._processedShaders.add(shader.key); } if (shaderUniforms) { Object.entries(shaderUniforms).forEach(([uniformName, uniform]) => { if (uniform.value instanceof THREE.Color) { this.createColorControl(content, uniformName, shader.key, uniform); } else if (typeof uniform.value === 'number') { this.createSliderControl(content, uniformName, shader.key, uniform); } else if (uniform.value instanceof THREE.Vector2 || uniform.value instanceof THREE.Vector3) { // Skip vector uniforms for now console.log(`Skipping vector uniform ${uniformName}`); } else { console.log(`Skipping uniform ${uniformName} - unsupported type:`, uniform.value); } }); } } uniformsPanel.appendChild(container); }); return uniformsPanel; } createCollapsibleContainer(title) { const container = document.createElement('div'); container.style.marginBottom = '10px'; container.style.border = '1px solid rgba(255, 255, 255, 0.2)'; container.style.borderRadius = '4px'; const header = document.createElement('div'); header.style.padding = '8px'; header.style.backgroundColor = 'rgba(255, 255, 255, 0.1)'; header.style.cursor = 'pointer'; header.style.display = 'flex'; header.style.justifyContent = 'space-between'; header.style.alignItems = 'center'; header.innerHTML = `${title} ▼`; const content = document.createElement('div'); content.className = 'content'; content.style.padding = '10px'; content.style.display = 'none'; header.onclick = () => { const isCollapsed = content.style.display === 'none'; content.style.display = isCollapsed ? 'block' : 'none'; header.querySelector('.arrow').textContent = isCollapsed ? '▼' : '▶'; }; container.appendChild(header); container.appendChild(content); return container; } createSliderControl(container, uniformName, shaderKey, uniform) { if (!this._processedControls) { this._processedControls = new Set(); this._sliderDefaults = new Map(); } const controlKey = `${shaderKey}_${uniformName}`; if (!this._processedControls.has(controlKey)) { this._processedControls.add(controlKey); // Store the default value when first creating the slider this._sliderDefaults.set(controlKey, uniform.value); console.log(`Creating slider control for ${uniformName} in ${shaderKey}`); } const label = document.createElement('div'); label.textContent = this.formatUniformName(uniformName); label.style.marginBottom = '5px'; const slider = document.createElement('input'); slider.type = 'range'; // Get the default value for this slider const defaultValue = this._sliderDefaults.get(controlKey); const maxValue = Math.abs(defaultValue) * 4; // Set slider ranges based on the default value if (uniformName.includes('time') && uniformName !== 'timeOfDay') { slider.min = '0'; slider.max = '24'; slider.step = '0.1'; } else { slider.min = (-maxValue).toString(); slider.max = maxValue.toString(); slider.step = (maxValue / 100).toString(); } // Try to load saved value, otherwise use current uniform value const savedValue = localStorage.getItem(controlKey); slider.value = savedValue !== null ? savedValue : uniform.value; slider.style.width = '100%'; slider.style.marginBottom = '10px'; const valueDisplay = document.createElement('span'); valueDisplay.textContent = slider.value; valueDisplay.style.marginLeft = '10px'; valueDisplay.style.fontSize = '12px'; // Reset button const resetButton = document.createElement('button'); resetButton.textContent = '↺'; resetButton.style.marginLeft = '10px'; resetButton.style.padding = '2px 6px'; resetButton.style.borderRadius = '3px'; resetButton.title = 'Reset to default value'; resetButton.addEventListener('click', () => { slider.value = defaultValue; valueDisplay.textContent = defaultValue.toFixed(3); const material = GameWorld.skybox.materials.get(shaderKey); if (material) { const uniforms = material.material ? material.material.uniforms : material.uniforms; if (uniforms && uniforms[uniformName]) { uniforms[uniformName].value = defaultValue; localStorage.setItem(controlKey, defaultValue); } } }); slider.addEventListener('input', (e) => { if (!GameWorld || !GameWorld.skybox) return; let shaderMaterial; switch (shaderKey) { case 'sky': shaderMaterial = GameWorld.skybox.skyShader?.material; break; case 'sun': shaderMaterial = GameWorld.skybox.sunShader?.material; break; case 'moon': shaderMaterial = GameWorld.skybox.moonShader?.material; break; case 'clouds': shaderMaterial = GameWorld.skybox.cloudShader?.material; break; case 'middleClouds': shaderMaterial = GameWorld.skybox.middleCloudShader?.material; break; } if (shaderMaterial?.uniforms?.[uniformName]) { const value = parseFloat(e.target.value); shaderMaterial.uniforms[uniformName].value = value; valueDisplay.textContent = value.toFixed(3); localStorage.setItem(controlKey, value); } }); container.appendChild(label); const sliderContainer = document.createElement('div'); sliderContainer.style.display = 'flex'; sliderContainer.style.alignItems = 'center'; sliderContainer.appendChild(slider); sliderContainer.appendChild(valueDisplay); sliderContainer.appendChild(resetButton); container.appendChild(sliderContainer); } formatUniformName(name) { return name.split(/(?=[A-Z])/).join(' ').replace(/^\w/, c => c.toUpperCase()); } createColorControl(container, uniformName, shaderKey, uniform) { const label = document.createElement('div'); label.textContent = this.formatUniformName(uniformName); label.style.marginBottom = '5px'; const colorPicker = document.createElement('input'); colorPicker.type = 'color'; colorPicker.value = '#' + uniform.value.getHexString(); colorPicker.style.width = '50px'; colorPicker.style.marginBottom = '10px'; const valueDisplay = document.createElement('span'); valueDisplay.textContent = colorPicker.value; valueDisplay.style.marginLeft = '10px'; valueDisplay.style.fontSize = '12px'; colorPicker.addEventListener('input', (e) => { let shaderInstance; switch (shaderKey) { case 'sky': shaderInstance = GameWorld.skybox.skyShader; break; case 'sun': shaderInstance = GameWorld.skybox.sunShader; break; case 'moon': shaderInstance = GameWorld.skybox.moonShader; break; case 'clouds': shaderInstance = GameWorld.skybox.cloudShader; break; case 'middleClouds': shaderInstance = GameWorld.skybox.middleCloudShader; break; } if (shaderInstance && shaderInstance.material && shaderInstance.material.uniforms[uniformName]) { const color = new THREE.Color(e.target.value); shaderInstance.material.uniforms[uniformName].value.copy(color); valueDisplay.textContent = e.target.value; } }); container.appendChild(label); const colorContainer = document.createElement('div'); colorContainer.style.display = 'flex'; colorContainer.style.alignItems = 'center'; colorContainer.appendChild(colorPicker); colorContainer.appendChild(valueDisplay); container.appendChild(colorContainer); } } // Main Game Istance: class App { constructor() { this.createRenderDivs(); this.tempUI = new DevUI(); this.clock = new THREE.Clock(); this.initialLoadingComplete = false; this.spriteSheet = null; this.deltaTime = 0; this.init(); } init() { window.LoadingManager = new THREE.LoadingManager(); this.setupLoadingManager(); window.Textures = TextureManager(); window.Materials = MaterialManager(); window.Meshes = MeshManager(); window.Lights = LightingManager(); window.GameWorld = new World(); window.Input = new InputHandler(); // Wait for textures to load before creating UI elements this.waitForTexturesAndInitUI(); this.addEventListeners(); } waitForTexturesAndInitUI() { this._textureLoadStarted = true; Textures.loadTextures(TEXTURE_ASSETS).then(() => { GameWorld.createTerrain(); }); } setupLoadingManager() { LoadingManager.onProgress = (url, itemsLoaded, itemsTotal) => { const progress = (itemsLoaded / itemsTotal * 100).toFixed(0); loadingScreen.innerHTML = `Loading... ${progress}%`; }; LoadingManager.onLoad = () => { this.initialLoadingComplete = true; if (GameWorld && GameWorld.skybox && GameWorld.skybox.skyMesh) { console.log("All assets loaded successfully"); loadingScreen.style.display = 'none'; // Create UI only after everything is loaded this.tempUI.createUI(); } else { // If skybox isn't ready yet, wait for it const checkSkybox = () => { if (GameWorld?.skybox?.skyMesh) { console.log("Skybox loaded successfully"); loadingScreen.style.display = 'none'; this.tempUI.createUI(); } else { setTimeout(checkSkybox, 100); } }; checkSkybox(); } }; LoadingManager.onError = (url) => { console.error('Error loading:', url); }; } addEventListeners() { addEventListener('resize', this.onWindowResize.bind(this)); const resizeObserver = new ResizeObserver(this.onWindowResize.bind(this)); resizeObserver.observe(parentDiv); } onWindowResize() { const width = parentDiv.clientWidth; const height = parentDiv.clientHeight; if (GameWorld) { MainCamera.aspect = width / height; MainCamera.updateProjectionMatrix(); GameRenderer.setSize(width, height); } } animate() { requestAnimationFrame(this.animate.bind(this)); this.deltaTime = Math.min(this.clock.getDelta(), 0.1); window.DeltaTime = this.deltaTime; if (this.initialLoadingComplete) { GameWorld.update(this.deltaTime); Input.update(); this.updateWorldClockUI(); } } start() { this.animate(); } createRenderDivs() { // Can create global variables by assigning them to window.variableName. window.parentDiv = document.getElementById('renderDiv'); window.canvas = document.getElementById('threeRenderCanvas'); window.loadingScreen = document.createElement('div'); if (!canvas) { canvas = document.createElement('canvas'); canvas.id = 'threeRenderCanvas'; parentDiv.appendChild(canvas); } // Create loading screen loadingScreen.style.position = 'absolute'; loadingScreen.style.top = '0'; loadingScreen.style.left = '0'; loadingScreen.style.width = '100%'; loadingScreen.style.height = '100%'; loadingScreen.style.backgroundColor = 'rgba(0, 0, 0, 0.8)'; loadingScreen.style.color = 'white'; loadingScreen.style.display = 'flex'; loadingScreen.style.justifyContent = 'center'; loadingScreen.style.alignItems = 'center'; loadingScreen.style.fontSize = '24px'; loadingScreen.innerHTML = 'Loading... 0%'; parentDiv.appendChild(loadingScreen); window.uiDiv = document.createElement('div'); uiDiv.id = 'uiDiv'; uiDiv.style.position = 'absolute'; uiDiv.style.top = '0'; uiDiv.style.left = '0'; uiDiv.style.width = '100%'; uiDiv.style.height = '100%'; uiDiv.style.pointerEvents = 'none'; // Set to 'none' to allow events to pass through uiDiv.style.userSelect = 'none'; // Disable text selection uiDiv.style.webkitUserSelect = 'none'; // For Safari uiDiv.style.msUserSelect = 'none'; // For IE/Edge // Apply the same styles to parentDiv parentDiv.style.userSelect = 'none'; parentDiv.style.webkitUserSelect = 'none'; parentDiv.style.msUserSelect = 'none'; parentDiv.appendChild(uiDiv); } updateWorldClockUI() { if (window.worldClockElement && GameWorld && GameWorld.Time) { const timeString = GameWorld.Time.getTimeString(); window.worldClockElement.textContent = `World Time: ${timeString}`; } } } window.Game = new App(); Game.start();