jeelizAR
1.0.0
경고 :이 저장소는 더 이상 사용되지 않으며 더 이상 유지되지 않습니다. 대신 webar.rocks.object를 사용하십시오.
독립형 AR 커피 - Jeeliz가 제공하는 무료 커피를 즐기십시오!
커피 컵이 감지되고 증강 현실에서 3D 애니메이션이 재생됩니다.
이 데모는 Jeelizar와 Three.js에만 의존합니다.
라이브러리의 주요 기능은 다음과 같습니다.
/demos/ : 데모의 소스 코드,/dist/ : 도서관의 심장 :jeelizAR.js : 메인 미니어링 스크립트,/helpers/ : 일부 특정 사용 사례 (WebXR) 에서이 라이브러리를 사용하는 데 도움이되는 스크립트,/libs/ : 데모에 사용되는 제 3 자 라이브러리 및 3D 엔진,/neuralNets/ : 신경망 모델. 이것들은이 라이브러리의 시연입니다. 일부는 특정 설정이 필요합니다.
Jeeliz YouTube 채널 또는 @startupjeeliz Twitter 계정에 구독하여 최첨단 개발에 대한 정보를 얻을 수 있습니다.
이 라이브러리를 사용하여 응용 프로그램이나 재미있는 데모를 만들었다면이 라이브러리를보고 여기에 링크를 삽입하고 싶습니다! Twitter @startupjeeliz 또는 LinkedIn으로 문의하십시오.
이 데모는 표준 웹 브라우저에서 작동합니다. 웹캠 액세스 만 필요합니다.
이 데모를 실행하려면 WebXR을 구현하는 웹 브라우저가 필요합니다. 우리는 그것이 모든 웹 브라우저에서 곧 구현되기를 바랍니다!
그런 다음이 데모를 실행할 수 있습니다.
이 데모는 모바일 또는 태블릿의 표준 웹 브라우저에서 실행됩니다. 그들은 놀라운 8 번째 벽 AR 엔진에 의존합니다. 우리는 엔진의 웹 버전을 사용하고 Three.js 웹 샘플에서 시작했습니다. 웹 엔진은 아직 공개적으로 출시되지 않았으므로 다음을 수행해야합니다.
index.html 에 키를 쓰십시오 ( <WEBAPPKEY> 검색하고 실제 키로 교체),데모 :
이 라이브러리의 가장 기본적인 통합 예는 첫 번째 데모 인 디버그 탐지 데모입니다. index.html 에는 <head> 섹션에 메인 라이브러리 스크립트, /dist/jeelizAR.js , MediaStramAPI (이전 getUserMedia API ) 도우미, /helpers/JeelizMediaStreamAPIHelper.js 및 데모 스크립트, demo.js :
< script src = " ../../dist/jeelizAR.js " > </ script >
< script src = " ../../helpers/JeelizMediaStreamAPIHelper.js " > </ script >
< script src = " demo.js " > </ script > index.html 의 <body> 섹션에 딥 학습 계산을 위해 라이브러리에서 사용하는 WebGL 컨텍스트를 초기화하고 디버그 렌더링을 표시하는 데 사용되는 <canvas> 요소를 넣습니다.
< canvas id = ' debugJeeARCanvas ' > </ canvas > 그런 다음 demo.js 에서는 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 : HTML5 비디오 요소 (MediaStream API 도우미에서 나올 수 있음). false 인 경우 JEEARAPI.detect(...) 호출 할 때 제공되는 videoFrameBuffer object 에서 소스 텍스처를 업데이트하십시오 (WebXR 데모와 같이).<dict> videoCrop : 자세한 내용은 비디오 작물 섹션을 참조하십시오.<function> callbackReady : 콜백 함수가 준비되거나 오류가 발생했을 때 시작되었습니다. 오류 레이블 또는 false 와 함께 호출<string> canvasId : 딥 러닝 처리에 사용되는 WebGL 컨텍스트가 생성되는 캔버스의 ID.<canvas> canvas : canvasId 제공되지 않으면 <canvas> 요소를 직접 제공 할 수도 있습니다.<dict> scanSettings : 자세한 내용은 스캔 설정 섹션을 참조하십시오.<boolean> isDebugRender : 부울. True 인 경우 <canvas> 요소에 디버그 렌더링이 표시됩니다. 디버깅에 유용하지만 GPU 컴퓨팅 리소스를 낭비하기 때문에 생산을 위해 false 로 설정해야합니다.<int> canvasSize : 픽셀에서 감지 캔버스의 크기 (정사각형이어야 함). 특수 값 -1 캔버스 크기를 유지하십시오. 기본값 : 512 .<boolean> followZRot : 신경망 모델 출력 피치, 롤 및 요 각도에서만 작동합니다. 추적 단계에서 현재 감지의 롤을 사용하여 입력 창을 자르고,[<float>, <float>] ZRotRange : followZRot = true 경우에만 작동합니다. 초기 회전 각도를 무작위 화하십시오. 값은 라디안에 있습니다. 기본값 : [0,0] . 감지를 트리거하는 함수는 JEEARAPI.detect(<int>nDetectionsPerLoop, <videoFrame>frame, <dictionary>options) 입니다.
<int> nDetectionPerLoop 는 연속 탐지 수가 진행된 수입니다. 높을수록 탐지가 빨라집니다. 그러나 기능 호출이 너무 많은 GPU 리소스를 소비하기 때문에 너무 높으면 전체 응용 프로그램이 느려질 수 있습니다. 3 에서 6 사이의 값이 권장됩니다. 값이 0 이면 루프 당 감지 횟수는 초기 값이 3 인 1 과 6 사이의 적응 적입니다.<videoFrame> frame WebXR 데모와 함께 사용됩니다 (WebXR 통합 섹션 참조). 그렇지 않으면 null 설정하고<dictionary> options 이러한 속성을 가질 수있는 선택 사전입니다.<float> thresholdDetectFactor : 감지 된 객체의 감지 임계 값에 적용되는 요인. 기본값은 1 입니다. 예를 들어 0.5 와 같으면 감지가 2 배 더 쉬워집니다.<string> cutShader : 비디오 영역을 자르는 데 사용되는 기본 셰이더를 조정하십시오. 가능한 값은 다음과 같습니다.null : 기본값은 필터를 적용하지 않고 RGBA 채널을 유지하지 않습니다.IOS : WebXR 사용을위한 iOS 장치의 가치 최적화. 빨간색 채널을 다른 컬러 채널에 복사하고 5 픽셀 중간 필터를 적용하십시오.median : RGB 채널에 3x3 중간 필터를 별도로 적용하십시오.null : 기본값은 필터를 적용하지 않고 RGBA 채널을 유지합니다.<boolean> isSkipConfirmation : 탐지를 더 쉽게 (더 민감하게) 만들지 만 더 많은 오 탐지를 유발할 수 있습니다. 기본값 : false ,<boolean> isKeepTracking : 객체를 탐지 한 후 계속 추적 해야하는 경우. 기본값 : false ,[<float>,<float>,<float>] trackingFactors : x, y 축 및 스케일을 따라 번역에 대한 감도 추적. 기본값 : 1.0 ,<float> thresholdDetectFactorUnstitch : 감지 임계 값 이이 값보다 낮은 경우 추적 중지. isKeepTracking=true 인 경우에만 사용됩니다. thresholdDetectFactor 보다 작아야합니다.secondNeighborFactor * objectDetectionScore <float> secondNeighborFactor 기본값은 0.7 ,<int> nLocateAutomoves : LOCATE 단계의 감지 단계 (저스테는 소음으로 입력 감지 창을 이동) (기본값 : 10 ),<float> locateMoveNoiseAmplitude : 입력 창 크기 (기본값 : 0.01 )에 비해 LOCATE 단계에서의 소음,<int> nConfirmAutoMoves : CONFIRM 단계 (기본값 : 8 ) 동안의 검출 단계 수,<float> thresholdConfirmOffset : abord 확인 단계 감지 점수가 객체 감지 임계 값 아래에있는 경우이 값 (기본값 : -0.02 ),<float> confirmMoveNoiseAmplitude : 입력 창 크기 (기본값 : 0.01 )에 비해 CONFIRM 단계의 소음<int> nConfirmUnstitchMoves : 계속 추적 모드 ( isKeepTracking = true , 실패한 탐지 횟수 후에 추적을 중지하십시오 (기본값 : 20 ),[<float> position, <float> angle] : CONFIRM 단계에서 모호한 감지 (2 개 객체가 가까운 점수가 있음)가 입력 창을 기울입니다. 첫 번째 값은 창 치수와 관련이 있고, 두 번째 값은 각도의 각도입니다 (기본값 : [0.1, 10] ),<float> confirmScoreMinFactorDuringAutoMove : 확인 단계에서 각 이동에 대한 최소 점수. 점수 가이 값보다 작 으면 스윕 스테이지로 돌아 오십시오. 기본값은 0.3 입니다. 감지 함수는 detectState 를 반환합니다. 최적화 목적을 위해 값이 아닌 참조별로 할당됩니다. 이 속성을 가진 사전입니다.
<float> distance : 학습 거리, 즉 데이터 세트 훈련 중에 카메라와 물체 사이의 거리. 대상의 실제 규모에 대한 단서를 제공하고<bool/string> label : false 객체가 감지되지 않은 경우, 그렇지 않으면 감지 된 물체의 레이블입니다. 그것은 항상 대문자로되어 있으며 신경망에 따라 다릅니다.<array4> positionScale : 4 값을 저장하는 플로트 배열 : [x,y,sx,sy] 여기서 x 와 y 감지 된 물체의 중심의 정규화 된 상대 위치입니다. sx , sy 는 감지 창의 상대 정규화 된 스케일 요인입니다.x 는 수평 축의 위치입니다. 0 (왼쪽)에서 1 (오른쪽)로 이동합니다.y 수직 축의 위치입니다. 0 (하단)에서 1 (상단)으로 이동합니다.sx 는 수평 축의 스케일입니다. 0 에서 1에서 1으로 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 부분은 3.js 로 처리됩니다. 데모의 출발점은 [Mozilla Fundation의 WebXR 뷰어] (Github Repository of Demos)가 제공 한 예입니다.
우리는 특정 도우미, helpers/JeelizWebXRHelper.js 통해 Jeeliz AR을 사용 하며이 헬퍼를 WebXR 데모에 사용하는 것이 좋습니다. iOS 구현을 사용하면 비디오 스트림 변환을 처리합니다 (비디오 스트림은 YCBCR 버퍼로 제공됩니다. 우리는 Y 버퍼 만 가져 가서 중간 필터를 적용합니다.)
JEEARAPI.init callbackReady 콜백에 의해 반환 됨) :"GL_INCOMPATIBLE" : webgl을 사용할 수 없거나이 WebGL 구성이 충분하지 않습니다 (WebGl2가 없거나 OES_TEXTURE_FLOAT 또는 OES_TEXTURE_HALF_FLOAT EXTENSION이없는 WebGL1이 없습니다),"ALREADY_INITIALIZED" : API는 이미 초기화되었습니다."GLCONTEXT_LOST" : WebGL 컨텍스트가 손실되었습니다. 초기화 후 컨텍스트가 손실되면 callbackReady 함수는이 값으로 오류 코드로 두 번째로 시작됩니다."INVALID_CANVASID" : dom에서 <canvas> 요소를 찾을 수 없습니다. 이 오류는 canvasId init() 메소드에 제공된 경우에만 트리거 될 수 있습니다.JEEARAPI.set_NN 콜백 함수에 의해 반환 됨) :"INVALID_NN" : 신경망 모델이 유효하지 않거나 손상되었습니다."NOTFOUND_NN" : 신경망 모델은 찾을 수 없거나 요청 중에 HTTP 오류가 발생했습니다. 비디오 작물 매개 변수를 제공 할 수 있습니다. 입력 요소가 <video> 요소 인 경우에만 작동합니다. 기본적으로 비디오 자르기가 없습니다 (전체 비디오 이미지는 입력으로 간주 됨). 비디오 작물 설정을 제공 할 수 있습니다.
JEEARAPI.init 이 호출되면 매개 변수 videoCrop ,JEEARAPI.set_videoCrop(<dict> videoCrop) 으로 전화하여 Dictionnary videoCrop 은 False (VideoCrop 없음)이거나 다음 매개 변수가 있습니다.
<int> x : 자른 영역의 왼쪽 하단 모서리의 수평 위치, 픽셀,<int> y : 자른 지역의 왼쪽 하단 모서리의 수직 위치, 픽셀,<int> w : 자른 부위의 너비, 픽셀,<int> h : 픽셀로 자른 부위의 높이.스캔 설정이 제공 될 수 있습니다.
JEEARAPI.init 호출되면 매개 변수 scanSettings 사용하여JEEARAPI.set_scanSettings(<dict> scanSettings) 로 전화하여 Dictionnary scanSettings 에는 다음과 같은 속성이 있습니다.
<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를 사용할 수 없습니다.
최소한 JSON 파일에 대한 GZIP 압축을 활성화하도록주의하십시오. 뉴런 네트워크 모델은 상당히 무겁지만 다행히도 GZIP로 압축됩니다.
/dist/jeelizAR.module.js es6에서 작동한다는 점을 제외하고 /dist/jeelizAR.js 와 정확히 동일하므로 다음을 사용하여 직접 가져올 수 있습니다.
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 엔진과 3D 모델의 데이터 세트를 사용하여 훈련됩니다. 모두가 클라이언트 측면으로 처리됩니다.
WebGL2 사용할 수 있으면 WebGL2 사용하고 특정 확장이 필요하지 않습니다.WebGL2 사용할 수 없지만 WebGL1 사용할 수없는 경우 OES_TEXTURE_FLOAT EXTENSION 또는 OES_TEXTURE_HALF_FLOAT EXTENSION이 필요합니다.WebGL2 사용할 수없고 WebGL1 사용할 수 없거나 OES_TEXTURE_FLOAT 또는 OES_HALF_TEXTURE_FLOAT 구현되지 않으면 사용자는 호환되지 않습니다.호환성 오류가 트리거되면이 저장소에 문제를 게시하십시오. 이것이 웹캠 액세스에 문제가있는 경우 먼저 장치 (Skype, Messenger, 기타 브라우저 탭 및 Windows 등)를 사용할 수있는 모든 응용 프로그램을 닫은 후 먼저 다시 시도하십시오. 포함하십시오 :
WebGL1 구현 정보),WebGL2 구현 정보),아파치 2.0. 이 응용 프로그램은 상업용 및 비상업적 사용 모두에 무료입니다.
Application 또는 Desktop 웹 사이트에 Jeeliz 로고와 Jeeliz 웹 사이트 링크를 포함하여 귀속에 감사드립니다. 물론 우리는 얼굴 필터를 통해 Jeeliz에 대한 큰 링크를 기대하지는 않지만 링크를 크레딧/About/Help/Footer 섹션에 넣을 수 있다면 좋을 것입니다.
Jeeliz Main Face 감지 및 추적 라이브러리는 Cjeeliz FaceFilter API입니다. 멀티 페이스 추적을 처리하고 각 추적면에 대해 회전 각도와 입 개방 계수를 제공합니다. 브라우저에서 실행되는 얼굴 필터와 같은 자신의 Snapchat/MSQRD를 빌드하는 것이 완벽합니다. 얼굴 스왑을 포함하여 수십 개의 통합 데모가 제공됩니다.
우리의 딥 러닝 기반 라이브러리 Weboji는 웹캠 비디오 피드에서 11 개의 얼굴 표정을 실시간으로 감지합니다. 그런 다음 3D로 3.JS 렌더러 또는 SVG 렌더러가있는 2D로 아바타에서 재현됩니다 (3D 개발자가 아닌 경우에도 사용할 수 있음). 여기에서 Github 저장소에 액세스 할 수 있습니다.
사용자가 화면을보고 있는지 여부를 감지하려면 Jeeliz Glance Tracker가 원하는 것입니다. 사용자가보고 있는지 여부에 관계없이 비디오를 재생하고 일시 중지하는 것이 유용 할 수 있습니다. 이 라이브러리는 더 적은 리소스가 필요하며 신경망 파일은 훨씬 가볍습니다.
이 라이브러리를 안경 가상 트라이 온 (선글라스, 안경, 스키 마스크)에 사용하려면 Jeeliz VTO 위젯을 살펴볼 수 있습니다. 여기에는 다음과 같은 특징을 구현하는 고품질 및 경량 3D 엔진이 포함되어 있습니다. 지연된 음영, PBR, 광선 그림자, 정상 매핑 등은 사용자 주변의 조명 환경 (주변 및 방향 조명)을 재구성합니다. 그러나 안경은 서버에서 호스팅 된 데이터베이스에서 나옵니다. 몇 가지 모델을 추가하려면 저희에게 연락하십시오.
