Как работать с WebGL и 3D-графикой на веб-страницах с помощью JavaScript?

WebGL — это инструмент, который позволяет создавать интерактивную 3D-графику на веб-страницах с помощью JavaScript. Он является частью стандарта HTML5 и поддерживается большинством современных браузеров, таких как Google Chrome, Mozilla Firefox и Safari.

Для работы с WebGL вам понадобится некоторое предварительное знакомство с основами JavaScript и графики. В этой статье мы рассмотрим основные концепции и примеры использования WebGL для создания 3D-графики на веб-страницах.

Установка и настройка WebGL

Прежде чем начать работу с WebGL, вам потребуется браузер, который его поддерживает. Убедитесь, что у вас установлен последний доступный браузер и включена поддержка WebGL.

Проверить наличие поддержки WebGL можно, открыв любую веб-страницу с 3D-графикой и выполнить следующую проверку:

const canvas = document.createElement('canvas');
const gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl');
if (gl) {
  console.log('WebGL supported');
} else {
  console.log('WebGL not supported');
}

Если в консоли отобразится сообщение «WebGL supported», значит ваш браузер поддерживает WebGL.

Отрисовка простой 3D-сцены

Перейдем к созданию простой 3D-сцены с помощью WebGL. Вначале нам нужно создать холст для отображения графики:

const canvas = document.getElementById('canvas');
const gl = canvas.getContext('webgl');

Затем мы можем настроить видовую и проекционную матрицы, чтобы определить положение и перспективу объектов в сцене:

// Видовая матрица (положение камеры)
const viewMatrix = mat4.create();
mat4.lookAt(viewMatrix, [0, 0, 5], [0, 0, 0], [0, 1, 0]);

// Проекционная матрица (перспектива обзора)
const projectionMatrix = mat4.create();
mat4.perspective(projectionMatrix, 45 * Math.PI / 180, canvas.width / canvas.height, 0.1, 100);

Теперь мы можем создать и отрисовать простой геометрический объект, например, треугольник:

// Создание буфера вершин треугольника
const vertexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
const vertices = [
  -0.5, -0.5, 0.0,
  0.5, -0.5, 0.0,
  0.0, 0.5, 0.0
];
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);

// Создание шейдеров вершин и фрагмента
const vertexShaderSource = `
attribute vec3 position;
uniform mat4 modelViewMatrix;
uniform mat4 projectionMatrix;
void main() {
  gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}`;
const fragmentShaderSource = `
void main() {
  gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); // Красный цвет
}`;

// Создание и компиляция шейдеров
const vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, vertexShaderSource);
gl.compileShader(vertexShader);
const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, fragmentShaderSource);
gl.compileShader(fragmentShader);

// Создание и использование программы шейдеров
const program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
gl.useProgram(program);

// Получение указателя на атрибут и передача данных
const positionAttributeLocation = gl.getAttribLocation(program, 'position');
gl.enableVertexAttribArray(positionAttributeLocation);
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.vertexAttribPointer(positionAttributeLocation, 3, gl.FLOAT, false, 0, 0);

// Установка единиц отображения
const modelViewMatrixUniformLocation = gl.getUniformLocation(program, 'modelViewMatrix');
const projectionMatrixUniformLocation = gl.getUniformLocation(program, 'projectionMatrix');
gl.uniformMatrix4fv(modelViewMatrixUniformLocation, false, viewMatrix);
gl.uniformMatrix4fv(projectionMatrixUniformLocation, false, projectionMatrix);

// Отрисовка треугольника
gl.drawArrays(gl.TRIANGLES, 0, 3);

В результате вы должны увидеть на экране красный треугольник, который привязан к положению камеры и имеет заданную перспективу.

Расширение возможностей с помощью библиотек

При работе с более сложными 3D-сценами на WebGL может быть полезно использовать готовые библиотеки, которые упростят разработку. Некоторые из популярных библиотек включают Three.js, Babylon.js и PixiJS.

Например, с использованием Three.js код для отрисовки треугольника может выглядеть следующим образом:

import * as THREE from 'three';

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;

const geometry = new THREE.BufferGeometry();
const vertices = new Float32Array([
  -0.5, -0.5, 0.0,
  0.5, -0.5, 0.0,
  0.0, 0.5, 0.0
]);
geometry.addAttribute('position', new THREE.BufferAttribute(vertices, 3));

const material = new THREE.MeshBasicMaterial({ color: 0xff0000 });
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
renderer.render(scene, camera);

Вывод

WebGL предоставляет возможность создавать интерактивную 3D-графику на веб-страницах с помощью JavaScript. В этой статье мы рассмотрели основные концепции и примеры использования WebGL, а также упомянули некоторые готовые библиотеки, которые помогут упростить разработку 3D-сцен.