Skip to content

Commit 3096b13

Browse files
EliasHasleEliasHasle
committed
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) Fixed support for scene.fog=null
1 parent ab18028 commit 3096b13

36 files changed

+1408
-189
lines changed

‎docs/api/en/scenes/FogExp2.html‎ renamed to ‎docs/api/en/scenes/DensityFog.html‎

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -10,13 +10,13 @@
1010
<body>
1111
<h1>[name]</h1>
1212

13-
<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>
13+
<p class="desc">This class contains the parameters that define density-based fog.</p>
1414

1515

1616
<h2>Constructor</h2>
1717

1818

19-
<h3>[name]( [param:Integer color], [param:Float density] )</h3>
19+
<h3>[name]( [param:Integer color], [param:Float density], [param:Boolean squared] )</h3>
2020

2121
<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>
2222
<h2>Properties</h2>
@@ -30,14 +30,18 @@ <h3>[property:Color color]</h3>
3030
<h3>[property:Float density]</h3>
3131
<p>Defines how fast the fog will grow dense.</p>
3232
<p>Default is 0.00025.</p>
33+
34+
<h3>[property:Boolean squared]</h3>
35+
<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>
36+
<p>Default is true, that is exponential squared fog.</p>
3337

3438
<h2>Methods</h2>
3539

36-
<h3>[method:FogExp2 clone]()</h3>
37-
<p>Returns a new FogExp2 instance with the same parameters as this one.</p>
40+
<h3>[method:DensityFog clone]()</h3>
41+
<p>Returns a new DensityFog instance with the same parameters as this one.</p>
3842

39-
<h3>[method:FogExp2 toJSON]()</h3>
40-
<p>Return FogExp2 data in JSON format.</p>
43+
<h3>[method:DensityFog toJSON]()</h3>
44+
<p>Return DensityFog data in JSON format.</p>
4145

4246
<h2>Source</h2>
4347

‎docs/api/en/scenes/Fog.html‎ renamed to ‎docs/api/en/scenes/RangeFog.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
<body>
1111
<h1>[name]</h1>
1212

13-
<p class="desc">This class contains the parameters that define linear fog, i.e., that grows linearly denser with the distance.</p>
13+
<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>
1414

1515

1616
<h2>Constructor</h2>
@@ -37,10 +37,10 @@ <h3>[property:Float far]</h3>
3737

3838
<h2>Methods</h2>
3939

40-
<h3>[method:Fog clone]()</h3>
40+
<h3>[method:RangeFog clone]()</h3>
4141
<p>Returns a new fog instance with the same parameters as this one.</p>
4242

43-
<h3>[method:Fog toJSON]()</h3>
43+
<h3>[method:RangeFog toJSON]()</h3>
4444
<p>Return fog data in JSON format.</p>
4545

4646
<h2>Source</h2>

‎docs/api/zh/scenes/DensityFog.html‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
<!DOCTYPE html>
2+
3+
<!--NOT TRANSLATED TO CHINESE YET-->
4+
<html lang="en">
5+
6+
<head>
7+
<meta charset="utf-8" />
8+
<base href="../../../" />
9+
<script src="list.js"></script>
10+
<script src="page.js"></script>
11+
<link type="text/css" rel="stylesheet" href="page.css" />
12+
</head>
13+
<body>
14+
<h1>[name]</h1>
15+
16+
<p class="desc">This class contains the parameters that define density-based fog.</p>
17+
18+
19+
<h2>Constructor</h2>
20+
21+
22+
<h3>[name]( [param:Integer color], [param:Float density], [param:Boolean squared] )</h3>
23+
24+
<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>
25+
<h2>Properties</h2>
26+
27+
<h3>[property:String name]</h3>
28+
<p>Optional name of the object (doesn't need to be unique). Default is an empty string.</p>
29+
30+
<h3>[property:Color color]</h3>
31+
<p>Fog color. Example: If set to black, far away objects will be rendered black.</p>
32+
33+
<h3>[property:Float density]</h3>
34+
<p>Defines how fast the fog will grow dense.</p>
35+
<p>Default is 0.00025.</p>
36+
37+
<h3>[property:Boolean squared]</h3>
38+
<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>
39+
<p>Default is true, that is exponential squared fog.</p>
40+
41+
<h2>Methods</h2>
42+
43+
<h3>[method:DensityFog clone]()</h3>
44+
<p>Returns a new DensityFog instance with the same parameters as this one.</p>
45+
46+
<h3>[method:DensityFog toJSON]()</h3>
47+
<p>Return DensityFog data in JSON format.</p>
48+
49+
<h2>Source</h2>
50+
51+
<p>
52+
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
53+
</p>
54+
</body>
55+
</html>

‎docs/api/zh/scenes/FogExp2.html‎

Lines changed: 0 additions & 47 deletions
This file was deleted.

‎docs/api/zh/scenes/Fog.html‎ renamed to ‎docs/api/zh/scenes/RangeFog.html‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
<!DOCTYPE html>
2+
<!--Translated by search+replace (please check the inline replacements under the methods!)-->
23
<html lang="en">
34
<head>
45
<meta charset="utf-8" />
@@ -38,11 +39,11 @@ <h3>[property:Float far]</h3>
3839

3940
<h2>方法</h2>
4041

41-
<h3>[method:Fog clone]()</h3>
42-
<p>返回一个具有和当前雾参数相同的新的Fog实例。</p>
42+
<h3>[method:RangeFog clone]()</h3>
43+
<p>返回一个具有和当前雾参数相同的新的RangeFog实例。</p>
4344

44-
<h3>[method:Fog toJSON]()</h3>
45-
<p>以JSON格式返回Fog的数据。</p>
45+
<h3>[method:RangeFog toJSON]()</h3>
46+
<p>以JSON格式返回RangeFog的数据。</p>
4647

4748
<h2>源代码</h2>
4849

‎docs/list.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -327,8 +327,8 @@ var list = {
327327
},
328328

329329
"Scenes": {
330-
"Fog": "api/en/scenes/Fog",
331-
"FogExp2": "api/en/scenes/FogExp2",
330+
"RangeFog": "api/en/scenes/RangeFog",
331+
"DensityFog": "api/en/scenes/DensityFog",
332332
"Scene": "api/en/scenes/Scene"
333333
},
334334

@@ -770,8 +770,8 @@ var list = {
770770
},
771771

772772
"场景": {
773-
"Fog": "api/zh/scenes/Fog",
774-
"FogExp2": "api/zh/scenes/FogExp2",
773+
"RangeFog": "api/zh/scenes/RangeFog",
774+
"DensityFog": "api/zh/scenes/DensityFog",
775775
"Scene": "api/zh/scenes/Scene"
776776
},
777777

‎editor/js/Sidebar.Scene.js‎

Lines changed: 17 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -134,7 +134,8 @@ Sidebar.Scene = function ( editor ) {
134134
fogColor.getHexValue(),
135135
fogNear.getValue(),
136136
fogFar.getValue(),
137-
fogDensity.getValue()
137+
fogDensity.getValue(),
138+
fogSquared.getValue()
138139
);
139140

140141
}
@@ -143,8 +144,8 @@ Sidebar.Scene = function ( editor ) {
143144
var fogType = new UI.Select().setOptions( {
144145

145146
'None': 'None',
146-
'Fog': 'Linear',
147-
'FogExp2': 'Exponential'
147+
'RangeFog': 'Ranged',
148+
'DensityFog': 'Density-based'
148149

149150
} ).setWidth( '150px' );
150151
fogType.onChange( function () {
@@ -185,6 +186,11 @@ Sidebar.Scene = function ( editor ) {
185186
var fogDensity = new UI.Number( 0.05 ).setWidth( '40px' ).setRange( 0, 0.1 ).setStep( 0.001 ).setPrecision( 3 ).onChange( onFogChanged );
186187
fogPropertiesRow.add( fogDensity );
187188

189+
// fog squared
190+
191+
var fogSquared = new UI.Checkbox( true ).onChange( onFogChanged );
192+
fogPropertiesRow.add( fogSquared );
193+
188194
//
189195

190196
function refreshUI() {
@@ -231,16 +237,17 @@ Sidebar.Scene = function ( editor ) {
231237

232238
fogColor.setHexValue( scene.fog.color.getHex() );
233239

234-
if ( scene.fog.isFog ) {
240+
if ( scene.fog.isRangeFog ) {
235241

236242
fogType.setValue( "Fog" );
237243
fogNear.setValue( scene.fog.near );
238244
fogFar.setValue( scene.fog.far );
239245

240-
} else if ( scene.fog.isFogExp2 ) {
246+
} else if ( scene.fog.isDensityFog ) {
241247

242-
fogType.setValue( "FogExp2" );
248+
fogType.setValue( "DensityFog" );
243249
fogDensity.setValue( scene.fog.density );
250+
fogSquared.setValue( scene.fog.squared );
244251

245252
}
246253

@@ -259,9 +266,10 @@ Sidebar.Scene = function ( editor ) {
259266
var type = fogType.getValue();
260267

261268
fogPropertiesRow.setDisplay( type === 'None' ? 'none' : '' );
262-
fogNear.setDisplay( type === 'Fog' ? '' : 'none' );
263-
fogFar.setDisplay( type === 'Fog' ? '' : 'none' );
264-
fogDensity.setDisplay( type === 'FogExp2' ? '' : 'none' );
269+
fogNear.setDisplay( type === 'RangeFog' ? '' : 'none' );
270+
fogFar.setDisplay( type === 'RangeFog' ? '' : 'none' );
271+
fogDensity.setDisplay( type === 'DensityFog' ? '' : 'none' );
272+
fogSquared.setDisplay( type === 'DensityFog' ? '' : 'none' );
265273

266274
}
267275

‎editor/js/Viewport.js‎

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -458,7 +458,7 @@ var Viewport = function ( editor ) {
458458

459459
var currentFogType = null;
460460

461-
signals.sceneFogChanged.add( function ( fogType, fogColor, fogNear, fogFar, fogDensity ) {
461+
signals.sceneFogChanged.add( function ( fogType, fogColor, fogNear, fogFar, fogDensity, fogSquared ) {
462462

463463
if ( currentFogType !== fogType ) {
464464

@@ -467,11 +467,11 @@ var Viewport = function ( editor ) {
467467
case 'None':
468468
scene.fog = null;
469469
break;
470-
case 'Fog':
471-
scene.fog = new THREE.Fog();
470+
case 'RangeFog':
471+
scene.fog = new THREE.RangeFog();
472472
break;
473-
case 'FogExp2':
474-
scene.fog = new THREE.FogExp2();
473+
case 'DensityFog':
474+
scene.fog = new THREE.DensityFog();
475475
break;
476476

477477
}
@@ -482,16 +482,17 @@ var Viewport = function ( editor ) {
482482

483483
if ( scene.fog ) {
484484

485-
if ( scene.fog.isFog ) {
485+
if ( scene.fog.isRangeFog ) {
486486

487487
scene.fog.color.setHex( fogColor );
488488
scene.fog.near = fogNear;
489489
scene.fog.far = fogFar;
490490

491-
} else if ( scene.fog.isFogExp2 ) {
491+
} else if ( scene.fog.isDensityFog ) {
492492

493493
scene.fog.color.setHex( fogColor );
494494
scene.fog.density = fogDensity;
495+
scene.fog.squared = fogSquared;
495496

496497
}
497498

‎examples/files.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,7 @@ var files = {
4242
"webgl_geometry_teapot",
4343
"webgl_geometry_terrain",
4444
"webgl_geometry_terrain_fog",
45+
"webgl_geometry_terrain_fog_types",
4546
"webgl_geometry_terrain_raycast",
4647
"webgl_geometry_text",
4748
"webgl_geometry_text_shapes",

0 commit comments

Comments
 (0)