Skip to content

Commit

Permalink
parent ab18028
Browse files Browse the repository at this point in the history
author Elias Hasle <elias.hasle@gmail.com> 1566822048 +0200
committer Elias Hasle <elias.hasle@gmail.com> 1569597690 +0200

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 #17316 and #17324 obsolete.

Force update when squared is changed.

Fix legacy example and mediump example

Attempted fixes for editor
  • Loading branch information
EliasHasle committed Sep 27, 2019
1 parent ab18028 commit 2f3b28f
Show file tree
Hide file tree
Showing 34 changed files with 1,405 additions and 187 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Expand Down
55 changes: 55 additions & 0 deletions docs/api/zh/scenes/DensityFog.html
Original file line number Diff line number Diff line change
@@ -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>
47 changes: 0 additions & 47 deletions docs/api/zh/scenes/FogExp2.html

This file was deleted.

Original file line number Diff line number Diff line change
@@ -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" />
Expand Down Expand Up @@ -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>

Expand Down
8 changes: 4 additions & 4 deletions docs/list.js
Original file line number Diff line number Diff line change
Expand Up @@ -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"
},

Expand Down Expand Up @@ -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"
},

Expand Down
26 changes: 17 additions & 9 deletions editor/js/Sidebar.Scene.js
Original file line number Diff line number Diff line change
Expand Up @@ -134,7 +134,8 @@ Sidebar.Scene = function ( editor ) {
fogColor.getHexValue(),
fogNear.getValue(),
fogFar.getValue(),
fogDensity.getValue()
fogDensity.getValue(),
fogSquared.getValue()
);

}
Expand All @@ -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 () {
Expand Down Expand Up @@ -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() {
Expand Down Expand Up @@ -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 );

}

Expand All @@ -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' );

}

Expand Down
15 changes: 8 additions & 7 deletions editor/js/Viewport.js
Original file line number Diff line number Diff line change
Expand Up @@ -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 ) {

Expand All @@ -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;

}
Expand All @@ -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;

}

Expand Down
1 change: 1 addition & 0 deletions examples/files.js
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
Loading

0 comments on commit 2f3b28f

Please sign in to comment.