Update examples

examples-testing/changes.patch

@@ -10463,127 +10463,6 @@ index 0bfb6550..89c4a5c1 100644
          return [
              prefix + 'px' + postfix,
              prefix + 'nx' + postfix,
-diff --git a/examples-testing/examples/webgl_postprocessing_crossfade.ts b/examples-testing/examples/webgl_postprocessing_crossfade.ts
-index 711be871..ec52f236 100644
---- a/examples-testing/examples/webgl_postprocessing_crossfade.ts
-+++ b/examples-testing/examples/webgl_postprocessing_crossfade.ts
-@@ -7,10 +7,10 @@ import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
- import { RenderTransitionPass } from 'three/addons/postprocessing/RenderTransitionPass.js';
- import { OutputPass } from 'three/addons/postprocessing/OutputPass.js';
-
--let stats;
--let renderer, composer, renderTransitionPass;
-+let stats: Stats;
-+let renderer: THREE.WebGLRenderer, composer: EffectComposer, renderTransitionPass: RenderTransitionPass;
-
--const textures = [];
-+const textures: THREE.Texture[] = [];
- const clock = new THREE.Clock();
-
- const params = {
-@@ -23,6 +23,55 @@ const params = {
-     threshold: 0.1,
- };
-
-+class FXScene {
-+    rotationSpeed: THREE.Vector3;
-+
-+    scene: THREE.Scene;
-+    camera: THREE.PerspectiveCamera;
-+    mesh: THREE.InstancedMesh;
-+
-+    render: (delta: number) => void;
-+    resize: () => void;
-+
-+    constructor(geometry: THREE.BufferGeometry, rotationSpeed: THREE.Vector3, backgroundColor: number) {
-+        const camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 0.1, 100);
-+        camera.position.z = 20;
-+
-+        // Setup scene
-+        const scene = new THREE.Scene();
-+        scene.background = new THREE.Color(backgroundColor);
-+        scene.add(new THREE.AmbientLight(0xaaaaaa, 3));
-+
-+        const light = new THREE.DirectionalLight(0xffffff, 3);
-+        light.position.set(0, 1, 4);
-+        scene.add(light);
-+
-+        this.rotationSpeed = rotationSpeed;
-+
-+        const color = geometry.type === 'BoxGeometry' ? 0x0000ff : 0xff0000;
-+        const material = new THREE.MeshPhongMaterial({ color: color, flatShading: true });
-+        const mesh = generateInstancedMesh(geometry, material, 500);
-+        scene.add(mesh);
-+
-+        this.scene = scene;
-+        this.camera = camera;
-+        this.mesh = mesh;
-+
-+        this.render = function (delta) {
-+            if (params.sceneAnimate) {
-+                mesh.rotation.x += this.rotationSpeed.x * delta;
-+                mesh.rotation.y += this.rotationSpeed.y * delta;
-+                mesh.rotation.z += this.rotationSpeed.z * delta;
-+            }
-+        };
-+
-+        this.resize = function () {
-+            camera.aspect = window.innerWidth / window.innerHeight;
-+            camera.updateProjectionMatrix();
-+        };
-+    }
-+}
-+
- const fxSceneA = new FXScene(new THREE.BoxGeometry(2, 2, 2), new THREE.Vector3(0, -0.4, 0), 0xffffff);
- const fxSceneB = new FXScene(new THREE.IcosahedronGeometry(1, 1), new THREE.Vector3(0, 0.2, 0.1), 0x000000);
-
-@@ -139,45 +188,7 @@ function render() {
-     }
- }
-
--function FXScene(geometry, rotationSpeed, backgroundColor) {
--    const camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 0.1, 100);
--    camera.position.z = 20;
--
--    // Setup scene
--    const scene = new THREE.Scene();
--    scene.background = new THREE.Color(backgroundColor);
--    scene.add(new THREE.AmbientLight(0xaaaaaa, 3));
--
--    const light = new THREE.DirectionalLight(0xffffff, 3);
--    light.position.set(0, 1, 4);
--    scene.add(light);
--
--    this.rotationSpeed = rotationSpeed;
--
--    const color = geometry.type === 'BoxGeometry' ? 0x0000ff : 0xff0000;
--    const material = new THREE.MeshPhongMaterial({ color: color, flatShading: true });
--    const mesh = generateInstancedMesh(geometry, material, 500);
--    scene.add(mesh);
--
--    this.scene = scene;
--    this.camera = camera;
--    this.mesh = mesh;
--
--    this.render = function (delta) {
--        if (params.sceneAnimate) {
--            mesh.rotation.x += this.rotationSpeed.x * delta;
--            mesh.rotation.y += this.rotationSpeed.y * delta;
--            mesh.rotation.z += this.rotationSpeed.z * delta;
--        }
--    };
--
--    this.resize = function () {
--        camera.aspect = window.innerWidth / window.innerHeight;
--        camera.updateProjectionMatrix();
--    };
--}
--
--function generateInstancedMesh(geometry, material, count) {
-+function generateInstancedMesh(geometry: THREE.BufferGeometry, material: THREE.MeshPhongMaterial, count: number) {
-     const mesh = new THREE.InstancedMesh(geometry, material, count);
-
-     const dummy = new THREE.Object3D();
 diff --git a/examples-testing/examples/webgl_postprocessing_fxaa.ts b/examples-testing/examples/webgl_postprocessing_fxaa.ts
 index 14b6a357..c6e40d56 100644
 --- a/examples-testing/examples/webgl_postprocessing_fxaa.ts
@@ -11345,6 +11224,128 @@ index b2a12b53..b1efc76c 100644
 
      renderer = new THREE.WebGLRenderer();
      renderer.setPixelRatio(window.devicePixelRatio);
+diff --git a/examples-testing/examples/webgl_postprocessing_transition.ts b/examples-testing/examples/webgl_postprocessing_transition.ts
+index 711be871..39bdfe31 100644
+--- a/examples-testing/examples/webgl_postprocessing_transition.ts
++++ b/examples-testing/examples/webgl_postprocessing_transition.ts
+@@ -7,10 +7,10 @@ import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
+ import { RenderTransitionPass } from 'three/addons/postprocessing/RenderTransitionPass.js';
+ import { OutputPass } from 'three/addons/postprocessing/OutputPass.js';
+
+-let stats;
+-let renderer, composer, renderTransitionPass;
++let stats: Stats;
++let renderer: THREE.WebGLRenderer, composer: EffectComposer, renderTransitionPass: RenderTransitionPass;
+
+-const textures = [];
++const textures: THREE.Texture[] = [];
+ const clock = new THREE.Clock();
+
+ const params = {
+@@ -23,6 +23,56 @@ const params = {
+     threshold: 0.1,
+ };
+
++class FXScene {
++    rotationSpeed: THREE.Vector3;
++
++    scene: THREE.Scene;
++    camera: THREE.PerspectiveCamera;
++    mesh: THREE.InstancedMesh;
++
++    render: (delta: number) => void;
++
++    resize: () => void;
++
++    constructor(geometry: THREE.BufferGeometry, rotationSpeed: THREE.Vector3, backgroundColor: number) {
++        const camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 0.1, 100);
++        camera.position.z = 20;
++
++        // Setup scene
++        const scene = new THREE.Scene();
++        scene.background = new THREE.Color(backgroundColor);
++        scene.add(new THREE.AmbientLight(0xaaaaaa, 3));
++
++        const light = new THREE.DirectionalLight(0xffffff, 3);
++        light.position.set(0, 1, 4);
++        scene.add(light);
++
++        this.rotationSpeed = rotationSpeed;
++
++        const color = geometry.type === 'BoxGeometry' ? 0x0000ff : 0xff0000;
++        const material = new THREE.MeshPhongMaterial({ color: color, flatShading: true });
++        const mesh = generateInstancedMesh(geometry, material, 500);
++        scene.add(mesh);
++
++        this.scene = scene;
++        this.camera = camera;
++        this.mesh = mesh;
++
++        this.render = function (delta) {
++            if (params.sceneAnimate) {
++                mesh.rotation.x += this.rotationSpeed.x * delta;
++                mesh.rotation.y += this.rotationSpeed.y * delta;
++                mesh.rotation.z += this.rotationSpeed.z * delta;
++            }
++        };
++
++        this.resize = function () {
++            camera.aspect = window.innerWidth / window.innerHeight;
++            camera.updateProjectionMatrix();
++        };
++    }
++}
++
+ const fxSceneA = new FXScene(new THREE.BoxGeometry(2, 2, 2), new THREE.Vector3(0, -0.4, 0), 0xffffff);
+ const fxSceneB = new FXScene(new THREE.IcosahedronGeometry(1, 1), new THREE.Vector3(0, 0.2, 0.1), 0x000000);
+
+@@ -139,45 +189,7 @@ function render() {
+     }
+ }
+
+-function FXScene(geometry, rotationSpeed, backgroundColor) {
+-    const camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 0.1, 100);
+-    camera.position.z = 20;
+-
+-    // Setup scene
+-    const scene = new THREE.Scene();
+-    scene.background = new THREE.Color(backgroundColor);
+-    scene.add(new THREE.AmbientLight(0xaaaaaa, 3));
+-
+-    const light = new THREE.DirectionalLight(0xffffff, 3);
+-    light.position.set(0, 1, 4);
+-    scene.add(light);
+-
+-    this.rotationSpeed = rotationSpeed;
+-
+-    const color = geometry.type === 'BoxGeometry' ? 0x0000ff : 0xff0000;
+-    const material = new THREE.MeshPhongMaterial({ color: color, flatShading: true });
+-    const mesh = generateInstancedMesh(geometry, material, 500);
+-    scene.add(mesh);
+-
+-    this.scene = scene;
+-    this.camera = camera;
+-    this.mesh = mesh;
+-
+-    this.render = function (delta) {
+-        if (params.sceneAnimate) {
+-            mesh.rotation.x += this.rotationSpeed.x * delta;
+-            mesh.rotation.y += this.rotationSpeed.y * delta;
+-            mesh.rotation.z += this.rotationSpeed.z * delta;
+-        }
+-    };
+-
+-    this.resize = function () {
+-        camera.aspect = window.innerWidth / window.innerHeight;
+-        camera.updateProjectionMatrix();
+-    };
+-}
+-
+-function generateInstancedMesh(geometry, material, count) {
++function generateInstancedMesh(geometry: THREE.BufferGeometry, material: THREE.MeshPhongMaterial, count: number) {
+     const mesh = new THREE.InstancedMesh(geometry, material, count);
+
+     const dummy = new THREE.Object3D();
 diff --git a/examples-testing/examples/webgl_postprocessing_unreal_bloom.ts b/examples-testing/examples/webgl_postprocessing_unreal_bloom.ts
 index 886f77fd..00666b29 100644
 --- a/examples-testing/examples/webgl_postprocessing_unreal_bloom.ts