3D User Interfaces
Для начала я хочу попытаться вас удивить. Просто расслабьтесь и посмотрите вот это: https://keithclark.co.uk/labs/css-fps/nojs/ хотя бы 20 секунд. Это 2013 год и казалось бы что тут такого, в 2013-м WebGL как-то где-то работал, да и возможно скоростей тогда хватало чтобы отрисовать это все на канвасе каким нибудь самодельным движком, в общем если я и видел эту демку в 2013, то точно не обратил внимания.
Но сейчас я считаю что это самый крышесносный кусок софта, который я видел в последнее время. В плане неординарности подхода к проблеме. Дело в том что это pure HTML/CSS. Если вы опять скажете “ну и чо”, то вы либо слабо понимаете HTML/CSS, или просто даже секунды не подумали о том как такое можно рендерить только на HTML элементах. Если вы заметели, то в сцене есть тени, и соответственно источники света; их надо считать и как то рендерить.
Здесь https://keithclark.co.uk/articles/creating-3d-worlds-with-html-and-css/ этот чувак (Keith Clark), объясняет, как он все сделал. Как я понимаю, чувак увлекается всякими демосценами, а такие чуваки по-хорошему ебанутые, ну в том смысле что выйграть в демосцене без неординарных решений невозможно.
К чему это все? Пару дней назад, я в очередной раз задумался о 3D интерфейсах пользователя. Уже не совсем абстрактно, а в рамках Платформы и текущего видения этой платформы.
Как оказалось, подход мистера Кларка оказалось очень просто применить в Платформе. У three.js есть примеры рендеринга ровно с таким подходом, где они отображают координаты объектов 3D мира относительно камеры в систему координат браузера, и применяют соответствующие трансформации в CSS. Делает это CSS3DRenderer, который пользует только базовую математику three.js. К моему сожалению работы со светом тут нет.
Оказалось просто дернуть все это дело в Платформу. Поскольку мне бы очевидно хотелось рендерить Vue компоненты в 3D, то тащить CSS3DRenderer с его API не имело смысла (с Vue это жить само собой не будет). Вместо этого я утащил математику CSS3DRenderer, и естественно three.js в пару Vue компонент: Camera и Object3D.
Теперь можно делать 3D сцены на Vue. Демо-приложение в платформе можно посмотреть тут: https://platform-git-new-ui.anticrm.now.sh. Нажимаем Run и балуемся кнопочками снизу сцены. Ну и мышкой можно крутить все это дело.
Кайф в том что это — обычное Vue приложение, без каких либо технических извращений (только математика). Все приложение здесь: Scene.vue.
Зачем?
Люди пытаются делать 3D интерфейсы возможно с того же момента как появились 2D. Уже лет сорок, и ничего стоящего не получается. Я видел в 90-х несколько продуктов, которые позиционировались как 3D десктопы. Один был от Sun (в рамках каких то там экспериментов), остальные я даже не пытался запомнить от кого, поскольку все они — бесполезное гавно.
Вроде бы если за 40 лет не получилось, то и не стоит пытаться, но мне всегда казалось, что пользовательский интерфейс (имеется ввиду UI/UX) может выиграть от более полного использования 3D вещей. Речь идет не о специализированном 3D софте для инженеров, художников, и прочих специалистов, где 3D реально нужен, а об обычном, скажем офисном софте типа трекера задач.
Во первых это красиво. Если говорить о “свистелках и перделках” (бесполезных с точки зрения фунуциональности продукта штуках), то тут Microsoft со своими видосами впереди планеты всей. Уже несколько лет они рекламируют продукты с якобы Microsoft Fluent Design System, анонс которой конечно сносит крышу до сих пор. Кто не видел, можно глянуть тут:
Почему я назвал ее мифической? Насколько я понимаю продуктов, которые соответствуют желаемому у них пока не существует. Ну то есть разные продукты и подразделения Microsoft соревнуются в том, насколько они Fluent в рекламных видоса, например Yammer:
Tasks:
- Office: https://www.youtube.com/watch?v=DKvkRfQD8Yg
- Mobile: https://www.youtube.com/watch?v=miM6mBAfA8g
- Edge: https://www.youtube.com/watch?v=yg5cUyPBHjI
Во всех этих видосах 3D прет из всех щелей. И все UI элементы подчеркнуто имеют глубину (толщину). В реальности эти продукты с типичными плоскими элементами, и после просмотра рекламы и взгляда на реальный продукт остается ощущение обмана. Как я понимаю из всего что я видел, Fluent Design System — это про движение, свет, материал, и естественно объем. Текущие UI рекламируемых продуктов не про это.
Мне сложно поверить что их рекламщики оторвались от реальности и рисуют мультики только для того чтобы возбудить потенциального клиента. Думаю Microsoft действительно хочет чтобы UI/UX их продуктов был ближе к тому что они показывают в рекламе. Не для рекламных видео же они рассказывают про свет, движение, материал и объем.
Мне кажется они активно работают в этом направлении, но получить то, что они хотят быстро и дешево не получилось. С другой стороны видосы прут, а значит работа продолжается.
Пока из того что есть реально — Fluent UI (не путаем с Fluent Design System) — библиотека UI компонент, которая все так же плоская, а материал, движение, и объем присутствуют только в видосиках (но присутствуют):
В общем, свистелки это красиво. Если в рамках Платформы получится сделать что то подобное рекламным видео от Microsoft, мне кажется это будет восхитительный результат. Я имею ввиду любые свистелки не в ущерб всему остальному.
Что кроме свистелок?
Если у нас появляется возможность органично вписывать текущий 2D UI в 3D (ну или наоборот), то хочется понять, можем ли мы использовать 3D для каких-то полезных вещей в офисных приложениях?
Наверное есть задачи в отдельных предметных областях где это было бы полезно. Хочется найти такие области и задачи. Если есть идеи, поделитесь 😀.
С пользой использовать 3D в десктоп приложении — непростая задача. 3D не поменяет количество пикселей на экране. А количество пикселей определяет максимальное количество информации которую вы можете нести пользователю.
С другой стороны, цели нести максимум информации у UI нет. Зачастую надо уменьшить количество этой информации, а не увеличить — distraction free interface.
Но все же ситуации когда хочется показать максимум информации есть. И 3D возможно хороший помощник в этом вопросе. Благодаря перспективе и прозрачности. (Смотри демку в Платформе).
Перспектива помогает естественным образом отобразить информационный объект в меньшее количество пикселей, чем при нормальном отображении в 2D. А прозрачность позволит выводить как бы несколько объектов в один пиксель.
Эти же вещи теоретически доступны в 2D (прозрачность и масштабирование), но использовать их сложнее. Если я совмещу два полупрозрачных объекта в одной плоскости (2D), ну например в диалоге выбора объекта, то ничего хорошего не будет. Если у меня 3D проекция на экран, то объекты для выбора будут смотреться естественно.
С перспективой похожая история: если нарисовать кучу мелких объектов в 2D, то это будет мягко говоря не очень. Если это объекты где-то в перспективе, то восприниматься такие объекты будут естественно.
Чем можно заняться?
Идеи и мнения по поводу 3D UI. Хочется определиться идем мы по этому пути или откладываем 3D на неопределенный срок (ну или пока Microsoft все не сделает).
Для общения на эту тему есть комната в Gitter (на русском). Приходите, делитесь мыслями.
Движок для 3D UI. Выше я писал про подход Keith Clark к 3D UI на HTML CSS. Если мы идем по пути 3D, то по хорошему нужен очень простой движок (как для видеоигр) с самой основной математикой для расчета координат и света. Начать можно с реализации математики, которая в демке используется из three.js.
С three.js все хорошо, но нам от него почти ничего не надо, сейчас же из three.js тянется 500К кода, который точно лишний. Можно посмотреть другие библиотеки которые легче, или более модульные. Можно сделать что-то свое.
Эксперименты и use cases. Имея возможность делать 3D на Vue, экспериментировать становится просто. Если есть идеи каких то конкретных или общих случаев в 3D, программируйте и делитесь. Очень интересно увидеть что то полезное, красивое, интересное.
Об авторе
Автор данного текста — основатель open source проекта с незамысловатым названием “Платформа”, в который он ищет соратников. Цели у проекта довольно обширны, и пока точно не сформулированы, но что-то уже можно прочитать тут. Если вдруг вам зайдет — подключайтесь.
