Шпаргалка з WebGL і Three.js

🖥 Прапорці рендера

Передавайте ці опції в конструктор WebGLRenderer. Більшість із них впливають на продуктивність.

Властивості рендера, які слід встановити після створення

🔗 Відповідники Three.js → чистий WebGL

Three.js обгортає кожну концепцію WebGL. Ця таблиця зіставляє класи Three з їхніми базовими GL-викликами — корисно під час написання власних шейдерних проходів або налагодження.

📐 Атрибути BufferGeometry

Вбудовані назви атрибутів, які розпізнають стандартні матеріали Three.js. Власні шейдери можуть використовувати будь-яку назву — підключайте їх через geometry.setAttribute('name', attr).

🖼 Формати текстур

Параметри текстур

const tex = new THREE.TextureLoader().load('diffuse.webp');

tex.colorSpace  = THREE.SRGBColorSpace;       // only for colour maps
tex.wrapS       = THREE.RepeatWrapping;        // horizontal repeat
tex.wrapT       = THREE.RepeatWrapping;        // vertical repeat
tex.repeat.set(4, 4);                       // tile 4×4
tex.minFilter   = THREE.LinearMipmapLinearFilter;
tex.magFilter   = THREE.LinearFilter;
tex.anisotropy  = renderer.capabilities.maxAnisotropy; // sharpness at angles

⚙ Апаратні обмеження

Запитуйте їх під час виконання через renderer.capabilities або чистий gl.getParameter():

🔌 Корисні розширення WebGL

Розширення — це опціональні можливості. У WebGL 2 багато колишніх розширень тепер увійшли до ядра, але деякі все ще потребують явного увімкнення.

Перевірте доступність:

const ext = renderer.extensions.get('EXT_color_buffer_float');
if (!ext) console.warn('Float render targets not supported');

💡 Поширені патерни

Рендер-ціль (позаекранний фреймбуфер)

const rt = new THREE.WebGLRenderTarget(width, height, {
  type: THREE.HalfFloatType,
  format: THREE.RGBAFormat,
  minFilter: THREE.LinearFilter,
  magFilter: THREE.LinearFilter,
  depthBuffer: false,   // skip if no depth test needed
});

renderer.setRenderTarget(rt);
renderer.render(scene, camera);
renderer.setRenderTarget(null); // restore default framebuffer

GPGPU ping-pong (фізика частинок на GPU)

// Two render targets — swap each frame
let [rtA, rtB] = [makeRT(), makeRT()];

function compute() {
  // rtA = read (previous positions), rtB = write (new positions)
  computeMaterial.uniforms.tPrev.value = rtA.texture;
  renderer.setRenderTarget(rtB);
  renderer.render(quadScene, orthoCamera);
  renderer.setRenderTarget(null);
  [rtA, rtB] = [rtB, rtA]; // swap
}

InstancedMesh — 100 тис. обʼєктів, один виклик відмалювання

const mesh = new THREE.InstancedMesh(geometry, material, COUNT);
const matrix = new THREE.Matrix4();

for (let i = 0; i < COUNT; i++) {
  matrix.setPosition(positions[i]);
  mesh.setMatrixAt(i, matrix);
}
mesh.instanceMatrix.needsUpdate = true;
scene.add(mesh);

Звільнення для вивільнення памʼяті GPU

// Always dispose when removing objects from the scene
geometry.dispose();
material.dispose();
texture.dispose();
renderTarget.dispose();
renderer.dispose(); // when tearing down the whole renderer

Перевірка версії WebGL під час виконання

const canvas = document.createElement('canvas');
const gl = canvas.getContext('webgl2');
if (!gl) {
  console.warn('WebGL 2 unavailable — falling back to WebGL 1');
}
// OR use Three's abstraction:
const renderer = new THREE.WebGLRenderer();
console.log(renderer.capabilities.isWebGL2); // true / false