WebGPURenderer: Support Scene.backgroundRotation.

examples-testing/changes.patch

@@ -14103,10 +14103,10 @@ index 54d26d65..824c087a 100644
 
          mesh = new THREE.Mesh(geometry, material);
 diff --git a/examples-testing/examples/webgpu_materials_envmaps.ts b/examples-testing/examples/webgpu_materials_envmaps.ts
-index f49b4ca1..73c27f5c 100644
+index 012a5065..6ca474e3 100644
 --- a/examples-testing/examples/webgpu_materials_envmaps.ts
 +++ b/examples-testing/examples/webgpu_materials_envmaps.ts
-@@ -1,11 +1,13 @@
+@@ -1,11 +1,20 @@
 -import * as THREE from 'three';
 +import * as THREE from 'three/webgpu';
 
@@ -14120,7 +14120,14 @@ index f49b4ca1..73c27f5c 100644
 +let textureEquirec: THREE.Texture, textureCube: THREE.CubeTexture;
 +let sphereMesh: THREE.Mesh,
 +    sphereMaterial: THREE.MeshBasicMaterial,
-+    params: { Cube: () => void; Equirectangular: () => void; Refraction: boolean };
++    params: {
++        Cube: () => void;
++        Equirectangular: () => void;
++        Refraction: boolean;
++        backgroundRotationX: boolean;
++        backgroundRotationY: boolean;
++        backgroundRotationZ: boolean;
++    };
 
  init();
 

examples-testing/examples/misc_animation_keys.ts

@@ -0,0 +1,132 @@
+import * as THREE from 'three';
+
+import Stats from 'three/addons/libs/stats.module.js';
+
+let stats: Stats, clock: THREE.Clock;
+let scene: THREE.Scene, camera: THREE.PerspectiveCamera, renderer: THREE.WebGLRenderer, mixer: THREE.AnimationMixer;
+
+init();
+
+function init() {
+    scene = new THREE.Scene();
+
+    //
+
+    camera = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 1, 1000);
+    camera.position.set(25, 25, 50);
+    camera.lookAt(scene.position);
+
+    //
+
+    const axesHelper = new THREE.AxesHelper(10);
+    scene.add(axesHelper);
+
+    //
+
+    const geometry = new THREE.BoxGeometry(5, 5, 5);
+    const material = new THREE.MeshBasicMaterial({
+        color: 0xffffff,
+        transparent: true,
+    });
+    const mesh = new THREE.Mesh(geometry, material);
+    scene.add(mesh);
+
+    // create a keyframe track (i.e. a timed sequence of keyframes) for each animated property
+    // Note: the keyframe track type should correspond to the type of the property being animated
+
+    // POSITION
+    const positionKF = new THREE.VectorKeyframeTrack('.position', [0, 1, 2], [0, 0, 0, 30, 0, 0, 0, 0, 0]);
+
+    // SCALE
+    const scaleKF = new THREE.VectorKeyframeTrack('.scale', [0, 1, 2], [1, 1, 1, 2, 2, 2, 1, 1, 1]);
+
+    // ROTATION
+    // Rotation should be performed using quaternions, using a THREE.QuaternionKeyframeTrack
+    // Interpolating Euler angles (.rotation property) can be problematic and is currently not supported
+
+    // set up rotation about x axis
+    const xAxis = new THREE.Vector3(1, 0, 0);
+
+    const qInitial = new THREE.Quaternion().setFromAxisAngle(xAxis, 0);
+    const qFinal = new THREE.Quaternion().setFromAxisAngle(xAxis, Math.PI);
+    const quaternionKF = new THREE.QuaternionKeyframeTrack(
+        '.quaternion',
+        [0, 1, 2],
+        [
+            qInitial.x,
+            qInitial.y,
+            qInitial.z,
+            qInitial.w,
+            qFinal.x,
+            qFinal.y,
+            qFinal.z,
+            qFinal.w,
+            qInitial.x,
+            qInitial.y,
+            qInitial.z,
+            qInitial.w,
+        ],
+    );
+
+    // COLOR
+    const colorKF = new THREE.ColorKeyframeTrack(
+        '.material.color',
+        [0, 1, 2],
+        [1, 0, 0, 0, 1, 0, 0, 0, 1],
+        THREE.InterpolateDiscrete,
+    );
+
+    // OPACITY
+    const opacityKF = new THREE.NumberKeyframeTrack('.material.opacity', [0, 1, 2], [1, 0, 1]);
+
+    // create an animation sequence with the tracks
+    // If a negative time value is passed, the duration will be calculated from the times of the passed tracks array
+    const clip = new THREE.AnimationClip('Action', 3, [scaleKF, positionKF, quaternionKF, colorKF, opacityKF]);
+
+    // setup the THREE.AnimationMixer
+    mixer = new THREE.AnimationMixer(mesh);
+
+    // create a ClipAction and set it to play
+    const clipAction = mixer.clipAction(clip);
+    clipAction.play();
+
+    //
+
+    renderer = new THREE.WebGLRenderer({ antialias: true });
+    renderer.setPixelRatio(window.devicePixelRatio);
+    renderer.setSize(window.innerWidth, window.innerHeight);
+    renderer.setAnimationLoop(animate);
+    document.body.appendChild(renderer.domElement);
+
+    //
+
+    stats = new Stats();
+    document.body.appendChild(stats.dom);
+
+    //
+
+    clock = new THREE.Clock();
+
+    //
+
+    window.addEventListener('resize', onWindowResize);
+}
+
+function onWindowResize() {
+    camera.aspect = window.innerWidth / window.innerHeight;
+    camera.updateProjectionMatrix();
+
+    renderer.setSize(window.innerWidth, window.innerHeight);
+}
+
+function animate() {
+    const delta = clock.getDelta();
+
+    if (mixer) {
+        mixer.update(delta);
+    }
+
+    renderer.render(scene, camera);
+
+    stats.update();
+}

examples-testing/examples/webgl_buffergeometry.ts

@@ -0,0 +1,178 @@
+import * as THREE from 'three';
+
+import Stats from 'three/addons/libs/stats.module.js';
+
+let container: HTMLElement, stats: Stats;
+
+let camera: THREE.PerspectiveCamera, scene: THREE.Scene, renderer: THREE.WebGLRenderer;
+
+let mesh: THREE.Mesh;
+
+init();
+animate();
+
+function init() {
+    container = document.getElementById('container')!;
+
+    //
+
+    camera = new THREE.PerspectiveCamera(27, window.innerWidth / window.innerHeight, 1, 3500);
+    camera.position.z = 2750;
+
+    scene = new THREE.Scene();
+    scene.background = new THREE.Color(0x050505);
+    scene.fog = new THREE.Fog(0x050505, 2000, 3500);
+
+    //
+
+    scene.add(new THREE.AmbientLight(0xcccccc));
+
+    const light1 = new THREE.DirectionalLight(0xffffff, 1.5);
+    light1.position.set(1, 1, 1);
+    scene.add(light1);
+
+    const light2 = new THREE.DirectionalLight(0xffffff, 4.5);
+    light2.position.set(0, -1, 0);
+    scene.add(light2);
+
+    //
+
+    const triangles = 160000;
+
+    const geometry = new THREE.BufferGeometry();
+
+    const positions = [];
+    const normals = [];
+    const colors = [];
+
+    const color = new THREE.Color();
+
+    const n = 800,
+        n2 = n / 2; // triangles spread in the cube
+    const d = 12,
+        d2 = d / 2; // individual triangle size
+
+    const pA = new THREE.Vector3();
+    const pB = new THREE.Vector3();
+    const pC = new THREE.Vector3();
+
+    const cb = new THREE.Vector3();
+    const ab = new THREE.Vector3();
+
+    for (let i = 0; i < triangles; i++) {
+        // positions
+
+        const x = Math.random() * n - n2;
+        const y = Math.random() * n - n2;
+        const z = Math.random() * n - n2;
+
+        const ax = x + Math.random() * d - d2;
+        const ay = y + Math.random() * d - d2;
+        const az = z + Math.random() * d - d2;
+
+        const bx = x + Math.random() * d - d2;
+        const by = y + Math.random() * d - d2;
+        const bz = z + Math.random() * d - d2;
+
+        const cx = x + Math.random() * d - d2;
+        const cy = y + Math.random() * d - d2;
+        const cz = z + Math.random() * d - d2;
+
+        positions.push(ax, ay, az);
+        positions.push(bx, by, bz);
+        positions.push(cx, cy, cz);
+
+        // flat face normals
+
+        pA.set(ax, ay, az);
+        pB.set(bx, by, bz);
+        pC.set(cx, cy, cz);
+
+        cb.subVectors(pC, pB);
+        ab.subVectors(pA, pB);
+        cb.cross(ab);
+
+        cb.normalize();
+
+        const nx = cb.x;
+        const ny = cb.y;
+        const nz = cb.z;
+
+        normals.push(nx, ny, nz);
+        normals.push(nx, ny, nz);
+        normals.push(nx, ny, nz);
+
+        // colors
+
+        const vx = x / n + 0.5;
+        const vy = y / n + 0.5;
+        const vz = z / n + 0.5;
+
+        color.setRGB(vx, vy, vz);
+
+        const alpha = Math.random();
+
+        colors.push(color.r, color.g, color.b, alpha);
+        colors.push(color.r, color.g, color.b, alpha);
+        colors.push(color.r, color.g, color.b, alpha);
+    }
+
+    function disposeArray(this: THREE.BufferAttribute) {
+        this.array = null as unknown as THREE.TypedArray;
+    }
+
+    geometry.setAttribute('position', new THREE.Float32BufferAttribute(positions, 3).onUpload(disposeArray));
+    geometry.setAttribute('normal', new THREE.Float32BufferAttribute(normals, 3).onUpload(disposeArray));
+    geometry.setAttribute('color', new THREE.Float32BufferAttribute(colors, 4).onUpload(disposeArray));
+
+    geometry.computeBoundingSphere();
+
+    const material = new THREE.MeshPhongMaterial({
+        color: 0xd5d5d5,
+        specular: 0xffffff,
+        shininess: 250,
+        side: THREE.DoubleSide,
+        vertexColors: true,
+        transparent: true,
+    });
+
+    mesh = new THREE.Mesh(geometry, material);
+    scene.add(mesh);
+
+    //
+
+    renderer = new THREE.WebGLRenderer({ antialias: true });
+    renderer.setPixelRatio(window.devicePixelRatio);
+    renderer.setSize(window.innerWidth, window.innerHeight);
+    renderer.setAnimationLoop(animate);
+    container.appendChild(renderer.domElement);
+
+    //
+
+    stats = new Stats();
+    container.appendChild(stats.dom);
+
+    //
+
+    window.addEventListener('resize', onWindowResize);
+}
+
+function onWindowResize() {
+    camera.aspect = window.innerWidth / window.innerHeight;
+    camera.updateProjectionMatrix();
+
+    renderer.setSize(window.innerWidth, window.innerHeight);
+}
+
+//
+
+function animate() {
+    const time = Date.now() * 0.001;
+
+    mesh.rotation.x = time * 0.25;
+    mesh.rotation.y = time * 0.5;
+
+    renderer.render(scene, camera);
+
+    stats.update();
+}