jeelizAR
1.0.0
Предупреждение: этот репозиторий устарел и больше не поддерживается. Пожалуйста, используйте webar.rocks.object вместо этого.
Автономный AR Coffee - наслаждайтесь бесплатным кофе, предлагаемым Jeeliz!
Кофейная чашка обнаружена, и 3D -анимация играется в дополненной реальности.
Эта демонстрация полагается только на Jeelizar и Three.js.
Вот основные особенности библиотеки:
/demos/ : исходный код демонстраций,/dist/ : сердце библиотеки:jeelizAR.js : основной мини -сценарий,/helpers/ : Сценарии, которые могут помочь вам использовать эту библиотеку в некоторых конкретных вариантах использования (например, webxr),/libs/ : 3 -й стороны библиотеки и 3D -двигатели, используемые в демонстрациях,/neuralNets/ : Модели нейронной сети. Это некоторые демонстрации этой библиотеки. Некоторые требуют определенной настройки.
Вы можете подписаться на канал Jeeliz YouTube или на учетную запись @StartupJeeliz Twitter, чтобы быть в курсе наших передовых разработок.
Если вы сделали приложение или веселую демонстрацию, используя эту библиотеку, мы хотели бы увидеть его и вставить ссылку здесь! Свяжитесь с нами в Twitter @StartupJeeliz или LinkedIn.
Эти демонстрации работают в стандартном веб -браузере. Они требуют только доступа веб -камеры.
Чтобы запустить эти демонстрации, вам нужен веб -браузер, реализующий webxr. Мы надеемся, что он будет реализован в ближайшее время во всех веб -браузерах!
Тогда вы можете запустить эти демонстрации:
Эти демонстрации работают в стандартном веб -браузере на мобильном или планшете. Они полагаются на удивительный 8 -й стены. Мы используем веб -версию двигателя, и мы начали с веб -образца Three.js. Веб -двигатель еще не выпущен публично, поэтому вам нужно:
index.html демонстрации, которую вы хотите попробовать (поиск и замените <WEBAPPKEY> на ваш реальное ключ),Демонстрация:
Самым основным примером интеграции этой библиотеки является первая демонстрация, демонстрация обнаружения отладки. В index.html мы включаем в раздел <head> основной библиотечный сценарий, /dist/jeelizAR.js , MediaStramAPI (ранее называемый getUserMedia API ), /helpers/JeelizMediaStreamAPIHelper.js и Demo Script, demo.js :
< script src = " ../../dist/jeelizAR.js " > </ script >
< script src = " ../../helpers/JeelizMediaStreamAPIHelper.js " > </ script >
< script src = " demo.js " > </ script > В разделе <body> index.html мы поместили элемент <canvas> , который будет использоваться для инициализации контекста Webgl, используемого библиотекой для вычисления глубокого обучения, и, возможно, отображать рендеринг отладки:
< canvas id = ' debugJeeARCanvas ' > </ canvas > Затем, в demo.js , мы получаем видео -канал веб -камеры после загрузки страницы, используя Helper MediaStream API :
JeelizMediaStreamAPIHelper . get ( DOMVIDEO , init , function ( ) {
alert ( 'Cannot get video bro :(' ) ;
} , {
video : true //mediaConstraints
audio : false
} ) Вы можете заменить эту часть статическим видео, и вы также можете предоставить носители для медиа, чтобы указать разрешение видео. Когда видео -канал захвачен, init функция обратного вызова. Он инициализирует эту библиотеку:
function init ( ) {
JEEARAPI . init ( {
canvasId : 'debugJeeARCanvas' ,
video : DOMVIDEO ,
callbackReady : function ( errLabel ) {
if ( errLabel ) {
alert ( 'An error happens bro: ' , errLabel ) ;
} else {
load_neuralNet ( ) ;
}
}
} ) ;
} Функция load_neuralNet загружает модель нейронной сети:
function load_neuralNet ( ) {
JEEARAPI . set_NN ( '../../neuralNets/basic4.json' , function ( errLabel ) {
if ( errLabel ) {
console . log ( 'ERROR: cannot load the neural net' , errLabel ) ;
} else {
iterate ( ) ;
}
} , options ) ;
}Вместо того, чтобы давать URL нейронной сети, вы также можете дать разпроводимый объект JSON.
Функция iterate запускает петлю итерации:
function iterate ( ) {
var detectState = JEEARAPI . detect ( 3 ) ;
if ( detectState . label ) {
console . log ( detectState . label , 'IS DETECTED YEAH !!!' ) ;
}
window . requestAnimationFrame ( iterate ) ;
} JEEARAPI.init принимает словарь в качестве аргумента с этими свойствами:
<video> video : Video Element HTML5 (может поступить от вспомогательного помощника API MediaStream). Если false , обновите исходную текстуру из videoFrameBuffer object , предоставленного при вызове JEEARAPI.detect(...) (как в демо.<dict> videoCrop : см. Раздел видеороля для получения более подробной информации<function> callbackReady : функция обратного вызова запускается при готовой или если была ошибка. Вызывается с меткой ошибки или false ,<string> canvasId : идентификатор холста, из которого будет создан контекст Webgl, используемый для обработки глубокого обучения,<canvas> canvas : если canvasId не предоставлен, вы также можете предоставить непосредственно элемент <canvas><dict> scanSettings : см. Раздел «Настройки сканирования» для получения более подробной информации<boolean> isDebugRender : Boolean. Если это правда, на элементе <canvas> будет отображаться рендеринг отладки. Полезно для отладки, но он должен быть установлен на false для производства, потому что он тратит впустую вычислительные ресурсы графического процессора,<int> canvasSize : размер холста обнаружения в пикселях (должен быть квадратный). Специальное значение -1 Держите размер холста. По умолчанию: 512 .<boolean> followZRot : работает только с моделями нейронной сети, выводящими шаг, рулона и углы рыскания. Обрезать окно ввода, используя рулон текущего обнаружения во время этапа отслеживания,[<float>, <float>] ZRotRange : работает только если followZRot = true Рандомизируйте начальный угол вращения. Значения в радианах. По умолчанию: [0,0] . Функция, которая запускает обнаружение, является JEEARAPI.detect(<int>nDetectionsPerLoop, <videoFrame>frame, <dictionary>options) .
<int> nDetectionPerLoop - это количество последовательных обнаружений. Чем выше, тем быстрее будет обнаружение. Но это может замедлить все приложение, если оно слишком высокое, потому что функциональный вызов будет потреблять слишком много ресурсов графического процессора. Значение от 3 до 6 рекомендуется. Если значение равно 0 , количество обнаружения на цикл является адаптивным между 1 и 6 с начальным значением 3 ,<videoFrame> frame используется только с Demos WebXR (см. Раздел интеграции WebXR). В противном случае установите его на null ,<dictionary> options - это необязательный словарь, который может обладать этими свойствами:<float> thresholdDetectFactor : фактор, применяемый к порогам обнаружения для обнаруженного объекта. Значение по умолчанию составляет 1 . Например, если он будет равен 0.5 , обнаружение будет в 2 раза легче.<string> cutShader : настройте шейдер по умолчанию, используемый для обрезки видео -области. Возможные значения:null : значение по умолчанию, не применяет фильтр и не сохраняет каналы RGBA,IOS : ценность оптимизирована устройства iOS только для использования WebXR. Скопируйте красный канал в другие цветовые каналы и примените средний фильтр 5 пикселейmedian : примените средин 3x3 на каналах RGB отдельно,null : значение по умолчанию, не применяет фильтр и сохраняет каналы RGBA<boolean> isSkipConfirmation : облегчает обнаружение (более чувствительное), но может вызвать больше ложных срабатываний. По умолчанию: false ,<boolean> isKeepTracking : если мы будем продолжать отслеживать объект после его обнаружения. По умолчанию: false ,[<float>,<float>,<float>] trackingFactors : чувствительность отслеживания для перевода вдоль x, y -оси и шкалы. По умолчанию: 1.0 ,<float> thresholdDetectFactorUnstitch : Stop Tranking, если порог обнаружения ниже этого значения. Используется только в том случае, если isKeepTracking=true . Должен быть меньше, чем thresholdDetectFactor ,<float> secondNeighborFactor : не подтверждайте объект, если другой объект имеет оценку обнаружения, по крайней мере, secondNeighborFactor * objectDetectionScore . Значение по умолчанию составляет 0.7 ,<int> nLocateAutomoves : количество шага обнаружения на стадии LOCATE (Juste Переместите окно обнаружения ввода с шумом) (по умолчанию: 10 ),<float> locateMoveNoiseAmplitude : шум во время стадии LOCATE , относительно размеров окна ввода (по умолчанию: 0.01 ),<int> nConfirmAutoMoves : количество шагов обнаружения на этапе CONFIRM (по умолчанию: 8 ),<float> thresholdConfirmOffset : abord подтвердить стадию, если оценка обнаружения ниже порога обнаружения объекта + это значение (по умолчанию: -0.02 ),<float> confirmMoveNoiseAmplitude : шум на этапе CONFIRM относительно размеров окна ввода (по умолчанию: 0.01 ),<int> nConfirmUnstitchMoves : в режиме продолжения отслеживания ( isKeepTracking = true , остановите отслеживание после этого количества неудачных обнаружений (по умолчанию: 20 ),[<float> position, <float> angle] : если неоднозначное обнаружение (2 объекта имеют закрытые оценки) во время этапа CONFIRM наклоните окно ввода. Первое значение относительно размеров окна, второе - угол в градусах (по умолчанию: [0.1, 10] ),<float> confirmScoreMinFactorDuringAutoMove : во время этапа подтверждения минимальный балл для каждого хода. Если счет меньше этого значения, вернитесь к этапе развертки. По умолчанию 0.3 . Функция обнаружения возвращает объект, detectState . Для цели оптимизации это назначается ссылкой, а не по значению. Это словарь с этими свойствами:
<float> distance : расстояние обучения, то есть расстояние между камерой и объектом во время обучения набора данных. Дает подсказку о реальной масштабе объекта,<bool/string> label : false Если объект не обнаружен, в противном случае метка обнаруженного объекта. Это всегда в прописных буквах и зависит от нейронной сети,<array4> positionScale x [x,y,sx,sy] y sx , sy являются относительно нормализованными коэффициентами шкалы окна обнаружения:x - положение на горизонтальной оси. Он переходит от 0 (слева) к 1 (справа),y - позиция на вертикальной оси. Он переходит от 0 (внизу) до 1 (вверху),sx - шкала на горизонтальной оси. Он переходит от 0 (размер null) до 1 (полный размер на горизонтальной оси),sy - это шкала на вертикальной оси. Он переходит от 0 (нулевой размер) до 1 (полный размер по вертикальной оси),<float> yaw : угол в радиане вращения объекта вокруг вертикальной (Y) оси,<float> detectScore : оценка обнаружения обнаруженного объекта, между 0 (плохое обнаружение) и 1 (очень хорошее обнаружение).JEEARAPI.set_NN(<string> neuralNetworkPath, <function> callback) : переключает нейронную сеть и вызовите функцию, когда она закончена, либо с false как аргумент или с меткой ошибки,JEEARAPI.reset_state() : возвращается в режим развертки,JEEARAPI.get_aspectRatio() : возвращает соотношение сторон <width>/<height> входного источника,JEEARAPI.set_scanSettings(<dict> scanSettings) : см. Раздел «Настройки сканирования» для получения дополнительной информации. Основной код Webxr Demos находится непосредственно в файлах index.html . 3D -часть обрабатывается Three.js . Отправной точкой демонстраций является примеры, предоставленные [Webxr Viewer Fundation Fundation] (репозиторий Github Demos).
Мы используем Jeeliz AR через конкретного помощника, helpers/JeelizWebXRHelper.js и мы настоятельно рекомендуем использовать этого помощника для ваших демонстраций webxr. С помощью реализации iOS он обрабатывает конверсию видеопотока (видеопоток дается в виде буферов YCBCR . Мы принимаем только буфер Y и применяем на нем средний фильтр.).
JEEARAPI.init callbackReady Callback):"GL_INCOMPATIBLE" : WebGL недоступен, или этой конфигурации WebGL недостаточно (нет webGL2, или есть WebGL1 без OES_TEXTURE_FLOAT или OES_TEXTURE_HALF_FLOAT EXTENSION),"ALREADY_INITIALIZED" : API уже инициализирован,"GLCONTEXT_LOST" : контекст WebGL был потерян. Если контекст потерян после инициализации, функция callbackReady будет запущена во второй раз с этим значением в качестве кода ошибки,"INVALID_CANVASID" : не может найти элемент <canvas> в DOM. Эта ошибка может быть вызвана только в том случае, если canvasId предоставлен методу init() .JEEARAPI.set_NN ):"INVALID_NN" : модель нейронной сети недействительна или повреждена,"NOTFOUND_NN" : модель нейронной сети не найдена, или в ходе запроса произошла ошибка HTTP. Параметры урожая видео могут быть предоставлены. Он работает только в том случае, если элемент ввода является элементом <video> . По умолчанию нет видеопольза (все видео изображение рассматривается как вход). Можно предоставить настройки урожая видео:
JEEARAPI.init , используя параметр videoCrop ,JEEARAPI.set_videoCrop(<dict> videoCrop) DictionNary videoCrop является либо ложным (без видеокола), либо имеет следующие параметры:
<int> x : горизонтальное положение нижнего левого уголка обрезанной области, в пикселях,<int> y : вертикальное положение нижнего левого угла обрезанной области, в пикселях,<int> w : ширина обрезанной области, в пикселях,<int> h : высота укороченной площади, в пикселях.Настройки сканирования могут быть предоставлены:
JEEARAPI.init , используя scanSettings параметровJEEARAPI.set_scanSettings(<dict> scanSettings) scanSettings DictionNary обладает следующими свойствами:
<float> margins : маржа. Не пытайтесь определить, находится ли центр окна обнаружения слишком близко к границам. 0 → без края, 1 → 100% поля. По умолчанию: 0.1 ,<int> nSweepXYsteps : количество шагов перевода для данной шкалы. По умолчанию: 6*6=36 ,<int> nSweepSsteps : количество шагов масштаба. Общее количество шагов перевода =nSweepXYsteps*nSweepSsteps . По умолчанию: 4 ,[<float>,<float>] sweepScaleRange : диапазон шкалы окна обнаружения. 1 → Минимальное измерение всего окна (между шириной и высотой). Не учитывайте маржу. По умолчанию: [0.3, 0.7] ,<int> sweepStepMinPx : минимальный размер шага в пикселях. По умолчанию: 16 ,<boolean> sweepShuffle : Если мы должны перетасовать положения сканирования или нет. По умолчанию: true .Демонстрации должны быть размещены на статическом сервере HTTPS с действительным сертификатом. В противном случае Webxr или MediaStream API может быть недоступен.
Будьте осторожны, чтобы включить сжатие GZIP как минимум для файлов JSON. Модель сети нейрон может быть довольно тяжелой, но, к счастью, она хорошо сжата с GZIP.
/dist/jeelizAR.module.js точно такой же, как /dist/jeelizAR.js за исключением того, что он работает с ES6, поэтому вы можете импортировать его напрямую, используя:
import 'dist/jeelizAR.module.js' Мы предоставляем несколько моделей нейронной сети в / Neuralnets / Path. Мы регулярно добавляем новые нейронные сети в этом хранилище GIT. Мы также можем предоставить конкретные услуги обучения нейронной сети. Пожалуйста, свяжитесь с нами здесь для ценообразования и деталей. Вы можете найти здесь:
| модельный файл | Обнаруженные этикетки | входной размер | стоимость обнаружения | надежность | замечания |
|---|---|---|---|---|---|
basic4.json | Кубок, стул, велосипед, ноутбук | 128*128px | ** | ** | |
basic4Light.json | Кубок, стул, велосипед, ноутбук | 64*64px | * | * | |
cat.json | КОТ | 64*64px | *** | *** | Обнаружение кошачьего лица |
sprite0.json | Spritecan | 128*128px | *** | *** | автономная сеть (6D обнаружение) |
ARCoffeeStandalone01.json | ЧАШКА | 64*64px | ** | *** | автономная сеть (6D обнаружение) |
Размер входа - это разрешение входного изображения сети. Окно обнаружения не является статичным: оно скользит по видео как для положения, так и для масштаба. Если вы используете эту библиотеку с WebXR и iOS, резолюция видео составит 480*270 пикселей, поэтому входа 64*64 пикселей будет достаточно. Если, например, вы использовали модель нейронной сети входной сети 128*128 пикселей, входное изображение часто должно быть увеличено до того, как будет дано в качестве входного.
Эта библиотека использует технологию глубокого обучения Jeeliz Webgl для обнаружения объектов. Нейронная сеть обучается с использованием трехмерного двигателя и набора данных 3D -моделей. Все обработано клиентская сторона.
WebGL2 доступен, он использует WebGL2 , а конкретное расширение не требуется,WebGL2 недоступен, но WebGL1 , нам требуется либо OES_TEXTURE_FLOAT Extension, либо Extension OES_TEXTURE_HALF_FLOAT ,WebGL2 недоступен, и если WebGL1 не доступен, или не реализованы OES_TEXTURE_FLOAT или OES_HALF_TEXTURE_FLOAT , пользователь не совместим.Если ошибка совместимости запускается, пожалуйста, опубликуйте проблему в этом репозитории. Если это проблема с доступом к веб -камере, пожалуйста, сначала повторите попытку после закрытия всех приложений, которые могут использовать ваше устройство (Skype, Messenger, другие вкладки браузера и Windows, ...). Пожалуйста, укажите:
WebGL1 ),WebGL2 ),Apache 2.0. Это приложение бесплатно как для коммерческого, так и для некоммерческого использования.
Мы ценим атрибуцию, включив логотип Jeeliz и ссылку на веб -сайт Jeeliz в вашем приложении или настольном веб -сайте. Конечно, мы не ожидаем большой ссылки на Jeeliz по поводу вашего фильтра для лица, но если вы сможете поместить ссылку в раздел «Кредиты/о/помощь/нижний колонтитул», это будет здорово.
Библиотека обнаружения и отслеживания основного лица Jeeliz - это API Facefilter Cjeeliz. Он обрабатывает многопользовательское отслеживание, и для каждого отслеживаемого лица он обеспечивает углы вращения и коэффициент открытия рта. Это идеально подходит для создания собственных Snapchat/MSQRD, как лица, работающие в браузере. Он поставляется с дюжиной демонстрации интеграции, включая обмен лицом.
Наша библиотека на основе глубокого обучения Weboji обнаруживает 11 выражений лица в режиме реального времени из видео -канала веб -камеры. Затем они воспроизводятся на аватаре, либо в 3D с рендерером Three.js, либо в 2D с рендерером SVG (чтобы вы могли использовать его, даже если вы не являетесь 3D -разработчиком). Вы можете получить доступ к репозиторию GitHub здесь.
Если вы просто хотите обнаружить, смотрит ли пользователь на экране или нет, Jeeliz Glance Tracker - это то, что вы ищете. Может быть полезно воспроизведение и приостановить видео, независимо от того, смотрит ли пользователь или нет. Эта библиотека нуждается в меньшем количестве ресурсов, а файл нейронной сети намного легче.
Если вы хотите использовать эту библиотеку для виртуальной попытки очков (солнцезащитные очки, очки, лыжные маски), вы можете взглянуть на виджет Jeeliz VTO. Он включает в себя высококачественный и легкий 3D -двигатель, который реализует следующие функции: отсроченное затенение, PBR, raytrabed Shadows, нормальное отображение, ... он также реконструирует среду освещения вокруг пользователя (окружающее и направленное освещение). Но очки поступают из базы данных, размещенной на наших серверах. Если вы хотите добавить несколько моделей, свяжитесь с нами.
