Trufi Dec 23 2015 at 10:32

WebGL для всех

11 min

53K

2ГИС corporate blogJavaScript*WebGL*Website development*

Tutorial

+62

Comments 24

LinGG Dec 23 2015 at 11:16

мне интересно, почему такая отличная и не новая технология настолько невостребованна? есть какие-то серьезные проекты на нем?

m1el Dec 23 2015 at 11:25

Google Maps, рендереры Open Street Maps, FinalMesh.

kobezzza Dec 23 2015 at 11:57

UnrealEngine4 и Unity5 умеют компилить свои проекты в WebGl + ASM.js

Trufi Dec 23 2015 at 12:10

Сложно сказать, но есть несколько предположений:

Сайты, за редкими исключениями, скорее про интерфейсы, а интерфейсы это про 2D
Довольно большой порог вхождения в технологию
Многие компании до сих пор поддерживают IE8 из-за 0.5% пользователей, чего уж тут говорить про 17%, у которых нет WebGL

gfxdevrus Dec 23 2015 at 12:40

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

Lertmind Dec 23 2015 at 12:59

Можно добавить сюда популярный 2D-движок pixi.js, который использует WebGL, но скатывается к canvas если что. Таких примеров наверно достаточно ещё.

Aquahawk Dec 23 2015 at 12:43

Потому что JS. Даже не js в мир браузеров. Там отвратительная поддержка стандарта настолько надёжно чтобы один и тот же код с вызовами апи работал одинаково. Потому что до сих пор ни одно демо которое я видел не работает и на компе в разных браузерах и на мобиле.

kashey Dec 23 2015 at 14:18

WebGL до сих пор не совсем стабилен и часто крешиться. Да и хорошо обоснованная разработка на нем только год как актальна — с выходом новых версий iOS и IE.

Lertmind Dec 23 2015 at 13:21

К чему этот странный абзац?

Если вы думаете, что WebGL рисует 3D, вы ошибаетесь. WebGL ничего не знает о 3D, это скорее низкоуровневый 2D API, и всё что он умеет делать, это рисовать треугольники. Но он умеет рисовать их очень много и очень быстро.

Вы же, например, сами используете ниже векторы из трёх компонент. Я к тому, что API предполагает 3D.

kashey Dec 23 2015 at 14:15

Там по умолчанию 4D вектора — (x,y,z,w). Но на выходе из вершинного шейдера данные уже в 2D координатах + не совсем с ними связанный(сжатый) Z. Фактически 2D.
При этом в шейдер можно передавать что угодно — 1D, 2D, 3D, 20D. Главное что бы он такие данные переварил.

Lertmind Dec 23 2015 at 15:12

Но на выходе из вершинного шейдера данные уже в 2D координатах + не совсем с ними связанный(сжатый) Z. Фактически 2D.

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

По вашей логике OpenGL тоже 2D API? Для меня «низкоуровневый 2D API» это обращение к пикселям на экране, а OpenGL (WebGL) уровнем выше и позволяет работать с трёхмерными объектами. Так что я придерживаюсь википедии:
Open Graphics Library (OpenGL) is a cross-language, cross-platform application programming interface (API) for rendering 2D and 3D vector graphics.
WebGL (Web Graphics Library) is a JavaScript API for rendering interactive 3D computer graphics and 2D graphics within any compatible web browser without the use of plug-ins

kashey Dec 23 2015 at 15:23

Делить на 2D и 3D можно было старый OpenGL, который с fixed pipeline. Сейчас это понятие достаточно эфемерно.

VS — программа для каждого элемента данных переданных в конвейер. PS — программа для каждого пикселя блока собранного из каких-то элементов по конвейеру выше.

Двуногое животное без перьев, а не 3D API для рендеринга. На нем и физику считают, в крайнем случае партиклы…

Ravager Dec 23 2015 at 13:52

Если вы думаете, что WebGL рисует 3D, вы ошибаетесь. WebGL ничего не знает о 3D, это скорее низкоуровневый 2D API, и всё что он умеет делать, это рисовать треугольники. Но он умеет рисовать их очень много и очень быстро.

да неужто? а как же three.js или playcanv.as? они наверное сами 3д дорисовывают, от нечего делать)

pav5000 Dec 23 2015 at 14:15

Нужна линия? Без проблем, всего лишь несколько последовательно соединенных треугольников.

Вот как раз линии растеризуются не с помощью треугольников. И точки тоже, для этого есть режимы GL_LINES и GL_POINTS.

kashey Dec 23 2015 at 14:16

В WebGL(и GL ES) с нормальной растеризицией некоторых базовых примитивов есть проблемы. Приходятся доставать из шкафа бубен.

entomolog Dec 24 2015 at 03:08

У меня что-то с GL_LINES никогда проблем не было (ну кроме как толщина не везде работает). А вот GL_POINTS да, зачастую не работают.
Да вобщем-то GL_LINES и GL_POINTS не особо то и нужны, разве что для дебага.

kashey Dec 24 2015 at 07:35

Основные претензии не к самому GL_LINE, но к качеству картинки и возможных настройках.

Ravager Dec 23 2015 at 14:22

насколько я знаю в gl есть ограничение на толщину линии. причем везде разное)

UFO just landed and posted this here

entomolog Dec 24 2015 at 03:45

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

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

Большинство руководств или статей перепрыгивают сразу на использование какой-нибудь библиотеки.

Если цель не поиграться, а сделать продукт, то это весьма правильное решение.

Если вы думаете, что WebGL рисует 3D, вы ошибаетесь. WebGL ничего не знает о 3D, это скорее низкоуровневый 2D API, и всё что он умеет делать, это рисовать треугольники.

Посыл правильный, но вы немного перегнули палку :).

Как по мне, если интерес представляет именно работа с графическим АПИ, то WebGL в принципе тот-же OpenGL ES 2.0, и является урезанной десктопной версией. Рассматривать WebGL как самостоятельную сущность, о которой нет документации и статей, это перегиб. Они просто не нужны, так как есть огромное число разных туториалов по OpenGL ES и OpenGL 4.*.

В контексте Web'а, как по мне интереснее рассмотреть немного более практические примеры с использованием графических библиотек. Ведь, писать все с нуля, не имеет смысла. Точно так же как никто не пишет игры на чистом OpenGL, так же и WebGL не для этого.

Статья хорошая, для людей, интересующихся этой темой, думаю создаст правильное представление о WebGL.

Trufi Dec 24 2015 at 08:13

Спасибо за замечания!

Изучение и работа с WebGL действительно сильно облегчается за счёт большого количества документации и примеров к OpenGL.

В контексте Web'а, как по мне интереснее рассмотреть немного более практические примеры с использованием графических библиотек. Ведь, писать все с нуля, не имеет смысла. Точно так же как никто не пишет игры на чистом OpenGL, так же и WebGL не для этого.

Использование готовых решений сильно зависит от проекта и требований к нему. Например, мы перешли с библиотеки и работаем с собственной обёрткой над WebGL. Заточенность инструмента под наши задачи дала ряд преимуществ: гибкость, быстродействие, небольшой размер.

entomolog Dec 24 2015 at 18:54

Проект не open source, да? Если open source, было бы очень интересно попробовать.

Trufi Dec 25 2015 at 07:42

Open source только обёртка github.com/2gis/2gl, но она имеет мало смысла без самого проекта.

iDennis Jan 3 2016 at 16:21

Читаю сейчас книгу Коичи Мацуда и Роджера Ли, кто интересуется, рекомендовал бы для чтения