Fix sun positioning in sky shader example (#21575)

* Fix sun positioning in sky shader example

* Fix sun positioning in ocean shader example

* Update webgl_shaders_ocean.html

Co-authored-by: Michael Herzog <[email protected]>

examples/webgl_shaders_ocean.html

@@ -94,20 +94,20 @@
 				skyUniforms[ 'mieDirectionalG' ].value = 0.8;
 
 				const parameters = {
-					inclination: 0.49,
-					azimuth: 0.205
+					inclination: 0.02,
+					azimuth: 0.045
 				};
 
 				const pmremGenerator = new THREE.PMREMGenerator( renderer );
 
 				function updateSun() {
 
-					const theta = Math.PI * ( parameters.inclination - 0.5 );
+					const theta = 0.5 * Math.PI * ( 1 - parameters.inclination );
 					const phi = 2 * Math.PI * ( parameters.azimuth - 0.5 );
 
-					sun.x = Math.cos( phi );
-					sun.y = Math.sin( phi ) * Math.sin( theta );
-					sun.z = Math.sin( phi ) * Math.cos( theta );
+					sun.x = Math.sin( theta ) * Math.sin( phi );
+					sun.y = Math.cos( theta );
+					sun.z = Math.sin( theta ) * Math.cos( phi );
 
 					sky.material.uniforms[ 'sunPosition' ].value.copy( sun );
 					water.material.uniforms[ 'sunDirection' ].value.copy( sun ).normalize();
@@ -145,7 +145,7 @@
 				const gui = new GUI();
 
 				const folderSky = gui.addFolder( 'Sky' );
-				folderSky.add( parameters, 'inclination', 0, 0.5, 0.0001 ).onChange( updateSun );
+				folderSky.add( parameters, 'inclination', - 1, 1, 0.0001 ).onChange( updateSun );
 				folderSky.add( parameters, 'azimuth', 0, 1, 0.0001 ).onChange( updateSun );
 				folderSky.open();
 

examples/webgl_shaders_sky.html

@@ -42,8 +42,8 @@
 					rayleigh: 3,
 					mieCoefficient: 0.005,
 					mieDirectionalG: 0.7,
-					inclination: 0.49, // elevation / inclination
-					azimuth: 0.25, // Facing front,
+					inclination: 0.02, // elevation / inclination
+					azimuth: 0, // Facing front
 					exposure: renderer.toneMappingExposure
 				};
 
@@ -55,12 +55,12 @@
 					uniforms[ "mieCoefficient" ].value = effectController.mieCoefficient;
 					uniforms[ "mieDirectionalG" ].value = effectController.mieDirectionalG;
 
-					const theta = Math.PI * ( effectController.inclination - 0.5 );
+					const theta = 0.5 * Math.PI * ( 1 - effectController.inclination );
 					const phi = 2 * Math.PI * ( effectController.azimuth - 0.5 );
 
-					sun.x = Math.cos( phi );
-					sun.y = Math.sin( phi ) * Math.sin( theta );
-					sun.z = Math.sin( phi ) * Math.cos( theta );
+					sun.x = Math.sin( theta ) * Math.sin( phi );
+					sun.y = Math.cos( theta );
+					sun.z = Math.sin( theta ) * Math.cos( phi );
 
 					uniforms[ "sunPosition" ].value.copy( sun );
 
@@ -75,7 +75,7 @@
 				gui.add( effectController, "rayleigh", 0.0, 4, 0.001 ).onChange( guiChanged );
 				gui.add( effectController, "mieCoefficient", 0.0, 0.1, 0.001 ).onChange( guiChanged );
 				gui.add( effectController, "mieDirectionalG", 0.0, 1, 0.001 ).onChange( guiChanged );
-				gui.add( effectController, "inclination", 0, 1, 0.0001 ).onChange( guiChanged );
+				gui.add( effectController, "inclination", -1, 1, 0.0001 ).onChange( guiChanged );
 				gui.add( effectController, "azimuth", 0, 1, 0.0001 ).onChange( guiChanged );
 				gui.add( effectController, "exposure", 0, 1, 0.0001 ).onChange( guiChanged );