Manual: Clean up examples. (#23377)

manual/examples/cleanup-loaded-files.html

@@ -107,6 +107,7 @@ class ResourceTracker {
 function main() {
   const canvas = document.querySelector('#c');
   const renderer = new THREE.WebGLRenderer({canvas});
+  renderer.outputEncoding = THREE.sRGBEncoding;
 
   const fov = 75;
   const aspect = 2;  // the canvas default
@@ -120,7 +121,7 @@ function main() {
 
   function addLight(...pos) {
     const color = 0xFFFFFF;
-    const intensity = 1;
+    const intensity = 0.8;
     const light = new THREE.DirectionalLight(color, intensity);
     light.position.set(...pos);
     scene.add(light);

manual/examples/game-check-animations.html

@@ -41,13 +41,13 @@
       height: 1em;
       background-color: #888;
       background-image: linear-gradient(
-        -45deg, 
-        rgba(255, 255, 255, .5) 25%, 
-        transparent 25%, 
-        transparent 50%, 
-        rgba(255, 255, 255, .5) 50%, 
-        rgba(255, 255, 255, .5) 75%, 
-        transparent 75%, 
+        -45deg,
+        rgba(255, 255, 255, .5) 25%,
+        transparent 25%,
+        transparent 50%,
+        rgba(255, 255, 255, .5) 50%,
+        rgba(255, 255, 255, .5) 75%,
+        transparent 75%,
         transparent
       );
       background-size: 50px 50px;
@@ -94,6 +94,7 @@ import * as SkeletonUtils from '../../examples/jsm/utils/SkeletonUtils.js';
 function main() {
   const canvas = document.querySelector('#c');
   const renderer = new THREE.WebGLRenderer({canvas});
+  renderer.outputEncoding = THREE.sRGBEncoding;
 
   const fov = 45;
   const aspect = 2;  // the canvas default
@@ -111,7 +112,7 @@ function main() {
 
   function addLight(...pos) {
     const color = 0xFFFFFF;
-    const intensity = 1;
+    const intensity = 0.8;
     const light = new THREE.DirectionalLight(color, intensity);
     light.position.set(...pos);
     scene.add(light);
@@ -246,4 +247,3 @@ function main() {
 main();
 </script>
 </html>
-

manual/examples/game-conga-line-w-notes.html

@@ -170,6 +170,7 @@ import {GUI} from '../../examples/jsm/libs/lil-gui.module.min.js';
 function main() {
   const canvas = document.querySelector('#c');
   const renderer = new THREE.WebGLRenderer({canvas});
+  renderer.outputEncoding = THREE.sRGBEncoding;
 
   const fov = 45;
   const aspect = 2;  // the canvas default
@@ -188,7 +189,7 @@ function main() {
 
   function addLight(...pos) {
     const color = 0xFFFFFF;
-    const intensity = 1;
+    const intensity = 0.8;
     const light = new THREE.DirectionalLight(color, intensity);
     light.position.set(...pos);
     scene.add(light);
@@ -977,4 +978,3 @@ function main() {
 main();
 </script>
 </html>
-

manual/examples/game-conga-line.html

@@ -170,6 +170,7 @@ import {GUI} from '../../examples/jsm/libs/lil-gui.module.min.js';
 function main() {
   const canvas = document.querySelector('#c');
   const renderer = new THREE.WebGLRenderer({canvas});
+  renderer.outputEncoding = THREE.sRGBEncoding;
 
   const fov = 45;
   const aspect = 2;  // the canvas default
@@ -188,7 +189,7 @@ function main() {
 
   function addLight(...pos) {
     const color = 0xFFFFFF;
-    const intensity = 1;
+    const intensity = 0.8;
     const light = new THREE.DirectionalLight(color, intensity);
     light.position.set(...pos);
     scene.add(light);
@@ -816,4 +817,3 @@ function main() {
 main();
 </script>
 </html>
-

manual/examples/game-just-player.html

@@ -47,13 +47,13 @@
       height: 1em;
       background-color: #888;
       background-image: linear-gradient(
-        -45deg, 
-        rgba(255, 255, 255, .5) 25%, 
-        transparent 25%, 
-        transparent 50%, 
-        rgba(255, 255, 255, .5) 50%, 
-        rgba(255, 255, 255, .5) 75%, 
-        transparent 75%, 
+        -45deg,
+        rgba(255, 255, 255, .5) 25%,
+        transparent 25%,
+        transparent 50%,
+        rgba(255, 255, 255, .5) 50%,
+        rgba(255, 255, 255, .5) 75%,
+        transparent 75%,
         transparent
       );
       background-size: 50px 50px;
@@ -100,6 +100,7 @@ import * as SkeletonUtils from '../../examples/jsm/utils/SkeletonUtils.js';
 function main() {
   const canvas = document.querySelector('#c');
   const renderer = new THREE.WebGLRenderer({canvas});
+  renderer.outputEncoding = THREE.sRGBEncoding;
 
   const fov = 45;
   const aspect = 2;  // the canvas default
@@ -118,7 +119,7 @@ function main() {
 
   function addLight(...pos) {
     const color = 0xFFFFFF;
-    const intensity = 1;
+    const intensity = 0.8;
     const light = new THREE.DirectionalLight(color, intensity);
     light.position.set(...pos);
     scene.add(light);
@@ -359,4 +360,3 @@ function main() {
 main();
 </script>
 </html>
-

manual/examples/game-load-models.html

@@ -41,13 +41,13 @@
       height: 1em;
       background-color: #888;
       background-image: linear-gradient(
-        -45deg, 
-        rgba(255, 255, 255, .5) 25%, 
-        transparent 25%, 
-        transparent 50%, 
-        rgba(255, 255, 255, .5) 50%, 
-        rgba(255, 255, 255, .5) 75%, 
-        transparent 75%, 
+        -45deg,
+        rgba(255, 255, 255, .5) 25%,
+        transparent 25%,
+        transparent 50%,
+        rgba(255, 255, 255, .5) 50%,
+        rgba(255, 255, 255, .5) 75%,
+        transparent 75%,
         transparent
       );
       background-size: 50px 50px;
@@ -94,6 +94,7 @@ import * as SkeletonUtils from '../../examples/jsm/utils/SkeletonUtils.js';
 function main() {
   const canvas = document.querySelector('#c');
   const renderer = new THREE.WebGLRenderer({canvas});
+  renderer.outputEncoding = THREE.sRGBEncoding;
 
   const fov = 45;
   const aspect = 2;  // the canvas default
@@ -111,7 +112,7 @@ function main() {
 
   function addLight(...pos) {
     const color = 0xFFFFFF;
-    const intensity = 1;
+    const intensity = 0.8;
     const light = new THREE.DirectionalLight(color, intensity);
     light.position.set(...pos);
     scene.add(light);
@@ -219,4 +220,3 @@ function main() {
 main();
 </script>
 </html>
-

manual/examples/game-player-input.html

@@ -140,6 +140,7 @@ import * as SkeletonUtils from '../../examples/jsm/utils/SkeletonUtils.js';
 function main() {
   const canvas = document.querySelector('#c');
   const renderer = new THREE.WebGLRenderer({canvas});
+  renderer.outputEncoding = THREE.sRGBEncoding;
 
   const fov = 45;
   const aspect = 2;  // the canvas default
@@ -158,7 +159,7 @@ function main() {
 
   function addLight(...pos) {
     const color = 0xFFFFFF;
-    const intensity = 1;
+    const intensity = 0.8;
     const light = new THREE.DirectionalLight(color, intensity);
     light.position.set(...pos);
     scene.add(light);
@@ -561,4 +562,3 @@ function main() {
 main();
 </script>
 </html>
-

manual/examples/load-gltf-animated-cars.html

@@ -40,6 +40,7 @@ import {GLTFLoader} from '../../examples/jsm/loaders/GLTFLoader.js';
 function main() {
   const canvas = document.querySelector('#c');
   const renderer = new THREE.WebGLRenderer({canvas});
+  renderer.outputEncoding = THREE.sRGBEncoding;
 
   const fov = 45;
   const aspect = 2;  // the canvas default
@@ -79,14 +80,14 @@ function main() {
   {
     const skyColor = 0xB1E1FF;  // light blue
     const groundColor = 0xB97A20;  // brownish orange
-    const intensity = 1;
+    const intensity = 0.6;
     const light = new THREE.HemisphereLight(skyColor, groundColor, intensity);
     scene.add(light);
   }
 
   {
     const color = 0xFFFFFF;
-    const intensity = 1;
+    const intensity = 0.8;
     const light = new THREE.DirectionalLight(color, intensity);
     light.position.set(5, 10, 2);
     scene.add(light);
@@ -275,4 +276,3 @@ function main() {
 main();
 </script>
 </html>
-

manual/examples/load-gltf-car-path-fixed.html

@@ -40,6 +40,7 @@ import {GLTFLoader} from '../../examples/jsm/loaders/GLTFLoader.js';
 function main() {
   const canvas = document.querySelector('#c');
   const renderer = new THREE.WebGLRenderer({canvas});
+  renderer.outputEncoding = THREE.sRGBEncoding;
 
   const fov = 45;
   const aspect = 2;  // the canvas default
@@ -79,14 +80,14 @@ function main() {
   {
     const skyColor = 0xB1E1FF;  // light blue
     const groundColor = 0xB97A20;  // brownish orange
-    const intensity = 1;
+    const intensity = 0.6;
     const light = new THREE.HemisphereLight(skyColor, groundColor, intensity);
     scene.add(light);
   }
 
   {
     const color = 0xFFFFFF;
-    const intensity = 1;
+    const intensity = 0.8;
     const light = new THREE.DirectionalLight(color, intensity);
     light.position.set(5, 10, 2);
     scene.add(light);
@@ -251,4 +252,3 @@ function main() {
 main();
 </script>
 </html>
-

manual/examples/load-gltf-car-path.html

@@ -40,6 +40,7 @@ import {GLTFLoader} from '../../examples/jsm/loaders/GLTFLoader.js';
 function main() {
   const canvas = document.querySelector('#c');
   const renderer = new THREE.WebGLRenderer({canvas});
+  renderer.outputEncoding = THREE.sRGBEncoding;
 
   const fov = 45;
   const aspect = 2;  // the canvas default
@@ -79,14 +80,14 @@ function main() {
   {
     const skyColor = 0xB1E1FF;  // light blue
     const groundColor = 0xB97A20;  // brownish orange
-    const intensity = 1;
+    const intensity = 0.6;
     const light = new THREE.HemisphereLight(skyColor, groundColor, intensity);
     scene.add(light);
   }
 
   {
     const color = 0xFFFFFF;
-    const intensity = 1;
+    const intensity = 0.8;
     const light = new THREE.DirectionalLight(color, intensity);
     light.position.set(5, 10, 2);
     scene.add(light);
@@ -248,4 +249,3 @@ function main() {
 main();
 </script>
 </html>
-

manual/examples/load-gltf-dump-scenegraph-extra.html

@@ -40,6 +40,7 @@ import {GLTFLoader} from '../../examples/jsm/loaders/GLTFLoader.js';
 function main() {
   const canvas = document.querySelector('#c');
   const renderer = new THREE.WebGLRenderer({canvas});
+  renderer.outputEncoding = THREE.sRGBEncoding;
 
   const fov = 45;
   const aspect = 2;  // the canvas default
@@ -79,14 +80,14 @@ function main() {
   {
     const skyColor = 0xB1E1FF;  // light blue
     const groundColor = 0xB97A20;  // brownish orange
-    const intensity = 1;
+    const intensity = 0.6;
     const light = new THREE.HemisphereLight(skyColor, groundColor, intensity);
     scene.add(light);
   }
 
   {
     const color = 0xFFFFFF;
-    const intensity = 1;
+    const intensity = 0.8;
     const light = new THREE.DirectionalLight(color, intensity);
     light.position.set(5, 10, 2);
     scene.add(light);
@@ -195,4 +196,3 @@ function main() {
 main();
 </script>
 </html>
-

manual/examples/load-gltf-dump-scenegraph.html

@@ -40,6 +40,7 @@ import {GLTFLoader} from '../../examples/jsm/loaders/GLTFLoader.js';
 function main() {
   const canvas = document.querySelector('#c');
   const renderer = new THREE.WebGLRenderer({canvas});
+  renderer.outputEncoding = THREE.sRGBEncoding;
 
   const fov = 45;
   const aspect = 2;  // the canvas default
@@ -79,14 +80,14 @@ function main() {
   {
     const skyColor = 0xB1E1FF;  // light blue
     const groundColor = 0xB97A20;  // brownish orange
-    const intensity = 1;
+    const intensity = 0.6;
     const light = new THREE.HemisphereLight(skyColor, groundColor, intensity);
     scene.add(light);
   }
 
   {
     const color = 0xFFFFFF;
-    const intensity = 1;
+    const intensity = 0.8;
     const light = new THREE.DirectionalLight(color, intensity);
     light.position.set(5, 10, 2);
     scene.add(light);
@@ -185,4 +186,3 @@ function main() {
 main();
 </script>
 </html>
-

manual/examples/load-gltf-rotate-cars-fixed.html

@@ -40,6 +40,7 @@ import {GLTFLoader} from '../../examples/jsm/loaders/GLTFLoader.js';
 function main() {
   const canvas = document.querySelector('#c');
   const renderer = new THREE.WebGLRenderer({canvas});
+  renderer.outputEncoding = THREE.sRGBEncoding;
 
   const fov = 45;
   const aspect = 2;  // the canvas default
@@ -79,14 +80,14 @@ function main() {
   {
     const skyColor = 0xB1E1FF;  // light blue
     const groundColor = 0xB97A20;  // brownish orange
-    const intensity = 1;
+    const intensity = 0.6;
     const light = new THREE.HemisphereLight(skyColor, groundColor, intensity);
     scene.add(light);
   }
 
   {
     const color = 0xFFFFFF;
-    const intensity = 1;
+    const intensity = 0.8;
     const light = new THREE.DirectionalLight(color, intensity);
     light.position.set(5, 10, 2);
     scene.add(light);

manual/examples/load-gltf-rotate-cars.html

@@ -40,6 +40,7 @@ import {GLTFLoader} from '../../examples/jsm/loaders/GLTFLoader.js';
 function main() {
   const canvas = document.querySelector('#c');
   const renderer = new THREE.WebGLRenderer({canvas});
+  renderer.outputEncoding = THREE.sRGBEncoding;
 
   const fov = 45;
   const aspect = 2;  // the canvas default
@@ -79,14 +80,14 @@ function main() {
   {
     const skyColor = 0xB1E1FF;  // light blue
     const groundColor = 0xB97A20;  // brownish orange
-    const intensity = 1;
+    const intensity = 0.6;
     const light = new THREE.HemisphereLight(skyColor, groundColor, intensity);
     scene.add(light);
   }
 
   {
     const color = 0xFFFFFF;
-    const intensity = 1;
+    const intensity = 0.8;
     const light = new THREE.DirectionalLight(color, intensity);
     light.position.set(5, 10, 2);
     scene.add(light);

manual/examples/load-gltf-shadows.html

@@ -41,6 +41,7 @@ import {GUI} from '../../examples/jsm/libs/lil-gui.module.min.js';
 function main() {
   const canvas = document.querySelector('#c');
   const renderer = new THREE.WebGLRenderer({canvas});
+  renderer.outputEncoding = THREE.sRGBEncoding;
   renderer.shadowMap.enabled = true;
 
   const fov = 45;
@@ -81,14 +82,14 @@ function main() {
   {
     const skyColor = 0xB1E1FF;  // light blue
     const groundColor = 0xB97A20;  // brownish orange
-    const intensity = 1;
+    const intensity = 0.6;
     const light = new THREE.HemisphereLight(skyColor, groundColor, intensity);
     scene.add(light);
   }
 
   {
     const color = 0xFFFFFF;
-    const intensity = 1;
+    const intensity = 0.8;
     const light = new THREE.DirectionalLight(color, intensity);
     light.castShadow = true;
     light.position.set(-250, 800, -850);
@@ -397,4 +398,3 @@ function main() {
 main();
 </script>
 </html>
-

manual/examples/load-gltf.html

@@ -40,6 +40,7 @@ import {GLTFLoader} from '../../examples/jsm/loaders/GLTFLoader.js';
 function main() {
   const canvas = document.querySelector('#c');
   const renderer = new THREE.WebGLRenderer({canvas});
+  renderer.outputEncoding = THREE.sRGBEncoding;
 
   const fov = 45;
   const aspect = 2;  // the canvas default
@@ -79,14 +80,14 @@ function main() {
   {
     const skyColor = 0xB1E1FF;  // light blue
     const groundColor = 0xB97A20;  // brownish orange
-    const intensity = 1;
+    const intensity = 0.6;
     const light = new THREE.HemisphereLight(skyColor, groundColor, intensity);
     scene.add(light);
   }
 
   {
     const color = 0xFFFFFF;
-    const intensity = 1;
+    const intensity = 0.8;
     const light = new THREE.DirectionalLight(color, intensity);
     light.position.set(5, 10, 2);
     scene.add(light);
@@ -171,4 +172,3 @@ function main() {
 main();
 </script>
 </html>
-

manual/examples/load-obj-auto-camera-xz.html

@@ -40,6 +40,7 @@ import {OBJLoader} from '../../examples/jsm/loaders/OBJLoader.js';
 function main() {
   const canvas = document.querySelector('#c');
   const renderer = new THREE.WebGLRenderer({canvas});
+  renderer.outputEncoding = THREE.sRGBEncoding;
 
   const fov = 45;
   const aspect = 2;  // the canvas default
@@ -60,6 +61,7 @@ function main() {
 
     const loader = new THREE.TextureLoader();
     const texture = loader.load('resources/images/checker.png');
+    texture.encoding = THREE.sRGBEncoding;
     texture.wrapS = THREE.RepeatWrapping;
     texture.wrapT = THREE.RepeatWrapping;
     texture.magFilter = THREE.NearestFilter;
@@ -79,14 +81,14 @@ function main() {
   {
     const skyColor = 0xB1E1FF;  // light blue
     const groundColor = 0xB97A20;  // brownish orange
-    const intensity = 1;
+    const intensity = 0.6;
     const light = new THREE.HemisphereLight(skyColor, groundColor, intensity);
     scene.add(light);
   }
 
   {
     const color = 0xFFFFFF;
-    const intensity = 1;
+    const intensity = 0.8;
     const light = new THREE.DirectionalLight(color, intensity);
     light.position.set(5, 10, 2);
     scene.add(light);
@@ -171,4 +173,3 @@ function main() {
 main();
 </script>
 </html>
-

manual/examples/load-obj-auto-camera.html

@@ -40,6 +40,7 @@ import {OBJLoader} from '../../examples/jsm/loaders/OBJLoader.js';
 function main() {
   const canvas = document.querySelector('#c');
   const renderer = new THREE.WebGLRenderer({canvas});
+  renderer.outputEncoding = THREE.sRGBEncoding;
 
   const fov = 45;
   const aspect = 2;  // the canvas default
@@ -60,6 +61,7 @@ function main() {
 
     const loader = new THREE.TextureLoader();
     const texture = loader.load('resources/images/checker.png');
+    texture.encoding = THREE.sRGBEncoding;
     texture.wrapS = THREE.RepeatWrapping;
     texture.wrapT = THREE.RepeatWrapping;
     texture.magFilter = THREE.NearestFilter;
@@ -79,14 +81,14 @@ function main() {
   {
     const skyColor = 0xB1E1FF;  // light blue
     const groundColor = 0xB97A20;  // brownish orange
-    const intensity = 1;
+    const intensity = 0.6;
     const light = new THREE.HemisphereLight(skyColor, groundColor, intensity);
     scene.add(light);
   }
 
   {
     const color = 0xFFFFFF;
-    const intensity = 1;
+    const intensity = 0.8;
     const light = new THREE.DirectionalLight(color, intensity);
     light.position.set(5, 10, 2);
     scene.add(light);
@@ -167,4 +169,3 @@ function main() {
 main();
 </script>
 </html>
-

manual/examples/load-obj-materials-fixed.html

@@ -41,6 +41,7 @@ import {MTLLoader} from '../../examples/jsm/loaders/MTLLoader.js';
 function main() {
   const canvas = document.querySelector('#c');
   const renderer = new THREE.WebGLRenderer({canvas});
+  renderer.outputEncoding = THREE.sRGBEncoding;
 
   const fov = 45;
   const aspect = 2;  // the canvas default
@@ -61,6 +62,7 @@ function main() {
 
     const loader = new THREE.TextureLoader();
     const texture = loader.load('resources/images/checker.png');
+    texture.encoding = THREE.sRGBEncoding;
     texture.wrapS = THREE.RepeatWrapping;
     texture.wrapT = THREE.RepeatWrapping;
     texture.magFilter = THREE.NearestFilter;
@@ -137,4 +139,3 @@ function main() {
 main();
 </script>
 </html>
-

manual/examples/load-obj-materials-windmill2.html

@@ -41,6 +41,7 @@ import {MTLLoader} from '../../examples/jsm/loaders/MTLLoader.js';
 function main() {
   const canvas = document.querySelector('#c');
   const renderer = new THREE.WebGLRenderer({canvas});
+  renderer.outputEncoding = THREE.sRGBEncoding;
 
   const fov = 45;
   const aspect = 2;  // the canvas default
@@ -61,6 +62,7 @@ function main() {
 
     const loader = new THREE.TextureLoader();
     const texture = loader.load('resources/images/checker.png');
+    texture.encoding = THREE.sRGBEncoding;
     texture.wrapS = THREE.RepeatWrapping;
     texture.wrapT = THREE.RepeatWrapping;
     texture.magFilter = THREE.NearestFilter;
@@ -177,4 +179,3 @@ function main() {
 main();
 </script>
 </html>
-

manual/examples/load-obj-materials.html

@@ -41,6 +41,7 @@ import {MTLLoader} from '../../examples/jsm/loaders/MTLLoader.js';
 function main() {
   const canvas = document.querySelector('#c');
   const renderer = new THREE.WebGLRenderer({canvas});
+  renderer.outputEncoding = THREE.sRGBEncoding;
 
   const fov = 45;
   const aspect = 2;  // the canvas default
@@ -61,6 +62,7 @@ function main() {
 
     const loader = new THREE.TextureLoader();
     const texture = loader.load('resources/images/checker.png');
+    texture.encoding = THREE.sRGBEncoding;
     texture.wrapS = THREE.RepeatWrapping;
     texture.wrapT = THREE.RepeatWrapping;
     texture.magFilter = THREE.NearestFilter;
@@ -136,4 +138,3 @@ function main() {
 main();
 </script>
 </html>
-

manual/examples/load-obj-no-materials.html

@@ -40,6 +40,7 @@ import {OBJLoader} from '../../examples/jsm/loaders/OBJLoader.js';
 function main() {
   const canvas = document.querySelector('#c');
   const renderer = new THREE.WebGLRenderer({canvas});
+  renderer.outputEncoding = THREE.sRGBEncoding;
 
   const fov = 45;
   const aspect = 2;  // the canvas default
@@ -60,6 +61,7 @@ function main() {
 
     const loader = new THREE.TextureLoader();
     const texture = loader.load('resources/images/checker.png');
+    texture.encoding = THREE.sRGBEncoding;
     texture.wrapS = THREE.RepeatWrapping;
     texture.wrapT = THREE.RepeatWrapping;
     texture.magFilter = THREE.NearestFilter;
@@ -79,14 +81,14 @@ function main() {
   {
     const skyColor = 0xB1E1FF;  // light blue
     const groundColor = 0xB97A20;  // brownish orange
-    const intensity = 1;
+    const intensity = 0.6;
     const light = new THREE.HemisphereLight(skyColor, groundColor, intensity);
     scene.add(light);
   }
 
   {
     const color = 0xFFFFFF;
-    const intensity = 1;
+    const intensity = 0.8;
     const light = new THREE.DirectionalLight(color, intensity);
     light.position.set(0, 10, 0);
     light.target.position.set(-5, 0, 0);
@@ -131,4 +133,3 @@ function main() {
 main();
 </script>
 </html>
-

manual/examples/load-obj-wat.html

@@ -40,6 +40,7 @@ import {OBJLoader} from '../../examples/jsm/loaders/OBJLoader.js';
 function main() {
   const canvas = document.querySelector('#c');
   const renderer = new THREE.WebGLRenderer({canvas});
+  renderer.outputEncoding = THREE.sRGBEncoding;
 
   const fov = 45;
   const aspect = 2;  // the canvas default
@@ -60,6 +61,7 @@ function main() {
 
     const loader = new THREE.TextureLoader();
     const texture = loader.load('resources/images/checker.png');
+    texture.encoding = THREE.sRGBEncoding;
     texture.wrapS = THREE.RepeatWrapping;
     texture.wrapT = THREE.RepeatWrapping;
     texture.magFilter = THREE.NearestFilter;
@@ -131,4 +133,3 @@ function main() {
 main();
 </script>
 </html>
-

manual/examples/postprocessing-3dlut-identity.html

@@ -38,6 +38,7 @@ import {GLTFLoader} from '../../examples/jsm/loaders/GLTFLoader.js';
 import {EffectComposer} from '../../examples/jsm/postprocessing/EffectComposer.js';
 import {RenderPass} from '../../examples/jsm/postprocessing/RenderPass.js';
 import {ShaderPass} from '../../examples/jsm/postprocessing/ShaderPass.js';
+import {GammaCorrectionShader} from '../../examples/jsm/shaders/GammaCorrectionShader.js';
 import {GUI} from '../../examples/jsm/libs/lil-gui.module.min.js';
 
 function main() {
@@ -68,7 +69,7 @@ function main() {
     ]);
 
     return function(filter) {
-      const texture = new THREE.DataTexture(identityLUT, 4, 2, THREE.RGBAFormat);
+      const texture = new THREE.DataTexture(identityLUT, 4, 2);
       texture.minFilter = filter;
       texture.magFilter = filter;
       texture.needsUpdate = true;
@@ -113,6 +114,7 @@ function main() {
   {
     const loader = new THREE.TextureLoader();
     bgTexture = loader.load('resources/images/beach.jpg');
+    bgTexture.encoding = THREE.sRGBEncoding;
     const planeGeo = new THREE.PlaneGeometry(2, 2);
     const planeMat = new THREE.MeshBasicMaterial({
       map: bgTexture,
@@ -241,9 +243,7 @@ function main() {
   };
 
   const effectLUT = new ShaderPass(lutShader);
-  effectLUT.renderToScreen = true;
   const effectLUTNearest = new ShaderPass(lutNearestShader);
-  effectLUTNearest.renderToScreen = true;
 
   const renderModel = new RenderPass(scene, camera);
   renderModel.clear = false;  // so we don't clear out the background
@@ -251,17 +251,13 @@ function main() {
 
   renderModel.clear = false;
 
-  const rtParameters = {
-    minFilter: THREE.LinearFilter,
-    magFilter: THREE.LinearFilter,
-    format: THREE.RGBFormat,
-  };
-  const composer = new EffectComposer(renderer, new THREE.WebGLRenderTarget(1, 1, rtParameters));
+  const composer = new EffectComposer(renderer, new THREE.WebGLRenderTarget(1, 1));
 
   composer.addPass(renderBG);
   composer.addPass(renderModel);
   composer.addPass(effectLUT);
   composer.addPass(effectLUTNearest);
+  composer.addPass(new ShaderPass(GammaCorrectionShader));
 
   function resizeRendererToDisplaySize(renderer) {
     const canvas = renderer.domElement;

manual/examples/postprocessing-3dlut-prep.html

@@ -40,6 +40,7 @@ import {GLTFLoader} from '../../examples/jsm/loaders/GLTFLoader.js';
 function main() {
   const canvas = document.querySelector('#c');
   const renderer = new THREE.WebGLRenderer({canvas});
+  renderer.outputEncoding = THREE.sRGBEncoding;
   renderer.autoClearColor = false;
 
   const fov = 45;
@@ -63,6 +64,7 @@ function main() {
   {
     const loader = new THREE.TextureLoader();
     bgTexture = loader.load('resources/images/beach.jpg');
+    bgTexture.encoding = THREE.sRGBEncoding;
     const planeGeo = new THREE.PlaneGeometry(2, 2);
     const planeMat = new THREE.MeshBasicMaterial({
       map: bgTexture,
@@ -167,4 +169,3 @@ function main() {
 main();
 </script>
 </html>
-

manual/examples/postprocessing-3dlut-w-loader.html

@@ -36,6 +36,7 @@ import {GLTFLoader} from '../../examples/jsm/loaders/GLTFLoader.js';
 import {EffectComposer} from '../../examples/jsm/postprocessing/EffectComposer.js';
 import {RenderPass} from '../../examples/jsm/postprocessing/RenderPass.js';
 import {ShaderPass} from '../../examples/jsm/postprocessing/ShaderPass.js';
+import {GammaCorrectionShader} from '../../examples/jsm/shaders/GammaCorrectionShader.js';
 import {GUI} from '../../examples/jsm/libs/lil-gui.module.min.js';
 
 function main() {
@@ -96,7 +97,7 @@ function main() {
     ]);
 
     return function(filter) {
-      const texture = new THREE.DataTexture(identityLUT, 4, 2, THREE.RGBAFormat);
+      const texture = new THREE.DataTexture(identityLUT, 4, 2);
       texture.minFilter = filter;
       texture.magFilter = filter;
       texture.needsUpdate = true;
@@ -197,6 +198,7 @@ function main() {
   {
     const loader = new THREE.TextureLoader();
     bgTexture = loader.load('resources/images/beach.jpg');
+    bgTexture.encoding = THREE.sRGBEncoding;
     const planeGeo = new THREE.PlaneGeometry(2, 2);
     const planeMat = new THREE.MeshBasicMaterial({
       map: bgTexture,
@@ -325,25 +327,19 @@ function main() {
   };
 
   const effectLUT = new ShaderPass(lutShader);
-  effectLUT.renderToScreen = true;
   const effectLUTNearest = new ShaderPass(lutNearestShader);
-  effectLUTNearest.renderToScreen = true;
 
   const renderModel = new RenderPass(scene, camera);
   renderModel.clear = false;  // so we don't clear out the background
   const renderBG = new RenderPass(sceneBG, cameraBG);
 
-  const rtParameters = {
-    minFilter: THREE.LinearFilter,
-    magFilter: THREE.LinearFilter,
-    format: THREE.RGBFormat,
-  };
-  const composer = new EffectComposer(renderer, new THREE.WebGLRenderTarget(1, 1, rtParameters));
+  const composer = new EffectComposer(renderer, new THREE.WebGLRenderTarget(1, 1));
 
   composer.addPass(renderBG);
   composer.addPass(renderModel);
   composer.addPass(effectLUT);
   composer.addPass(effectLUTNearest);
+  composer.addPass(new ShaderPass(GammaCorrectionShader));
 
   function resizeRendererToDisplaySize(renderer) {
     const canvas = renderer.domElement;

manual/examples/postprocessing-3dlut.html

@@ -38,6 +38,7 @@ import {GLTFLoader} from '../../examples/jsm/loaders/GLTFLoader.js';
 import {EffectComposer} from '../../examples/jsm/postprocessing/EffectComposer.js';
 import {RenderPass} from '../../examples/jsm/postprocessing/RenderPass.js';
 import {ShaderPass} from '../../examples/jsm/postprocessing/ShaderPass.js';
+import {GammaCorrectionShader} from '../../examples/jsm/shaders/GammaCorrectionShader.js';
 import {GUI} from '../../examples/jsm/libs/lil-gui.module.min.js';
 
 function main() {
@@ -98,7 +99,7 @@ function main() {
     ]);
 
     return function(filter) {
-      const texture = new THREE.DataTexture(identityLUT, 4, 2, THREE.RGBAFormat);
+      const texture = new THREE.DataTexture(identityLUT, 4, 2);
       texture.minFilter = filter;
       texture.magFilter = filter;
       texture.needsUpdate = true;
@@ -184,6 +185,7 @@ function main() {
   {
     const loader = new THREE.TextureLoader();
     bgTexture = loader.load('resources/images/beach.jpg');
+    bgTexture.encoding = THREE.sRGBEncoding;
     const planeGeo = new THREE.PlaneGeometry(2, 2);
     const planeMat = new THREE.MeshBasicMaterial({
       map: bgTexture,
@@ -312,25 +314,19 @@ function main() {
   };
 
   const effectLUT = new ShaderPass(lutShader);
-  effectLUT.renderToScreen = true;
   const effectLUTNearest = new ShaderPass(lutNearestShader);
-  effectLUTNearest.renderToScreen = true;
 
   const renderModel = new RenderPass(scene, camera);
   renderModel.clear = false;  // so we don't clear out the background
   const renderBG = new RenderPass(sceneBG, cameraBG);
 
-  const rtParameters = {
-    minFilter: THREE.LinearFilter,
-    magFilter: THREE.LinearFilter,
-    format: THREE.RGBFormat,
-  };
-  const composer = new EffectComposer(renderer, new THREE.WebGLRenderTarget(1, 1, rtParameters));
+  const composer = new EffectComposer(renderer, new THREE.WebGLRenderTarget(1, 1));
 
   composer.addPass(renderBG);
   composer.addPass(renderModel);
   composer.addPass(effectLUT);
   composer.addPass(effectLUTNearest);
+  composer.addPass(new ShaderPass(GammaCorrectionShader));
 
   function resizeRendererToDisplaySize(renderer) {
     const canvas = renderer.domElement;

manual/examples/postprocessing-adobe-lut-to-png-converter.html

@@ -171,8 +171,7 @@ function main() {
 
   const rtParameters = {
     minFilter: THREE.NearestFilter,
-    magFilter: THREE.NearestFilter,
-    format: THREE.RGBFormat,
+    magFilter: THREE.NearestFilter
   };
   const composer = new EffectComposer(renderer, new THREE.WebGLRenderTarget(1, 1, rtParameters));
 

manual/resources/threejs-lights.js

@@ -5,12 +5,12 @@ import {threejsLessonUtils} from './threejs-lesson-utils.js';
 {
   function makeCheckerTexture(repeats) {
     const data = new Uint8Array([
-      0x88, 0x88, 0x88, 0xCC, 0xCC, 0xCC,
-      0xCC, 0xCC, 0xCC, 0x88, 0x88, 0x88,
+      0x88, 0x88, 0x88, 0xFF, 0xCC, 0xCC, 0xCC, 0xFF,
+      0xCC, 0xCC, 0xCC, 0xFF, 0x88, 0x88, 0x88, 0xFF
     ]);
     const width = 2;
     const height = 2;
-    const texture = new THREE.DataTexture(data, width, height, THREE.RGBFormat);
+    const texture = new THREE.DataTexture(data, width, height);
     texture.needsUpdate = true;
     texture.wrapS = THREE.RepeatWrapping;
     texture.wrapT = THREE.RepeatWrapping;
@@ -107,4 +107,3 @@ import {threejsLessonUtils} from './threejs-lesson-utils.js';
     },
   });
 }
-