Webgl как включить в опере
Что такое WebGL и как его включить. Подробная инструкция для чайников
Все когда — нибудь замечали на посещаемых сайтах 3D-графику, а может , даже вы играли в браузерные игры? Так знайте, что в большинстве своем это стало доступно прямо «в браузере» благодаря технологии WebGL. Примеры использования WebGL можно увидеть повсюду.
Хочется сразу отметить, что данная технология — это не какое-то приложение, которое можно самостоятельно установить и активировать. WebGL — это крос с платформенный программный интерфейс, которы й позволяет браузерам выводить 3D-графику на экран пользователя. Для данной технологии была создана специальная рабочая группа «Khronos», где собраны разработчики со всех популярных браузеров. Именно эт а группа занимается развитием и внедрением WebGL в свои продукты.
Что такое WebGL
- Java Script;
- Java;
- Kotlin и др.
Как включить WebGL
Мы будем очень благодарны
если под понравившемся материалом Вы нажмёте одну из кнопок социальных сетей и поделитесь с друзьями.
Где включается параметр WebGL?
Подскажите есть ли какой нибудь простой метод включения и по необходимости отключения поддержки WebGL в этом браузере?
Подскажите есть ли какой нибудь простой метод включения и по необходимости отключения поддержки WebGL в этом браузере?
- вставьте в адресную строку браузера : browser://flags/
- вставьте в поле поиска : WebGL
Меня больше всего настораживает что раньше буквально пару недель назад все работало. Опера вроде не обновлялась. В системе тоже ничего такого не происходило. Через браузер IE и Edge все работает.
работает ли у вас примерочная (dressroom) на сайте wowhead?
После перехода, примерочная-работает.
Таакс.У вас работает. А это уже значит проблема у меня лично? И что же мне предпринять? Даже ума не приложу. Попробую наверное переустановить Opera. Отпишусь если поможет.
Подскажите есть ли какой нибудь простой метод включения и по необходимости отключения поддержки WebGL в этом браузере?
вставьте в адресную строку браузера : browser://flags/
вставьте в поле поиска : WebGL
В общем что я пробовал:
Сперва просто включал эти парметры в настройках flags — не помогло.
Потом переустанавливал Оперу. Потом удалял Оперу, чистил реестры и вообще комп на всякий мусор или может вирусы. Обновлял драйвер видеокарты. Проверил обнолвения windows. Перезапускал компьютер. Ставил на чистую заново Оперу. Пробовал включать указанные параметры и выключать (раньше то я их вообще не трогал и работало все). И заходил на разные сайты требующие поддержку webGL. По мимо указанных выше на всякие Chrome Experiments и подобные где используется этот движок (или что это). В итоге везде просто выдает в окне где должна быть модель, надпись что мой браузер либо не поддерживает WebGL либо он у меня отключен.
На компьютере стоят еще несколько других браузеров (пару вообще поставил просто проверить). IE, Edge, Mozzila, Waterfox — везде сайты с webgl работают. На Opera и Vivaldi (этот кажется тоже на движке оперы работает) — сайты не работали.
У вас 39я версия оперы? На которой Вы проверили сайт. Я уже не знаю что придумать. Если новая версия не поддерживает (может я пропустил как она обновилась на 39 и может после этого перестало работать?)
то может мне поставить предыдущую версию? Все это очень странно.
У меня есть подозрение что мне надо винить во всем последнее юбилейное обновление системы. Как раз буквально пару недель назад было. И именно после него я прям каждый день начал замечать разные глюки. То тут что то не работает, то тут вдруг требует переустановки заново драйвера. Ещё в начале августа у меня все работало гладко.
Вечером звоню брату. Спрашиваю какой у него браузер. Говорит Опера 37-я. Прошу проверить работу Web GL с помощью вышеприведённых сайтов. Проверяем — все ок, все работает.
Предлагает проверить последнюю версию 39ю, мол если что все равно ему этот webgl не нужен. Ок. Заходит на сайт, скачивает официальную новую версию Opera Stable 39 — и в итоге все эти сайты перестают работать.
Вывод очевиден.
Я пошел искать на торрентах старые версии оперы.
Короче у меня почему то в Опере WebGL не в какую не хочет работать, всё включено, но переходя по ссылке с WebGL пишет что браузер не поддерживает. В Хроме всё без проблем, всё открывается.
fill2782
Чтобы проверить, поддерживается ли вашим браузером WebGL, перейдите по ссылке HTML5TEST
Как включить webgl в opera
Современные интернет ресурсы требуют современных технологий, поэтому работа в этом направлении идет полным ходом и не останавливается. Любой крупный и не очень сайт использует сейчас целый набор средств по разработке и модернизации. Они могу включать:
- язык гипертекстовой разметки HTML – база верстки;
- скриптовый язык PHP для создания сценариев и работы с пользователем;
- ООЯП JavaScript работы с объектами приложений и придания веб-страницам интерактивности;
- каскадные таблицы стилей CSS для создания красивых шаблонов фона, оформления тегов и шрифтов.
- различные СУБД, основной для которых практически всегда становится SQL.
По праву, JavaScript можно назвать одним из самых важных компонентов этого списка. Именно на его основе написаны такие инструменты, как AJAX, jQuery, WebGL.
Что такое WebGL
WebGL является кроссплатформенным программным интерфейсом приложения для браузеров, позволяющий им отображать 3D графику. Это один из немногих достойных конкурентов Canvas от HTML 5. Разработчики практически всех ведущих и популярных браузеров состоят в группе Khronos и вместе развивают WebGL и реализуют его в связи с особенностями своих приложений.
Основные функции
Сегодня WebGL применяется для:
- отображения векторных и растровых изображений на сайтах;
- для создания красивых анимированных фонов;
- построения графиков и диаграмм;
- анимации;
- динамических заставок;
- браузерных 2D и 3D игр.
Это средство не волшебная палочка, нельзя сказать ему что сделать или, пользуясь интерфейсом пользователя, собрать сцену «руками». WebGL отображает точки, линии и полигоны на основе написанного кода. Чтобы получить точки, линии и полигоны, траектории их движения, освещение, тени и так далее, используются математические формулы.
Любые данные, используемые для отображения элементов должны быть переданы в графический процессор. Существует 4 способа для получения шейдером этих данных:
- атрибуты и буферы (массивы координат);
- uniform-переменные, т.е глобальные переменные;
- текстуры, массивы, содержащие растровые изображения или заливку;
- varying-переменные, т.е переменные для передачи данных из вершинного шейдера в фрагментный.
Не углубляясь в детали стоит отметить, что для работы всех этих средств нужен API, который может не поддерживаться некоторыми старыми браузерами или попросту быть отключенным. В обоих случаях отобразить WebGL содержимое не получится.
Поддерживаемые версии браузеров
Технология поддерживается следующими версия браузеров:
- GoogleChrome, включен во всех версии начиная с 9;
- Opera, реализован в последней версии 12.0;
- MozillaFirefox, доступен для всех платформ с нужной видеокартой и драйверами, начиная с версии 4.0;
- Safari, поддерживает технологию, но она отключена по умолчанию;
- Internet Explorer, не поддерживает технологию официально, просмотр доступен с плагинами IEWebGL или Chrome Frame.
Как включить WebGL?
В большинстве приложений технология включена по умолчанию, однако может случиться так, что при удалении каких-либо настроек или их очистке, пункт с WebGL будет сброшен. Следующие подразделы содержат инструкции по его активации в наиболее популярных браузерах.
Google Chrome
Для включения WebGL в Google Chrome необходимо:
Яндекс.Браузер
Так как Яндекс.Браузер создан на основе Chromium, то для него будут работать все те же действия, что и для Google Chrome. Необходимо:
Опера
Для включения компонента в Опере необходимо:
Mozilla Firefox
Для включения необходимо:
- перейти в настройки, открыть «Дополнительные» и проверить включение параметра «Использовать аппаратное ускорение»;
- перейти в about:config;
- согласиться с предупреждением;
- ввести в поиск force-enabled и установить значение на «true»;
- перейти к поиску и найти disabled, убедиться, что значение стоит «false»;
- Перезапустить браузер.
Safari
Для активации необходимо:
Проблемы с драйверами
Если вышеописанные способы не помогают, то следует обновить драйвера видеокарт или заменить сами карты, если они устарели и уже не могут поддерживать аппаратное ускорение и отображение графики в современных браузерах.
Давным-давно, Opera выпустила и показала реализацию холста 3D Canvas. Сейчас, более чем 3 года спустя, выпущен первый публичный холст основанный на стандартах 3D с помощью WebGL для Windows.
WebGL является стандартом, разработанным группой Khronos, Opera является активным членом, участвующим в процессе стандартизации этого стандарта. Opera работает над реализацией WebGL с начала 2009 года, когда начался процесс стандартизации. В течение последних нескольких лет ,спецификация менялась довольно часто, но теперь она начинает развиваться и стабилизироваться, что делает его идеальным для релиза Public Preview текущей реализации WebGL.
Для тех из вас, кто никогда не слышал о WebGL, это контекст элемента холста, который дает вам аппаратное ускорение 3D-рендеринга в JavaScript. API базируется на OpenGL ES 2.0, что означает, что можно запустить WebGL на многих различных устройств, таких как настольные компьютеры, мобильные телефоны и телевизоры. WebGL Wiki содержит больше информации о стандарте, в том числе учебники и много демо — так что это хорошее место, чтобы пойти, если вы хотите увидеть осуществление WebGL в действии.
Аппаратное ускорение .
В июне 2008 года — примерно в то же время, как вышел первый 3D-эксперимент холста — был показан предварительный просмотр видео полностью имеющих аппаратное ускорение рендеринга. Одним из требований для включения этого кода то, что используется резервное программное обеспечение, когда аппаратное ускорение не доступно, должны по крайней мере так же быстро работать, как и то, что использовали в настольных продуктах. Чтобы добиться этого, было потрачено много времени и ресурсов по оптимизации программного обеспечения визуализации, которое было использовано в настольной версии браузера Opera , начиная с версии 10.50 и оказался одним из самых быстрых средств визуализации . Результаты этой работы были свёрнуты в предварительном просмотре, а, значит, что этот билд также имеет включенное полное аппаратное ускорение (в системах с совместимым оборудованием и драйверами).
Аппаратное ускорение Opera немного отличается от того, что реализовано в других браузерах. Большинство из них имеют полное аппаратное ускорение всех операций, но на Windows Vista и Windows 7 снизился до более ограниченного набора ускоренных операций.Новая реализация будет представлять полное ускорение на любой операционной системе с достаточной поддержкой аппаратных средств. Это значит,что Opera может в полной мере использовать аппаратное ускорение операций на Windows XP, Linux, Mac OS X и OpenGL ES 2 совместимых устройствах, таких как последние смарт-телефоны и веб-интерфейс телевизоров.
OpenGL
Этот билд только бэкэнд OpenGL. Это означает, что ваша система должна иметь OpenGL 2.x совместимую видеокарту и связанные с ними драйвера для аппаратного ускорения и работы WebGL. В будущем Opera планирует также добавить Direct3D в серверную часть, которая позволит снизить требования к пользователям и должна работать «из коробки» на большинстве современных системах.Итак, как узнать включено аппаратное ускорение или нет? Есть два простых способа, чтобы проверить это. Первый вариант заключается в загрузке некоторого WebGL контента — если он работает, это означает, что ваши аппаратные средства и драйверы compatbile, и аппаратное ускорение включены в браузере. Кроме того, вы можете проверить новые » Vega backend » в адресной строке оперы opera : about — если бэкэнд перечислен в OpenGL, у вас аппаратное ускорение включено, в противном случае запись будет показывать, что браузер использует программное обеспечение бэкэнда. Эта предварительная версия Opera11.50.24661 с WebGL в настоящее время доступна только для Windows и имеет аппаратное ускорение для Windows.
Оговорка: это не стабильная сборка – предварительная,значит одна из предстоящих технологий Opera. Ни WebGL ни аппаратное ускорение не будут включены в следующей версии Оперы 11.10 для рабочего стола. Есть некоторые и другие аспекты, такие как SVG, не смогут работать правильно.Разработчики Opera продолжают работать над этими новыми возможностями – убрать все ошибки и оптимизировать.Если не трудно, напишите ваши отзывы в комментариях- и не забудьте включить информацию о том, какие видеокарты и версии драйверов у вас установлены, и если Vega использует OpenGL или Software бэкэнд.
Начиная с 12-той версии у браузера Opera появилась поддержка аппаратного ускорения на уровне процессора и на уровне графической видеокарты, причем ускорение на уровне видеокарты применяется не только для отрисовки web содержимого но и самого браузера.
На данный момент времени в некоторых случаях аппаратное ускорение работает медленнее нежели программное, поэтому данный функционал по умолчанию отключен, хотелось бы заметить что к примеру разработчики браузера Chrome составили черный список некоторых адаптеров, которые либо уже не поддерживаются производителем либо являются слишком медленными, в моем случае на NVIDIA GeForce GT 440 и Core 2 Duo E7500 прирост производительности ощутимо повысился..
Включение аппаратного ускорения:
Включение ускорения графической подсистемы (WebGL):
В открывшемся окне настроек для включения необходимо установить значение в 1, отключение в , для применения настроек в силу необходим перезапуск браузера.
Подскажите есть ли какой нибудь простой метод включения и по необходимости отключения поддержки WebGL в этом браузере?
Подскажите есть ли какой нибудь простой метод включения и по необходимости отключения поддержки WebGL в этом браузере?
- вставьте в адресную строку браузера : browser://flags/
- вставьте в поле поиска : WebGL
Ум освещает путь воле, а воля повелевает действиями.
Меня больше всего настораживает что раньше буквально пару недель назад все работало. Опера вроде не обновлялась. В системе тоже ничего такого не происходило. Через браузер IE и Edge все работает.
работает ли у вас примерочная (dressroom) на сайте wowhead?
После перехода, примерочная-работает.
Ум освещает путь воле, а воля повелевает действиями.
Таакс.У вас работает. А это уже значит проблема у меня лично? И что же мне предпринять? Даже ума не приложу. Попробую наверное переустановить Opera. Отпишусь если поможет.
Подскажите есть ли какой нибудь простой метод включения и по необходимости отключения поддержки WebGL в этом браузере?
вставьте в адресную строку браузера : browser://flags/
вставьте в поле поиска : WebGL
В общем что я пробовал:
Сперва просто включал эти парметры в настройках flags - не помогло.
Потом переустанавливал Оперу. Потом удалял Оперу, чистил реестры и вообще комп на всякий мусор или может вирусы. Обновлял драйвер видеокарты. Проверил обнолвения windows. Перезапускал компьютер. Ставил на чистую заново Оперу. Пробовал включать указанные параметры и выключать (раньше то я их вообще не трогал и работало все). И заходил на разные сайты требующие поддержку webGL. По мимо указанных выше на всякие Chrome Experiments и подобные где используется этот движок (или что это). В итоге везде просто выдает в окне где должна быть модель, надпись что мой браузер либо не поддерживает WebGL либо он у меня отключен.
На компьютере стоят еще несколько других браузеров (пару вообще поставил просто проверить). IE, Edge, Mozzila, Waterfox - везде сайты с webgl работают. На Opera и Vivaldi (этот кажется тоже на движке оперы работает) - сайты не работали.
У вас 39я версия оперы? На которой Вы проверили сайт. Я уже не знаю что придумать. Если новая версия не поддерживает (может я пропустил как она обновилась на 39 и может после этого перестало работать?)
то может мне поставить предыдущую версию? Все это очень странно.
Ум освещает путь воле, а воля повелевает действиями.
У меня есть подозрение что мне надо винить во всем последнее юбилейное обновление системы. Как раз буквально пару недель назад было. И именно после него я прям каждый день начал замечать разные глюки. То тут что то не работает, то тут вдруг требует переустановки заново драйвера. Ещё в начале августа у меня все работало гладко.
Вечером звоню брату. Спрашиваю какой у него браузер. Говорит Опера 37-я. Прошу проверить работу Web GL с помощью вышеприведённых сайтов. Проверяем - все ок, все работает.
Предлагает проверить последнюю версию 39ю, мол если что все равно ему этот webgl не нужен. Ок. Заходит на сайт, скачивает официальную новую версию Opera Stable 39 - и в итоге все эти сайты перестают работать.
Вывод очевиден.
Я пошел искать на торрентах старые версии оперы.
Ум освещает путь воле, а воля повелевает действиями.
Короче у меня почему то в Опере WebGL не в какую не хочет работать, всё включено, но переходя по ссылке с WebGL пишет что браузер не поддерживает. В Хроме всё без проблем, всё открывается.
fill2782
Чтобы проверить, поддерживается ли вашим браузером WebGL, перейдите по ссылке HTML5TEST
Наверное, не многие из ваз знают, что такой WebGL и для чего он нужен. Тем не менее, это очень полезная вещь при программировании и администрировании, без которой обойтись в современном мире может далеко не каждый специалист. И в сегодняшней статье мы расскажем вам, что это такое, а также расскажем вам, как включить эту функцию в браузере Google Chrome.
Для начала пару слов о том, что такое WebGL и для чего он нужен в Google Chrome. WebGL – это библиотека разнообразного программного обеспечения. Как мы уже сказали выше, функция используется программистами и системными администраторами. Функция эта позволяет создавать интерактивную графику непосредственно в браузере (если он хороший и позволяет это сделать). Google Chrome является как раз таким браузером, поэтому далее перейдем к тому, как активировать эту функцию.
Для начала вы должны будете зайти в настройки браузера, предварительно кликнув по 3 точкам в правом верхнем углу. В настройках вы должны будете найти пункт «аппаратное». Перейдите в него. Второй функцией в списке будет пункт «использовать аппаратное ускорение». Активируйте данную функцию, переведя галочку вправо.
После этого вы должны будете ввести следующую ссылку в адресной строке браузера: chrome://flags.
Далее вам нужно будет либо пролистать меню вниз, либо в поиске вбить «WebGL». В любом случае вы увидите пункт «WebGL 2.0»
Под этим значком будет кнопка активации. У вас по умолчанию будет стоять либо Default, либо Disabled. Вам же нужно активировать эту функцию, т.е. переведите ее на значение Enabled. Т.к. это системное изменение, то браузер попросит вас перезагрузить его. Перемотайте меню в самый низ и в правом нижнем углу вы увидите пункт «Relaunch». Кликните по этой кнопке.
Вот, собственно, и все. Функция WebGL в браузере Google Chrome активна. На этом мы заканчиваем нашу статью, всем удачи и до новых встреч.
API WebGL расшифровывается как Web-based Graphics Library. Это дополнительная библиотека для языка JavaScript. При помощи неё создаются интерактивные 3D-элементы в веб-браузерах. Благодаря тому, что WebGL использует низкоуровневые аппаратные средства, часть его кода реализуется при помощи видеокарт, подключенных к конфигурации компьютеров.
С точки зрения веб-технологии WebGL — это спецификация, выполняющая отрисовку трёхмерной графики через элемент Canvas гипертекстовой разметки HTML. Через оболочку OpenGL ES 2.0 он обращается к ресурсам видеокарты, а также поддерживает опцию аппаратного ускорения браузера.
Как подключить?
Для использования WebGL необходим веб-обозреватель, обеспечивающий её функционирование (то есть полностью совместимый с ней).Примечание. Можно включить WebGL в Firefox, Хроме, Опера и других распространённых популярных веб-обозревателях.
В отличие от платформ Adobe Flash, Java, Microsoft Silverlight, данная технология не нуждается в инсталляции дополнительных апплетов для ОС Windows и подключении к браузерам аддонов.
Для корректной работы WebGL также требуется Windows 7, 8 или 10 с последними обновлениями, а также актуальная видеокарта с последней версией драйвера.
Проверить работу графической платформы можно так:
2. Тест запускается автоматически в независимости от выбранного браузера, будь то Google Chrome, Файрфокс или Yandex.
Что делать, если не работает WebGL?
Общие рекомендации
- нажмите кнопку «Пуск»;
- откройте щелчком мыши «Панель управления»;
- установите тип отображения «Категория»;
- клацните заголовок раздела «Система и безопасность»;
- в подразделе «Центр обновления… » активируйте кликом «Проверка обновлений»;
- дождитесь завершения проверки;
- загрузите и установите все доступные обновления для Windows.
2. Выполните диагностику DirectX:
в открывшемся окне перейдите на вкладку «Экран»;
ознакомьтесь с данными видеоадаптера и драйвера; если он работает правильно, в поле «Примечание» будет отображена надпись «Неполадок не найдено»;
3. Переустановите или обновите DirectX:
на новой страничке кликните по ссылке «Отказаться и продолжить»;
запустите онлайн-инсталлятор и внимательно следуйте его инструкциям;
по завершении процедуры перезагрузите компьютер.
4. Обновите драйвера видеокарты:
Это можно сделать двумя способами:
Способ №1. Нажмите вместе клавиши «Win» + «Break». В открывшемся окне пройдите по ссылке «Диспетчер устройств». В списке оборудования щелчком мышки откройте раздел «Видеоадаптеры». Кликните правой кнопкой по названию видеокарты. В контекстном меню нажмите «Обновить драйверы…». Далее следуйте подсказкам системы.
Способ №2. Откройте в браузере официальный сайт производителя видеокарты и перейдите в раздел «Загрузка драйверов» (например, Nvidia). Через строку внутреннего поиска или специальную форму задайте наименования и серию видеокарты, которая установлена на ваш ПК. Скачайте и установите драйвер в Windows.
Настройка и диагностика в браузерах
Firefox
Возможно, среди них есть и девайс конфигурации вашего ПК. В таком случае стоит задуматься о покупке нового «железа», а может быть и нового компьютера, чтобы воспользоваться WebGL в Firefox.
2. Проверьте, включена ли опция ускорения:
в меню клацните раздел «Инструменты»;
нажмите последний пункт в выпавшем подменю — «Настройки»;
перейдите на вкладку «Дополнительные»;
в блоке «Просмотр сайтов» из группы «Общие» убедитесь в том, что установлена «галочка» возле опции «По возможности использовать аппаратное ускорение».
3. Если перед вами стоит задача, как включить WebGL принудительно посредством изменения внутренних настроек браузера, сделайте так:
в адресной строке FF наберите команду — about:config;
в строке «Поиск» задайте название настройки — webgl.force-enabled.
в панели «имя/настройки» двойным щелчком измените её значение с false на true (то есть выполните включение).
Таким же образом включите опции:
- webgl.msaa-force
- layers.acceleration.force
Яндекс.Браузер
1. Первым делом в Яндекс.Браузере проверьте подключение ускорения. Откройте:
Меню → Настройки → Дополнительные настройки
2. В блоке система проверьте статус опции «Использовать аппаратное ускорение… ». Она должна быть включена.
3. Чтобы выполнить диагностику настроек по обработке графики, наберите в адресной строке browser://gpu/
В последней графе первого блока отображается статус подключения WebGL.
4. Дополнительно вы можете активировать программный рендеринг графики. Для этого перейдите на вкладку — browser://flags/
Клацните опцию «Включить» в блоке «Переопределение списка программного рендеринга».
Opera
В Opera по умолчанию отключена поддержка WebGL. Чтобы активировать модуль, обеспечивающий работу этой технологии, выполните эти действия:
в строке для ввода доменов наберите — flags;
в поисковой строке панели «Экспериментальные функции» введите — webgl;
снова нажмите «Enter»;
в появившихся блоках щёлкните кнопку «Включить».
WebGL для Google Chrome
1. Проверить опции по обработке графики можно набрав в строке веб-обозревателя — chrome://gpu.
2. Чтобы активировать рендеринг, перейдите на вкладку — chrome://flags. А затем в поле «Переопределение списка… » щёлкните «Включить».
This is the first in our series of articles about WebGL. The objective of this series is to provide the information and resources you’ll need to get started learning WebGL. In this piece, we will discuss how WebGL works, what you need to create WebGL applications, and what a simple example looks like.
What is WebGL?
WebGL is a JavaScript API that allows us to implement interactive 3D graphics, straight in the browser. For an example of what WebGL can do, take a look at this WebGL demo video (viewable in all browsers!)
WebGL is a web standard developed by the Khronos group; Opera is an active participating member along with Google (Chrome), Mozilla (Firefox), Apple (Safari), and other 3D graphics developers.
WebGL runs as a specific context for the HTML element, which gives you access to hardware-accelerated 3D rendering in JavaScript. Because it runs in the element, WebGL also has full integration with all DOM interfaces. The API is based on OpenGL ES 2.0, which means that it is possible to run WebGL on many different devices, such as desktop computers, mobile phones and TVs. You can view the WebGL specification at the Khronos site.
How do I run WebGL?
To access WebGL content you need to have a browser that supports it.
-
(enable webGL by entering Enable WebGL in opera:config by setting the value to 1, and Enable Hardware Acceleration similarly, then restart the browser) (make sure you enable WebGL in Safari — go to Preferences > Advanced and check “Show develop menu in menu bar”, then go to Develop > Enable WebGL)
Also, having a good graphics card will likely improve WebGL performance on your computer. If you don’t already have it, get the latest Opera release and check out the above video example running as a live demo. Another great demo to check out is Hello Racer.
What is WebGL used for?
WebGL allows developers to put real-time interactive 3D graphics in the browser. WebGL can be applied to interactive music videos, games, data visualization, art, 3D design environments, 3D modeling of space, 3D modeling of objects, plotting mathematical functions, or creating physical simulations.
Figure 1: Interactive music videos, Games, Data visualization, Art, 3D design environments, 3D modelling of space, 3D modelling of objects and textures, Plotting mathematical functions, Creating physical simulations
How does WebGL work?
WebGL is slightly more complicated than your typical web technologies because it’s designed to work directly with your graphics card. As a consequence, it’s pretty low level. This is what allows it to rapidly do complex 3D rendering involving lots of calculations.
You don’t need to fully understand the inner workings of WebGL. There are several WebGL libraries available to take some of the complexity out of your hands. However, gaining an understanding of it can be useful in case you want to spice up your code with features that are not in your library of choice, or you feel that having a better grasp of the technology will help you find your way around what the libraries have to offer.
When programming in WebGL, you are usually aiming to render a scene of some kind. This usually includes multiple subsequent draw jobs or “calls”, each of which is carried out in the GPU through a process called the rendering pipeline.
In WebGL, like in most real-time 3D graphics, the triangle is the basic element with which models are drawn. Therefore, the process of drawing in WebGL involves using JavaScript to generate the information that specifies where and how these triangles will be created, and how they will look (colour, shades, textures, etc). This information is then fed to the GPU, which processes it, and returns a view of the scene. Next we will look in more detail at how this last bit happens.
The rendering pipeline
The process starts with the creation of the vertex arrays. These are arrays that contain vertex attributes like the location of the vertex in the 3D space and information about the vertex’ texture, colour or how it will be affected by lighting (vertex normal). These arrays and the information they contain are created in JavaScript in one or more of these ways: processing files that describe a 3D model (for example .obj files), procedurally creating the data from scratch, or using a library that provides vertex arrays for geometrical shapes.
Then the data in the vertex arrays is sent to the GPU by feeding it into a set of one or more vertex buffers. When a rendering job is submitted, we also have to supply an additional array of indices that point to the vertex array elements. They control how the vertices get assembled into triangles later on.
The GPU begins by reading each selected vertex out of the vertex buffer and running it through the vertex shader. The vertex shader is a program that takes a set of vertex attributes as inputs and outputs a new set of attributes. At a minimum, the vertex shader calculates the projected position of the vertex in screen space. But it can also generate other attributes such as colour or texture coordinates for each vertex. You can code your own vertex shader or use one provided by a WebGL library.
The GPU then connects the projected vertices to form triangles. It does this by taking the vertices in the order specified by the indices array and grouping them into sets of three.
The rasterizer takes each triangle, clips it, discards parts that are outside of the screen, and breaks the remaining visible parts into pixel-sized fragments. The vertex shader’s outputs for other vertex attributes are also interpolated across the rasterized surface of each triangle, assigning a smooth gradient of values to each fragment. For example, if the vertex shader assigns a colour value to each vertex, the rasterizer will blend those colours into an appropriate colour gradient across the pixelated surface.
The generated pixel-sized fragments then pass through another program called the fragment shader. The fragment shader outputs colour and depth values for each pixel, which then get drawn into the framebuffer. Common fragment shader operations include texture mapping and lighting. Since the fragment shader runs independently for every pixel drawn, it can perform the most sophisticated special effects; however, it is also the most performance-sensitive part of the graphics pipeline. As with the vertex shader, you can code your own fragment shader or use one provided by a WebGL library.
The framebuffer is the final destination for the rendering job’s output. A framebuffer is more than a single 2D image: in addition to one or more colour buffers, a framebuffer can have a depth buffer and/or stencil buffer, both of which optionally filter fragments before they are drawn to the framebuffer. Depth testing discards fragments from objects that are behind the ones already drawn, and stencil testing uses shapes drawn into the stencil buffer to constrain the drawable part of the framebuffer, “stencilling” the rendering job. Fragments that survive these two filters have their colour value alpha blended with the colour value they’re overwriting. Final colour, depth, and stencil values are drawn into the corresponding buffers. The buffers’ outputs can also be used as texture inputs to other rendering jobs.
How do I get started using WebGL?
The first thing you have to do is get a browser that supports WebGL. You can code WebGL using your favourite JavaScript development environment.
For your first WebGL project, I’d suggest using a WebGL library. If you have read the previous section you can probably imagine why directly using the WebGL API can be a bit exhausting. Unlike other web APIs, “naked” WebGL can be pretty low level. The people who designed WebGL decided to make it that way to keep it flexible and applicable to any use case, with the idea that libraries would later add a layer of convenience to accelerate and simplify development.
Most libraries provide a selection of ready-made models, vertex shaders and fragment shaders that can drastically decrease the amount of code you need to write. If you are still not convinced, have a look at the code for an example 3D model of the Moon — with a library and without a library. Even if you just take a quick look, the difference in length and complexity of code is apparent and makes a good case for using a library.
There are many WebGL libraries. What most do is build on top of WebGL to create elements intuitive to a 3D environment like a scene, a camera, a light source, ambient light, ready-made shapes, materials, textures, and effects such as fog, and floating particles. The idea of these elements remains pretty much the same across libraries. How they are used, however, depends on the library’s architecture. Because WebGL can be interactive, most libraries provide easy ways to handle events as well. Finally, most libraries also provide some vertex and fragment shaders. When you do your own library exploration you’ll see that this is by no means an exhaustive description of what libraries have to offer, but it gives you a good idea to start with.
Choose a WebGL library!
(Not a comprehensive list)
As mentioned, you can also write your own WebGL from scratch, using no libraries. Find out how at the Learning WebGL blog.
Looking at WebGL code
Now it’s time to have a look at some actual WebGL code. To make it simpler, this code has been created using a WebGL library. For the following example I have chosen PhiloGL because it has very good documentation, making it a great library for someone who wants to get started with WebGL.
This code shows some of the basic WebGL features that you may want to include in a simple program. The accompanying notes provide ample explanation, and links to the PhiloGL documentation for further details. You should take this example and experiment, making changes to what’s there already and maybe even adding a few things of your own design. If you’re curious you can compare this PhiloGL implementation with its equivalent in “raw” WebGL.
The next code snippet shows what your HTML file should look like. We import the PhiloGL script, as downloaded from the PhiloGL website, and the index.js file where we will write our code. We also create a element where we want the WebGL scene to be rendered. When the document is loaded, webGLStart(); will be called. This function resides in index.js and will initialize the WebGL application.
Now Let’s walkthrough the code inside index.js . The webGLStart(); function is the entry point for creating the WebGL application.
The moon is created using the PhiloGL O3D module. O3D provides model management and 3D primitives, like the sphere used in this case. The number of parallels ( nlat ) and meridians ( nlong ) and the radius are specified. A texture is applied to the sphere from an image file:
Next, the WebGL application is created by calling the PhiloGL constructor. The PhiloGL constructor automatically creates a WebGL context, a program, a camera, a scene, options for loading textures via IO, events handlers, and more. In this example we are going to use the default shaders, so no program needs to be specified in the constructor. The scene is also left unspecified. It will be created with its default values. The camera’s position is modified. We declare a texture from an image source ( moon.jpg ), and use some event handlers: drag-and-drop to rotate, and the mouse scroll to zoom the model.
Once the application is created successfully (the WebGL program is compiled, images are loaded and converted to textures, etc.), the onLoad callback will be executed. The first argument to the onLoad callback is a WebGL application. The WebGL Application class has useful methods to manipulate the program, the camera, the scene, etc. We also get a handle to the WebGL context through the gl property, in case we want to do some fine tuning at the WebGL API level:
In this example, users can dynamically modify the lighting values (ambient light colour, point light colour, and position) using a form on the page. Here we get a handle to those form elements:
Next we define some basic WebGL setup information: we set opaque black for background colour when clearing the canvas, we enable depth testing (this hides objects that are “behind” other objects in the scene), and we set the viewport to occupy the total width and height of the canvas.
Now we add the moon to our scene, and draw it. For each frame in the scene, the draw() function clears the screen, sets up the lighting, renders the moon and makes a request for the next frame to be drawn:
Summary
I hope this article gave you a good idea of what WebGL is about and how to get started building a simple WebGL application. Most importantly, however, I hope it got you excited about trying it yourself. We expect to publish more about WebGL in the near future. Stay tuned!
Useful links for more information:
Copyright © 2006—2022 Opera Software AS. Some rights reserved. Contribute!
Читайте также: