Полный рендеринг инструментария виджета пользовательского интерфейса в WebGL

Существует ли в настоящее время какой-либо полный набор инструментов для виджетов, обеспечивающий рендеринг компонентов только в WebGL? Подобно проекту ZebraUI, который отображает полный набор компонентов пользовательского интерфейса на холсте HTML5?

Скриншот рендеринга инструментария пользовательского интерфейса Zebra на холсте HTML5

Идея состоит в том, чтобы написать чистый JavaScript и при этом иметь возможность использовать шейдеры для рендеринга компонентов.


user-interface uicomponents webgl opengl-es
person raju-bitter    schedule 11.08.2015    source источник
comment
Почему? у вас есть весь браузер для создания пользовательского интерфейса. Он поддерживает весь юникод, все IME для других языков, языки справа налево и читается различными расширениями для инвалидов. Это также полностью стилизуется дизайнерами. По какой возможной причине вы хотите, чтобы пользовательский интерфейс WebGL не делал ничего из этого?   -  person gman    schedule 12.08.2015
comment
В дополнение к комментарию @gmans, html также обеспечивает идеально масштабируемый рендеринг текста, более простую компоновку и аккуратные эффекты с использованием css 3d. преобразования и css-фильтры. Единственное, чего на данный момент не хватает, — это css шейдеры, не знаю, каков их статус.   -  person LJᛃ    schedule 12.08.2015
comment
Где имеет смысл полностью создавать пользовательский интерфейс в WebGL: рендеринг интерактивных пользовательских интерфейсов в разрешении 4k с частотой 60 кадров в секунду на встроенных платформах (например, на платах на базе ARM, работающих в телевизорах и т. д.); с возможностью полностью перейти в 3D в какой-то момент в будущем. Пользовательские фильтры CSS (также известные как шейдеры CSS) были удалены из Webkit. кодовая база.   -  person raju-bitter    schedule 13.08.2015
comment
Кроме того, я подозреваю, что пользовательский виджет списка, содержащий 10 000 элементов и отображающий только то, что необходимо, будет вести себя намного лучше, чем div с overflow: auto; height: 200px; и 10 000 элементами внутри него.   -  person alexandernst    schedule 21.10.2015
comment
@raju-bitter, у тебя есть еще какие-то успехи в этой области?   -  person wprater    schedule 18.06.2016
comment
@gman Потому что ДОМ МЕДЛЕННЫЙ.   -  person trusktr    schedule 15.03.2017
comment
Я хотел бы добавить в качестве комментария, поскольку он еще не готов, что я работаю над библиотекой на github. com/trusktr/infamous и вскоре планирует добавить WebGL. Его основное внимание (по крайней мере, поначалу) уделяется библиотеке пользовательского интерфейса. Когда WebGL будет добавлен, он позволит смешивать содержимое WebGL с DOM, и вскоре после этого я хотел бы сделать компоненты пользовательского интерфейса, основанные на чистом webgl. Я вернусь и опубликую в качестве ответа, как только у меня будет демонстрация WebGL...   -  person trusktr    schedule 15.03.2017
comment
@wprater Извините, кто-то пропустил ваш комментарий. Не совсем так, компания DreemGL ​​прекратила разработку. Лично я бы сказал, что большие усилия, поддерживаемые сильным сообществом, — это путь. Существует множество функций, которые вы должны реализовать, чтобы соответствовать функциям ОС, используемым браузером. Infamous, упомянутый в комментарии выше, может быть интересным.   -  person raju-bitter    schedule 16.03.2017

Ответы (1)


arrow_upward
8
arrow_downward

Существует новый проект с открытым исходным кодом, который поддерживает полную визуализацию всех виджетов с использованием WebGL: инструментарий DreemGL. Вот скриншот приложения DreemGL. Все элементы пользовательского интерфейса отображаются с использованием WebGL (включая шрифты). Это все еще альфа или бета-качество.

Приложение DreamGL, отображающее полный пользовательский интерфейс в WebGL

person raju-bitter    schedule 02.02.2016
comment
Архитектор программного обеспечения DreemGL ​​сейчас работает над творческой платформой кодирования под названием Makepad. Исходный код находится на Github, вот ссылка на демо Makepad. Как и DreemGL, полный пользовательский интерфейс (включая текстовые элементы) полностью отображается в WebGL. Это все еще программное обеспечение альфа-качества, но в какой-то момент его можно будет использовать для создания прототипов, рендеринг которых осуществляется со скоростью 60 кадров в секунду на таких смартфонах, как iPhone 6 или более поздние модели, а также модели Galaxy S6 и Note 5 или более поздние модели. - person raju-bitter; 20.09.2016
comment
И указал выше, что он полностью не поддерживает любые нелатинские языки. Ни японского, ни китайского, ни корейского, ни какой-либо другой поддержки IME. Это также SLOOOOW. Я попытался прокрутить вниз в текстовом редакторе, и он прокручивается со скоростью около 15-20 кадров в секунду, тогда как эта страница здесь, в Stackoverflow, прокручивается со скоростью 60 кадров в секунду. - person gman; 15.03.2017