Что за программа webgl

3D-технологии сейчас можно использовать в браузерах для создания потрясающих и захватывающих интерактивных пользовательских интерфейсов.
Технология WebGL – это API-интерфейс JavaScript для рендеринга 3D и 2D-графики в браузере в реальном времени. Он основан на OpenGL ES – программном API, используемом во встроенных системах, таких как смартфоны и планшеты.

Раньше браузеры использовали ЦП для рендеринга контента, но в последние годы браузеры приняли поддержку аппаратного ускорения, и это означает, что разработчики теперь могут подключаться к графическому процессору устройства, чтобы обеспечить рендеринг сложной графики (только убедитесь, что ваш веб-хостинг может удовлетворить ваши потребности).

Что такое WebGL

WebGL является дочерней компанией OpenGL и основан на OpenGL Embedded Systems. Этот API JavaScript использует HTML5 в браузере для рисования 2D и 3D графики.

Он не полагается на какие-либо внешние плагины.

Основная причина использовать виртуальную реальность на веб-сайтах – это её привлекательность для посетителей. Сайт с виртуальной реальностью привлечет больше людей, и они будут проводить на нём больше времени.

WebGL: как сделать сайт с интерактивной 3D-графикой

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

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

Во время подготовки этой статьи выяснилось, что примеров WebGL много. Рассмотрение этих примеров расширит ваше понимание этой захватывающей технологии.

Примеры WebGL

Итак, не торопитесь и наслаждайтесь одними из самых красивых приложений виртуальной реальности. В конце этой статьи вы найдете несколько советов о том, как его использовать.

Ползунок Portal Effect Hero

Этот модуль слайдера хорошо подходит в качестве эффектной целевой страницы .

Произведите неизгладимое впечатление с его помощью на сайте WordPress. Посетители запомнят эту захватывающую презентацию продукта.

Коллекция Creative Hero

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

Эффект кибер-частиц

Посетители веб-сайта будут поражены этим эффектом кибер-частиц от Slider Revolution.

Изометрический слайдер

Очаровательный шаблон Isometric Slider очень красочный. Это дает вам полный контроль над цветовой палитрой и содержимым экрана.

WebGL 3D Graphics Explained in 100 Seconds

Слайдер Tech Showcase

Этот приятный компонент слайдера имеет классную анимацию устройства. Прокрутка вниз покажет плавный, но тонкий эффект параллакса.

Слайдер кубической анимации

Этот слайдер содержит анимацию куба и текстовые модули. Также есть привлекательная кнопка с призывом к действию.

Sponza Palace

Sponza Palace использует фреймворк Babylon.js. В результате получается легкий элемент, который по-прежнему может оживить веб-сайт.

В этом примере показан дворец Спонза в Хорватии. Он дает трехмерный вид в браузере без необходимости загрузки каких-либо сторонних плагинов.

Город

Следующим в этом списке примеров WebGL идет город.

Хотя эта демонстрация еще не закончена, она выглядит великолепно. Он черпает вдохновение в Pixel City.

Книжный шкаф WebGL

Этот книжный шкаф – альтернативный способ доступа к Google Книгам. Книги виртуально расположены по спирали и отсортированы по тематике.

При нажатии на одну из книг пользователи будут перенаправлены на запись в Google Книгах.

Витрина портфолио Motion Blur

Слайдер-витрина, в котором также есть возможность показывать видео. Эта простая демонстрация использует фантастический переход размытия движения.

Также есть логотип и меню. Витрина портфолио Motion Blur является гибкой и идеально подходит для любого проекта.

3D веб-модель с параметрами настройки

Список продолжается 3D-моделью обуви. Модель полностью настраиваема.

Он использует Babylon.js и является отличным инструментом для демонстрации моделей новых технологий.

Просто рефлектор

Google и Arcade Fire работали вместе над созданием этого музыкального видео . Зрители могут в реальном времени корректировать различные фильтры и эффекты.

Для этого видеоприложения требуется веб-камера или мышь.

Аквариум

Еще один из лучших примеров WebGL – Aquarium. Этот WebGL демонстрирует потенциал виртуальной реальности, моделируя аквариум.

3D-графика превосходна, когда дело касается текстур, анимации, отражений и преломлений.

Просмотр ландшафта Google Maps

Обзор ландшафта Google Maps – самый известный пример приложения WebGL. Топографические карты становятся более информативными с 3D-изображениями.

Огни

Lights, созданная на основе three.js, предлагает посетителям незабываемые визуальные впечатления. Он синхронизирует музыку с формами и цветами.

Вы можете инициировать дополнительные взаимодействия, щелкнув сцену. Используйте наушники для оптимальной работы.

HelloRacer

HelloRacer – следующий отличный пример WebGL. Он визуализирует гоночную машину Формулы-1.

Отражения и тени очень реалистичны. Вы можете испытать, каково это – управлять гоночным автомобилем, используя клавиши WASD.

Ползунок Cyber ​​Glitch Effect

Cyber ​​Glitch Effect Slider представляет неоновый кибер-мир. Глитч-переход и эффекты пишущей машинки делают этот слайдер особенным.

Его очень просто использовать благодаря легкой настройке.

Игра Mozilla VR Blaster

Популярный браузер Mozilla Firefox предлагает простой VR-шутер.

Цель проста. Стреляйте клавишей пробела, избегайте врагов и оставайтесь в живых как можно дольше.

Механика и оформление игры делают ее увлекательной.

Динамическая кубическая карта

WebGL Earth

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

Поездка на аттракционах

Это отличное место для начала работы с 3D. Завораживающая графика основана на формуле Хопалонга Барри Мартина.

Автомобильный визуализатор 360

Этот экспериментальный визуализатор изображает автомобили.

Зритель может изменить цвет и модель автомобилей. В ответ программа динамически меняет текстуры.

Спасите тропический лес

Это большой шаг от автомобилей к защите окружающей среды. Save the Rainforest – совместный проект Норвежского фонда тропических лесов и общественной телекомпании NRK.

Посетители могут совершить виртуальное путешествие по тропическому лесу с изображениями в формате 360 °.

HexGL

В этой быстрой гоночной игре используются HTML5, JavaScript, Three.js и WebGL. Он отдает дань уважения ранним играм, таким как F-Zero и Wipeout.

По графике он очень похож на настольные игры. Для плавного хода можно снизить уровень детализации.

Плазматическая изоповерхность

Это моделирование плазмы WebGL/GLSL очень красиво. Он работает на графическом процессоре (GPU).

Это главное преимущество WebGL. Он использует графический процессор, общий для всех компьютеров.

Кибер-карусель с лайтбоксом

Список примеров WebGL продолжает Cyber ​​Carousel.

Cyber ​​Carousel заполняет весь экран, и редактировать контент очень легко. Пользователь может изменить цвет лайтбокса простым щелчком в редакторе.

Зрители могут перемещаться по карусели с помощью вкладок вертикальной навигации.

Konterball WebGL

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

Konterball использует библиотеки cannon.js, deepstream.js и three.js.

Electricflower

Кубик Рубика WebGL

Вернер Рандельсхофер разработал этот апплет кубика Рубика.

Частично он использует код из репозитория WebGL. Часть кода поступает от Google и Apple и используется с их разрешения.

WebGL Машины

Need for Speed была известна в сфере гоночных игр на протяжении десятилетий. В будущем в эти игры можно будет играть в веб-браузерах.

Звучит невероятно, но взгляните на выпуск этих автомобилей. Они отображают реалистичные динамические кубические карты, тени и эффекты постобработки.

Окаменелость динозавра нодозавра

Читатели журнала National Geographic регулярно сталкиваются с трехмерной графикой. Эта ссылка показывает окаменелость динозавра нодозавра.

Есть разные ракурсы и аннотации, которые предоставляют дополнительную информацию. Об окаменелостях можно будет подробнее узнать в конце статьи.

Обсидиан

Эта демонстрация синхронизирует музыку и плавающие фигуры в разных цветах. Он генерирует эффекты в реальном времени, несмотря на то, что может указывать ползунок внизу.

CSS3D Периодическая таблица

Эта трехмерная таблица Менделеева не использует WebGL. Вместо этого он использует CSS3D для визуализации ящиков с химическими элементами.

CSS3D Periodic Table предлагает четыре различных макета – сетка, спираль, сфера и таблица.

Planeto Web

Planeto Web отображает всю солнечную систему в браузере. Он имитирует солнечную систему с ускоренной скоростью.

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

Коллекция героев фоновых эффектов

Потрясающий слайдер, показывающий медитативные градиенты и переходы. Посетители будут в восторге от этого места и вернутся к нему.

VR-галерея в вашем браузере

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

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

Текстуры и материалы галереи качественные. Опять же, это пример WebGL.

Angry Birds

Все знают игры Angry Birds.

Компания Rovio создала его веб-версию. Это версия с низким разрешением, которая выглядит как оригинальная 2D-игра на холсте.

Материалы: Автомобили

Просматривайте 3D-модели Bugatti Veyron, Chevrolet Camaro, Ferrari F50 или Lamborghini Gallardo в окне браузера. При желании вы можете изменить цвет модели.

Пол Льюис сделал вдохновляющую и элегантную демонстрацию. Вы можете изменить автоматическую орбиту, эластичность, величину, капли дождя и каркас.

Вы даже можете добавить свои собственные изображения и посмотреть, как меняются формы и эффекты.

Внутри Renault KADJAR

Эта демонстрация является результатом сотрудничества Little Wordshop, Oculus и Renault. Внутри Renault KADJAR позволяет увидеть интерьер автомобиля и настроить его.

Он использует WebVR и WebGL.

Ползунок шкалы времени винодельни

Шаблон слайдера, который позволяет вам рассказать свою историю. Он поставляется с логотипом и социальными значками, которые вы можете использовать.

Красиво выглядит как отдельная целевая страница.

Завершение мыслей о самых крутых примерах WebGL

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

Эти новые технологии расширяют возможности приложений и браузеров.

В WebGL есть потрясающий 3D-дисплей JavaScript. Хотя для правильной работы некоторым может потребоваться современный GPU.

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

Google и Mozilla активно вносят улучшения и предложения по повышению безопасности. Есть надежда, что это приведет к интересным будущим разработкам.

Источник: yablogo.su

Знакомство фронтендера с WebGL: почему WebGL? (часть 1)

Мне и моему коллеге дизайнеру была поставлена задача разработать новую версию сайта-визитки компании. Коллега полгода учился работать с 3D-редакторами (в нерабочее время на Maxon Cinema 4D), поэтому он хотел использовать свои новые навыки при создании новой версии сайта. Его идея заключалась в том, что на каждой странице на первом экране будет крутиться какая-нибудь непонятная фигура с каким-нибудь красивым текстом. Выглядеть это должно было примерно так:

Реальных моделей пока не было, поэтому на первое время мне предоставили модель яблока.

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

• Знакомство фронтендера с WebGL: почему WebGL? (часть 1)
• Знакомство фронтендера с WebGL: первые наброски (часть 2)
• Знакомство фронтендера с WebGL: четкие линии (часть 3)
• Знакомство фронтендера с WebGL: рефакторинг, анимация (часть 4)

Почему вообще WebGL?

Слово WebGL у меня ассоциируется с 3D. Я считаю, что больше нет нормальных способов отрендерить что-то в 3D без WebGL. Помимо того, что слово WebGL само по себе звучит очень круто, нашлись и другие причины выбрать эту технологию:

• Мы хотели интерактивности. Например, чтобы моделька реагировала на движение курсора мыши по двум осям. С помощью видео такое сделать невозможно.
• Адаптивность. Мы могли рисовать одну модельку под любые экраны и устройства (поддержка WebGL была подавляющей). Нам не нужно рендерить заранее кучу видюх под разные экраны и переживать о том, что на каком-то экране появится пикселизация.
• Проблемы с iOS. На каждой версии были свои приколы с фоновыми видео на телефоне. На одной из версий видео вообще могло не запуститься из-за политик Apple, а иногда нужно было проводить специальный обряд, чтобы фоновое видео заработало. Таких проблем с WebGL пока нет и, надеюсь, не будет.
• IE11 тоже поддерживает WebGL. Да, есть нюанс, но он даже не стоит внимания.
• В SVG невозможно сделать полноценный 3D, только псевдо. Также браузеры плохо себя чувствуют, когда SVG элементов в DOM больше 10 000. Это показали мои попытки отрендерить модельку в SVG.

Я думаю, первого пункта хватит, чтоб принять решение в пользу webGL.

С чего начал ?

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

Я знал про существования библиотек three.js , Babylon.js и PixiJS (это вообще 2D-рендер). Вес 3D-библиотек огромный, как бы они не были сжаты. Не хотелось пускать таких монстров к себе на сайт, у меня и так был 100кб react-dom, куда еще больше (спойлер: в конце концов мое решение весит 5-7кб + animejs)? Да и чтоб разобраться в 3D-библиотеках, все равно нужно было иметь какие-то представления о 3D-графике.

Я гуглил «webgl obj model render» и находил только онлайн-просмотрщики или какие-то узко специфичные решения, которые запустить не смог.

Также искал демки на CodePen, но я не нашел ничего подходящего. А если что-то находил, не мог понять, что вообще происходит и что мне делать.

Понял, что нужно начать с основ, без базовых знаний webGL задачу не выполнить.

Погружение в 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 нужно еще указать глубину точки, ну это пока не важно.
• Пространство в webgl имеет координаты от -1 до 1, потому, нам нужно преобразовывать координаты разных фигур в координаты от -1 до 1, если они за пределами. ВОТ ОНА МАТЕМАТИКА.
• Пропускаете через апи координаты, цвета и другие параметры.
• PROFIT! Мы получаем 2D/3D картинку.

Шейдеры

Выше я говорил про программы на GLSL, программа всегда состоит из 2 шейдеров. Шейдер есть функция.Каждая программа состоит из вершинного шейдера (Vertex Shader) и фрагментного шейдера (Fragment Shader).

Вершинный шейдер — позволяет разметить пространство, а фрагментный — закрашивает это пространство. Так работают видеокарты.

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

Если приводить пример из жизни, у вас есть стенка 1м х 1м и есть художник по имени Видеокарта. Вот вы и ему говорите:

— Поставь мне точку на 30 сантиметров от верха и 50 см слева, потом точку в 50х50, потом в 70х80, соедини мне это линиями и закрась получившееся пространство красным.

Сами шейдеры выглядит так:

Вершинный шейдер (Vertex Shader)

// атрибут, который будет получать данные которые мы передали. attribute vec4 a_position; // все шейдеры имеют функцию main void main() < // gl_Position — специальная переменная вершинного шейдера, // которая отвечает за установку положения gl_Position = a_position; >

Фрагментный шейдер (Fragment Shader)

// фрагментные шейдеры не имеют точности по умолчанию, поэтому нам необходимо её // указать. mediump подойдёт для большинства случаев. Он означает «средняя точность» precision mediump float; void main() < // gl_FragColor — специальная переменная фрагментного шейдера. // Она отвечает за установку цвета. gl_FragColor = vec4(1, 0, 0, 1); // вернёт красный >

В вершинном шейдере вы увидели attribute . В шейдере есть несколько типов переменных (дальше копипаста с webglfundamentals.org):

Атрибуты и буферы

Буферы — это массивы бинарных данных, загруженных в графический процессор. Обычно буферы содержат вещи вроде положений вершин, нормалей, координат текстур, цветов вершин и т.д., хотя вы вольны положить в них что угодно.

Атрибуты определяют, каким образом данные из ваших буферов передаются в вершинный шейдер.

Например, вы можете поместить положения вершин в буфер как три 32-битных числа с плавающей точкой на одно положение. Вы указываете конкретному атрибуту, откуда брать положения вершин, какой тип данных используется (три 32-битных числа с плавающей точкой), начиная с какого индекса в буфере начинаются положения вершин и какое количество байтов нужно получить от одного положения до следующего.

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

Uniform-переменные

Uniform-переменные — это глобальные переменные, которые устанавливаются перед выполнением программы шейдера.

Текстуры

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

constying-переменные

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

Вершинный шейдер выполняется на каждую порцию 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 либ.

Источник: habr.com

Введение в WebGL

WebGL представляет собой технологию, базирующуюся на OpenGL ES 2.0 и предназначенную для рисования и отображения интерактивной 2D- и 3D-графики в веб-браузерах. При этом для работы с данной технологией не требуются сторонние плагины или библиотеки. Вся работа веб-приложений с использованием WebGL основана на коде JavaScript, а некоторые элементы кода — шейдеры могут выполняться непосредственно на графических процессорах на видеокартах, благодаря чему разработчики могут получить доступ к дополнительным ресурсам компьютера, увеличить быстродействие. Таким образом, для создания приложений разработчики могу использовать стандартные для веб-среды технологии HTML/CSS/JavaScript и при этом также применять аппаратное ускорение графики.

Если создание настольных приложений работающих с 2d и 3d-графикой нередко ограничивается целевой платформой, то здесь главным ограничением является только поддержка браузером технологии WebGL. А сами веб-приложения, построенные с использованием данной платформы, будут доступны в любой точке земного шара при наличии сети интернет вне зависимости от используемой платформы: то ли это десктопы с ОС Windows, Linux, Mac, то ли это смартфоны и планшеты, то ли это игровые консоли.

WebGL возник из экспериментов над Canvas 3D американского разработчика сербского происхождения Владимира Вукичевича из компании Mozilla в 2006 году. Впоследствии разработчики браузеров Opera и Mozilla стали создавать свои реализации WebGL. А впоследствии была организована рабочая группа с участием крупнейших разработчиков браузеров Apple, Google, Mozilla, Opera для работы над спецификацией технологии. И в 3 марта 2011 года была представлена спецификация WebGL 1.0.

Поддержка браузерами

В настоящий момент WebGL поддерживается следующими браузерами:

Десктопные браузеры

• Mozilla Firefox (с 4-й версии)
• Google Chrome (с 9-й версии)
• Safari (с 6-й версии, по умолчанию поддержка WebGL отключена)
• Opera (с 12-й версии, по умолчанию поддержка WebGL отключена)
• IE (с 11-й версии, для других версий можно воспользоваться сторонними плагинами, например, IEWebGL)

Мобильные браузеры и платформы

• Android-браузер (поддерживает WebGL только на некоторых устройствах, например, на смартфонах Sony Ericsson Xperia и некоторых смартфонах Samsung)
• Opera Mobile (начинаю с 12-й версии и только для ОС Android)
• IOS
• Firefox for mobile
• Google Chrome для Android

Преимущества использования WebGL

• Кроссбраузерность и отсутствие привязки к определенной платформе. Windows, MacOS, Linux — все это не важно, главное, чтобы ваш браузер поддерживал WebGL
• Использование языка JavaScript, который достаточно распространен
• Автоматическое управление памятью. В отличие от OpenGL в WebGL не надо выполнять специальные действия для выделения и очистки памяти
• Поскольку WebGL для рендеринга графики использует графический процессор на видеокарте (GPU), то для этой технологии характерна высокая производительность, которая сравнима с производительностью нативных приложений.

Источник: metanit.com