Fixed dirtiness logic in WebGLRenderer and the automatically detected errors

Also improved the example and added a thumbnail for it.

Author: EliasHasle

examples/files.json

@@ -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",

examples/screenshots/webgl_geometry_terrain_fog_types.jpg

@@ -10,6 +10,9 @@
 				background-color: #efd1b5;
 				color: #61443e;
 			}
+			body, #container {
+				overflow: hidden;
+			}
 			a {
 				color: #a06851;
 			}
@@ -40,6 +43,7 @@
 			import Stats from 'three/addons/libs/stats.module.js';
 			import { GUI } from './jsm/libs/lil-gui.module.min.js';
 
+			import { FirstPersonControls } from 'three/addons/controls/FirstPersonControls.js';
 			import { ImprovedNoise } from 'three/addons/math/ImprovedNoise.js';
 
 			let container, stats;
@@ -53,7 +57,7 @@
 
 			var params = {
 				"Fog type": "DensityFog",
-				"Fog color": "#efd1b5",
+				"Fog color": "#b7dc50",
 			}
 
 			init();
@@ -63,21 +67,21 @@
 
 				container = document.getElementById( 'container' );
 
-				camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 10000 );
+				camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 10000 );
 
 				scene = new THREE.Scene();
 				scene.background = new THREE.Color();
 
 				fogs = {
 					"RangeFog": new THREE.RangeFog(),
-					"DensityFog": new THREE.DensityFog(),
-				}
+					"DensityFog": new THREE.DensityFog(undefined, 0.001, false),
+				};
 
 				setFogColor( params[ "Fog color" ] );
 
 				var data = generateHeight( worldWidth, worldDepth );
 
-				camera.position.y = data[ 0.5 * worldWidth + 0.5 * worldDepth * worldWidth ] * 10 + 500;
+				camera.position.y = data[ 0.5 * worldWidth + 0.5 * worldDepth * worldWidth ] * 10 + 300;
 
 				var geometry = new THREE.PlaneGeometry( 7500, 7500, worldWidth - 1, worldDepth - 1 );
 				geometry.rotateX( - Math.PI / 2 );
@@ -102,6 +106,10 @@
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				container.appendChild( renderer.domElement );
 
+				controls = new FirstPersonControls( camera, renderer.domElement );
+				controls.movementSpeed = 100;
+				controls.lookSpeed = 0.03;
+
 				stats = new Stats();
 				container.appendChild( stats.dom );
 
@@ -121,7 +129,7 @@
 				fogGuis = {
 					"RangeFog": gui.addFolder( "RangeFog" ),
 					"DensityFog": gui.addFolder( "DensityFog" )
-				}
+				};
 
 				setFogType( params[ "Fog type" ] );
 
@@ -167,6 +175,8 @@
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
+				controls.handleResize();
+
 			}
 
 			function generateHeight( width, height ) {
@@ -271,6 +281,7 @@
 
 			function render() {
 
+				controls.update( clock.getDelta() );
 				renderer.render( scene, camera );
 
 			}

examples/webgl_geometry_terrain_fog_types.html

@@ -1394,7 +1394,7 @@ class WebGLRenderer {
 
 			materialProperties.environment = material.isMeshStandardMaterial ? scene.environment : null;
 			materialProperties.fog = scene.fog;
-			materialProperties.fogSquared = scene.fog.squared || null;
+			materialProperties.fogSquared = ( scene.fog && scene.fog.squared ) || null;
 			materialProperties.envMap = ( material.isMeshStandardMaterial ? cubeuvmaps : cubemaps ).get( material.envMap || materialProperties.environment );
 
 			if ( programs === undefined ) {
@@ -1583,7 +1583,7 @@ class WebGLRenderer {
 
 					needsProgramChange = true;
 
-				} else if ( material.fog === true && ( materialProperties.fog !== fog || materialProperties.fogSquared !== fog.squared ) ) {
+				} else if ( material.fog === true && ( materialProperties.fog !== fog || ( fog && ( materialProperties.fogSquared !== fog.squared ) ) ) ) {
 
 					needsProgramChange = true;
 

src/renderers/WebGLRenderer.js

@@ -20,10 +20,10 @@ export default QUnit.module( 'Scenes', () => {
 			assert.ok( object_color, 'Can instantiate a DensityFog with color.' );
 
 			// color, density
-			const object_all = new DensityFog( 0xffffff, 0.00030 );
-			assert.ok( object_all, 'Can instantiate a DensityFog with color, density.' );
+			const object_color_density = new DensityFog( 0xffffff, 0.00030 );
+			assert.ok( object_color_density, 'Can instantiate a DensityFog with color, density.' );
 
-			// color, density
+			// color, density, squared
 			const object_all = new DensityFog( 0xffffff, 0.00030, false );
 			assert.ok( object_all, 'Can instantiate a DensityFog with color, density, squared == false.' );