RangeFog(color, near, far) and DensityFog(color, density, squared)

Added fog types example. Currently includes some extra examples that show functionality of legacy signatures, and mediump and lowp operation for all fog types. Includes the change to distance-based depth, as well as corrections to better support mediump. Makes mrdoob#17316 and mrdoob#17324 obsolete. Force update when squared is changed. Fix legacy example and mediump example Attempted fixes for editor Formatting + typos Fixed TS declarations (Not sure I am using IFog right)
EliasHasle · Sep 27, 2019 · 5eddba2 · 5eddba2
1 parent ab18028
commit 5eddba2
Show file tree

Hide file tree

Showing 36 changed files with 1,408 additions and 189 deletions.
diff --git a/docs/api/en/scenes/FogExp2.html → docs/api/en/scenes/DensityFog.html b/docs/api/en/scenes/FogExp2.html → docs/api/en/scenes/DensityFog.html
@@ -10,13 +10,13 @@
 	<body>
 		<h1>[name]</h1>
 
-		<p class="desc">This class contains the parameters that define exponential squared fog, which gives a clear view near the camera and a faster than exponentially densening fog farther from the camera.</p>
+		<p class="desc">This class contains the parameters that define density-based fog.</p>
 
 
 		<h2>Constructor</h2>
 
 
-		<h3>[name]( [param:Integer color], [param:Float density] )</h3>
+		<h3>[name]( [param:Integer color], [param:Float density], [param:Boolean squared] )</h3>
 
 		<p>The color parameter is passed to the [page:Color] constructor to set the color property. Color can be a hexadecimal integer or a CSS-style string.</p>
 		<h2>Properties</h2>
@@ -30,14 +30,18 @@ <h3>[property:Color color]</h3>
 		<h3>[property:Float density]</h3>
 		<p>Defines how fast the fog will grow dense.</p>
 		<p>Default is 0.00025.</p>
+
+		<h3>[property:Boolean squared]</h3>
+		<p>If false, the mode will be exponential fog, which is analogous to physical fog. If true, the mode will be exponential squared fog, which gives a clear view near the camera and a faster than exponentially densening fog farther from the camera.</p>
+		<p>Default is true, that is exponential squared fog.</p>
 
 		<h2>Methods</h2>
 
-		<h3>[method:FogExp2 clone]()</h3>
-		<p>Returns a new FogExp2 instance with the same parameters as this one.</p>
+		<h3>[method:DensityFog clone]()</h3>
+		<p>Returns a new DensityFog instance with the same parameters as this one.</p>
 
-		<h3>[method:FogExp2 toJSON]()</h3>
-		<p>Return FogExp2 data in JSON format.</p>
+		<h3>[method:DensityFog toJSON]()</h3>
+		<p>Return DensityFog data in JSON format.</p>
 
 		<h2>Source</h2>
 

diff --git a/docs/api/en/scenes/Fog.html → docs/api/en/scenes/RangeFog.html b/docs/api/en/scenes/Fog.html → docs/api/en/scenes/RangeFog.html
@@ -10,7 +10,7 @@
 	<body>
 		<h1>[name]</h1>
 
-		<p class="desc">This class contains the parameters that define linear fog, i.e., that grows linearly denser with the distance.</p>
+		<p class="desc">This class contains the parameters that define smooth ranged fog, i.e., that grows smoothly denser from the near to the far distance.</p>
 
 
 		<h2>Constructor</h2>
@@ -37,10 +37,10 @@ <h3>[property:Float far]</h3>
 
 		<h2>Methods</h2>
 
-		<h3>[method:Fog clone]()</h3>
+		<h3>[method:RangeFog clone]()</h3>
 		<p>Returns a new fog instance with the same parameters as this one.</p>
 
-		<h3>[method:Fog toJSON]()</h3>
+		<h3>[method:RangeFog toJSON]()</h3>
 		<p>Return fog data in JSON format.</p>
 
 		<h2>Source</h2>

diff --git a/docs/api/zh/scenes/DensityFog.html b/docs/api/zh/scenes/DensityFog.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+
+<!--NOT TRANSLATED TO CHINESE YET-->
+<html lang="en">
+
+	<head>
+		<meta charset="utf-8" />
+		<base href="../../../" />
+		<script src="list.js"></script>
+		<script src="page.js"></script>
+		<link type="text/css" rel="stylesheet" href="page.css" />
+	</head>
+	<body>
+		<h1>[name]</h1>
+
+		<p class="desc">This class contains the parameters that define density-based fog.</p>
+
+
+		<h2>Constructor</h2>
+
+
+		<h3>[name]( [param:Integer color], [param:Float density], [param:Boolean squared] )</h3>
+
+		<p>The color parameter is passed to the [page:Color] constructor to set the color property. Color can be a hexadecimal integer or a CSS-style string.</p>
+		<h2>Properties</h2>
+
+		<h3>[property:String name]</h3>
+		<p>Optional name of the object (doesn't need to be unique). Default is an empty string.</p>
+
+		<h3>[property:Color color]</h3>
+		<p>Fog color. Example: If set to black, far away objects will be rendered black.</p>
+
+		<h3>[property:Float density]</h3>
+		<p>Defines how fast the fog will grow dense.</p>
+		<p>Default is 0.00025.</p>
+
+		<h3>[property:Boolean squared]</h3>
+		<p>If false, the mode will be exponential fog, which is analogous to physical fog. If true, the mode will be exponential squared fog, which gives a clear view near the camera and a faster than exponentially densening fog farther from the camera.</p>
+		<p>Default is true, that is exponential squared fog.</p>
+
+		<h2>Methods</h2>
+
+		<h3>[method:DensityFog clone]()</h3>
+		<p>Returns a new DensityFog instance with the same parameters as this one.</p>
+
+		<h3>[method:DensityFog toJSON]()</h3>
+		<p>Return DensityFog data in JSON format.</p>
+
+		<h2>Source</h2>
+
+		<p>
+			[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
+		</p>
+	</body>
+</html>
diff --git a/docs/api/zh/scenes/FogExp2.html b/docs/api/zh/scenes/FogExp2.html
diff --git a/docs/api/zh/scenes/Fog.html → docs/api/zh/scenes/RangeFog.html b/docs/api/zh/scenes/Fog.html → docs/api/zh/scenes/RangeFog.html
@@ -1,4 +1,5 @@
 <!DOCTYPE html>
+<!--Translated by search+replace (please check the inline replacements under the methods!)-->
 <html lang="en">
 	<head>
 		<meta charset="utf-8" />
@@ -38,11 +39,11 @@ <h3>[property:Float far]</h3>
 
 		<h2>方法</h2>
 
-		<h3>[method:Fog clone]()</h3>
-		<p>返回一个具有和当前雾参数相同的新的Fog实例。</p>
+		<h3>[method:RangeFog clone]()</h3>
+		<p>返回一个具有和当前雾参数相同的新的RangeFog实例。</p>
 
-		<h3>[method:Fog toJSON]()</h3>
-		<p>以JSON格式返回Fog的数据。</p>
+		<h3>[method:RangeFog toJSON]()</h3>
+		<p>以JSON格式返回RangeFog的数据。</p>
 
 		<h2>源代码</h2>
 

diff --git a/docs/list.js b/docs/list.js
@@ -327,8 +327,8 @@ var list = {
 			},
 
 			"Scenes": {
-				"Fog": "api/en/scenes/Fog",
-				"FogExp2": "api/en/scenes/FogExp2",
+				"RangeFog": "api/en/scenes/RangeFog",
+				"DensityFog": "api/en/scenes/DensityFog",
 				"Scene": "api/en/scenes/Scene"
 			},
 
@@ -770,8 +770,8 @@ var list = {
 			},
 
 			"场景": {
-				"Fog": "api/zh/scenes/Fog",
-				"FogExp2": "api/zh/scenes/FogExp2",
+				"RangeFog": "api/zh/scenes/RangeFog",
+				"DensityFog": "api/zh/scenes/DensityFog",
 				"Scene": "api/zh/scenes/Scene"
 			},
 

diff --git a/editor/js/Sidebar.Scene.js b/editor/js/Sidebar.Scene.js
@@ -134,7 +134,8 @@ Sidebar.Scene = function ( editor ) {
 			fogColor.getHexValue(),
 			fogNear.getValue(),
 			fogFar.getValue(),
-			fogDensity.getValue()
+			fogDensity.getValue(),
+			fogSquared.getValue()
 		);
 
 	}
@@ -143,8 +144,8 @@ Sidebar.Scene = function ( editor ) {
 	var fogType = new UI.Select().setOptions( {
 
 		'None': 'None',
-		'Fog': 'Linear',
-		'FogExp2': 'Exponential'
+		'RangeFog': 'Ranged',
+		'DensityFog': 'Density-based'
 
 	} ).setWidth( '150px' );
 	fogType.onChange( function () {
@@ -185,6 +186,11 @@ Sidebar.Scene = function ( editor ) {
 	var fogDensity = new UI.Number( 0.05 ).setWidth( '40px' ).setRange( 0, 0.1 ).setStep( 0.001 ).setPrecision( 3 ).onChange( onFogChanged );
 	fogPropertiesRow.add( fogDensity );
 
+	// fog squared
+
+	var fogSquared = new UI.Checkbox( true ).onChange( onFogChanged );
+	fogPropertiesRow.add( fogSquared );
+
 	//
 
 	function refreshUI() {
@@ -231,16 +237,17 @@ Sidebar.Scene = function ( editor ) {
 
 			fogColor.setHexValue( scene.fog.color.getHex() );
 
-			if ( scene.fog.isFog ) {
+			if ( scene.fog.isRangeFog ) {
 
 				fogType.setValue( "Fog" );
 				fogNear.setValue( scene.fog.near );
 				fogFar.setValue( scene.fog.far );
 
-			} else if ( scene.fog.isFogExp2 ) {
+			} else if ( scene.fog.isDensityFog ) {
 
-				fogType.setValue( "FogExp2" );
+				fogType.setValue( "DensityFog" );
 				fogDensity.setValue( scene.fog.density );
+				fogSquared.setValue( scene.fog.squared );
 
 			}
 
@@ -259,9 +266,10 @@ Sidebar.Scene = function ( editor ) {
 		var type = fogType.getValue();
 
 		fogPropertiesRow.setDisplay( type === 'None' ? 'none' : '' );
-		fogNear.setDisplay( type === 'Fog' ? '' : 'none' );
-		fogFar.setDisplay( type === 'Fog' ? '' : 'none' );
-		fogDensity.setDisplay( type === 'FogExp2' ? '' : 'none' );
+		fogNear.setDisplay( type === 'RangeFog' ? '' : 'none' );
+		fogFar.setDisplay( type === 'RangeFog' ? '' : 'none' );
+		fogDensity.setDisplay( type === 'DensityFog' ? '' : 'none' );
+		fogSquared.setDisplay( type === 'DensityFog' ? '' : 'none' );
 
 	}
 

diff --git a/editor/js/Viewport.js b/editor/js/Viewport.js
@@ -458,7 +458,7 @@ var Viewport = function ( editor ) {
 
 	var currentFogType = null;
 
-	signals.sceneFogChanged.add( function ( fogType, fogColor, fogNear, fogFar, fogDensity ) {
+	signals.sceneFogChanged.add( function ( fogType, fogColor, fogNear, fogFar, fogDensity, fogSquared ) {
 
 		if ( currentFogType !== fogType ) {
 
@@ -467,11 +467,11 @@ var Viewport = function ( editor ) {
 				case 'None':
 					scene.fog = null;
 					break;
-				case 'Fog':
-					scene.fog = new THREE.Fog();
+				case 'RangeFog':
+					scene.fog = new THREE.RangeFog();
 					break;
-				case 'FogExp2':
-					scene.fog = new THREE.FogExp2();
+				case 'DensityFog':
+					scene.fog = new THREE.DensityFog();
 					break;
 
 			}
@@ -482,16 +482,17 @@ var Viewport = function ( editor ) {
 
 		if ( scene.fog ) {
 
-			if ( scene.fog.isFog ) {
+			if ( scene.fog.isRangeFog ) {
 
 				scene.fog.color.setHex( fogColor );
 				scene.fog.near = fogNear;
 				scene.fog.far = fogFar;
 
-			} else if ( scene.fog.isFogExp2 ) {
+			} else if ( scene.fog.isDensityFog ) {
 
 				scene.fog.color.setHex( fogColor );
 				scene.fog.density = fogDensity;
+				scene.fog.squared = fogSquared;
 
 			}
 

diff --git a/examples/files.js b/examples/files.js
@@ -42,6 +42,7 @@ var files = {
 		"webgl_geometry_teapot",
 		"webgl_geometry_terrain",
 		"webgl_geometry_terrain_fog",
+		"webgl_geometry_terrain_fog_types",
 		"webgl_geometry_terrain_raycast",
 		"webgl_geometry_text",
 		"webgl_geometry_text_shapes",