Материал в оригинале можно найти

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

Простой путь

• При использовании Windows убедитесь, что установлена Исполняемая библиотека Microsoft DirectX — ее можно бесплатно скачать с сайта Microsoft.
• После этого установите самую последнюю версию драйверов видеокарты.
• Теперь выбирайте браузер:
  • Firefox: достаточно версии 4 и выше.
  • Chrome: вам нужно просто установить его . Если вы его уже используете, просто проверьте, что он обновлен до версии 10 — почти наверняка это произошло автоматически (версия выпущена в марте 2011), но вы можете убедиться в этом в пункте меню «О браузере Google Chrome».
  • Safari: на Mac, OS X 10.7 имеет поддержку WebGL, но она отключена по умолчанию. Для ее включения зайдите в меню разработчика и отметьте флажок «Включить WebGL».

Сложный путь

Если вы сами разрабатываете на WebGL или вам нужны новейшие возможности, тогда вам просто необходимо иметь самую последнюю версию браузера. WebGL поддерживается в версиях для разработчиков всех браузеров, кроме Internet Explorer, поэтому вам остается просто выбрать подходящую версию для вашего компьютера. Насколько это легко — зависит от того, какой у вас компьютер:

Firefox

«Нестабильная» версия Firefox для разработчиков называется Minefield. Она обновляется каждую ночь и уже довольно надежная: я не замечал падений в последнее время (а я использую ее постоянно). Она может работать наряду с обычной версией Firefox, поэтому не нужно волноваться, что придется удалять ее, если вы прекратите ей пользоваться или просто на время переключитесь в обычную версию Firefox.

Для получения Minefield:

• Открывайте страницу ночных сборок и выбирайте подходящую версию для вашего компьютера. Будьте внимательны! Там может быть множество версий, с именами типа «firefox-10.0a1что-то там» или «firefox-10.0a2что-то там». Вам нужна самая последняя, где будет самое большое число после ‘a’ (альфа) или ‘b’ (бета).
• Запускайте Minefield.

Полезная подсказка — если вы хотите работать с Minefield вместе с обычным Firefox, вы можете сделать это добавлением аргументов командной строки: -P Minefield -no-remote. Первый аргумент запускает его с отдельным профилем (чтобы у вас были раздельные истории и наборы открытых вкладок в каждом браузере), а второй параметр обозначает, что при запуске Minefield, когда Firefox уже открыт, Minefield не будет открыт новой вкладкой в уже запущенном Firefox. Возможно, вы также захотите добавить -P default -no-remote к аргументам запуска обычного Firefox для аналогичного эффекта. Пользователям Windows: вы можете установить аргументы командной строки для любого приложения, кликнув правой кнопкой мыши на иконке приложения, затем выбрав «Свойства» и добавив параметры в конец поля «Объект». Пользователям Mac и Linux — я не знаю, как вы это делаете, но вероятно, что вы и сами в курсе:).

Запуск Minefield с программным рендерингом на Linux

Если ваша видеокарта — или драйвер, что более вероятно — не поддерживают OpenGL 2.0, то единственный способ добиться работы WebGL на Linux — использовать библиотеку под названием Mesa. По существу, Mesa эмулирует видеокарту на программном уровне, поэтому работает она медленнее — но это лучше, чем ничего. Mesa интегрируется с Minefield, «нестабильной» версией Firefox для разработчиков, обычно это часть вашего дистрибутива Linux. И вот как все это можно сделать:

• Скачайте последнюю версию Minefield
• Установите ее (на это время вам нужно будет закрыть все открытые экземпляры Firefox).
• Через менеджер пакетов Linux убедитесь, что Mesa установлена и обновлена до последней версии
• Запускайте Minefield.
• Перейдите на страницу «about:config»
• Отфильтруйте по «webgl»
• Установите значение настройки «webgl.enabled_for_all_sites» в значение «true».
• Установите значение настройки «webgl.software_rendering» в значение «true».
• Пропишите в «webgl.osmesalib» путь к библиотеке OSMesa (обычно это /usr/lib/libOSMesa.so).

Safari

Запомните, что Safari поддерживает WebGL на Mac с системой Snow Leopard (OS X 10.6). Если у вас Leopard (10.5), Windows или Linux, то вам нужно использовать или (при более старой версии OS/X я не знаю браузера, который вы могли бы использовать 🙁).

Итак, если у вас Snow Leopard, вам необходимо:

• Убедитесь, что у вас по крайней мере четвертая версия Safari.
• Загрузите и установите ночную сборку WebKit
• Откройте терминал и выполните в нем команду: defaults write com.apple.Safari WebKitWebGLEnabled -bool YES
• Запустите установленный WebKit

Chromium

Если вы хотите создаете страницы с использованием WebGL, разработчики Chrome рекомендуют использовать ночные сборки Chromium — браузера с открытым исходным кодом, на котором основан Chrome. Схема немного отличается для каждой операционной системы. Здесь инструкции для , и . (Предупреждение: я пробовал только на Windows, но мне сказали, что настройки остальных ОС тоже в порядке. Оставляйте комментарии, если это не так 🙂).

Windows

• Открывайте , прокрутите вниз до самой последней сборки и нажмите на ссылку для получения chrome-win32.zip
• В распакованном каталоге запустите chrome.exe

Macintosh

• Открывайте страницу непрерывной интеграции , прокрутите вниз до самой последней сборки и нажмите на ссылку для получения chrome-mac.zip
• Распакуйте файл в удобном для себя месте
• Откройте терминал и перейдите в распакованный каталог chrome-mac
• Выполните следующую команду: ./Chromium.app/Contents/MacOS/Chromium
• После того как убедитесь, что все работает, вы, возможно, захотите немного автоматизировать вещи, чтобы не набирать команду каждый раз. Julien Limoges подсказал для этого полезный shell-скрипт .

Linux

• Открывайте 32-разрядную или 64-разрядную страницу непрерывной интеграции, прокрутите вниз до самой последней сборки и нажмите на ссылку для получения chrome-linux.zip
• Распакуйте файл в удобном для себя месте
• Убедитесь, что Chrome не запущен
• Выполните следующую команду: ./chrome

Несколько примеров

Если же WebGL работает, то все настроено правильно! К сожалению, последние изменения в WebGL поломали многие примеры, но есть несколько обновленных:

• Один из моих собственных примеров — Отскакивающие кубы Мандельброта
• Реальный пример использования WebGL: ChemDoodle 3D отображает молекулы на веб-страницах
• Много примеров есть в репозитории Khronos и в разделе Wiki Добавленные пользователями . «Эксперименты Chrome» также содержат раздел WebGL . Большая часть примеров работает и в других браузерах.
• И, наконец, если вы хотите видеть лучшие примеры WebGL каждую неделю, подпишитесь на мой блог ! Каждый четверг я публикую сводку новостей WebGL, которые мне удалось найти за прошедшие семь дней и обычно в них входит несколько новых примеров.

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

Устранение неполадок Mac

У меня нет полезных советов и подсказок для настройки WebGL на Mac, потому что никто никогда не просил меня о помощи и я никогда не видел вопросов на форумах. Я могу предположить, что это означает, что на OS X все работает хорошо…

Windows

Самая распространенная проблема на Windows — не установлена исполняемая библиотека DirectX — ее можно бесплатно скачать с сайта Microsoft , поэтому стоит попробовать это сделать. Также стоит проверить, не появилось ли новых драйверов для видеокарты — проверьте в обновлениях Windows или на веб-сайте производителя видеокарты. Если это не сработало, возможно драйвер видеокарты находится в «черном списке». На Windows это случается реже, чем на Linux, но все-таки бывает. Посмотрите для подробностей.

Linux

Чаще всего WebGL не работает на Linux из-за проблем с драйверами видеокарты. Все текущие реализации WebGL в браузерах основаны на OpenGL, которая в свою очередь работает благодаря драйверам видеокарты. Для работы WebGL нужен как минимум OpenGL 2.0. В частности, обладатели видеокарт Intel испытывают проблемы, потому что Intel не выпускает драйвера для большинства своих видеокарт с этой поддержкой. Если у вас видеокарт Intel, попробуйте использовать . Если и это не помогает, то оставьте комментарий и я попробую помочь.

Если у вас видеокарта ATI или Nvidia, первым делом проверьте свою версию OpenGL. Для этого запустите glxinfo и посмотрите на строку с заголовком «OpenGL version string». Если версия, которую вы видите, меньше 2.0, вам необходимо обновить ваши драйвера. Проверьте веб-сайт производителя видеокарты/компьютера и загляните в менеджер пакетов.

Если у вас по-прежнему не работает, возможно производители браузеров занесли в черный список ваш драйвер. Это случается из-за того, что некоторые из них достаточно нестабильны, чтобы привести к аварийному отказу компьютера, что по понятным причинам не является поведением, которое люди ждут от браузера.

По состоянию на 6 октября 2011 года, как выяснил пользователь Nardon , «Google занес в черный список все драйвера Linux, кроме официальных драйверов nVidia … Firefox 6 и выше разрешил большинство последних драйверов ATI, поэтому WebGL должно работать в этом браузере».

Если вы не боитесь аварийных завершений работы и используете драйвер из черного списка, вы можете запустить Chrome с параметром командной строки –ignore-gpu-blacklist и посмотреть, что случится (спасибо Jonas Antunes da Silva за подсказку). Если это не исправит положение вещей, возможно для вашей видеокарты просто нет приличных драйверов для работы OpenGL. Возможно, лучшим выбором для вас будет использование программного рендеринга. Снова оставлю .

Наш код оставшийся от предыдущего примера уже насроен на перерисовку нашей WebGL сцены каждые 15 миллисекунд. До сих пор мы просто отрисовывали в точности одно и то же каждый раз. Пришло время изменить это так, чтобы наш квадрат начал двигаться.

В этом примере мы заставим наш двумерный квадрат вращаться и двигаться во всех трёх направлениях. Это докажет, что не смотря на то, что мы создавали всего-лишь двумерный объект, он всё ещё существует в трёхмерном пространстве.

Заставим квадрат вращаться

Давайте начнём с того, что заставим квадрат вращаться. Для начала нам понадобится переменная значение в которой будет отражать текущий угол поворота нашего квадрата:

Var squareRotation = 0.0;

Теперь нам надо изменить процедуру drawScene() и добавить в неё код, который бы учитывал этот угол поворота при отрисовке квадрата в нашей сцене. После первоначального рассчёта матрицы положения для квадрата мы применяем условия поворота следующим образом:

MvPushMatrix(); mvRotate(squareRotation, );

Этот код сохраняет матрицу текущего положения, затем поворачивает матрицу на текущее значение переменной squareRotation вокруг осей X и Z.

После отрисовки мы восстанавливаем изначальное состояние матрицы положения:

MvPopMatrix();

Мы сохраняем и восстанавливаем состояние матрицы положения чтобы избежать влияние поворота на другие объекты, которые мы можем захотеть отобразить.

Чтобы заставить квадрат крутиться нам нужно добавить в программу код, который будет изменять значение переменной squareRotation во времени. Для этого мы заведём ещё одну переменную в которую будем записывать время последней отрисовки (давайте назовём её lastSquareUpdateTime), затем добавим следующий код в конец нашей процедуры drawScene() :

Var currentTime = (new Date).getTime(); if (lastSquareUpdateTime) { var delta = currentTime - lastSquareUpdateTime; squareRotation += (30 * delta) / 1000.0; } lastSquareUpdateTime = currentTime;

Этот код использует количество времени прошедшего с момента, когда мы в последний раз изменяли значение переменной squareRotation чтобы определить как сильно нужно повернуть квадрат.

Сделаем так, чтобы квадрат начал двигаться

Мы можем также заставить наш квадрат двигаться изменяя его позицию перед отрисовкой. Этим примером мы собираемся продемонстрировать самые основные движения, очевидно, что в реальном мире вы бы сделали что-нибудь менее безумное.

Давайте отслеживать сдвиг положения квадрата по каждой оси в новых переменных:

Var squareXOffset = 0.0; var squareYOffset = 0.0; var squareZOffset = 0.0;

И расстояние на которое нужно сместить квадрат по каждой из осей в следующих переменных:

Var xIncValue = 0.2; var yIncValue = -0.4; var zIncValue = 0.3;

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

SquareXOffset += xIncValue * ((30 * delta) / 1000.0); squareYOffset += yIncValue * ((30 * delta) / 1000.0); squareZOffset += zIncValue * ((30 * delta) / 1000.0); if (Math.abs(squareYOffset) > 2.5) { xIncValue = -xIncValue; yIncValue = -yIncValue; zIncValue = -zIncValue; }

И, наконец, мы добавляем в процедуру drawScene() следующий код:

MvTranslate();

Это заставит наш квадрат двигаться по экрану, приближаясь и удаляясь от наблюдателя и при этом ещё и вращаться. Это похоже на работу заставки

Если ваш браузер поддерживает работу с WebGL, в действии.

Больше операций с матрицами

Этот пример использует несколько дополнительных операций над матрицами включая две утилиты для работы со стэком состояния матриц и одну, поворачивающую матрицу положения на заданное количество градусов. Далее приведён код для вашего удобства:

Var mvMatrixStack = ; function mvPushMatrix(m) { if (m) { mvMatrixStack.push(m.dup()); mvMatrix = m.dup(); } else { mvMatrixStack.push(mvMatrix.dup()); } } function mvPopMatrix() { if (!mvMatrixStack.length) { throw("Can"t pop from an empty matrix stack."); } mvMatrix = mvMatrixStack.pop(); return mvMatrix; } function mvRotate(angle, v) { var inRadians = angle * Math.PI / 180.0; var m = Matrix.Rotation(inRadians, $V()).ensure4x4(); multMatrix(m); }

Эти утилиты были заимствованы из примера разработанного Владом Вукицевичем (Vlad Vukićević).

Последнее обновление: 1.11.2015

Сейчас мы напишем первую программу с использованием технологии WebGL. Фактически это будет не одна программа, а два примера, которые покажут в действии механизм WebGL.

Первый пример

Создадим какую-нибудь веб-страничку со следующим содержимым:

Привет WebGL! Ваш браузер не поддерживает элемент canvas void main(void) { gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0); } attribute vec3 aVertexPosition; void main(void) { gl_Position = vec4(aVertexPosition, 1.0); } var gl; var shaderProgram; var vertexBuffer; // установка шейдеров function initShaders() { // получаем шейдеры var fragmentShader = getShader(gl.FRAGMENT_SHADER, "shader-fs"); var vertexShader = getShader(gl.VERTEX_SHADER, "shader-vs"); //создаем объект программы шейдеров shaderProgram = gl.createProgram(); // прикрепляем к ней шейдеры gl.attachShader(shaderProgram, vertexShader); gl.attachShader(shaderProgram, fragmentShader); // связываем программу с контекстом webgl gl.linkProgram(shaderProgram); if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) { alert("Не удалсь установить шейдеры"); } gl.useProgram(shaderProgram); // установка атрибута программы shaderProgram.vertexPositionAttribute = gl.getAttribLocation(shaderProgram, "aVertexPosition"); // делаем доступным атрибут для использования gl.enableVertexAttribArray(shaderProgram.vertexPositionAttribute); } // Функция создания шейдера по типу и id источника в структуре DOM function getShader(type,id) { var source = document.getElementById(id).innerHTML; // создаем шейдер по типу var shader = gl.createShader(type); // установка источника шейдера gl.shaderSource(shader, source); // компилируем шейдер gl.compileShader(shader); if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) { alert("Ошибка компиляции шейдера: " + gl.getShaderInfoLog(shader)); gl.deleteShader(shader); return null; } return shader; } // установка буфера вершин function initBuffers() { // установка буфера вершин vertexBuffer = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer); // массив координат вершин объекта var triangleVertices = [ 0.0, 0.5, 0.0, -0.5, -0.5, 0.0, 0.5, -0.5, 0.0 ]; gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(triangleVertices), gl.STATIC_DRAW); // указываем кол-во точек vertexBuffer.itemSize = 3; vertexBuffer.numberOfItems = 3; } // отрисовка function draw() { // установка области отрисовки gl.viewport(0, 0, gl.viewportWidth, gl.viewportHeight); gl.clear(gl.COLOR_BUFFER_BIT); // указываем, что каждая вершина имеет по три координаты (x, y, z) gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, vertexBuffer.itemSize, gl.FLOAT, false, 0, 0); // отрисовка примитивов - треугольников gl.drawArrays(gl.TRIANGLES, 0, vertexBuffer.numberOfItems); } window.onload=function(){ // получаем элемент canvas var canvas = document.getElementById("canvas3D"); try { // Сначала пытаемся получить стандартный контекст WegGL // Если не получится, обращаемся к экспериментальному контексту gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl"); } catch(e) {} // Если контекст не удалось получить, выводим сообщение if (!gl) { alert("Ваш браузер не поддерживает WebGL"); } if(gl){ // установка размеров области рисования gl.viewportWidth = canvas.width; gl.viewportHeight = canvas.height; // установка шейдеров initShaders(); // установка буфера вершин initBuffers(); // покрасим фон в бледно-розовый цвет gl.clearColor(1.0, 0.0, 0.0, 0.5); // отрисовка сцены draw(); } }

Я не буду останавливаться на этом коде - основные моменты подробнее мы рассмотрим детально позднее, но, я думаю, комментарии помогут разобраться. Но если вкратце: у нас есть элемент canvas , который представляет полотно для отрисовки сцены WebGL. Далее в виде скриптов javascript объявляются две мини-программы - фрагментный и вершинный шейдер.

Весь код программы находится в обработчике функции window.onload . Вначале нам надо получить контекст gl , через который и буду вестись все основные действия. Далее программа содержит три основные части: установка шейдеров, установка буфера вершин и сама отрисовка.

А пока можно запустить веб-страничку в браузере. И браузер явит нам белый треугольник на красном фоне.

Всего лишь? Это только начало. Позже мы подробнее поговорим о шейдерах, вершинах, геометрических примитивах и т.д. А теперь перейдем ко второму примеру.

Пример 2

Второй пример представляет собой хрестоматийный пример вращающегося куба. Вначале загрузим специальную библиотеку Three.js . Ее минимизированную версию можно найти по адресу Three.js . Перейдем по этому адресу и сохраним весь код на жесткий диск в файл под названием three.min.js . Эта библиотека не является необходимой для работы с WebGL, однако она упрощает работу.

В одном каталоге с загруженной библиотекой создадим файл index.html со следующим содержанием:

Привет WebGL! window.onload=function(){ var camera, scene, renderer; var geometry, material, mesh; init(); animate(); // инициализация начальных значений function init() { // создаем камеру - перспективная проекция camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 1000); // установка z-координаты камеры camera.position.z = 600; // настройка сцены scene = new THREE.Scene(); // настройка геометрии - в качестве геометрии будет куб // настроим его ширину, высоту и длину по оси z geometry = new THREE.CubeGeometry(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); // встраиваем в DOM-структуру страницы document.body.appendChild(renderer.domElement); } // функция анимации function animate() { requestAnimationFrame(animate); // вращение меша вокруг осей mesh.rotation.x += 0.01; mesh.rotation.y += 0.02; // рендеринг сцены - метод, производящий по сути отрисовку renderer.render(scene, camera); } }

Все уже выглядит гораздо круче, а кода гораздо меньше. Да, Three.js, а также другие библиотеки и фреймворки по работе с WebGL значительно упрощают работу с графикой. Но в то же время даже минимизированнные их версии весят очень не мало. Какой способ стоит выбрать - это дело разработчика. В дальнейшем мы будем рассматривать преимущественно работу с чистым WebGL, но также и затронем работу с библиотеками, например, с той же Three.js. А теперь можно переходить уже непосредственно к особенностям технологии.

Почти все современные компьютеры и большинство смартфонов имеют мощные графические процессоры, чаще всего даже мощнее, чем основные процессоры. Но до недавнего времени вся эта мощь не использовалась в веб-страницах. Причина проста: не было нормальных графических библиотек, низкая скорость передачи данных и низкое качество графики, в основном используемой только в 2D .

Но все изменилось с выходом WebGL в последних версиях Firefox и Chrome . API основан на хорошо известном графическом стандарте , дающим доступ через JavaScript плагины к графическому аппаратному обеспечению. Сама 3D графика выводится с помощью элемента canvas из HTML5 .

Так как в Apple следят за стандартами, то ожидаем выхода Safari с поддержкой WebGL . В компании Opera уже тестируют свою собственную версию, ну и как всегда тормозит Microsoft .

И так, если у вас есть последний браузер (Chrome или Firefox ), вы можете посмотреть подборку лучших WebGL сайтов.

1. ROME: "3 Dreams of Black"

— это тот же самый YouTube , только для 3D видео. По умолчанию сервис показывает видео в 2D , но если нажать кнопку Current 3D mode , то можно попробовать различные режимы 3D , в том числе и красно-синий «анаглиф».

18. three.js

И последние три сайта о том, как создавать свои WebGL страницы. У WebGL очень урезанный программный интерфейс, что делает его намного проще во внедрении для создатели браузеров, но для веб-разработчиков это настоящий кошмар, особенно для тех, кто впервые столкнулся с этой технологией.

Большое количество времени было потрачено на создание фреймворков, которые бы облегчили жизнь программистам сайтов, и самый известный из них — это three.js, созданный человеком Mr.doob .

Этот фреймворк использовался при создании "3 Dreams of Black" (в котором Mr.doob был техническим директором), и сейчас это самый популярный выбор веб-программистов, изучающих 3D

Здравствуйте, уважаемые читатели!

В продолжении статей про 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 нужно подключить библиотеку:

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

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