что такое webgl в браузере
Возможности технологии WebGL и как ее включить в браузерах
Современные интернет ресурсы требуют современных технологий, поэтому работа в этом направлении идет полным ходом и не останавливается. Любой крупный и не очень сайт использует сейчас целый набор средств по разработке и модернизации. Они могу включать:
По праву, JavaScript можно назвать одним из самых важных компонентов этого списка. Именно на его основе написаны такие инструменты, как AJAX, jQuery, WebGL.
Что такое WebGL
WebGL является кроссплатформенным программным интерфейсом приложения для браузеров, позволяющий им отображать 3D графику. Это один из немногих достойных конкурентов Canvas от HTML 5. Разработчики практически всех ведущих и популярных браузеров состоят в группе Khronos и вместе развивают WebGL и реализуют его в связи с особенностями своих приложений.
Основные функции
Сегодня WebGL применяется для:
Это средство не волшебная палочка, нельзя сказать ему что сделать или, пользуясь интерфейсом пользователя, собрать сцену «руками». WebGL отображает точки, линии и полигоны на основе написанного кода. Чтобы получить точки, линии и полигоны, траектории их движения, освещение, тени и так далее, используются математические формулы.
Любые данные, используемые для отображения элементов должны быть переданы в графический процессор. Существует 4 способа для получения шейдером этих данных:
Не углубляясь в детали стоит отметить, что для работы всех этих средств нужен API, который может не поддерживаться некоторыми старыми браузерами или попросту быть отключенным. В обоих случаях отобразить WebGL содержимое не получится.
Поддерживаемые версии браузеров
Технология поддерживается следующими версия браузеров:
В случае, если у обозревателя нет поддержки технологии или она выключена, пользователь получить подобное сообщение: «your browser does not support webgl», что в переводе означает – «Ваш браузер не поддерживает WebGL».
Как включить WebGL?
В большинстве приложений технология включена по умолчанию, однако может случиться так, что при удалении каких-либо настроек или их очистке, пункт с WebGL будет сброшен. Следующие подразделы содержат инструкции по его активации в наиболее популярных браузерах.
Google Chrome
Для включения WebGL в Google Chrome необходимо:
Яндекс.Браузер
Так как Яндекс.Браузер создан на основе Chromium, то для него будут работать все те же действия, что и для Google Chrome. Необходимо:
Опера
Для включения компонента в Опере необходимо:
Mozilla Firefox
Для включения необходимо:
Safari
Для активации необходимо:
Проблемы с драйверами
Если вышеописанные способы не помогают, то следует обновить драйвера видеокарт или заменить сами карты, если они устарели и уже не могут поддерживать аппаратное ускорение и отображение графики в современных браузерах.
Знакомство с 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: почему WebGL? (часть 1)
Мне и моему коллеге дизайнеру была поставлена задача разработать новую версию сайта-визитки компании. Коллега полгода учился работать с 3D-редакторами (в нерабочее время на Maxon Cinema 4D), поэтому он хотел использовать свои новые навыки при создании новой версии сайта. Его идея заключалась в том, что на каждой странице на первом экране будет крутиться какая-нибудь непонятная фигура с каким-нибудь красивым текстом. Выглядеть это должно было примерно так:
Реальных моделей пока не было, поэтому на первое время мне предоставили модель яблока.
Основная проблема заключалась в том, что у меня не было опыта работы с 3D, я очень плохо знал математику и геометрию, а также у меня никогда не было опыта работы с WebGL. В общем, в свои силы я верил слабо. По итогу с задачей я справился, и я хочу рассказать об этом опыте в небольшом цикле статей.
Знакомство фронтендера с WebGL: почему WebGL? (часть 1)
Почему вообще WebGL?
Слово WebGL у меня ассоциируется с 3D. Я считаю, что больше нет нормальных способов отрендерить что-то в 3D без WebGL. Помимо того, что слово WebGL само по себе звучит очень круто, нашлись и другие причины выбрать эту технологию:
Мы хотели интерактивности. Например, чтобы моделька реагировала на движение курсора мыши по двум осям. С помощью видео такое сделать невозможно.
Адаптивность. Мы могли рисовать одну модельку под любые экраны и устройства (поддержка WebGL была подавляющей). Нам не нужно рендерить заранее кучу видюх под разные экраны и переживать о том, что на каком-то экране появится пикселизация.
Проблемы с iOS. На каждой версии были свои приколы с фоновыми видео на телефоне. На одной из версий видео вообще могло не запуститься из-за политик Apple, а иногда нужно было проводить специальный обряд, чтобы фоновое видео заработало. Таких проблем с WebGL пока нет и, надеюсь, не будет.
IE11 тоже поддерживает WebGL. Да, есть нюанс, но он даже не стоит внимания.
В SVG невозможно сделать полноценный 3D, только псевдо. Также браузеры плохо себя чувствуют, когда SVG элементов в DOM больше 10 000. Это показали мои попытки отрендерить модельку в SVG.
Я думаю, первого пункта хватит, чтоб принять решение в пользу webGL.
Модель яблока была в формате OBJ, другие форматы я решил не рассматривать. Это текстовый формат и это придавало мне какой-то уверенности в том, что решений в интернете для него должно быть много.
Я гуглил «webgl obj model render» и находил только онлайн-просмотрщики или какие-то узко специфичные решения, которые запустить не смог.
Также искал демки на CodePen, но я не нашел ничего подходящего. А если что-то находил, не мог понять, что вообще происходит и что мне делать.
Понял, что нужно начать с основ, без базовых знаний webGL задачу не выполнить.
Погружение в WebGL
Не знаю как так получилось, но в интернете на глаза ресурсы по WebGL мне не попадались, поэтому я пошел Телеграм-чат @webgl_ru (найти его было просто) и спросил:
— как начать в WebGL фронту?
Похоже, что в чат постоянно заходили подобные мне ребята с аналогичными вопросами, поэтому у ребят из чата уже был заготовлен список ресурсов, который они мне и скинули. Впоследствии участники данного чата мне еще не раз помогли, за что им огромное спасибо.
Из списка, который мне скинули, я выбрал ресурс WebGL Fundamentals, у которого было довольно говорящее название, а также перевод на русский. Обычно я не вижу ничего ужасного в английской документации, но WebGL казался мне чем-то инородным и страшным, а также состоящим из подходов, которые доселе не были мне знакомы. То, что WebGL рендерит это всё через Canvas — это было единственное, что я знал об этой технологии.
Что вообще такое WebGL
Первое, что бросается в глаза, — это необычный API. Привычное нам браузерное API — это просто вызов методов у каких-то встроенных объектов/классов, тогда как апи WebGL это как будто вы программно настраиваете repl node.js, а потом прокидываете в этот repl строки javascript кода и получаете какой-то результат из этого.В случаи webgl вы настраиваете внутри браузера обрезанную версию OpenGL(библиотека которая заставляет наши видеокарты что-то рисовать) и прокидываете в нее код на языке GLSL. GLSL обрезанный C подобный язык, погрузится несложно. Как будто пишешь на es3 javascript.
Если обобщить, то работа на webgl выглядит так:
Получаете доступ к webgl (по сути к openGL, но версия обрезанная и потому этому называется webgl).
Выставляете какие-нить специальные флаги, которые могут менять работу рендера.
Пишите программу на GLSL. Сама программа это просто функции которые принимает данные и выплевывает какой-то результат. Данные это точки в координатной системе, а также цвет этой точки. Тип как указать положение div 1х1 через absolute и поставить его центр на высоте 300 пикселей, покрасив в красный.
В случае 3D нужно еще указать глубину точки, ну это пока не важно.
Пропускаете через апи координаты, цвета и другие параметры.
PROFIT! Мы получаем 2D/3D картинку.
Шейдеры
Выше я говорил про программы на GLSL, программа всегда состоит из 2 шейдеров. Шейдер есть функция.Каждая программа состоит из вершинного шейдера (Vertex Shader) и фрагментного шейдера (Fragment Shader).
Сначала им нужно выставить точки в пространстве, потом соединить эти точки невидимыми линиями, а потом закрасить каждый пиксель внутри получившийся фигуры.
Если приводить пример из жизни, у вас есть стенка 1м х 1м и есть художник по имени Видеокарта. Вот вы и ему говорите:
— Поставь мне точку на 30 сантиметров от верха и 50 см слева, потом точку в 50х50, потом в 70х80, соедини мне это линиями и закрась получившееся пространство красным.
Сами шейдеры выглядит так:
Вершинный шейдер (Vertex Shader)
Фрагментный шейдер (Fragment Shader)
Атрибуты определяют, каким образом данные из ваших буферов передаются в вершинный шейдер. Например, вы можете поместить положения вершин в буфер как три 32-битных числа с плавающей точкой на одно положение. Вы указываете конкретному атрибуту, откуда брать положения вершин, какой тип данных используется (три 32-битных числа с плавающей точкой), начиная с какого индекса в буфере начинаются положения вершин и какое количество байтов нужно получить от одного положения до следующего.
Доступ к буферам не произвольный. Вместо этого вершинный шейдер выполняется заданное количество раз и каждый раз, когда он выполняется, выбирается следующее значение каждого из указанных буферов и назначается атрибуту.
Вершинный шейдер выполняется на каждую порцию x,y,z (z может не указываться, если рисуем в 2D) координат. Каждые такие координаты создают вершину. А дальше уже эти вершины объединяются в треугольники (полигоны) и потом фрагментным шейдером эти треугольники закрашиваются.
Вы спросите, почему именно треугольники?
В процессе обучения я на это не обращал внимания, но когда начал предпринимать попытки нарисовать модельку тоже удивился, но оказывается любую фигуру можно нарисовать через ТРЕУГОЛЬНИКИ (ПОЛИГОНЫ) и потому, добавлять другие фигуры бессмысленно.
Треугольник есть абсолют.
В webgl можно рисовать только треугольниками, линиями и точками.
Если рисовать через линии, то будут только отрисовываться грани между вершинами, но все что внутри фигуры не будет закрашиваться.
Если рисовать через точки, то будут отрисовываться только точки! Удивительно!
Матрицы
Также я узнал про матрицы. Это пришло из математики и для js разраба это выглядит как массив из 9 или 12 чисел (12 для 3D).Матрицы решают вопросы того как трансформировать модель (а точней вершины), чтоб поставить модельку в нужное место в пространстве, увеличить или покрутить.Матрицы еще позволяют создавать камеры, то есть менять вид обзора и другое. Вы могли с ними встречаться, если работали transform: matrix(. n) в css.
Матрицы один из фундаментов 2D/3D графики. Наверно одна из немногих вещей которой можно пользоваться не разбираясь как она работает.
Достаточно запомнить, что чтоб применить несколько трансформаций нужно просто матрицы друг на друга перемножить и результат передать в шейдер. Матрица 3х3 для 2D трансформаций, а 4х4 для 3D трансформаций.
Хорошие люди уже все за нас написали gl-matrix. Нам нужно вызывать только знакомые на слух название методов и получать нужный результат. Более подробно про матрицы можно узнать на webgl fundumentals.
Hello world на webgl
Так как все же выглядит hello world код на webgl? Что вообще требуется для того, чтоб это запустить и нарисовать треугольник?
Нужно получить ссылку на canvas элемент.
Получить из него webgl контекст, то есть то что нам позволит общаться с webgl и рисовать через него.
Создать программу из вершинного шейдера и фрагментного шейдера.
Получить ссылки на переменные из шейдеров.
Запустить функцию drawArrays у webgl.
Вуаля, мы получили наш треугольник.
И после такого количества кода (по ссылке), мы получаем треугольник.
Честно говоря, это безумное количества кода ради одного треугольника немного остудило желание, но автор учебника объяснил, что все это можно убрать под хелперы. Посмотрев на этот пример, можно понять безумные размеры 3D либ.