Three.js r160 — рендерер WebGPU, вузлові матеріали TSL та…

Короткий огляд змін

Область	Зміна	Тип
Рендерер	`WebGPURenderer` стабільна бета — поліфіл покриває фолбек на WebGL2	нове
Матеріали	API TSL NodeMaterial замінює `onBeforeCompile` для кастомних шейдерів	нове
Матеріали	`MeshPhysicalMaterial` додає властивості `dispersion` та `iridescence`	покращено
Освітлення	Таблиці пошуку LTC для `RectAreaLight` оновлено для кращого збереження енергії	покращено
Завантажувачі	`GLTFLoader` прибирає застарілу підтримку KHR_materials_pbrSpecularGlossiness	критична зміна
Математика	`Vector3.applyQuaternion` тепер на 8% швидший завдяки оптимізованій формулі	покращено
Геометрія	`BufferGeometry.computeBoundingSphere` тепер коректно обробляє morph targets	покращено

1. Рендерер WebGPU (бета)

WebGPURenderer тепер є імпортом за замовчуванням із three/webgpu. Він автоматично переходить на WebGL2 у браузерах, що не підтримують WebGPU, тож ви можете впровадити його вже сьогодні без додаткових перевірок:

// r160+ — імпорт із нової точки входу
import * as THREE from 'three/webgpu';

const renderer = new THREE.WebGPURenderer({ antialias: true });
await renderer.init();    // ← нове: потрібно очікувати асинхронну ініціалізацію
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

Крок await renderer.init() є новим і його легко пропустити. Без нього GPU-пристрій рендерера не готовий, і перший виклик малювання тихо нічого не намалює. Обгорніть налаштування сцени в асинхронну функцію та очікуйте init перед додаванням будь-яких об'єктів.

2. TSL — Three.js Shading Language

Раніше кастомізація GLSL матеріалу Three.js вимагала непрозорого колбека onBeforeCompile — крихкого впровадження рядків у вихідний код шейдера. TSL замінює це композиційним JavaScript API, який генерує GLSL або WGSL з вузлового графа:

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

const mat = new MeshPhysicalNodeMaterial();

// Замінюємо вузол дифузного кольору процедурною сумішшю
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);

// Працює як із WebGL2, так і з WebGPU рендерерами —
// TSL компілюється в GLSL або WGSL за потреби

Ключові типи вузлів TSL

texture(map, uv) — семплує текстуру за UV- координатами
uniform(value) — виставляє значення JavaScript як uniform на боці GPU
positionWorld, normalWorld, cameraPosition — вбудовані вузли атрибутів
sin, cos, pow, fract, mix, clamp — усі стандартні функції GLSL/WGSL, обгорнуті як tree-shakeable імпорти

3. Нові властивості MeshPhysicalMaterial

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

  // НОВЕ в r160:
  dispersion: 5,           // хроматична аберація (0 = немає, 10 = макс)
  iridescence: 0.8,        // сила тонкоплівкової іридесценції
  iridescenceIOR: 1.3,
  iridescenceThicknessRange: [100, 400],   // [мін, макс] нм
});

4. Критична зміна: GLTFLoader PBR Specular-Glossiness

Підтримку застарілого розширення KHR_materials_pbrSpecularGlossiness видалено з основного GLTFLoader. Якщо ви завантажуєте GLTF-файли, що покладаються на це розширення (поширено для старіших ассетів зі Sketchfab), тепер потрібно використовувати явний плагін розширення:

// r160+ міграція для GLTF-ассетів зі specular-glossiness
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
import { RGBELoader } from 'three/addons/loaders/RGBELoader.js';
// Більше не потрібно — розширення видалено:
// import { KHR_materials_pbrSpecularGlossiness } from 'three/addons/';

// Якщо потрібно, встановіть окремий пакет спільноти:
// npm install three-gltf-extensions
import { KHRM_specularGlossiness } from 'three-gltf-extensions';
const loader = new GLTFLoader();
loader.register(parser => new KHRM_specularGlossiness(parser));