jeelizAR
1.0.0
警告：このリポジトリは非推奨であり、もう維持されていません。代わりにwebar.rocks.objectを使用してください。
スタンドアロンARコーヒー - Jeelizが提供する無料のコーヒーをお楽しみください！
コーヒーカップが検出され、3Dアニメーションが拡張現実で再生されます。
このデモは、Jeelizarと3.jsのみに依存しています。
ライブラリの主な機能は次のとおりです。
/demos/ ：デモンストレーションのソースコード、/dist/ ：heart of the Library：jeelizAR.js ：メインミニフォームスクリプト、/helpers/ ：いくつかの特定のユースケース（WebXRなど）でこのライブラリを使用するのに役立つスクリプト/libs/ ：デモで使用されるサードパーティライブラリと3Dエンジン、/neuralNets/ ：ニューラルネットワークモデル。 これらは、このライブラリのいくつかのデモです。特定のセットアップが必要なものもあります。
Jeeliz YouTubeチャンネルまたは@StartUpJeeliz Twitterアカウントを購読して、最先端の開発を知らせておくことができます。
このライブラリを使用してアプリケーションや楽しいデモを行った場合は、ここにリンクを挿入したいと思います！ Twitter @StartUpJeelizまたはLinkedInでお問い合わせください。
これらのデモンストレーションは、標準のWebブラウザで機能します。ウェブカメラアクセスのみが必要です。
これらのデモンストレーションを実行するには、webxRを実装するWebブラウザが必要です。すべてのWebブラウザにすぐに実装されることを願っています！
その後、これらのデモを実行できます。
これらのデモは、モバイルまたはタブレットの標準的なWebブラウザで実行されます。彼らは驚くべき8番目の壁ARエンジンに依存しています。エンジンのWebバージョンを使用し、Three.js Webサンプルから始めました。 Webエンジンはまだ公開されていないため、次のことが必要です。
index.htmlにキーを書きます（実際のキーで<WEBAPPKEY>検索して置き換えます）、デモ：
このライブラリの最も基本的な統合の例は、最初のデモであるDebug Detection Demoです。 index.htmlでは、 <head>セクションにメインライブラリスクリプト、 /dist/jeelizAR.js 、 MediaStramAPI （以前はgetUserMedia APIと呼ばれていた）ヘルパー、 /helpers/JeelizMediaStreamAPIHelper.js 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ヘルパーを使用してページを読み込んだ後、Webカメラビデオフィードを取得します。
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 ：callback functionが準備ができたとき、またはエラーが発生した場合に起動します。エラーラベルまたはfalseで呼び出され、<string> canvasId ：ディープラーニング処理に使用されるwebglコンテキストが作成されるキャンバスのid、<canvas> canvas ： canvasIdが提供されていない場合は、 <canvas>要素を直接提供することもできます。<dict> scanSettings ：詳細については、スキャン設定セクションを参照してください<boolean> isDebugRender ：boolean。 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の場合、ループあたりの検出数は1 6間の適応的であり、初期値は3の場合、<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よりも小さくなければなりません、<float> secondNeighborFactor ：別のオブジェクトに少なくともsecondNeighborFactor * objectDetectionScoreの検出スコアがある場合、オブジェクトを確認しないでください。デフォルト値は0.7です。<int> nLocateAutomoves ：検出ステップ数のLOCATEステージ（Justは、ノイズで入力検出ウィンドウを移動します）（デフォルト： 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] ： CONFIRM段階であいまいな検出（2つのオブジェクトのスコアがあります）の場合、入力ウィンドウを傾けます。最初の値はウィンドウ寸法に関連し、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 （サイズはnull）から1 （水平軸のフルサイズ）になり、syは垂直軸上のスケールです。 0 （null size）から1 （垂直軸のフルサイズ）になり、<float> yaw ：垂直（y）軸の周りのオブジェクトの回転のラジアンの角度、<float> detectScore ：検出されたオブジェクトの検出スコア、 0 （悪い検出）と1 （非常に良好な検出）。JEEARAPI.set_NN(<string> neuralNetworkPath, <function> callback) ：ニューラルネットワークを切り替え、 falseとしてfalseまたはエラーラベルを使用して、終了したときに関数を呼び出します。JEEARAPI.reset_state() ：スイープモードに戻り、JEEARAPI.get_aspectRatio() ：入力ソースのアスペクト比<width>/<height>を返します。JEEARAPI.set_scanSettings(<dict> scanSettings) ：詳細については、スキャン設定セクションを参照してください。WebXR DEMOSプリンシパルコードは、 index.htmlファイルに直接あります。 3D部品は3.jsによって処理されます。デモの出発点は、[Mozilla FundationによるWebXRビューアー]（DEMOSのGitHubリポジトリ）によって提供された例です。
特定のヘルパー、 helpers/JeelizWebXRHelper.jsを介してjeeliz arを使用し、このヘルパーをWebXRデモに使用することを強くお勧めします。 iOSの実装により、ビデオストリーム変換を処理します（ビデオストリームはYCBCRバッファーとして与えられます。Yバッファーのみを取り、中央値フィルターを適用します。）。
JEEARAPI.init callbackReadyコールバックによって返されます）："GL_INCOMPATIBLE" ：WebGLは使用できません。または、このWebGL構成では十分ではありません（WebGl2がありません。または、OES_TEXTURE_FLOATまたはOES_TEXTURE_HALF_FLOAT拡張機能のないWebGl1があります）、"ALREADY_INITIALIZED" ：APIはすでに初期化されています。"GLCONTEXT_LOST" ：WebGLコンテキストが失われました。初期化後にコンテキストが失われた場合、 callbackReady関数はエラーコードとしてこの値で2回目に起動されます。"INVALID_CANVASID" ：domに<canvas>要素が見つかりません。このエラーは、 canvasId init()メソッドに提供されている場合にのみトリガーできます。JEEARAPI.set_NNコールバック関数によって返される）："INVALID_NN" ：ニューラルネットワークモデルが無効または破損している、"NOTFOUND_NN" ：ニューラルネットワークモデルは見つかりませんでした。または、リクエスト中にHTTPエラーが発生しました。ビデオクロップパラメーターを提供できます。入力要素が<video>要素である場合にのみ機能します。デフォルトでは、ビデオのトリミングはありません（ビデオ画像全体が入力として撮影されます）。ビデオクロップ設定を提供できます：
JEEARAPI.initが呼び出されたとき、パラメーターvideoCropを使用して、JEEARAPI.set_videoCrop(<dict> videoCrop)に電話して辞書のvideoCropはfalse（ビデオオクロップなし）か、次のパラメーターを持っています。
<int> x ：クロップドエリアの左下隅の水平位置、ピクセルで、<int> y ：クロップドエリアの左下隅の垂直位置、ピクセル、<int> w ：クロップドエリアの幅、ピクセル、<int> h ：ピクセル単位のクロップドエリアの高さ。スキャン設定を提供できます：
JEEARAPI.initが呼び出されたとき、パラメーターscanSettingsを使用してJEEARAPI.set_scanSettings(<dict> scanSettings)に電話して辞書の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 /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拡張機能またはOES_TEXTURE_HALF_FLOAT拡張機能のいずれかが必要です。WebGL2が使用できない場合、 WebGL1が使用できない場合、またはOES_TEXTURE_FLOATまたはOES_HALF_TEXTURE_FLOATが実装されていない場合、ユーザーは互換性がありません。互換性エラーがトリガーされている場合は、このリポジトリに問題を投稿してください。これがウェブカメラのアクセスの問題である場合は、最初にデバイス（Skype、メッセンジャー、その他のブラウザタブ、Windowsなど）を使用できるすべてのアプリケーションを閉じた後、最初に再試行してください。含めてください：
WebGL1実装について）、WebGL2実装について）、Apache 2.0。このアプリケーションは、商業的および非営利的な使用の両方で無料です。
Jeelizのロゴと、アプリケーションまたはデスクトップWebサイトにJeeliz Webサイトへのリンクを含めることで、帰属に感謝します。もちろん、Face Filterの上にJeelizへの大きなリンクは期待していませんが、クレジット/About/Help/フッターセクションにリンクを入れることができれば、それは素晴らしいことです。
Jeelizメインフェイス検出と追跡ライブラリは、Cjeeliz FaceFilter APIです。マルチフェイストラッキングを処理し、追跡された各面で回転角と口の開口係数を提供します。ブラウザで実行されている独自のsnapchat/msqrdのようなフェイスフィルターを構築するのに最適です。フェイススワップを含む、数十の統合デモが付属しています。
ディープラーニングベースのライブラリWebojiは、ウェブカメラビデオフィードからリアルタイムで11の表情を検出します。次に、3Dで3Dで3Dで、またはSVGレンダラーを使用して2Dでアバターで再現されます（3D開発者ではない場合でも使用できます）。 GitHubリポジトリにアクセスできます。
ユーザーが画面を見ているかどうかを検出したい場合は、Jeeliz Glanceトラッカーが探しているものです。ユーザーが見ているかどうかにかかわらず、ビデオを再生して一時停止することは有用です。このライブラリはリソースが少なくなり、ニューラルネットワークファイルははるかに軽量です。
このライブラリをグラスの仮想トライオン（サングラス、スペクタクル、スキーマスク）に使用したい場合は、Jeeliz VTOウィジェットを見ることができます。これには、以下の機能を実装する高品質で軽量の3Dエンジンが含まれています。延期されたシェーディング、PBR、レイトレースシャドウ、通常のマッピングなど...ユーザーの周りの照明環境を再構築します（周囲および方向照明）。しかし、メガネは、サーバーにホストされているデータベースから来ています。モデルを追加したい場合は、お問い合わせください。
