webgl что это такое
WebGL для всех
Идея данной статьи родилась после нескольких мучительных недель изучения WebGL. На личном примере выяснилось, что люди, не сталкивающиеся до этого с 3D-графикой, имеют в основном ошибочные представления о работе данной технологии. К тому же была проблема с поиском информации в интернете.
WebGL, в отличие от Javascript, имеет высокий порог вхождения, его до сих пор мало кто использует, а ещё меньше тех, кто об этом пишет. Большинство руководств или статей перепрыгивают сразу на использование какой-нибудь библиотеки. Но мы-то с вами знаем, что большие универсальные инструменты не всегда пригодны для наших задач или, возможно, делают это на неприемлемом уровне: проигрывают в скорости, поставляются с ненужным багажом и т.д.
Этой статьёй хочется облегчить порог вхождения в чистый WebGL, дать начальное представление и подсказать, куда двигаться дальше.
Технология WebGL позволяет рисовать графику в браузере, используя возможности видеокарты, тогда как раньше мы могли использовать только процессор. Если вы не понимаете, что это даёт, советую посмотреть эту небольшую демонстрацию.
WebGL основан на OpenGL ES 2.0, который, в свою очередь, является специальной версией для работы на мобильных устройствах. Спецификация WebGL была выпущена в 2011 году, разрабатывается и поддерживается некоммерческой организацией Kronos Group, сайт которой частенько лежит, что ещё более усложняет изучение. Известно, что в настоящее время идёт разработка спецификации версии 2.0.
Статистика поддержки WebGL разными браузерами с сайта caniuse.com
WebGL доступен в большинстве современных браузеров и поддерживается у 83% пользователей. Приятным бонусом разработки на WebGL является то, что вы будете поддерживать только современные браузеры и забудете о кошмарах ECMAScript 3.
Если вы думаете, что WebGL рисует 3D, вы ошибаетесь. WebGL ничего не знает о 3D, это скорее низкоуровневый 2D API, и всё что он умеет делать, это рисовать треугольники. Но он умеет рисовать их очень много и очень быстро.
Хотите нарисовать квадрат? Пожалуйста, соедините два треугольника. Нужна линия? Без проблем, всего лишь несколько последовательно соединенных треугольников.
Как нарисовать треугольник
Поскольку все фигуры в WebGL состоят из треугольников, поэтапно разберём, как отобразить один треугольник.
В отличие от OpenGL, в WebGL для отрисовки используются только шейдеры. Шейдеры никак не связаны, как вы могли бы подумать, с тенями или затенениями. Возможно, задумывались они именно для этого, но теперь используются для рисования всего и вся повсеместно.
Шейдер — это программа, выполняемая на видеокарте и использующая язык GLSL. Этот язык достаточно простой, и его изучение не представляет проблемы.
Всего есть два вида шейдеров: вершинный и фрагментый, и для отрисовки абсолютно любой фигуры всегда используются оба. Разберёмся с каждым по очереди.
Чтобы понять суть работы вершинного шейдера, абстрагируемся от задачи с треугольником и предположим, что вы хотите нарисовать куб или любую другую фигуру со множеством вершин. Для этого вам нужно задать её геометрию, а геометрия в свою очередь задаётся с помощью указания координат вершин. Было бы накладно самим каждый раз вычислять новые координаты всех вершин при изменении положения куба в пространстве. Такую работу лучше переложить с процессора на видеокарту, для этого и существует вершинный шейдер.
В него передаются координаты вершин фигуры и положение локальной системы координат, в которой эти вершины заданы. Вершинный шейдер вызывается для каждой из вершин, он вычисляет их положение в глобальной системе координат и передаёт дальше для работы фрагментного шейдера.
Вершинный шейдер всегда вычисляет положение вершин, но попутно он может выполнять и другую работу, например, подсчёт угла падения света. Энтузиасты делают потрясающие вещи, используя возможности вершинных шейдеров.
Знания положения фигуры недостаточно, чтобы её нарисовать. Необходима также информация о том, как должна быть раскрашена фигура, для этого служит фрагментный шейдер. Он вызывается для каждой точки поверхности фигуры и на основе переданной информации вычисляет цвет пикселя на экране.
Если вершинный шейдер определяет геометрию фигуры, то фрагментный — её цвет
Как уже было сказано выше, код шейдеров пишется на языке GLSL. Рассмотрим код шейдеров для треугольника:
Пример вершинного шейдера:
Пример фрагментного шейдера:
Код состоит из переменных и главной функции, возвращающей основной результат работы шейдера: gl_Position передаёт координаты, а gl_FragColor устанавливает цвет.
Значения varying переменных внутри треугольника вычисляются
на основе значений этих переменных в вершинах
Попробуем инициализировать данные шейдеры. Для начала получим контекст WebGL:
Код шейдеров представляется обычной строкой и для использования его нужно скомпилировать:
Для связывания двух типов шейдеров вместе используется шейдерная программа:
Если uniform-переменные связываются напрямую с переменными из js, то для атрибутов нужно использовать ещё одну сущность — буферы. Данные буферов хранятся в памяти видеокарты, что даёт значительный прирост в скорости рендеринга.
Создадим аналогичным образом буфер цветов. Цвет указываем для каждой из вершин в формате RGB, где каждая компонента цвета от 0 до 1:
Всё, что нам осталось, чтобы нарисовать треугольник, — это связать данные с переменными шейдерной программы и вызвать методы отрисовки. Для этого:
Наш треугольник готов:
Полный код примера можно
посмотреть здесь
Как я и говорил, цвет пикселей внутри треугольника линейно интерполируется между разноцветными вершинами. Мы смогли нарисовать самую простейшую фигуру с помощью WebGL и познакомились с шейдерами и буферами. Перейдём к следующему этапу.
Как нарисовать куб и заставить его вращаться
Попробуем усложнить задачу и нарисуем трёхмерный вращающийся куб. Куб будет состоять из шести граней, в каждой по два треугольника:
Нам придётся прописать каждую вершину каждого треугольника. Есть способы использовать более короткую запись, но для начала сделаем по-простому:
Положение треугольника в пространстве задавалось с помощью вектора размерности три. Но фигура может не только менять положение, она может ещё вращаться и масштабироваться. Поэтому в трёхмерной графике используются не вектор положения, а матрица.
Известно, что матрица поворота в трёхмерном пространстве задаётся с помощью матрицы размером 3×3. К этой матрице добавляется вектор положения, таким образом, в итоге используется матрица 4×4.
WebGL никак не помогает нам работать с матрицами, поэтому, чтобы не тратить на них много времени, будем использовать довольно известную библиотеку glMatrix. Создадим с помощью неё единичную матрицу положения:
Чтобы отрисовать трёхмерный объект, нам нужно ввести понятие камеры. Камера, как и любой объект, имеет своё положение в пространстве. Она также определяет, какие объекты будут видны на экране, и отвечает за преобразование фигур так, чтобы на экране у нас создалась иллюзия 3D.
Перспектива куба на экране
За это преобразование отвечает матрица перспективы. C glMatrix она создаётся в две строчки:
В отличие от треугольника, в шейдерах для куба дополнительно используется матрица положения и матрица камеры:
Инициализация шейдеров происходит точно так же, как и в случае треугольника:
Чтобы куб не стоял на месте, а вращался, необходимо постоянно менять его положение и обновлять кадр. Обновление происходит по средствам вызова встроенной функции requestAnimationFrame.
В отличие от других подобных методов, requestAnimationFrame вызывает переданную функцию только когда видеокарта свободна и готова к отрисовке следующего кадра.
Получаем вращающийся куб:
Полный код примера можно
посмотреть здесь
Мы научились рисовать простой куб, поняли, как заставить его вращаться, и познакомились с понятиями матрицы положения и камеры.
Как отлаживать
Поскольку при работе с WebGL часть программы исполняется на стороне видеокарты, процесс отладки значительно усложняется. Нет привычных инструментов в виде DevTools и даже console.log. В интернете есть множество статей и докладов на эту тему, здесь же приведу лишь основные способы.
Чтобы понять, что код шейдеров был написан с ошибкой, после компиляции шейдеров можно использовать следующий метод:
Также есть специальное расширение для браузеров WebGL-Inspector. Оно позволяет отследить загруженные шейдеры, буферы, текстуры в видеокарту, и вызовы методов WebGL.
Ещё есть Shader Editor, в Firefox DevTools этот функционал уже встроен, а для Chrome есть расширение, которое позволяет редактировать код шейдеров прямо в процессе работы приложения.
Куда двигаться дальше
В статье я попробовал осветить основные моменты, которые могут вызвать трудности во время изучения WebGL. Несмотря на то, что в работе требуется использовать разные векторы, матрицы и проекции, знать, как всё устроено внутри, необязательно. WebGL — отличный инструмент для решения целого ряда задач, и использовать его можно не только в геймдеве. Не бойтесь пробовать что-то новое, открывать для себя новые технологии и экспериментировать.
Знакомство с WebGL
Введение
Статья создана с целью показать основные действия, необходимые для отображения 3d в современном браузере, используя технологию WebGL. Для достижения цели рассмотрим задачу построения нескольких линий в трехмерном пространстве.
1. WebGL-контекст
WebGL контекст возможно получить из DOM-элемента canvas, вызвав метод getContext(“experimental-webgl”). Следует заметить, что Khronos Group рекомендует (https://www.khronos.org/webgl/wiki/FAQ) для получения контекста WebGL использовать следующий способ:
При успешном получении контекста объект gl имеет методы, названия которых очень похожи на функции OpenGL ES. Например, функция clear(COLOR_BUFFER_BIT) для WebGL будет gl.clear(gl.COLOR_BUFFER_BIT), что очень удобно. Но следует помнить, что не все функции WebGL имеют такой же синтаксис, как и функции OpenGL ES 2.0.
2. Шейдеры
Шейдерная программа является неотъемлемой частью построения изображений с помощью WebGL. Именно через нее задается положение и цвет каждой вершины наших линий. В нашей задаче используется два шейдера: вершинный и фрагментный. При построении линий в трехмерном пространстве вершинный шейдер отвечает за положение вершин в пространстве, основываясь на значениях видовой матрицы и матрицы перспективной проекции. Фрагментный шейдер используется для вычисления цвета наших линий.
Вершинный шейдер
Фрагментный шейдер
То, что определено после «uniform» является общим для всех вершин. Здесь это матрицы преобразования: видовая и перспективная. То, что определено после «attribute» используется при вычислении каждой вершины. Здесь это положение вершины и ее цвет. После «varying» определяем переменную, которая будет передана из вершинного во фрагментный шейдер. Результат вычисления положения присваиваем переменной gl_Position, цвета — gl_FragColor.
3. Модельно-видовая матрица и матрица перспективной проекции
Обе матрицы имеют размер 4х4 и используются для расчета отображения трехмерных объектов на двумерную плоскость. Их различие в том, что видовая матрица определяет, как объекты будут выглядеть для наблюдателя, например, при изменении его положения, а матрица проекции изначально задает способ проецирования.
В нашей программе значения матрицы проекции задаются при вызове функции gluPerspective на этапе инициализации, в дальнейшем эта матрица не меняет своих значений. Функция gluPerspective не является стандартной, ее мы определили сами. Ее аргументы: fovy, aspect, zNear, zFar. fovy — область угла просмотра по вертикали в градусах; aspect — отношение ширины области просмотра к высоте; zNear — расстояние до ближней плоскости отсечения (всё что ближе — не рисуется); zFar — расстояние до дальней плоскости отсечения (всё что дальше — не рисуется).
Для задания значений модельно-видовой матрицы можно использовать несколько подходов. Например, создать и использовать функцию gluLookAt ( camX, camY, camZ, tarX, tarY, tarZ, upX, upY, upZ) – аналог функции для OpenGL, которая принимает в качестве аргументов координаты положение камеры, координаты цели камеры и up-вектор камеры. Другой способ, это создание и использование функций glTranslate, glRotate, glScale, которые производят сдвиг, вращение, масштабирование относительно наблюдателя (камеры). Для первичного определения положения камеры можно использовать gluLookAt, а для последующих преобразований использовать glTranslate, glRotate, glScale. Так или иначе, эти функции лишь изменяют значения одной и той же модельно-видовой матрицы. Для удобства вычисления матриц можно использовать библиотеку sylvester.js, что мы и будем делать.
Теперь, когда нашли способ изменять значения обеих матриц, рассмотрим их передачу программе шейдеров. В нашем вершинном шейдере для модельно-видовой матрицы мы используем переменную «mvMatrix». Чтобы передать этой переменной значения матрицы, нам нужно сначала получить ее индекс в программе. Для этого используем функцию loc=gl.getUniformLocation ( shaderProgram, name ), которая является стандартной. Как несложно догадаться, первый аргумент – переменная, указывающая на программу шейдеров, которая получена на втором этапе, а аргумент «name» — имя переменной, которой мы хотим передать значение, в нашем случае name= «mvMatrix». Теперь, получив индекс, используем функцию gl.uniformMatrix4fv ( loc, false, new Float32Array(mat.flatten())) для передачи значения матрицы mat. Аналогично, получаем индекс и устанавливаем значение для матрицы проекции. Следует помнить, что видовую матрицу в шейдерной программе нужно обновлять всякий раз при изменении ее значений, чтобы они вступили в силу.
4. Буферы данных
Использование буферов в WebGL обязательно. Положение каждой точки и ее цвет будем хранить в двух буферах. Рассмотрим фрагмент кода, выполняющий всю работу для буфера, хранящего координаты точек, между которыми будем рисовать прямые.
Здесь verticies – массив координат точек линий. Координаты идут по 6 штук, первые 3 из которых – x-, y-, z-координата начала линии, следующие, соответственно, конца. vPosLoc – это индекс атрибута «aVertexPosition» в шейдерной программе. Т.к. в нашей программе были явно заданы индексы с помощью gl.bindAttribLocation (shaderProgram, loc, shadersAttrib) на этапе сборки шейдерной программы, то получать их еще раз не нужно. Если бы такого не было, то следует получить индекс, используя команду «vPosLoc = getAttribLocation(shaderProgram, «aVertexPosition»)». Аналогичные действия проводятся и со вторым буфером, отличаться будет данными (вместо verticies массив цветов) и индексом в шейдерной программе (вместо vPosLoc).
5. Рисуем
Очистка буфера цвета или, проще говоря, задание фона произведем стандартными командами
Теперь выполним рисование
Первый аргумент этой функции говорит, что будем рисовать именно линии, второй – индекс в буфере, с которого начнем рисование, drawArrayLength – количество элементов для рисования. Т.к. мы в буфер передаем координаты вершин из массива verticies, то
Если у нас изменились прямые, то выполняем шаги 4, 5 для перерисовки. Если у нас изменилось положение камеры, то выполняем шаг 3 и шаг 5.
Заключение
Задача построения прямых линий взята не с потолка. Есть программа, которая решает систему дифференциальных уравнений и строит результат в 3d, используя OpenGL. Было решено перенести программу на php и отображать результат, используя WebGL. Для решения задачи об отображении в трехмерном пространстве прямых были изучены современные engine из списка (http://ru.wikipedia.org/wiki/WebGL): WebGLU, GLGE, C3DL, Copperlicht, SpiderGL и SceneJS. Для этого был создан интерфейс, позволяющий универсализировать общение основной программы со сторонними движками. Результатов удалось добиться с WebGLU, C3DL. В других либо отсутствует простой способ построения линии, либо он неоптимальный. В одном из них функция линии задокументирована, но на форуме проекта дали понять, что использовать ее не удастся, и предложили, рисовать ее многоугольниками.
К сожалению, при использовании C3DL еще не удалось оптимизировать процесс, что привело к низкому значению fps. При работе с WebGLU была допущена ошибка, которая так же повлияла на значение fps. Это заставило написать свой движок, который сейчас и используется. Я ни в коем случае не хочу упрекнуть сторонние движки, они созданы для более широкого круга задач, чем простое рисование линий.
Пару слов о браузерах. Тестировалось на Firefox 4 beta 8, Chrome 8 с –enable-webgl. На данной задаче Firefox показывал значение fps выше Chrome в 1,5-2 раза. При обновлении Chrome до beta 9 показатели не изменились. Показатели fps не изменились и при обновлении Firefox beta 8 до beta 9, разве что в консоли стало больше непонятных ошибок и стало некорректно отображаться сцена с использованием WebGLU.
Что такое WebGL и как включить его в любом браузере
Пару месяцев назад я работал над своим магистерским проектом по информатике. Мне потребовалось создать каркас веб-страницы. Ну, я посетил пару сайтов вроде ShaderToy, WebGL Earthи т. д., чтобы понять, как работает графический рендеринг. Но меня встретило сообщение: «В вашем браузере отключен WebGL». Пару поисков в Google оказывается, что WebGL отключен по умолчанию в большинстве браузеров. Итак, вот как вы включаете WebGL в своем браузере.
Читайте: Как установить две поисковые системы по умолчанию в любом браузере
Что такое WebGL? Почему вам это нужно?
Прежде чем переходить к включению WebGL, давайте разберемся, что такое WebGL. Теперь WebGL позволяет вашему браузеру запускать двухмерный и трехмерный рендеринг без установки дополнительных плагинов. Это также позволяет браузеру использовать аппаратный графический процессор для выполнения графических вычислений вместо вашего процессора. Это означает, что графический рендеринг будет работать лучше и, что самое главное, будет работать.
Прежде всего, ваш браузер должен поддерживать WebGL. Точный способ проверить это, просто посетив этот сайт. Если вы получили сообщение «Ваш браузер поддерживает WebGL», мы можем продолжить его включение.
Итак, если вы разрабатываете графику в Интернете или пишете сценарии для визуализации графики в браузере, это значительно повысит производительность. Кроме того, это убьет зависимость от сторонних плагинов.
Как включить WebGL в вашем браузере
Способ включения WebGL зависит от браузера, с которым вы работаете. Ниже приведен метод включения WebGL в браузерах на основе Chromium, Mozilla Firefox и Safari.
1. Google Chrome
Поскольку Google Chrome основан на Chromium, этот метод будет работать в большинстве браузеров на основе Chromium, таких как Brave, Vivaldi, Opera и т. Д. Просто убедитесь, что вы используете последнюю версию Google Chrome. Чтобы найти версию Chrome, нажмите значок меню в правом верхнем углу, нажмите «Справка», а затем «О Google Chrome».
Предполагая, что вы используете последнюю версию Chrome, теперь нам нужно разрешить Chrome использовать наш аппаратный графический процессор для выполнения графических вычислений. Для этого перейдите в настройки Chrome, набрав «chrome: // settings» в адресной строке.
На странице настроек прокрутите вниз, пока не увидите гиперссылку «Дополнительно». Нажмите на него, чтобы открыть расширенные настройки Google Chrome.
Читайте: Храбрый против Вивальди: какой браузер лучше и почему
Когда появятся расширенные настройки Chrome, перейдите в нижнюю часть страницы. Вы увидите «Использовать аппаратное ускорение, когда доступно» в разделе «Система». Нажмите на ползунок рядом с ним, чтобы включить аппаратное ускорение графического процессора. Опубликуйте это, вы увидите, что появляется кнопка «Перезапустить». Нажмите на нее, чтобы Google Chrome перезапустил и применил настройки. Убедитесь, что на других вкладках Chrome нет загруженных или несохраненных документов.
После перезапуска Chrome перейдите к флажкам Chrome, чтобы включить WebGL. Введите в адресной строке «chrome: // flags».
В меню Chrome Flags найдите WebGL. Вы увидите флаг под названием «WebGL 2.0 Compute», щелкните раскрывающийся список рядом с ним и выберите «Включено». Опубликуйте это, вы увидите всплывающее окно внизу с просьбой перезапустить Google Chrome. Для этого нажмите кнопку «Перезапустить сейчас».
Для Chrome Android и Chrome Mac необходимо включить «Черновые расширения WebGL».
2. Mozilla Firefox
Если вы используете Mozillla Firefox, включение webGl является довольно простым и двухэтапным процессом. Перейдите в меню настроек, набрав about: config в адресной строке.
В меню «Настройки» введите в строке поиска «webgl.force-enabled». По умолчанию для параметра Preference установлено значение «false». Дважды щелкните по нему, чтобы изменить значение на true. Перезапустите Firefox, чтобы изменения вступили в силу.
3. Safari
Safari скрывает параметры для включения WebGL в разделе «Параметры разработчика и экспериментальные функции». Итак, чтобы включить WebGL на Mac, мы должны сначала включить параметры разработчика. Для этого откройте браузер Safari и нажмите Safari в верхней строке меню. В расширенном меню нажмите «Настройки».
Когда откроется диалоговое окно «Настройки», переключитесь на вкладку «Дополнительно». Внизу отметьте опцию «Показать меню разработки в строке меню». Это позволит разработчикам или экспериментальным функциям Safari. Вы должны увидеть опцию «Разработка» в верхней строке меню.
Нажмите на меню «Разработка» и перейдите к «Экспериментальным функциям». В расширенном меню щелкните WebGL 2.0, чтобы включить его. Перезапустите браузер, и в Safari будет включен WebGL.
Заключение
Помните, что большинство веб-сайтов по-прежнему будут отображать графику в браузере, поскольку плагины уже добавлены на веб-сервер. Однако графика будет нестабильной и займет гораздо больше времени. Даже если вы не занимаетесь разработкой графики, я бы порекомендовал вам включить WebGL, чтобы улучшить работу с графикой в сети.
Альтернатива, если для причины конфиденциальности, вы хотите отключить WebGL, вы можете отключить их, используя указанные выше настройки или ScriptSafe расширение для блокировки отпечатков WebGL.
Если у вас возникнут дополнительные проблемы или вопросы, дайте мне знать в комментариях ниже.
Также читайте: Как заблокировать веб-сайты в браузере Chrome на Android
«WebGL Beginner’s Guide» Глава 1: Начиная работать с WebGL
Хочу начать вольный перевод отличной книги «WebGL Beginner’s Guide», которая, на мой взгляд, будет интересна не только новичкам, но и более продвинутым разработчикам.
Системные требования
Что представляет собой WebGL
Структура WebGL приложения
Создание HTML5 canvas
Что только что произошло?
Мы только что создали простую веб-страницу с содержащимся в ней холстом. Этот холст будет содержать наши 3D-приложения. Давайте разберем некоторые важные элементы, представленные в этом примере.
Определение CSS-стиля для границы
Это кусок кода, который определяет стиль холста:
Доступ к контексту WebGL
Что же только что произошло?
Используя переменную JavaScript (gl), мы получили ссылку на контекст WebGL. Давайте вернемся и проверим код, который позволяет получить доступ к WebGL:
Метод холста getContext дает нам доступ к WebGL. Все, что нам нужно, это указать имя контекста, которое может быть разным у разных производителей. Поэтому мы сгруппировали все возможные имена контекста в массив names. Крайне важно проверить спецификацию WebGL (вы можете найти ее в интернете) на любые изменения, касающиеся соглашения об именовании.
getContext так же может обеспечить доступ к 2D-графике HTML5 при использовании 2D –библиотеки, в зависимости от имени контекста. В отличие от WebGL это соглашение об именах является стандартным. API 2D-графики HTML5 является полностью независимым от WebGL и выходит за рамки этой книги.
Машина состояний WebGL
Загружаем 3D-сцену
До сих пор мы видели как можно получить и настроить контекст WebGL; следующим шагом является обсуждение объектов, освещения и камеры. Однако, почему мы должны ждать, чтобы посмотреть на возможности WebGL? В этом разделе мы посмотрим как выглядит WebGL-сцена.
Виртуальный автосалон
Резюме
В этой главе мы рассмотрели четыре основных элемента, которые всегда присутствуют в любом WebGL-приложении: холст, объект, свет и камера.
Мы узнали, как добавить на веб-страницу HTML5 canvas, как установить его ID, ширину и высоту. После этого мы написали код, который создавал контекст WebGL. Мы увидели, что WebGL работает как машина состояний, как таковая, мы можем запросить любую из своих переменных, использую функцию getParameter.
В следующей главе мы узнаем, как определить, загрузить и отрисовать 3D-модель в WebGL-сцене.
Ресурсы к этой статье вы можете скачать по ссылке