Download as PDF, PPTX
TК°Conf. Ещё не поздно учить WebGL. Антон Корзунов.
- 2. Пора учить WebGL АнтонКорзунов, tk-conf, 8 октября, Ростов.
- 3. Немного о себе 〉В1998 году появилась первая видеокарта. 〉В 1999 - вторая. 〉Достаточно активный пользователь gamedev.ru. 〉Потом женился и оброс. 〉В 2008 году бросил openglить. 〉Последние 5 лет работаю в Яндексе. 3
- 4. Каждой истории нужназавязка 〉В последнее время Flash покидает наши просторы. 〉Все сайты mobile-friendly, html5-only. 〉Сплошной react и никакой анимации. 4
- 5.
- 7.
- 8. Transforming-n-Lighting 〉С желания добавитьнемного «света» и началось производство «ускорителей» 〉Они это умеют делать, очень легко и просто*. 8
- 9. 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 );
- 10. 10http://www.apple.com/iphone-7/ Но что жесделала Apple?
- 11. У Apple более«ламповое» решение 〉Key-frame анимания 〉Image diff 〉Pure Canvas 〉30 мегабайт 〉Работает через раз…. 11
- 12. Polo Volkswagen DrMach LED 2 MC 12https://geektimes.ru/post/280326/ Видеовставка Ведь можно было ПРОЩЕ!
- 13. Темные века закончились 〉WebGL– быстрее. 〉WebGL – умнее. 〉WebGL – вкуснее. 13 Dawn, фея лесов NVidia
- 14.
- 15. WebGL – способсвязи с видеокартой.
- 16. 16 Как это работает? ApplicationLayer Hardware
- 17. 17 Как это работает? ApplicationLayer Hardware HAL
- 18. 18 Как это работает? ApplicationLayer Hardware HAL OpenGL, DirectX
- 19. 19 Как это работает? ApplicationLayer Hardware HAL OpenGL, DirectX WebGL
- 20. 20 Как это работает? ApplicationLayer Hardware HAL OpenGL, DirectX WebGL Angle Browser ThreeJS, Blend4Web…
- 21. 21Про gamedev –не шутка. Ваши помощники: Blend4Web Unity PlayCanvas GooCreate ThreeJS BabylonJS Stack.gl gamedev.ru
- 22. 22 Как это насамом деле работает? Кривые руки Вообще непонятно что Костыли Костыли (Metal, Vulcan) WebGL Костыли Костыли Костыли
- 23. «Yes, You ShouldLearn Vanilla JavaScript Before Fancy JS Frameworks» гласит: «При разработке любого продукта настанет такой день, когда что-то начнет работать не так, как ожидалось, и вы не будете знать почему» 23https://snipcart.com/blog/learn-vanilla-javascript-before-using-js-frameworks Да, следовало бы учить JavaScript до..
- 24. Ничего страшного вэтом нет. Писать на WebGL, а не на ThreeJS – то же самое, что использовать VanillaJS, а не React.
- 25. Hello, World! https://events.yandex.ru/lib/talks/3344/ Ренессанс графикина клиенте http://www.slideshare.net/theKashey/ss-66459351 25 Все это уже было!
- 26.
- 27. Всего за часвы узнаете…. 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
- 28. 3D – хаки,обманы, иллюзии 〉Графика – это математика. 〉Реальные модели слишком долго считаются 〉В общем, все как в современной верстке. 28
- 29. 50 оттенков WebGL 〉ПолигональныйWebGL 〉WebGL для энтузиастов 〉WebGL со странностями 〉Наукоемкий WebGL 〉ThreeJS (не WebGL) 29
- 30. Наш опыт работыс WebGL 〉Где-то в 2011 году мы его откопали. 〉Intel видеокарта моего ноута была blacklisted. 〉Завелся только под OperaMobile на телефоне. 〉В итоге закопали. 30
- 31. Нельзя просто взятьи WebGL 〉IE 9-10 заявляли что webgl это большая дыра в безопасности. (и были правы). 〉Safari просто чего-то ждал. 31
- 32. Как на картинахБосха Но в любом случае нам было что поделать все это время… 32 Сад наслаждений, Босх
- 33. WebGL сейчас 〉Геометрия 〉Отрисовка растровыхслоев 〉Панорамы 33
- 34.
- 35. 35 Какая между нимиразница?
- 36. Как нарисовать линию? SVG– <path d=… Canvas – moveTo/lineTo ThreeJS – new THREE.Line.. WebGL – ? 36
- 37. Как нарисовать полигон? SVG– <path d=… Canvas – moveTo/lineTo ThreeJS – Shape/Mesh WebGL – ? 37
- 38. 38 Все состоит изтреугольников
- 39. И они могутбыть любыми! 〉Треугольник только создает область под закраску. 〉В этой области можно нарисовать что-то другое. 〉Например ничего. 39 Bill Cipher, by AbnormallyNice
- 40.
- 41. KEEP CALM ANDINVENT ON! Чтобы отрисовать линию требуется: 〉Справочник Линейной Алгебры 〉Не совсем здравое мышление 〉Критический взгляд на мир.. 〉И много свободного времени. 41 Тоторо во имя добра, Всеволод Шмыров
- 42. А каково браузеру? 〉«Аппаратно-ускоренный» canvas,вынужден каждый раз повторять все эти странные операции с нуля! 〉В итоге SVG иногда быстрее. 〉Еще быстрее Three.js, потому что WebGL. 〉А «ваш» WebGL – космос! 42 http://alboardman.tumblr.com/post/103042705161/welcome-to-the-machine
- 43. PROfit? 〉Четко разделяет всена «загрузку», «процессинг» и «рендер» 〉Рендер будет таким, какой придумаете. 43 Наконец!
- 44.
- 45.
- 46. Основа карты –растровые слои. Ну что сложного может быть в задаче нарисовать КАРТИНКИ?? 46
- 47. 47 Это карта. Онакак пирог.
- 48. Тайны, что храняттайлы 〉Тайлы должны красиво «блендиться». 〉Прозрачные тайлы содержат «ничего». 〉Тайлы бывают разного размера. 〉Тайлы можно по разному «батчить». 48
- 49. Texture Atlas 〉Тайлы берутсяиз TA 4096x4096(х2). 〉На прозрачных тайлах alpha test. 〉Все думаем о склейке слоев. 〉PS: Один тайл на iPhone 6-7 Plus - 728px. 49
- 50. Back-to-front rendering 1. Нативныйдля canvas, html. 2. Высокий overdraw. 3. Низкая скорость. 4. Зачем он вообще нужен? 50
- 51. Z-Index 1. Front-to-back rendering. 2.Никаких сортировок. 3. Решение для 3Д. 4. Которое и в «2Д» работает. 51
- 52.
- 53.
- 54. Profit? 〉Полностью контролируемый рендеринг. 〉Возможность тонкой оптимизации. 〉Меньшелагов, больше скорость. 54
- 55. Cons? 〉Никакого speed-boost на нормальномкомпе. Выше 60 FPS не прыгнуть. 〉«Новые» алгоритмы можно и для canvas использовать. 55
- 56. А вот иначало! Панорамы!
- 57. Яндекс.Панорамы 〉Запустились в 2009году. 〉В 2016 появился АПИ. 57
- 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
- 60. Как работают панорамы 〉Естьмного файлов, с «кривой картинкой» 〉Нужно их наложить на «шарик» 60
- 61. True story :( Панорамыможно сделать только на Flash или WebGL.
- 62. Profit? 〉Работают везде. ОтiPhone4 до SmartTV. 〉Работают плавно, быстро, интересно. 〉Технически «панорамы» можно сделать только на Flash или WebGL. 〉На Canvas можно (мы делали), но это боль. 62
- 63. Cons? 〉Не работают накомпе бабушки. 〉Не работают. 63
- 64. 64 А мог бытьи bluescreen.
- 65. А вот иконец Так что в итоге!
- 66.
- 67. 67Nathan McCord, U.S.Marine Corps - http://www.defenseimagery.mil; VIRIN: 090812-M-7376M-073 Каменный век!
- 68. 68Vector by VectorOpen Stock Вперед и с песней
- 69. WebGL помогает 〉Сделать быстрее. 〉Сделать. 69 Столовыйнабор «Супер-пупер» (Солонкус-3) Студия Артемия Лебедева
- 70. Но есть однапроблема 〉Skia, SVG, Canvas, ThreeJS, Babylon, PlayCanvas пишут очень умные люди. 〉Там конечно много тупняка и косяков, но далеко не факт что у вас получится лучше. 〉Только это не WebGL, это суррогаты. 70
- 71. Антон Корзунов Разработчик интерфейсовАПИ карт. Контакты @twitter thekasheykashey@yandex-team.ru На фоне https://www.shadertoy.com/view/4tjGRh
- 72.