Examples: Clean up. (#25994)

* Examples: More clean up.

* Update screenshots.

* Update screenshots.

examples/webgl_framebuffer_texture.html

@@ -55,8 +55,6 @@
 			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 			import * as GeometryUtils from 'three/addons/utils/GeometryUtils.js';
 
-			THREE.ColorManagement.enabled = false; // TODO: Confirm correct color management.
-
 			let camera, scene, renderer;
 			let line, sprite, texture;
 
@@ -128,7 +126,6 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
-				renderer.outputColorSpace = THREE.LinearSRGBColorSpace; // TODO: Investigate use of FramebufferTexture.
 				renderer.autoClear = false;
 				document.body.appendChild( renderer.domElement );
 

examples/webgl_materials_bumpmap.html

@@ -34,8 +34,6 @@
 
 			import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
 
-			THREE.ColorManagement.enabled = false; // TODO: Consider enabling color management.
-
 			const statsEnabled = true;
 
 			let container, stats, loader;
@@ -73,9 +71,9 @@
 
 				// LIGHTS
 
-				scene.add( new THREE.HemisphereLight( 0x443333, 0x111122 ) );
+				scene.add( new THREE.HemisphereLight( 0x8d7c7c, 0x494966 ) );
 
-				spotLight = new THREE.SpotLight( 0xffffbb, 2 );
+				spotLight = new THREE.SpotLight( 0xffffde, 2 );
 				spotLight.position.set( 0.5, 0, 1 );
 				spotLight.position.multiplyScalar( 700 );
 				scene.add( spotLight );
@@ -97,8 +95,8 @@
 				const mapHeight = new THREE.TextureLoader().load( 'models/gltf/LeePerrySmith/Infinite-Level_02_Disp_NoSmoothUV-4096.jpg' );
 
 				const material = new THREE.MeshPhongMaterial( {
-					color: 0x552811,
-					specular: 0x222222,
+					color: 0x9c6e49,
+					specular: 0x666666,
 					shininess: 25,
 					bumpMap: mapHeight,
 					bumpScale: 12

examples/webgl_materials_displacementmap.html

@@ -37,8 +37,6 @@
 			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 			import { OBJLoader } from 'three/addons/loaders/OBJLoader.js';
 
-			THREE.ColorManagement.enabled = false; // TODO: Consider enabling color management.
-
 			let stats;
 			let camera, scene, renderer, controls;
 
@@ -145,7 +143,7 @@
 				pointLight.position.z = 2500;
 				scene.add( pointLight );
 
-				const pointLight2 = new THREE.PointLight( 0xff6666, 1 );
+				const pointLight2 = new THREE.PointLight( 0xffaaaa, 1 );
 				camera.add( pointLight2 );
 
 				const pointLight3 = new THREE.PointLight( 0x0000ff, 0.5 );
@@ -177,7 +175,7 @@
 
 				material = new THREE.MeshStandardMaterial( {
 
-					color: 0x888888,
+					color: 0xc1c1c1,
 					roughness: settings.roughness,
 					metalness: settings.metalness,
 

examples/webgl_materials_variations_lambert.html

@@ -34,8 +34,6 @@
 			import { FontLoader } from 'three/addons/loaders/FontLoader.js';
 			import { TextGeometry } from 'three/addons/geometries/TextGeometry.js';
 
-			THREE.ColorManagement.enabled = false; // TODO: Consider enabling color management.
-
 			let container, stats;
 
 			let camera, scene, renderer;
@@ -147,7 +145,7 @@
 
 				// Lights
 
-				scene.add( new THREE.AmbientLight( 0x222222 ) );
+				scene.add( new THREE.AmbientLight( 0x666666 ) );
 
 				const directionalLight = new THREE.DirectionalLight( 0xffffff, 1 );
 				directionalLight.position.set( 1, 1, 1 ).normalize();

examples/webgl_materials_variations_phong.html

@@ -34,8 +34,6 @@
 			import { FontLoader } from 'three/addons/loaders/FontLoader.js';
 			import { TextGeometry } from 'three/addons/geometries/TextGeometry.js';
 
-			THREE.ColorManagement.enabled = false; // TODO: Consider enabling color management.
-
 			let container, stats;
 
 			let camera, scene, renderer;
@@ -154,7 +152,7 @@
 
 				// Lights
 
-				scene.add( new THREE.AmbientLight( 0x222222 ) );
+				scene.add( new THREE.AmbientLight( 0x666666 ) );
 
 				const directionalLight = new THREE.DirectionalLight( 0xffffff, 1 );
 				directionalLight.position.set( 1, 1, 1 ).normalize();

examples/webgl_materials_variations_physical.html

@@ -153,7 +153,7 @@
 
 				// Lights
 
-				scene.add( new THREE.AmbientLight( 0x222222 ) );
+				scene.add( new THREE.AmbientLight( 0x666666 ) );
 
 				const directionalLight = new THREE.DirectionalLight( 0xffffff, 1 );
 				directionalLight.position.set( 1, 1, 1 ).normalize();

examples/webgl_materials_variations_standard.html

@@ -36,8 +36,6 @@
 			import { FontLoader } from 'three/addons/loaders/FontLoader.js';
 			import { TextGeometry } from 'three/addons/geometries/TextGeometry.js';
 
-			THREE.ColorManagement.enabled = false; // TODO: Consider enabling color management.
-
 			let container, stats;
 
 			let camera, scene, renderer;
@@ -158,7 +156,7 @@
 
 				// Lights
 
-				scene.add( new THREE.AmbientLight( 0x222222 ) );
+				scene.add( new THREE.AmbientLight( 0x666666 ) );
 
 				const directionalLight = new THREE.DirectionalLight( 0xffffff, 1 );
 				directionalLight.position.set( 1, 1, 1 ).normalize();

examples/webgl_materials_variations_toon.html

@@ -35,8 +35,6 @@
 			import { FontLoader } from 'three/addons/loaders/FontLoader.js';
 			import { TextGeometry } from 'three/addons/geometries/TextGeometry.js';
 
-			THREE.ColorManagement.enabled = false; // TODO: Consider enabling color management.
-
 			let container, stats;
 
 			let camera, scene, renderer, effect;
@@ -152,7 +150,7 @@
 
 				// Lights
 
-				scene.add( new THREE.AmbientLight( 0x888888 ) );
+				scene.add( new THREE.AmbientLight( 0xc1c1c1 ) );
 
 				const pointLight = new THREE.PointLight( 0xffffff, 2, 800 );
 				particleLight.add( pointLight );

examples/webgl_shadowmap.html

@@ -84,7 +84,7 @@
 
 				// LIGHTS
 
-				const ambient = new THREE.AmbientLight( 0x444444 );
+				const ambient = new THREE.AmbientLight( 0x8d8d8d );
 				scene.add( ambient );
 
 				light = new THREE.SpotLight( 0xffffff, 1, 0, Math.PI / 5, 0.3 );
@@ -183,7 +183,7 @@
 				// GROUND
 
 				const geometry = new THREE.PlaneGeometry( 100, 100 );
-				const planeMaterial = new THREE.MeshPhongMaterial( { color: 0xffb851 } );
+				const planeMaterial = new THREE.MeshPhongMaterial( { color: 0xffdd99 } );
 
 				const ground = new THREE.Mesh( geometry, planeMaterial );
 

examples/webgl_shadowmap_performance.html

@@ -38,8 +38,6 @@
 			import { FontLoader } from 'three/addons/loaders/FontLoader.js';
 			import { TextGeometry } from 'three/addons/geometries/TextGeometry.js';
 
-			THREE.ColorManagement.enabled = false; // TODO: Consider enabling color management.
-
 			const SHADOW_MAP_WIDTH = 2048, SHADOW_MAP_HEIGHT = 1024;
 
 			let SCREEN_WIDTH = window.innerWidth;
@@ -81,7 +79,7 @@
 
 				// LIGHTS
 
-				const ambient = new THREE.AmbientLight( 0x444444 );
+				const ambient = new THREE.AmbientLight( 0x8d8d8d );
 				scene.add( ambient );
 
 				const light = new THREE.SpotLight( 0xffffff, 1, 0, Math.PI / 5, 0.3 );
@@ -155,7 +153,7 @@
 				// GROUND
 
 				const geometry = new THREE.PlaneGeometry( 100, 100 );
-				const planeMaterial = new THREE.MeshPhongMaterial( { color: 0xffb851 } );
+				const planeMaterial = new THREE.MeshPhongMaterial( { color: 0xffdd99 } );
 
 				const ground = new THREE.Mesh( geometry, planeMaterial );
 

examples/webgl_sprites.html

@@ -29,8 +29,6 @@
 
 			import * as THREE from 'three';
 
-			THREE.ColorManagement.enabled = false; // TODO: Confirm correct color management.
-
 			let camera, scene, renderer;
 			let cameraOrtho, sceneOrtho;
 
@@ -70,6 +68,9 @@
 				const mapB = textureLoader.load( 'textures/sprite1.png' );
 				mapC = textureLoader.load( 'textures/sprite2.png' );
 
+				mapB.colorSpace = THREE.SRGBColorSpace;
+				mapC.colorSpace = THREE.SRGBColorSpace;
+
 				group = new THREE.Group();
 
 				const materialC = new THREE.SpriteMaterial( { map: mapC, color: 0xffffff, fog: true } );
@@ -113,7 +114,6 @@
 				renderer = new THREE.WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
-				renderer.outputColorSpace = THREE.LinearSRGBColorSpace;
 				renderer.autoClear = false; // To allow render overlay on top of sprited sphere
 
 				document.body.appendChild( renderer.domElement );
@@ -126,6 +126,8 @@
 
 			function createHUDSprites( texture ) {
 
+				texture.colorSpace = THREE.SRGBColorSpace;
+
 				const material = new THREE.SpriteMaterial( { map: texture } );
 
 				const width = material.map.image.width;

examples/webgl_trails.html

@@ -26,8 +26,6 @@
 
 			import Stats from 'three/addons/libs/stats.module.js';
 
-			THREE.ColorManagement.enabled = false; // TODO: Confirm correct color management.
-
 			let stats;
 
 			let camera, scene, renderer, clock;
@@ -73,7 +71,6 @@
 				renderer = new THREE.WebGLRenderer( { preserveDrawingBuffer: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
-				renderer.outputColorSpace = THREE.LinearSRGBColorSpace;
 				renderer.autoClearColor = false;
 				container.appendChild( renderer.domElement );