Прошло время, когда демонстрации WebGL представляли собой примитивные, кустарные поделки или показательные демо от разработчиков софта. Сейчас многие известные бренды, используют эту технологию для презентаций и многие из них выглядят очень убедительными.
Porshe 911
О «Порше» слышали все. Кто-то просто видел, кто-то любовно натирает тряпочкой в своем гараже. Ну а остальным знаменитый германский производитель предлагает познакомиться с машиной на своем сайте. Причем не просто посмотреть картинки, а “прощупать” управление, узнать о некоторых технологических изюминках.
Первое, что поражает при запуске демонстрации — это качество. Модель выглядит, как “живая” машина. С мелкими, любовно сделанными деталями, отражениями сцены, хромированными поверхностями. И, самое интересное, никаких тормозов в браузере!
Свободная прокрутка модели, масштабирование позволяют рассмотреть буквально все и даже заглянуть в салон. Разработчики постарались на славу, отлично оптимизировав сцену и не в ущерб красоте.
А тем, кому надоело крутить модель, могут “покрутить” рулевое колесо. Собственно, предлагаемый экшен демонстрирует возможности адаптивного освещения и динамического дальнего света, но “порулить” великолепным авто захочет не только мальчишка. Выглядит просто круто!
Однако, расчетливые немцы не ограничились внешним видом автомобиля и позволили заглянуть в его внутренности. Конечно же все картинки отмечаются фотографическим качеством, будь то салон автомобиля, технологические узлы подвески или сверкающий двигатель. Все крутится, вертится и предлагает массу информации. Некоторые детали настолько точные, что закрадывается сомнение, а не фотографии ли это “натянутые” на каркас примитивов?
Как апофеоз или просто желание “дожать” клиента, в конце презентации предлагается своеобразный конструктор, где можно выбрать модификацию авто, поменять диски или цвет. Конечно же, все это просто удачный маркетинговый ход, но какая здесь качественная визуализация! Кстати, подобный подход к демонстрациям новых авто используют многие известные бренды (ау, Автоваз!).
Прогулка по Марсу
Если первая презентация была сделана с помощью движка three.js, то следующая программа — заслуга наших программистов. Нет, само приложение было создано в недрах NASA, вот только в качестве основы использовалась отечественная разработка Blend4Web. Итак, что же тут интересного…
В 2012 году на поверхность Марса был доставлен аппарат со скромным названием Curiosity (пер. с англ. “Любопытство”). Тихо и мирно ползая по поверхности планеты, марсоход анализировал почву, отсылал многочисленные фотографии марсианского пейзажа и будоражил научную братию многочисленными открытиями. Все бы ничего, но в NASA решили популяризировать работу агрегата и создали уникальное веб-приложение, позволяющее не просто полюбоваться на конструктивные особенности аппарата, но и посмотреть в реальном времени на Марс “глазами” Curiosity.
Главная фишка в этом приложении — реальные траектории движения аппарата по поверхности Марса. Причем все это сопровождается показом видео, снятым несколькими камерами марсохода. Траектория пролегает через несколько ключевых точек, где операторами аппарата выполнялись какие-то действия. Со стороны забавно смотреть, как агрегат машет манипулятором, приноравливаясь к поставленной задаче. При этом голос за кадром комментирует происходящее и, заодно, показываются привязанные к местности фотографии.
А тем, кому надоест смотреть на работу аппарата, разработчики приготовили небольшое интерактивную справку по его конструкции. Щелкая по приглянувшимся деталям мышкой, можно узнать много интересного. К тому же, особо въедливые пользователи могут вручную покрутить манипуляторы марсохода, разумеется, в пределах доступного.
Enter in SkyNet
Апокалипсис, управляемый SkyNet наступает! И, если хотите познакомиться с будущими врагами — самое время войти в сеть.
Указанный сайт ничто иное, как отличная замануха на просмотр фильма “Терминатор: Генезис”. Помимо стандартных постеров, трейлеров, тизеров — создатели фильма придумали вот такое великолепное интерактивное шоу.
Изюминка задумки заключается в привязке трехмерной графики к реальным кадрам из фильма. Посетитель SkyNet может узнать интересные подробности о главных персонажах, как роботов, так и живых актерах. Например, SpIder Tank. Что за монстр, непонятно? А так, покрутил модельку (кстати, качественно сделанную), почитал информацию о ключевых узлах, да еще и посмотрел видео, относящееся к возможностям монстра.
Честно, такая подача информации о фильме выглядит новаторски и очень завлекающе. WebGL/HTML5 поднимают планку на совсем другой уровень восприятия.
BioDigital Human
А это уже совсем иной уровень. Если в первых трех случаях технология WebGL использовалась больше в развлекательных целях, то здесь разработчики предлагают свои наработки в обучающем контексте.
Данный проект ориентирован на организации, связанные с медицинской отраслью. Качественно выполненные модели различных органов, точная визуализация происходящих процессов, специальные режимы просмотра — все это позволяет упростить процесс обучения или продемонстрировать особенности протекания заболевания.
И здесь дело даже не в качестве моделей, а в точности реализации. Например, при демонстрации работы коленного сустава, вы никак не сможете выгнуть его больше положенного.
Кроме того, есть очень интересный режим “рентгена”, включаемый специальной кнопкой в плеере. В этом случае, модель становится полупрозрачной с возможностью рассмотрения некоторых внутренних особенностей. Причем, при необходимости можно выделить часть объекта на фоне “рентгеновского снимка”. Так, на скриншоте ниже можно отчетливо рассмотреть разрыв связки.
Как уверяют разработчики, всего создано около 5000 объектов, а также сделано несколько полноценных уроков по анатомии человека. Думается, такой подход к обучению будет гораздо результативнее, нежели по обычным бумажным атласам.
Привет Halo!
Webgl прекрасно подходит для создания интерактивных сцен, презентации, игр, а главное объединяет пользователей различных платформ в окне браузера. Создатели известной серии игры Halo, воспользовались уникальными возможностями современных браузерных технологий и создали особую “гостевую” комнату.
Идея проста до безобразия, но именно благодаря WebGL удалось совместить необычную визуальную картинку (нужно смотреть в “живую”, так как скриншот эффект не передает) с некой массовой доской сообщений.
В действительности, частички образующие форму шлема из знаменитой игры — это пожелания пользователей. Сотни и сотни сообщений, оставленных на странице сайта, постепенно образуют цельную модель. Первоначально шлем представлял собой простую, примитивную сетку. В этом можно убедиться, если передвинуть слайдер на шкале времени внизу экрана. Интересно, как будет выглядеть шлем, после достижения некоторого порога. А пока, вы можете также присоединиться к ожидающим игру и черкануть несколько строк на этой необычной “доске объявлений”.
Постскриптум
Как, видите, все выбранные презентации показывают нужность и простоту использования технологии WebGL. Всё ближе и ближе смыкаются персональные компьютеры с мобильными системами. Настанет момент, когда браузерные приложения станут по-настоящему кроссплатформенными.
Комментарии (36)
zv347
29.10.2015 17:53С помощью современных возможностей HTML, CSS, Javascript действительно можно делать крутые штуки с очень малым напряжением как для творца, так и для юзера. Но есть один неприятный момент, сводящий на нет весь этот наш вебдваноль. Если я хочу показать на каком-нибудь сайте, скажем, 3D-структуру молекулы со своими пометками, да чтоб двигалось — я должен быть администратором этого сайта. Мне, в идеале, хотелось бы в формах ввода, кроме стандартных «Вставить картинку» и «Вставить видео», видеть кнопку «Вставить хоть что». Причины отсутствия такой кнопки мне кажутся по большому счету искусственными, но я не IT-специалист и могу ошибаться.
Stalker_RED
29.10.2015 21:19Сделать кнопку «Вставить что-угодно» — не проблема, проблема это что-угодно показать. В браузере есть встроенные средства для просмотра картинок, видео и аудио*, и еще нескольких распространенных типов файлов. Но существует огромное кол-во форматов, которые браузер не сумеет показать, и единственная разумная альтернатива — загрузить их как файл.
* но поддерживаются не все кодеки.zv347
29.10.2015 21:25HTML, CSS и Javascript может показать любой браузер. Но я не вспомню сейчас ни одного сайта, где пользователь может вставить в статью / комментарий произвольную верстку / стиль / скрипт. Работающие, естественно.
Stalker_RED
29.10.2015 22:01Потому что владельцы сайта не хотят, чтобы пользовали заливали на сайт произвольный код, и выполняли xss.
Иногда можно залить свой html с некоторыми ограничениями. Вот здесь прямо в комментарии, например.
Есть специально сайты с «песочницей» jsfiddle.net/pymxre13zv347
29.10.2015 22:22И все равно непонятно — это искусственное ограничение или принципиальное. Можно ли сделать, чтоб произвольный код выполнялся в «песочнице» комментария. Эдакая эмуляция браузера сайтом.
На jsfiddle, кстати, ограниченный выбор библиотек, а свою подключить не получилось.Stalker_RED
02.11.2015 18:27Там есть возможность подключить внешние файлы.
Вот, к примеру, bootstrap jsfiddle.net/DTcHh
Владельцы сайтов специально фильтруют введенные пользователем данные, вырезают оттуда часть html и js. Иногда вводят свою разметку, типа bb-code, все это СПЕЦИАЛЬНО, чтобы пользователи не злоупотребляли. Как в том анекдоте про солонки.
Теоретически можно создать каждому комментарию собственную песочницу — генерировать поддомены и вставлять всё в iframe, например. Но к чему это приведет? Открываете популярную статью на хабре, а там десяток-другой комментариев считают хэши для биткоинов, ага?
gfxdevrus
30.10.2015 12:34Отличная статья, особенно полезно для тех, кто всё ещё скептически относится к возможностям 3D в вебе.
Torvald3d
30.10.2015 16:08Прикольно, первое что бросилось в глаза — френелевское отражение в демке с Порше
Wouw
01.11.2015 12:30Может быть кому-то будет интересно — вот наша демка WebGl + html5.
Местами тормозит не потому что webGl плохой, а это мы немного перебрали с треугольниками.
coolspot
02.11.2015 22:21Некоторые детали настолько точные, что закрадывается сомнение, а не фотографии ли это “натянутые” на каркас примитивов?
Интерьер ровно так и сделан.
TheRabbitFlash
Давайте говорить более грамотно хотя бы с технической точки зрения. HTML5/WebGL далеко не «продвинутые», с точки зрения «Flash». Единственный плюс для пользователя и автора контента является то, что HTML5/WebGL работает на мобиле. Тот факт, что не на каждой — мы опустим.
С точки зрения «демок» — все, что я видел «крутое» на WebGL — это демо воды.
gfxdevrus
Что-то я не видел, чтобы трёхмерный flash достиг каких-либо успехов. Ни производительности, ни кроссплатформенности они так и не обеспечили. Ну а насчёт качества контента вы явно лукавите, ничего подобного в интернете я раньше не видел.
TheRabbitFlash
Если Вы не видели — это не значит, что этого нет. Объяснять Вам что-либо даже смысла нет, т.к. Вы с порога уже включаете отрицание всего хорошего, что есть у флеша. Вы мне дико напоминаете людей, которые называют Flash IDE флеш плеером, а анимированные тормозящие html5 баннеры — флеш рекламой.
Sergiy
Я тут вспомнил 2009-2010 и игру от Verbatim :)
www.youtube.com/watch?v=vUTWZlPSBm4
TheRabbitFlash
Да и гадать не надо. Взять тот же первый Porshe 911. С первой попытки выглядит как «такого еще в вебе не было».
Но на деле такое много лет есть на флеше. Просто гики, кто про флеш говорит «видео можно и через html показывать» — даже не в курсе этого. Один из старых примеров — http://nissan-stagejuk3d.com/
То, что Flash не работает на мобиле — да, увы и ах. Не работает только в браузере. Как приложение — работает прекрасно (Android,iOS, Wi, Mac). Сейчас ресерчат еще и tvOS подрубить от Apple.
Открыл я демку порша на iPad4 и о чудо — 12 фпс + надпись «Ваше устройство слишком слабое, зайдите с компьютера» :) Это не считая того, что 2 раза был вылет во время загрузки. А каждая загрузка, между прочим — по 3 минуты. И это при wifi подключении.
Нужен ли такой кейс «WebGL могёт на мобиле?» :) Уверен, что лучше гордиться тем, что гарантированно нормально работает, чем «упс»…
gfxdevrus
12 FPS это отличный результат, поскольку iPad4 вышел 3 года назад, но и тогда он был далеко не самым мощным. А ещё через 3 года девайсов, не способных загрузить это демо, почти не останется. Так что времена WebGL давно пришли, хочется вам этого или нет.
TheRabbitFlash
12 FPS это ужасный результат. Хотя бы потому, что загружаемые из стора игры с более сложным контентом идут в разы лучше на том же девайсе. Налицо — проблема производительности WebGL, хочется вам этого или нет.
gfxdevrus
В давние времена на моей Windows 95, Office 97 работал очень быстро. Как думаете, я продолжаю его использовать?
TheRabbitFlash
Вы забегаете вперед. Если человек купил планшет и у него ничего не тормозит, кроме WebGL — это явно проблема не железа.
И люди не бегут продавать планшеты лишь бы запустилась какая-то лютая демка, которая вообще под комп рассчитана.
Ряд демок тормозит и на айфоне 6, кстати.
gfxdevrus
WebGL это единственная на сегодняшний день технология, способная запускать трёхмерную графику в вебе на всех платформах без исключения. Все браузерные вендоры уже сделали свой выбор в пользу этого стандарта, вопрос производительности будет решаться, но это уже никак не повлияет на его становление. В конце концов, даже сейчас страницы, наполненные баннерами flash способны хорошо «подвесить» всю систему.
TheRabbitFlash
Давайте, пожалуйста, без громких слов «на всех платформах» и «кроссплатформенность».
У меня лежат Android девайсы, где WebGL просто не работает. И производитель девайсов обновляться не собирается. Я говорю о стоковых браузерах, конечно же. Не стоковые браузеры ставятся крайне редко и такие пользователи обычно в веб с редко ходят ради «WebGL». Они сидят в инстаграмме, фейсбуке, твиттере и вконтакте.
Между мной и Вами большой мост в монимании. Вы серьезный теоретик. А я серьезный практик. В теории «Flash мертв», а на практике он еще работает.
Я устал уже с Вами спорить, т.к. Вы гнете свою линию и не хотите понять, что я Вам говорю. То, что WebGL работает псевдвезде — это замечательно. Надо ли ему работать везде — вопрос второй. Но самый важный и решающий вопрос — будет ли это WebGL востребован у End User? Мой ответ «нет», т.к. у WebGL есть масса проблем. Как раз потому, что его пилят «кроссплатформенно». Только и видишь баги, глюки.
В теории у нас у всех айфоны6s plus. В реале — у большинства даже 5ки нет ибо звонилка работает, игры в сторе работают.
gfxdevrus
Если говорить о практике, то flash вообще не работает на мобильных устройствах. Ни на мощных ни на слабых, нигде. Согласитесь, старые браузеры, которые не обновляются по несколько лет и старые чипы без нормальной поддержки OpenGL ES 2.0 это не повод говорить о том, что технология не пойдёт.
TheRabbitFlash
Вы опять меня не слышите.
Многие технологии не идут потому, что они нафиг никому не нужны. А не потому, что железо не поддерживает или не тянет. Когда начали хоронить флеш — закончилось тем, что флеш это игры и остальной мигающий мусор — это css3. Для простых сайтов с видео — html5 video. Каждый занял свою нишу. WebGL её особо не изменит. В вебе 2D контент роляет, а не 3D. И я жестко делю web и games. Потому, что games это не веб. Тут веб лишь средство доставки.
gfxdevrus
Ну и получается, что все мы должны сидеть в плоском вебе до скончания веков? Мне не нужно такое будущее, я хочу, чтобы всё было в 3D. Сначала появились игры в 3D, все говорили не нужно (я помню и сам говорил). Потом повсеместно стали крутить фильмы в 3D, многие говорят что не нужно (хотя мало кто им верит). Почему же веб при наличии мощных видеокарт и мобильников у пользователей должен быть в 2D?
TheRabbitFlash
Понимаете, в чем разница. Для Вас 3Д в вебе — это круто сегодня. А для меня это круто появилось много лет назад на флеше. Я смотрю с точки зрения End User. Ему пофигу, через что идет контент. Через плагин или нет — главное то, что за 3D контентом пользователи идут на стим, десктоп и консоли. Потому, что контент «отзывчивый» в поведении. А 3Д контент в браузере через WebGL — нет. И, вероятно, случится улучшение не скоро.
Все склоняется к тому, что каждому блюду — своя ложка. Я не против WebGL. Я против того, что из этой сырой технологии пытаются какой-то «чудо» сделать и впарить как решение всех проблем.
С точки зрения End User — что ему даст этот WebGL, если World Of Tanks играются на клиенте, а Tankionline в браузере через Flash? :)
Весь адекватно нормальный 3D контент требует клавитуры мышки. Я говорю про функциональный контент, а не демки, где сидишь и смотришь. Повертеть в 3D телефон в инет-магазине? Так это не выгодно самим магазинам. Создать такой контент стоит крайне не мало. Часто дороже, чем сам товар.
Порш? )) Отлично! У нас каждый вторый утром начинает рабочий день с выбора Порш 911 :)
Вы делаете большое одолжение недокомпьютерам, когда говорите, что у мобил мощные видеокарты :) Как минимум видеокарта использует расшаренную оперативную память с системой. Когда мы сидим в браузере — все картинки на сайтах кладутся в RAM. А когда мы еще и WebGL начинаем использовать — мы снова отжираем память. Получаем краш.
Говоря простым языком — юзеркейс у webgl с 3Д в десятки раз ниже, чем у простого 2д. В своей работе мы используем много 3Д. Но это standalone приложения. На планшете. На флеше, на юнити, на шиве… на всем подряд. Но не на WebGL. Потому, что глючит адски.
gfxdevrus
В браузере того мобильника, который вы используете «для 2D», растеризацию всего контента и эффекты делают на OpenGL, а потом рендерят видеопроцессором, точно также как и трёхмерную графику. То есть разницы между 2D и 3D уже давно нет. Корни WebGL лежат именно тут, вот поэтому производители браузеров так легко согласились реализовать этот стандарт. Вы удивитесь узнав, что Google и Apple уже активно используют WebGL на собственных сайтах, просто в отличие от flash, это выглядит естественно, поэтому пользователи уверены, что так и должно быть.
TheRabbitFlash
Разницы между 3D и 2D нет? :) Я думаю разговор можно прекратить :)
Lsh
>я хочу, чтобы всё было в 3D
Было такое, VRML называлось.
gfxdevrus
Посмотрите, что говорит о будущем этой платформы сам менеджмент Adobe: mashable.com/2011/11/11/flash-mobile-dead-adobe/#Dn5ZlsQ4niqG. Как может быть иначе, когда все ведущие браузерные вендоры отказываются от плагинов. Если сначала это были только мобильные устройства, то сейчас дошла очередь и до десктопов.
TheRabbitFlash
Какой менеджмент Adobe? Вы дали статью 2011 года. Сегодня конец 2015. А флеш хоронят раз в квартал. Я уже запас попкорн на январь-февраль. Adobe за последние 4 года поменяли 3 продакт менеджера продукта Flash Runtime. Если бы хотели его закрыть — это случилось бы еще пару лет назад.
Я не говорю, что Flash Player в качестве плагина будет существовать много лет. Но хоронить его еще крайне рано. Тем более, что Flash Player идет встроенным в Google Chrome и уже встроили в Windows Edge (браузер в 10ке). В Windows 8 он тоже из коробки.
Тенденция куда любопытнее, если в ней разобраться. Firefox запрещает npapi плагины вслед за Chrome. Но у Chrome флеш — это ppapi, ради чего запретили npapi. В Firefox флеш работает на npapi, который они закроют. Но публично заявляли месяц назад, что это не будет касаться флеша. Т.е. флешу снова дают преимущества.
Ну и самое важное — посмотрю я на дым из голов людей, когда Flash будет работать без плагинов.
gfxdevrus
Вот именно, что ещё 4 года назад Adobe ясно дала всем понять, что у этой технологии нет будущего. Сколько ещё лет она протянет до полного исчезновения не ясно, но тенденцию игнорировать невозможно. Если вы его знаете, и продолжаете использовать, к вам никаких вопросов. Но человек, который сегодня начинает его изучать, совершает явную ошибку.
TheRabbitFlash
На счет ошибки — я бы не судил так строго. Flash Player это не просто плагин. На нем делают игры под стим и мобильные платформы. Называется Adobe AIR. Рантайм там один и тот же.
Делать не игровой\мультимедиа Web контент на Flash сегодня — да, это ошибка.
Но если человек изучает Flash для создания игры — почему бы и нет? 9 из 10 топовых Facebook игр, например — Flash. Появляются новые. Все у них хорошо.