Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Пора учить WebGL
Антон Корзунов, tk-conf, 8 октября, Ростов.
Немного о себе
В 1998 году появилась
первая видеокарта.
В 1999 - вторая.
Достаточно активный
пользователь gamedev.ru.
Пото...
Каждой истории нужна завязка
В последнее время Flash
покидает наши просторы.
Все сайты mobile-friendly,
html5-only.
Сплошн...
И вот завязка…
5
7http://www.apple.com/iphone-7/ Видеовставка
Все внимание на «блик»!
Transforming-n-Lighting
С желания добавить немного
«света» и началось
производство «ускорителей»
Они это умеют делать, оче...
9https://threejs.org/examples/webgl_lights_pointlights.html Видеовставка
Свет это очень просто!
loader.load( «obj/walt/Wal...
10http://www.apple.com/iphone-7/
Но что же сделала Apple?
У Apple более «ламповое» решение
Key-frame анимания
Image diff
Pure Canvas
30 мегабайт
Работает через раз….
11
Polo Volkswagen Dr Mach LED 2 MC
12https://geektimes.ru/post/280326/ Видеовставка
Ведь можно было ПРОЩЕ!
Темные века закончились
WebGL – быстрее.
WebGL – умнее.
WebGL – вкуснее.
13
Dawn, фея лесов NVidia
14https://www.shadertoy.com/view/Msl3Rr Видеовставка
5555 байт
WebGL – способ связи с
видеокартой.
16
Как это работает?
Application Layer
Hardware
17
Как это работает?
Application Layer
Hardware
HAL
18
Как это работает?
Application Layer
Hardware
HAL
OpenGL, DirectX
19
Как это работает?
Application Layer
Hardware
HAL
OpenGL, DirectX
WebGL
20
Как это работает?
Application Layer
Hardware
HAL
OpenGL, DirectX
WebGL
Angle
Browser
ThreeJS, Blend4Web…
21Про gamedev – не шутка.
Ваши помощники:
Blend4Web Unity PlayCanvas GooCreate
ThreeJS BabylonJS Stack.gl gamedev.ru
22
Как это на самом деле работает?
Кривые руки
Вообще непонятно что
Костыли
Костыли (Metal, Vulcan)
WebGL
Костыли
Костыли
...
«Yes, You Should Learn Vanilla JavaScript Before Fancy JS
Frameworks» гласит:
«При разработке любого продукта
настанет так...
Ничего страшного в этом нет.
Писать на WebGL, а не на
ThreeJS – то же самое,
что использовать
VanillaJS, а не React.
Hello, World!
https://events.yandex.ru/lib/talks/3344/
Ренессанс графики на
клиенте
http://www.slideshare.net/theKashey/ss...
26https://www.youtube.com/watch?v=3tlTMJCyEnk
Технологии освещения в играх
Всего за час вы узнаете….
Radiosity Normal Mapping Basis, Directional
Lightmaps (Lightmass, Beast), Spherical
Gaussian Lig...
3D – хаки, обманы, иллюзии
Графика – это математика.
Реальные модели слишком
долго считаются
В общем, все как в
современно...
50 оттенков WebGL
Полигональный WebGL
WebGL для энтузиастов
WebGL со странностями
Наукоемкий WebGL
ThreeJS (не WebGL)
29
Наш опыт работы с WebGL
Где-то в 2011 году мы его
откопали.
Intel видеокарта моего ноута
была blacklisted.
Завелся только ...
Нельзя просто взять и WebGL
IE 9-10 заявляли что webgl
это большая дыра в
безопасности. (и были правы).
Safari просто чего...
Как на картинах Босха
Но в любом случае нам было
что поделать все это время…
32
Сад наслаждений, Босх
WebGL сейчас
Геометрия
Отрисовка растровых слоев
Панорамы
33
Как говорил Пифагор…
Геометрия
35
Какая между ними разница?
Как нарисовать линию?
SVG – <path d=…
Canvas – moveTo/lineTo
ThreeJS – new THREE.Line..
WebGL – ?
36
Как нарисовать полигон?
SVG – <path d=…
Canvas – moveTo/lineTo
ThreeJS – Shape/Mesh
WebGL – ?
37
38
Все состоит из треугольников
И они могут быть любыми!
Треугольник только создает
область под закраску.
В этой области можно
нарисовать что-то другое.
Н...
40http://www.goodboydigital.com/pixi-webgl-primitives/
Не все так просто.
KEEP CALM AND INVENT ON!
Чтобы отрисовать линию
требуется:
Справочник Линейной Алгебры
Не совсем здравое мышление
Критичес...
А каково браузеру?
«Аппаратно-ускоренный»
canvas, вынужден каждый раз
повторять все эти странные
операции с нуля!
В итоге ...
PROfit?
Четко разделяет все на
«загрузку», «процессинг» и
«рендер»
Рендер будет таким, какой
придумаете.
43
Наконец!
Cons?!
44
С геометрией закончим
Отрисовка растра
Основа карты – растровые слои.
Ну что сложного может быть в
задаче нарисовать
КАРТИНКИ??
46
47
Это карта. Она как пирог.
Тайны, что хранят тайлы
Тайлы должны красиво
«блендиться».
Прозрачные тайлы содержат
«ничего».
Тайлы бывают разного
размер...
Texture Atlas
Тайлы берутся из TA
4096x4096(х2).
На прозрачных тайлах alpha
test.
Все думаем о склейке слоев.
PS: Один тай...
Back-to-front rendering
1. Нативный для canvas, html.
2. Высокий overdraw.
3. Низкая скорость.
4. Зачем он вообще нужен?
50
Z-Index
1. Front-to-back rendering.
2. Никаких сортировок.
3. Решение для 3Д.
4. Которое и в «2Д» работает.
51
52Видеовставка
Карты было:
53Видеовставка
Карты стало:
Profit?
Полностью контролируемый
рендеринг.
Возможность тонкой
оптимизации.
Меньше лагов, больше
скорость.
54
Cons?
Никакого speed-boost на
нормальном компе. Выше 60
FPS не прыгнуть.
«Новые» алгоритмы можно и
для canvas использовать...
А вот и начало!
Панорамы!
Яндекс.Панорамы
Запустились в 2009 году.
В 2016 появился АПИ.
57
Но вот была проблема…
Панорамы были основаны на
технологии Flash.
Они отлично работали, и
никаких претензий к ним не
было....
59
На самом деле это тоже все было
Секретный доклад API Яндекс.Карт
https://events.yandex.ru/lib/talks/3345/
Производитель...
Как работают панорамы
Есть много файлов, с
«кривой картинкой»
Нужно их наложить на
«шарик»
60
True story :(
Панорамы можно
сделать только на Flash
или WebGL.
Profit?
Работают везде. От iPhone4
до SmartTV.
Работают плавно, быстро,
интересно.
Технически «панорамы»
можно сделать толь...
Cons?
Не работают на компе
бабушки.
Не работают.
63
64
А мог быть и bluescreen.
А вот и конец
Так что в итоге!
66
67Nathan McCord, U.S. Marine Corps - http://www.defenseimagery.mil; VIRIN: 090812-M-7376M-073
Каменный век!
68Vector by Vector Open Stock
Вперед и с песней
WebGL помогает
Сделать быстрее.
Сделать.
69
Столовый набор «Супер-пупер» (Солонкус-3)
Студия Артемия Лебедева
Но есть одна проблема
Skia, SVG, Canvas, ThreeJS,
Babylon, PlayCanvas пишут
очень умные люди.
Там конечно много тупняка и
...
Антон Корзунов
Разработчик интерфейсов АПИ карт.
Контакты
@twitter
thekasheykashey@yandex-team.ru
На фоне https://www.shad...
72https://www.shadertoy.com/view/XsBXWt
Пора учить WebGL
Пора учить WebGL
Upcoming SlideShare
Loading in …5
×

Пора учить WebGL

Доклад про WebGL на конференции TK-Conf, 8 октября в Ростове.

  • Be the first to comment

  • Be the first to like this

Пора учить WebGL

  1. 1. Пора учить WebGL Антон Корзунов, tk-conf, 8 октября, Ростов.
  2. 2. Немного о себе В 1998 году появилась первая видеокарта. В 1999 - вторая. Достаточно активный пользователь gamedev.ru. Потом женился и оброс. В 2008 году бросил openglить. Последние 5 лет работаю в Яндексе. 3
  3. 3. Каждой истории нужна завязка В последнее время Flash покидает наши просторы. Все сайты mobile-friendly, html5-only. Сплошной react и никакой анимации. 4
  4. 4. И вот завязка… 5
  5. 5. 7http://www.apple.com/iphone-7/ Видеовставка Все внимание на «блик»!
  6. 6. Transforming-n-Lighting С желания добавить немного «света» и началось производство «ускорителей» Они это умеют делать, очень легко и просто*. 8
  7. 7. 9https://threejs.org/examples/webgl_lights_pointlights.html Видеовставка Свет это очень просто! loader.load( «obj/walt/WaltHead_bin.js"); 
 sphere = new THREE.SphereGeometry( 0.5, 16, 8 );
 light1 = new THREE.PointLight( 0xff0040, 2, 50 );
 scene.add( light1 );
 . . . renderer = new THREE.WebGLRenderer(); . . . renderer.render( scene, camera );
  8. 8. 10http://www.apple.com/iphone-7/ Но что же сделала Apple?
  9. 9. У Apple более «ламповое» решение Key-frame анимания Image diff Pure Canvas 30 мегабайт Работает через раз…. 11
  10. 10. Polo Volkswagen Dr Mach LED 2 MC 12https://geektimes.ru/post/280326/ Видеовставка Ведь можно было ПРОЩЕ!
  11. 11. Темные века закончились WebGL – быстрее. WebGL – умнее. WebGL – вкуснее. 13 Dawn, фея лесов NVidia
  12. 12. 14https://www.shadertoy.com/view/Msl3Rr Видеовставка 5555 байт
  13. 13. WebGL – способ связи с видеокартой.
  14. 14. 16 Как это работает? Application Layer Hardware
  15. 15. 17 Как это работает? Application Layer Hardware HAL
  16. 16. 18 Как это работает? Application Layer Hardware HAL OpenGL, DirectX
  17. 17. 19 Как это работает? Application Layer Hardware HAL OpenGL, DirectX WebGL
  18. 18. 20 Как это работает? Application Layer Hardware HAL OpenGL, DirectX WebGL Angle Browser ThreeJS, Blend4Web…
  19. 19. 21Про gamedev – не шутка. Ваши помощники: Blend4Web Unity PlayCanvas GooCreate ThreeJS BabylonJS Stack.gl gamedev.ru
  20. 20. 22 Как это на самом деле работает? Кривые руки Вообще непонятно что Костыли Костыли (Metal, Vulcan) WebGL Костыли Костыли Костыли
  21. 21. «Yes, You Should Learn Vanilla JavaScript Before Fancy JS Frameworks» гласит: «При разработке любого продукта настанет такой день, когда что-то начнет работать не так, как ожидалось, и вы не будете знать почему» 23https://snipcart.com/blog/learn-vanilla-javascript-before-using-js-frameworks Да, следовало бы учить JavaScript до..
  22. 22. Ничего страшного в этом нет. Писать на WebGL, а не на ThreeJS – то же самое, что использовать VanillaJS, а не React.
  23. 23. Hello, World! https://events.yandex.ru/lib/talks/3344/ Ренессанс графики на клиенте http://www.slideshare.net/theKashey/ss-66459351 25 Все это уже было!
  24. 24. 26https://www.youtube.com/watch?v=3tlTMJCyEnk Технологии освещения в играх
  25. 25. Всего за час вы узнаете…. Radiosity Normal Mapping Basis, Directional Lightmaps (Lightmass, Beast), Spherical Gaussian Lightmaps, Light Probes, Enlighten, Distance Field Ambient Occlusion, Vertex Lighting, Light Propagation Volumes, Virtual Point Lights, Imperfect Shadow Maps, Path Tracing, Photon Mapping, SSAO, HBAO, HDAO, Lighting Deep G-Buffer, SSDO, Image Based Ligthting, Cascaded Shadow Maps, Reflective Shadow Maps, VXGI, SVOGI, Voxel Cone Tracing, Approximate Hybrid Raytracing, Capsule Shadows. 27
  26. 26. 3D – хаки, обманы, иллюзии Графика – это математика. Реальные модели слишком долго считаются В общем, все как в современной верстке. 28
  27. 27. 50 оттенков WebGL Полигональный WebGL WebGL для энтузиастов WebGL со странностями Наукоемкий WebGL ThreeJS (не WebGL) 29
  28. 28. Наш опыт работы с WebGL Где-то в 2011 году мы его откопали. Intel видеокарта моего ноута была blacklisted. Завелся только под OperaMobile на телефоне. В итоге закопали. 30
  29. 29. Нельзя просто взять и WebGL IE 9-10 заявляли что webgl это большая дыра в безопасности. (и были правы). Safari просто чего-то ждал. 31
  30. 30. Как на картинах Босха Но в любом случае нам было что поделать все это время… 32 Сад наслаждений, Босх
  31. 31. WebGL сейчас Геометрия Отрисовка растровых слоев Панорамы 33
  32. 32. Как говорил Пифагор… Геометрия
  33. 33. 35 Какая между ними разница?
  34. 34. Как нарисовать линию? SVG – <path d=… Canvas – moveTo/lineTo ThreeJS – new THREE.Line.. WebGL – ? 36
  35. 35. Как нарисовать полигон? SVG – <path d=… Canvas – moveTo/lineTo ThreeJS – Shape/Mesh WebGL – ? 37
  36. 36. 38 Все состоит из треугольников
  37. 37. И они могут быть любыми! Треугольник только создает область под закраску. В этой области можно нарисовать что-то другое. Например ничего. 39 Bill Cipher, by AbnormallyNice
  38. 38. 40http://www.goodboydigital.com/pixi-webgl-primitives/ Не все так просто.
  39. 39. KEEP CALM AND INVENT ON! Чтобы отрисовать линию требуется: Справочник Линейной Алгебры Не совсем здравое мышление Критический взгляд на мир.. И много свободного времени. 41 Тоторо во имя добра, Всеволод Шмыров
  40. 40. А каково браузеру? «Аппаратно-ускоренный» canvas, вынужден каждый раз повторять все эти странные операции с нуля! В итоге SVG иногда быстрее. Еще быстрее Three.js, потому что WebGL. А «ваш» WebGL – космос! 42 http://alboardman.tumblr.com/post/103042705161/welcome-to-the-machine
  41. 41. PROfit? Четко разделяет все на «загрузку», «процессинг» и «рендер» Рендер будет таким, какой придумаете. 43 Наконец!
  42. 42. Cons?! 44
  43. 43. С геометрией закончим Отрисовка растра
  44. 44. Основа карты – растровые слои. Ну что сложного может быть в задаче нарисовать КАРТИНКИ?? 46
  45. 45. 47 Это карта. Она как пирог.
  46. 46. Тайны, что хранят тайлы Тайлы должны красиво «блендиться». Прозрачные тайлы содержат «ничего». Тайлы бывают разного размера. Тайлы можно по разному «батчить». 48
  47. 47. Texture Atlas Тайлы берутся из TA 4096x4096(х2). На прозрачных тайлах alpha test. Все думаем о склейке слоев. PS: Один тайл на iPhone 6-7 Plus - 728px. 49
  48. 48. Back-to-front rendering 1. Нативный для canvas, html. 2. Высокий overdraw. 3. Низкая скорость. 4. Зачем он вообще нужен? 50
  49. 49. Z-Index 1. Front-to-back rendering. 2. Никаких сортировок. 3. Решение для 3Д. 4. Которое и в «2Д» работает. 51
  50. 50. 52Видеовставка Карты было:
  51. 51. 53Видеовставка Карты стало:
  52. 52. Profit? Полностью контролируемый рендеринг. Возможность тонкой оптимизации. Меньше лагов, больше скорость. 54
  53. 53. Cons? Никакого speed-boost на нормальном компе. Выше 60 FPS не прыгнуть. «Новые» алгоритмы можно и для canvas использовать. 55
  54. 54. А вот и начало! Панорамы!
  55. 55. Яндекс.Панорамы Запустились в 2009 году. В 2016 появился АПИ. 57
  56. 56. Но вот была проблема… Панорамы были основаны на технологии Flash. Они отлично работали, и никаких претензий к ним не было. Вот только Flash с нами не везде…. 58 http://dc.wikia.com/wiki/File:Black_Flash_0007.jpg
  57. 57. 59 На самом деле это тоже все было Секретный доклад API Яндекс.Карт https://events.yandex.ru/lib/talks/3345/ Производительность WebGL- приложений https://events.yandex.ru/lib/talks/ 3211/ API Панорам недавно на FrontTalks
  58. 58. Как работают панорамы Есть много файлов, с «кривой картинкой» Нужно их наложить на «шарик» 60
  59. 59. True story :( Панорамы можно сделать только на Flash или WebGL.
  60. 60. Profit? Работают везде. От iPhone4 до SmartTV. Работают плавно, быстро, интересно. Технически «панорамы» можно сделать только на Flash или WebGL. На Canvas можно (мы делали), но это боль. 62
  61. 61. Cons? Не работают на компе бабушки. Не работают. 63
  62. 62. 64 А мог быть и bluescreen.
  63. 63. А вот и конец Так что в итоге!
  64. 64. 66
  65. 65. 67Nathan McCord, U.S. Marine Corps - http://www.defenseimagery.mil; VIRIN: 090812-M-7376M-073 Каменный век!
  66. 66. 68Vector by Vector Open Stock Вперед и с песней
  67. 67. WebGL помогает Сделать быстрее. Сделать. 69 Столовый набор «Супер-пупер» (Солонкус-3) Студия Артемия Лебедева
  68. 68. Но есть одна проблема Skia, SVG, Canvas, ThreeJS, Babylon, PlayCanvas пишут очень умные люди. Там конечно много тупняка и косяков, но далеко не факт что у вас получится лучше. Только это не WebGL, это суррогаты. 70
  69. 69. Антон Корзунов Разработчик интерфейсов АПИ карт. Контакты @twitter thekasheykashey@yandex-team.ru На фоне https://www.shadertoy.com/view/4tjGRh
  70. 70. 72https://www.shadertoy.com/view/XsBXWt

×