Что в докладе:
Коротко о том, почему WebGL не нужен;
Коротко о тех кейсах, где он может быть полезен;
Коротко о том, почему его следует изучить;
Немного о том, чем webgl является, а чем нет;
И о том чем webgl отличается от TreeJs.
3. Немного о себе
〉В 1998 году появилась
первая видеокарта.
〉В 1999 - вторая.
〉Достаточно активный
пользователь gamedev.ru.
〉Потом женился и оброс.
〉В 2008 году бросил
openglить.
〉Последние 5 лет работаю в
Яндексе.
3
4. Каждой истории нужна завязка
〉В последнее время Flash
покидает наши просторы.
〉Все сайты mobile-friendly,
html5-only.
〉Сплошной react и никакой
анимации.
4
22. 22
Как это на самом деле работает?
Кривые руки
Вообще непонятно что
Костыли
Костыли (Metal, Vulcan)
WebGL
Костыли
Костыли
Костыли
23. «Yes, You Should Learn Vanilla JavaScript Before Fancy JS
Frameworks» гласит:
«При разработке любого продукта
настанет такой день, когда что-то начнет
работать не так, как ожидалось, и вы не
будете знать почему»
23https://snipcart.com/blog/learn-vanilla-javascript-before-using-js-frameworks
Да, следовало бы учить JavaScript до..
24. Ничего страшного в этом нет.
Писать на WebGL, а не на
ThreeJS – то же самое,
что использовать
VanillaJS, а не React.
30. Наш опыт работы с WebGL
〉Где-то в 2011 году мы его
откопали.
〉Intel видеокарта моего ноута
была blacklisted.
〉Завелся только под
OperaMobile на телефоне.
〉В итоге закопали.
30
31. Нельзя просто взять и WebGL
〉IE 9-10 заявляли что webgl
это большая дыра в
безопасности. (и были правы).
〉Safari просто чего-то ждал.
31
32. Как на картинах Босха
Но в любом случае нам было
что поделать все это время…
32
Сад наслаждений, Босх
39. И они могут быть любыми!
〉Треугольник только создает
область под закраску.
〉В этой области можно
нарисовать что-то другое.
〉Например ничего.
39
Bill Cipher, by AbnormallyNice
41. KEEP CALM AND INVENT ON!
Чтобы отрисовать линию
требуется:
〉Справочник Линейной Алгебры
〉Не совсем здравое мышление
〉Критический взгляд на мир..
〉И много свободного времени.
41
Тоторо во имя добра, Всеволод Шмыров
42. А каково браузеру?
〉«Аппаратно-ускоренный»
canvas, вынужден каждый раз
повторять все эти странные
операции с нуля!
〉В итоге SVG иногда быстрее.
〉Еще быстрее Three.js, потому
что WebGL.
〉А «ваш» WebGL – космос!
42
http://alboardman.tumblr.com/post/103042705161/welcome-to-the-machine
43. PROfit?
〉Четко разделяет все на
«загрузку», «процессинг» и
«рендер»
〉Рендер будет таким, какой
придумаете.
43
Наконец!
48. Тайны, что хранят тайлы
〉Тайлы должны красиво
«блендиться».
〉Прозрачные тайлы содержат
«ничего».
〉Тайлы бывают разного
размера.
〉Тайлы можно по разному
«батчить».
48
49. Texture Atlas
〉Тайлы берутся из TA
4096x4096(х2).
〉На прозрачных тайлах alpha
test.
〉Все думаем о склейке слоев.
〉PS: Один тайл на iPhone 6-7
Plus - 728px.
49
58. Но вот была проблема…
〉Панорамы были основаны на
технологии Flash.
〉Они отлично работали, и
никаких претензий к ним не
было.
〉Вот только Flash с нами не
везде….
58
http://dc.wikia.com/wiki/File:Black_Flash_0007.jpg
59. 59
На самом деле это тоже все было
Секретный доклад API Яндекс.Карт
https://events.yandex.ru/lib/talks/3345/
Производительность WebGL-
приложений
https://events.yandex.ru/lib/talks/
3211/
API Панорам
недавно на FrontTalks
62. Profit?
〉Работают везде. От iPhone4
до SmartTV.
〉Работают плавно, быстро,
интересно.
〉Технически «панорамы»
можно сделать только на
Flash или WebGL.
〉На Canvas можно (мы
делали), но это боль.
62
70. Но есть одна проблема
〉Skia, SVG, Canvas, ThreeJS,
Babylon, PlayCanvas пишут
очень умные люди.
〉Там конечно много тупняка и
косяков, но далеко не факт
что у вас получится лучше.
〉Только это не WebGL, это
суррогаты.
70