Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

RangeFog and DensityFog #17592

Open
wants to merge 7 commits into
base: dev
Choose a base branch
from
Open

RangeFog and DensityFog #17592

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
3803c00
PR update (via reset): RangeFog and DensityFog + fog fixes
EliasHasle Mar 27, 2023
651512a
Restrict fog depth to projection-parallel distance for Orthographic p…
EliasHasle Mar 30, 2023
7dd497b
Simplify fog_vertex
EliasHasle Mar 30, 2023
a26d952
Fixed fog support in editor
EliasHasle Mar 31, 2023
184e987
Correct docs
EliasHasle Mar 31, 2023
8f6bf87
fog_fragment: Simplify away `whiteComplement`
EliasHasle Apr 12, 2023
4bea924
New screenshots for some examples (especially those that have fog)
EliasHasle Mar 30, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
61 changes: 61 additions & 0 deletions docs/api/en/scenes/DensityFog.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,61 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<base href="../../../" />
<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 exponential or exponential squared fog, which gives a clear view near the camera and an exponentially or faster than exponentially densening fog farther from the camera.</p>

<h2>Code Example</h2>

<code>const scene = new THREE.Scene();
scene.fog = new THREE.DensityFog( 0xcccccc, 0.002, true );
</code>

<h2>Constructor</h2>


<h3>[name]( [param:Integer color], [param:Float density], [param:bool 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:Boolean isDensityFog]</h3>
<p>
Read-only flag to check if a given object is of type [name].
</p>

<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:bool squared]</h3>
<p>Defines whether the product of density and distance is squared in the exponent.</p>
<p>Default is true.</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:Object 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>
48 changes: 1 addition & 47 deletions docs/api/en/scenes/Fog.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,53 +9,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 is deprecated. Use <a href="./RangeFog.html">RangeFog</a> instead.</p>

<h2>Code Example</h2>

<code>const scene = new THREE.Scene();
scene.fog = new THREE.Fog( 0xcccccc, 10, 15 );
</code>

<h2>Constructor</h2>


<h3>[name]( [param:Integer color], [param:Float near], [param:Float far] )</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:Boolean isFog]</h3>
<p>
Read-only flag to check if a given object is of type [name].
</p>

<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 near]</h3>
<p>The minimum distance to start applying fog. Objects that are less than 'near' units from the active camera won't be affected by fog.</p>
<p>Default is 1.</p>

<h3>[property:Float far]</h3>
<p>The maximum distance at which fog stops being calculated and applied. Objects that are more than 'far' units away from the active camera won't be affected by fog.</p>
<p>Default is 1000.</p>

<h2>Methods</h2>

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

<h3>[method:Object toJSON]()</h3>
<p>Return fog 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>
44 changes: 1 addition & 43 deletions docs/api/en/scenes/FogExp2.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,49 +9,7 @@
<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 is deprecated. Use <a href="./DensityFog.html">DensityFog</a> instead.</p>

<h2>Code Example</h2>

<code>const scene = new THREE.Scene();
scene.fog = new THREE.FogExp2( 0xcccccc, 0.002 );
</code>

<h2>Constructor</h2>


<h3>[name]( [param:Integer color], [param:Float density] )</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:Boolean isFogExp2]</h3>
<p>
Read-only flag to check if a given object is of type [name].
</p>

<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>

<h2>Methods</h2>

<h3>[method:FogExp2 clone]()</h3>
<p>Returns a new FogExp2 instance with the same parameters as this one.</p>

<h3>[method:Object toJSON]()</h3>
<p>Return FogExp2 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>
61 changes: 61 additions & 0 deletions docs/api/en/scenes/RangeFog.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,61 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<base href="../../../" />
<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 smooth ranged fog, i.e., that grows smoothly denser from the near to the far distance. The dependence on distance is not linear, but follows a smoothstep curve.</p>

<h2>Code Example</h2>

<code>const scene = new THREE.Scene();
scene.fog = new THREE.RangeFog( 0xcccccc, 10, 15 );
</code>

<h2>Constructor</h2>


<h3>[name]( [param:Integer color], [param:Float near], [param:Float far] )</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:Boolean isRangeFog]</h3>
<p>
Read-only flag to check if a given object is of type [name].
</p>

<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 near]</h3>
<p>The minimum distance to start applying fog. Objects that are less than 'near' units from the active camera won't be affected by fog.</p>
<p>Default is 1.</p>

<h3>[property:Float far]</h3>
<p>The maximum distance at which fog stops being calculated and applied. Objects that are more than 'far' units away from the active camera won't be affected by fog.</p>
<p>Default is 1000.</p>

<h2>Methods</h2>

<h3>[method:RangeFog clone]()</h3>
<p>Returns a new RangeFog instance with the same parameters as this one.</p>

<h3>[method:Object toJSON]()</h3>
<p>Return RangeFog 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>
4 changes: 2 additions & 2 deletions docs/list.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -300,8 +300,8 @@
},

"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
33 changes: 21 additions & 12 deletions editor/js/Sidebar.Scene.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import * as THREE from 'three';

import { UIPanel, UIBreak, UIRow, UIColor, UISelect, UIText, UINumber } from './libs/ui.js';
import { UIPanel, UIBreak, UIRow, UIColor, UISelect, UIText, UINumber, UICheckbox } from './libs/ui.js';
import { UIOutliner, UITexture } from './libs/ui.three.js';

function SidebarScene( editor ) {
Expand Down Expand Up @@ -277,7 +277,8 @@ function SidebarScene( editor ) {
fogColor.getHexValue(),
fogNear.getValue(),
fogFar.getValue(),
fogDensity.getValue()
fogDensity.getValue(),
fogSquared.getValue()
);

}
Expand All @@ -289,7 +290,8 @@ function SidebarScene( editor ) {
fogColor.getHexValue(),
fogNear.getValue(),
fogFar.getValue(),
fogDensity.getValue()
fogDensity.getValue(),
fogSquared.getValue()
);

}
Expand All @@ -298,8 +300,8 @@ function SidebarScene( editor ) {
const fogType = new UISelect().setOptions( {

'None': '',
'Fog': 'Linear',
'FogExp2': 'Exponential'
'RangeFog': 'RangeFog',
'DensityFog': 'DensityFog'

} ).setWidth( '150px' );
fogType.onChange( function () {
Expand Down Expand Up @@ -339,6 +341,11 @@ function SidebarScene( editor ) {

const fogDensity = new UINumber( 0.05 ).setWidth( '40px' ).setRange( 0, 0.1 ).setStep( 0.001 ).setPrecision( 3 ).onChange( onFogSettingsChanged );
fogPropertiesRow.add( fogDensity );

// fog squared

const fogSquared = new UICheckbox( true ).onChange( onFogSettingsChanged );
fogPropertiesRow.add( fogSquared );

//

Expand Down Expand Up @@ -436,16 +443,17 @@ function SidebarScene( editor ) {

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

if ( scene.fog.isFog ) {
if ( scene.fog.isRangeFog ) {

fogType.setValue( 'Fog' );
fogType.setValue( 'RangeFog' );
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 @@ -466,9 +474,10 @@ function SidebarScene( editor ) {
const 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
17 changes: 9 additions & 8 deletions editor/js/Viewport.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -570,18 +570,18 @@ function Viewport( editor ) {

// fog

signals.sceneFogChanged.add( function ( fogType, fogColor, fogNear, fogFar, fogDensity ) {
signals.sceneFogChanged.add( function ( fogType, fogColor, fogNear, fogFar, fogDensity, fogSquared ) {

switch ( fogType ) {

case 'None':
scene.fog = null;
break;
case 'Fog':
scene.fog = new THREE.Fog( fogColor, fogNear, fogFar );
case 'RangeFog':
scene.fog = new THREE.RangeFog( fogColor, fogNear, fogFar );
break;
case 'FogExp2':
scene.fog = new THREE.FogExp2( fogColor, fogDensity );
case 'DensityFog':
scene.fog = new THREE.DensityFog( fogColor, fogDensity, fogSquared );
break;

}
Expand All @@ -590,18 +590,19 @@ function Viewport( editor ) {

} );

signals.sceneFogSettingsChanged.add( function ( fogType, fogColor, fogNear, fogFar, fogDensity ) {
signals.sceneFogSettingsChanged.add( function ( fogType, fogColor, fogNear, fogFar, fogDensity, fogSquared ) {

switch ( fogType ) {

case 'Fog':
case 'RangeFog':
scene.fog.color.setHex( fogColor );
scene.fog.near = fogNear;
scene.fog.far = fogFar;
break;
case 'FogExp2':
case 'DensityFog':
scene.fog.color.setHex( fogColor );
scene.fog.density = fogDensity;
scene.fog.squared = fogSquared;
break;

}
Expand Down
1 change: 1 addition & 0 deletions examples/files.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,7 @@
"webgl_geometry_spline_editor",
"webgl_geometry_teapot",
"webgl_geometry_terrain",
"webgl_geometry_terrain_fog_types",
"webgl_geometry_terrain_raycast",
"webgl_geometry_text",
"webgl_geometry_text_shapes",
Expand Down
Binary file modified examples/screenshots/games_fps.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified examples/screenshots/misc_controls_fly.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified examples/screenshots/misc_controls_map.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified examples/screenshots/misc_controls_orbit.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified examples/screenshots/misc_controls_trackball.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified examples/screenshots/misc_exporter_draco.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified examples/screenshots/misc_exporter_ply.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified examples/screenshots/misc_exporter_stl.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified examples/screenshots/webaudio_orientation.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified examples/screenshots/webaudio_sandbox.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified examples/screenshots/webgl2_buffergeometry_attributes_integer.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified examples/screenshots/webgl2_buffergeometry_attributes_none.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified examples/screenshots/webgl2_multisampled_renderbuffers.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified examples/screenshots/webgl_animation_multiple.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified examples/screenshots/webgl_animation_skinning_additive_blending.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified examples/screenshots/webgl_animation_skinning_ik.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified examples/screenshots/webgl_animation_skinning_morph.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified examples/screenshots/webgl_buffergeometry.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified examples/screenshots/webgl_buffergeometry_points.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified examples/screenshots/webgl_buffergeometry_points_interleaved.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified examples/screenshots/webgl_buffergeometry_uint.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified examples/screenshots/webgl_geometry_csg.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified examples/screenshots/webgl_geometry_dynamic.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified examples/screenshots/webgl_geometry_terrain.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added examples/screenshots/webgl_geometry_terrain_fog_types.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified examples/screenshots/webgl_geometry_text.jpg
View file
Open in desktop
Binary file modified examples/screenshots/webgl_gpgpu_birds.jpg
View file
Open in desktop
Binary file modified examples/screenshots/webgl_gpgpu_birds_gltf.jpg
View file
Open in desktop
Binary file modified examples/screenshots/webgl_lights_hemisphere.jpg
View file
Open in desktop
Binary file modified examples/screenshots/webgl_lines_dashed.jpg
View file
Open in desktop
Binary file modified examples/screenshots/webgl_loader_3mf_materials.jpg
View file
Open in desktop
Binary file modified examples/screenshots/webgl_loader_draco.jpg
View file
Open in desktop
Binary file modified examples/screenshots/webgl_loader_fbx.jpg
View file
Open in desktop
Binary file modified examples/screenshots/webgl_loader_md2.jpg
View file
Open in desktop
Binary file modified examples/screenshots/webgl_loader_md2_control.jpg
View file
Open in desktop
Binary file modified examples/screenshots/webgl_loader_ply.jpg
View file
Open in desktop
Binary file modified examples/screenshots/webgl_loader_stl.jpg
View file
Open in desktop
Binary file modified examples/screenshots/webgl_loader_ttf.jpg
View file
Open in desktop
Binary file modified examples/screenshots/webgl_lod.jpg
View file
Open in desktop
Binary file modified examples/screenshots/webgl_materials_car.jpg
View file
Open in desktop
Binary file modified examples/screenshots/webgl_materials_texture_anisotropy.jpg
View file
Open in desktop
Binary file modified examples/screenshots/webgl_materials_texture_filters.jpg
View file
Open in desktop
Binary file modified examples/screenshots/webgl_materials_texture_manualmipmap.jpg
View file
Open in desktop
Binary file modified examples/screenshots/webgl_nodes_points.jpg
View file
Open in desktop
Binary file modified examples/screenshots/webgl_points_billboards.jpg
View file
Open in desktop
Binary file modified examples/screenshots/webgl_points_dynamic.jpg
View file
Open in desktop
Binary file modified examples/screenshots/webgl_points_sprites.jpg
View file
Open in desktop
Binary file modified examples/screenshots/webgl_postprocessing.jpg
View file
Open in desktop
Binary file modified examples/screenshots/webgl_postprocessing_glitch.jpg
View file
Open in desktop
Binary file modified examples/screenshots/webgl_postprocessing_ssr.jpg
View file
Open in desktop
Binary file modified examples/screenshots/webgl_shadowmap_performance.jpg
View file
Open in desktop
Binary file modified examples/screenshots/webgl_shadowmap_vsm.jpg
View file
Open in desktop
Binary file modified examples/screenshots/webgl_skinning_simple.jpg
View file
Open in desktop
Binary file modified examples/screenshots/webgl_sprites.jpg
View file
Open in desktop
Loading