Three.js r160 — renderer WebGPU, materiały węzłowe TSL i…

Krótkie podsumowanie zmian

Obszar	Zmiana	Typ
Renderer	`WebGPURenderer` stabilna beta — polyfill pokrywa fallback do WebGL2	nowość
Materiały	API TSL NodeMaterial zastępuje `onBeforeCompile` dla niestandardowych shaderów	nowość
Materiały	`MeshPhysicalMaterial` zyskuje właściwości `dispersion` i `iridescence`	ulepszone
Światła	Tablice LUT LTC dla `RectAreaLight` zaktualizowane dla lepszego zachowania energii	ulepszone
Loadery	`GLTFLoader` usuwa przestarzałe wsparcie dla KHR_materials_pbrSpecularGlossiness	zmiana łamiąca
Matematyka	`Vector3.applyQuaternion` jest teraz o 8% szybszy dzięki zoptymalizowanemu wzorowi	ulepszone
Geometria	`BufferGeometry.computeBoundingSphere` poprawnie obsługuje teraz morph targets	ulepszone

1. Renderer WebGPU (beta)

WebGPURenderer jest teraz domyślnym importem z three/webgpu. Automatycznie przełącza się na WebGL2 w przeglądarkach, które nie wspierają WebGPU, więc możesz wdrożyć go już dziś bez dodatkowego sprawdzania:

// r160+ — import z nowego punktu wejścia
import * as THREE from 'three/webgpu';

const renderer = new THREE.WebGPURenderer({ antialias: true });
await renderer.init();    // ← nowość: trzeba oczekiwać asynchronicznej inicjalizacji
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

Krok await renderer.init() jest nowy i łatwo go pominąć. Bez niego urządzenie GPU renderera nie jest gotowe, a pierwsze wywołanie rysowania po cichu nic nie narysuje. Opakuj konfigurację sceny w funkcję asynchroniczną i oczekuj init przed dodaniem jakichkolwiek obiektów.

2. TSL — Three.js Shading Language

Wcześniej dostosowywanie GLSL materiału Three.js wymagało nieprzejrzystego callbacku onBeforeCompile — kruchego wstrzykiwania ciągów znaków do kodu źródłowego shadera. TSL zastępuje to komponowalnym API JavaScript, które generuje GLSL lub WGSL z grafu węzłów:

import { MeshPhysicalNodeMaterial, texture, uv, vec4, mix } from 'three/nodes';

const mat = new MeshPhysicalNodeMaterial();

// Zastępujemy węzeł koloru dyfuzyjnego proceduralną mieszanką
const baseColor = vec4(0.2, 0.5, 1.0, 1.0);
const noiseColor = texture(noiseMap, uv().mul(4.0));
mat.colorNode = mix(baseColor, noiseColor, 0.6);

// Działa zarówno z rendererami WebGL2, jak i WebGPU —
// TSL kompiluje się do GLSL lub WGSL w zależności od potrzeb

Kluczowe typy węzłów TSL

texture(map, uv) — próbkuje teksturę w współrzędnych UV
uniform(value) — udostępnia wartość JavaScript jako uniform po stronie GPU
positionWorld, normalWorld, cameraPosition — wbudowane węzły atrybutów
sin, cos, pow, fract, mix, clamp — wszystkie standardowe funkcje GLSL/WGSL opakowane jako importy z obsługą tree-shakingu

3. Nowe właściwości MeshPhysicalMaterial

const glass = new THREE.MeshPhysicalMaterial({
  transmission: 1,
  roughness: 0,
  thickness: 0.5,
  ior: 1.5,

  // NOWOŚĆ w r160:
  dispersion: 5,           // aberracja chromatyczna (0 = brak, 10 = maks)
  iridescence: 0.8,        // siła cienkowarstwowej iryzacji
  iridescenceIOR: 1.3,
  iridescenceThicknessRange: [100, 400],   // [min, maks] nm
});

4. Zmiana łamiąca: GLTFLoader PBR Specular-Glossiness

Wsparcie dla przestarzałego rozszerzenia KHR_materials_pbrSpecularGlossiness zostało usunięte z podstawowego GLTFLoader. Jeśli wczytujesz pliki GLTF opierające się na tym rozszerzeniu (typowe dla starszych zasobów ze Sketchfab), musisz teraz użyć jawnej wtyczki rozszerzenia:

// migracja r160+ dla zasobów GLTF specular-glossiness
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
import { RGBELoader } from 'three/addons/loaders/RGBELoader.js';
// Już niepotrzebne — rozszerzenie usunięte:
// import { KHR_materials_pbrSpecularGlossiness } from 'three/addons/';

// Jeśli potrzebujesz, zainstaluj osobny pakiet społecznościowy:
// npm install three-gltf-extensions
import { KHRM_specularGlossiness } from 'three-gltf-extensions';
const loader = new GLTFLoader();
loader.register(parser => new KHRM_specularGlossiness(parser));