Смотрим на WebGL

Здравствуйте, уважаемые читатели!WebGL_logo-12-8-16-mini

В продолжении статей про Canvas сегодня хотел бы вам рассказать про WebGL.

Чтобы лучше понимать, как мы работаем с WebGL, рекомендую освежить знания по Canvas:

 

WebGL позволяет web-контенту использовать API, основанный на OpenGLES 2.0, для визуализации 3D графики в HTML элементе canvas в браузерах.

WebGL программы состоят из кода управления (JS) и шейдерного кода для эффектов, который выполняется на графическом процессоре.

Сразу пример интересных возможностей WebGL: ссылка

webgl-12-08-16-1

 

Кроссбраузерность WebGL

На момент написания статьи (12.08.16) статистика поддержки браузерами следующая:

caniuse

Как видно из таблицы современные браузеры уже поддерживают WebGL, поэтому можно смело разрабатывать свои крутые приложения 🙂

 

Принцип работы WebGL

Принцип работы в общих чертах хорошо иллюстрирует схема ниже:

rendering-pipeline

Небольшое пояснение:

  1. Процесс начинается с создания массива вершин. Этот массив содержит атрибуты вершин: расположение в 3D пространстве, информацию о текстуре, цвете или нормалей (освещение). Данная информация создается в JavaScript из файлах описания 3D моделей (.obj файлы) или из библиотеки, которая описывает массив вершин геометрических фигур
  2. Затем вершины отправляются на GPU. Вместе с этим мы должны так же передать массив индексов вершин для контроля преобразования вершин в треугольники
  3. GPU читает каждую вершину из буфера вершин и прогоняет ее через вершинные шейдеры. Вершинные шейдеры вычисляют положение вершины на экране, цвет, текстурные координаты
  4. GPU соединяет по 3 вершины в треугольники используя массив индексов
  5. Затем происходит растеризация, приведение изображения к пиксельном фрагментам
  6. Сформированные пиксели проходят через пиксельные шейдеры. Пиксельный шейдер рассчитывает цвет и глубину каждого пикселя. Там же на этом этапе происходит наложение текстуры и расчет освещения. Рассчитанные пиксели помещаются в буфер фреймов (кадров).
  7. Буфер кадров — последняя стадия отрисовки. Результатом его работы является 2D изображение на экране с эффектами глубины

 

Библиотеки для работы с WebGL

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

Ниже приведены несколько популярных библиотек:

  • Three.js(Github) – рассмотрим данную библиотеку
  • PhiloGL(Github) — фокус на лучших практиках JavaScript
  • GLGE(Github) — имеет некоторые свои особенности, например, скелетную анимацию
  • J3D(Github) — позволяет экспортировать сцены из Unity в WebGL

 

Рассмотрим подробнее Three.js и попробуем воспроизвести простой пример

webgl-12-8-16-8

 

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 );

}

 

Результат отработки скрипта:

webgl-12-8-16-2

Live demo — ссылка

 

Примеры игр на Canvas + WebGL

Ниже я хотел бы привести несколько скриншотов того, что можно сделать с помощью WebGL

webgl-12-8-16-3 webgl-12-8-16-4 webgl-12-8-16-7

 

Примеры редакторов на Canvas + WebGL

webgl-12-08-16-6

 

На этом на сегодня все!

До встречи в следующей статье! 😉

 

Автор статьи: Alex. Категория: JavaScript
Дата публикации: 12.08.2016