Здравствуйте, уважаемые читатели!
В продолжении статей про Canvas сегодня хотел бы вам рассказать про WebGL.
Чтобы лучше понимать, как мы работаем с WebGL, рекомендую освежить знания по Canvas:
WebGL позволяет web-контенту использовать API, основанный на OpenGLES 2.0, для визуализации 3D графики в HTML элементе canvas в браузерах.
WebGL программы состоят из кода управления (JS) и шейдерного кода для эффектов, который выполняется на графическом процессоре.
Сразу пример интересных возможностей WebGL: ссылка
Кроссбраузерность WebGL
На момент написания статьи (12.08.16) статистика поддержки браузерами следующая:
Как видно из таблицы современные браузеры уже поддерживают WebGL, поэтому можно смело разрабатывать свои крутые приложения 🙂
Принцип работы WebGL
Принцип работы в общих чертах хорошо иллюстрирует схема ниже:
Небольшое пояснение:
- Процесс начинается с создания массива вершин. Этот массив содержит атрибуты вершин: расположение в 3D пространстве, информацию о текстуре, цвете или нормалей (освещение). Данная информация создается в JavaScript из файлах описания 3D моделей (.obj файлы) или из библиотеки, которая описывает массив вершин геометрических фигур
- Затем вершины отправляются на GPU. Вместе с этим мы должны так же передать массив индексов вершин для контроля преобразования вершин в треугольники
- GPU читает каждую вершину из буфера вершин и прогоняет ее через вершинные шейдеры. Вершинные шейдеры вычисляют положение вершины на экране, цвет, текстурные координаты
- GPU соединяет по 3 вершины в треугольники используя массив индексов
- Затем происходит растеризация, приведение изображения к пиксельном фрагментам
- Сформированные пиксели проходят через пиксельные шейдеры. Пиксельный шейдер рассчитывает цвет и глубину каждого пикселя. Там же на этом этапе происходит наложение текстуры и расчет освещения. Рассчитанные пиксели помещаются в буфер фреймов (кадров).
- Буфер кадров — последняя стадия отрисовки. Результатом его работы является 2D изображение на экране с эффектами глубины
Библиотеки для работы с WebGL
WebGL API очень низкоуровневый. Писать довольно сложно. Рекомендуется использовать библиотеки, которые написали умельцы с разных уголков земли.
Ниже приведены несколько популярных библиотек:
- Three.js(Github) – рассмотрим данную библиотеку
- PhiloGL(Github) — фокус на лучших практиках JavaScript
- GLGE(Github) — имеет некоторые свои особенности, например, скелетную анимацию
- J3D(Github) — позволяет экспортировать сцены из Unity в WebGL
Рассмотрим подробнее Three.js и попробуем воспроизвести простой пример
Three.js
Для того, чтобы начать работать с three.js нужно подключить библиотеку:
<script src="js/three.min.js"></script>
Далее создадим простую сцену и добавим на нее вращающийся куб. Для этого нам понадобится всего несколько переменных и 2 функции:
var scene, camera, renderer; var geometry, material, mesh; init(); animate();
Определим наши функции:
function init() { scene = new THREE.Scene(); camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 10000 ); camera.position.z = 1000; geometry = new THREE.BoxGeometry( 200, 200, 200 ); material = new THREE.MeshBasicMaterial( { color: 0xff0000, wireframe: true } ); mesh = new THREE.Mesh( geometry, material ); scene.add( mesh ); renderer = new THREE.WebGLRenderer(); renderer.setSize( window.innerWidth, window.innerHeight ); document.body.appendChild( renderer.domElement ); } function animate() { requestAnimationFrame( animate ); mesh.rotation.x += 0.01; mesh.rotation.y += 0.02; renderer.render( scene, camera ); }
Результат отработки скрипта:
Live demo — ссылка
Примеры игр на Canvas + WebGL
Ниже я хотел бы привести несколько скриншотов того, что можно сделать с помощью WebGL
Примеры редакторов на Canvas + WebGL
На этом на сегодня все!
До встречи в следующей статье! 😉