Как вы можете использовать шейдеры AI, AR и WebGL для помощи людям с недостатками зрения

1656551190 kak vy mozhete ispolzovat shejdery ai ar i webgl dlya

от Дэна Руты

-hZwRvEzjnYAvtkNRnOBnYTUNkOvxYNj93Cw

Сегодня около 4% населения мира испытывают проблемы со зрением. Такие задачи, как простая навигация по комнате или прогулка по улице, представляют реальную опасность, с которой им приходится сталкиваться каждый день. Современные технологические решения слишком недоступны или трудны в использовании.

В рамках университетской задачи мы (я, Луис и Том) разработали и внедрили новое решение. Мы использовали конфигурированные шейдеры WebGL, чтобы увеличить видеоканал окружения пользователя в режиме реального времени. Мы воспроизвели выход в формате AR/VR с такими эффектами как обнаружение краев и настройка цвета. Позже мы также добавили моделирование дальтонизма для дизайнеров. Мы также добавили несколько экспериментов с искусственным интеллектом.

Мы сделали более глубокий обзор литературы в нашей оригинальной исследовательской работе. ACM опубликовала здесь более короткую двухстраничную версию. Эта статья больше сосредотачивается на используемых технологиях, а также на некоторых последующих способах использования и экспериментах, таких как интеграция AI.

Популярным подходом, который мы нашли во время наших исследований существующих решений, было использование обнаружения краев для обнаружения помех в окружающей среде. Большинство решений не хватало с точки зрения удобства использования или аппаратной доступности и портативности.

Наиболее интуитивно понятным подходом, который мы могли бы считать обратной связью с пользователем, было использование гарнитуры VR. Хотя это означало, что система не будет полезна людям с очень серьезными нарушениями зрения, она будет гораздо интуитивнее для людей с частичным зрением, особенно для тех, кто имеет размытое зрение.

Обнаружение края

Выявление особенностей, таких как ребра, лучше всего выполнять с помощью двумерных сверток и даже используется в глубоком обучении (сверточные нейронные сети). Проще говоря, это точечное произведение сетки данных изображения (пикселей) против весов в ядре/фильтре. При обнаружении краев исходный результат выше (более белый), когда значения пикселей совпадают со значениями представляющего фильтра край.

mSstLIsZsNZK2vz-UaV3bLTnpiyQpoKTzNmk
Это делается для каждого пикселя. — кредит изображения

Существует несколько доступных опций для фильтров обнаружения краев. Те, которые мы включили в качестве конфигурации, это Frei-chen, а также варианты 3×3 и 5×5 Sobel. Каждый из них достиг одной цели, но с незначительными отличиями. Например, фильтр Собеля 3×3 был более резким, чем фильтр 5×5, но содержал больше шума от таких текстур, как ткань:

St0sndi1cpWo4e9GcpCu9p6yRITP8PVv1pTR
Слева: 3×3, справа: 5×5

Веб-платформа

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

  1. Обеспечьте подключение к сети
  2. Перейдите на веб-страницу
  3. Переведите устройство в альбомный режим
  4. Настройте эффект
  5. Включить режим VR
  6. Включить полноэкранный режим (коснением экрана)
  7. Вставьте телефон в минигарнитуру VR

Чтобы не вводить в заблуждение нетехнического пользователя, мы создали сайт как PWA (прогрессивное веб-приложение), позволяя пользователю хранить его на главном экране Android. Это гарантирует, что он всегда начинается на правильной странице, включен альбомный режим, приложение всегда работает во весь экран и не зависит от подключения к сети.

Производительность

Ранние прототипы JavaScript не работали близко к нашей целевой 60 кадров в секунду из-за очень дорогих сверточных операций. Мы подозревали, что узким местом был сам JavaScript. Мы попробовали версию WebAssembly. Полученный прототип работал еще медленнее. Скорее всего, это было связано с накладными расходами на передачу данных кадра видео в код WebAssembly и обратно.

Поэтому вместо этого мы обратились к шейдерам WebGL. Шейдеры потрясающие благодаря их чрезвычайной параллелизации части кода (шейдера) через пиксели текстуры (видеоканал). Чтобы поддерживать высокую производительность, сохраняя при этом высокий уровень настройки, код шейдера нужно было соединить вместе и повторно скомпилировать при выполнении, поскольку конфигурации изменялись, но благодаря этому нам удалось остаться в пределах бюджета кадра 16,7 мс, необходимого для 60 кадров в секунду.

Обратная связь

Мы провели несколько тестов. Мы проверили некоторые основные задачи, такие как навигацию, и собрали качественный отзыв. Это включало корректировку пользовательского интерфейса, предложение добавить опцию для настройки цветов краев и поверхностей, а также замечание, что поле зрения (FoV) было слишком низким.

Оба предложения по улучшению программного обеспечения были применены. Из-за аппаратных ограничений камеры угол зрения нельзя было исправить с помощью программного обеспечения. Однако нам удалось найти решение для этого в виде недорогих объективов «рыбий глаз» для телефонов и камер. Линзы расширили поле зрения оптически, а не цифрово.

4jBuDXQcVSRCIW10boRa-Tl5rtdoEYHqerGM
Объектив «рыбий глаз».
SDASEK6w5TFLXm7eXYzjYRQD1Ld7uWWTzofn
Слева: без объектива, справа: с объективом

Кроме того, система превзошла исходные ожидания, но не читала текст. Это связано с тем, что для каждого символа было два набора ребер. Низкая освещенность также была полезна, несмотря на введение большего шума.

XUnEmgZYZn2cj5iSAEQvnXLHE0JlclqFWhXm
Некоторые примеры конфигурации эффекта шейдера

Некоторые другие конфигурации, которые мы включили, – это радиус эффекта, его интенсивность и инверсия цвета.

5jvE831AtBsKj7eFSXr0hzCwmJTkfsmdzPsA
Меню параметров

Другие случаи использования

У нас была идея добавить эффекты шейдеров для имитации различных типов дальтонизма, предоставляя дизайнерам простой способ выявить проблемы доступности, связанные с дальтонизмом, в своих продуктах, будь то программное обеспечение или другое.

Используя значения соотношения RGB, найденные здесь и выключив обнаружение краев, мы смогли добавить базовые симуляции всех основных типов дальтонизма с помощью дополнительных компонентов, которые можно переключать в шейдерах.

YflPhnWBrDuIrMI2w-WeOjQ122D-Vhz9E60J
Тест Ишихары — Image Credit
BGBmXtHVuvC7WeWoFPubBOMCRZjevjccC3VP
(Слева) Нормальный (справа) Дейтеранопийный фильтр
b4ZsxdfjfGFJAL2WxJ7EpBIaighVoALhJqOp
(Слева) Нормальный (справа) Фильтр Protanopia

ШИ и будущая работа

Хотя это эксперимент, но все еще на очень ранних стадиях, обнаружение объектов высшего уровня можно осуществить с помощью tensorflowjs и tfjs-yolo-tiny, порта tensorflowjs tiny-yolo, меньшей и более быстрой версии модели обнаружения объектов YOLO.

J6bwH0h0HQXONQaDapoimg6aUDcAr5jjJ2c6
Текущие категории
YGBVsqdO0WC9HizjlwNVoWOfh2I-XRHuqeMK
Пример вывода с помощью ноутбука. Для работы требуется приличный графический процессор.

Следующий шаг — запустить сегментацию экземпляров в браузере с чем-то похожим на маску rcnn (хотя, возможно, она должна быть меньше, как tiny-yolo), и добавить ее в WebSight, чтобы выделять элементы цветной маской. коробок с наклейками.

fs-OeTSPqBXdyLhBL8oU7gqIAQknnb3tDyr5
Цели — Источник

Репо GitHub здесь, а живую демонстрацию можно найти на сайте. Обратите внимание, что пока Apple не окажет поддержку API камеры в браузерах, она может не работать на телефонах Apple.

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

К примеру, используя шейдер Matrix, вы можете почувствовать себя The One.

PGMyqHkLVWBECPfmIxvEqpAGD7uz8e6pcPWf
Все рисуется зелеными цифрами, а не линиями

А может быть, вам просто нравится наблюдать, как горит мир.

3rZoIwLMDtceBYESlehqZWPecrbUdCjN8lLu
Играет: Билли Джоэл — Мы не зажгли огонь

Вы можете твитить больше идей шейдеров здесь: @DanRuta

Добавить комментарий

Ваш адрес email не будет опубликован.