jeelizAR
1.0.0
PERINGATAN: Repositori ini sudah usang dan tidak dipertahankan lagi. Harap gunakan webar.rocks.Object sebagai gantinya.
Mandiri AR Coffee - Nikmati kopi gratis yang ditawarkan oleh Jeeliz!
Piala kopi terdeteksi dan animasi 3D dimainkan dalam augmented reality.
Demo ini hanya bergantung pada Jeelizar dan Three.js.
Berikut adalah fitur utama perpustakaan:
/demos/ : Sumber kode demonstrasi,/dist/ : Heart of the Library:jeelizAR.js : skrip minifikasi utama,/helpers/ : Skrip yang dapat membantu Anda menggunakan perpustakaan ini dalam beberapa kasus penggunaan tertentu (seperti WebXR),/libs/ : PERPUSTAKAAN PIHAK PENGETRA DAN ENGIN 3D yang digunakan dalam demo,/neuralNets/ : Model Jaringan Saraf. Ini adalah beberapa demonstrasi perpustakaan ini. Beberapa membutuhkan pengaturan tertentu.
Anda dapat berlangganan saluran Jeeliz YouTube atau ke akun Twitter @startupjeeliz untuk diberi tahu tentang perkembangan canggih kami.
Jika Anda telah membuat aplikasi atau demonstrasi yang menyenangkan menggunakan perpustakaan ini, kami ingin melihatnya dan memasukkan tautan di sini! Hubungi kami di Twitter @startupjeeliz atau LinkedIn.
Demonstrasi ini bekerja di browser web standar. Mereka hanya membutuhkan akses webcam.
Untuk menjalankan demonstrasi ini, Anda memerlukan browser web yang mengimplementasikan WebXR. Kami berharap ini akan segera diimplementasikan di semua browser web!
Maka Anda dapat menjalankan demo ini:
Demo ini berjalan di browser web standar di ponsel atau tablet. Mereka mengandalkan mesin Wall AR ke -8 yang menakjubkan. Kami menggunakan versi web mesin dan kami mulai dari sampel web Three.js. Mesin web belum dirilis secara publik, jadi Anda perlu:
index.html dari demo yang ingin Anda coba (cari dan ganti <WEBAPPKEY> dengan kunci asli Anda),Demo:
Contoh integrasi paling dasar dari perpustakaan ini adalah demo pertama, demo deteksi debug. Di index.html , kami memasukkan di bagian <head> skrip perpustakaan utama, /dist/jeelizAR.js , helper MediaStramAPI (sebelumnya disebut getUserMedia API ), /helpers/JeelizMediaStreamAPIHelper.js dan skrip demo, demo.js ::
< script src = " ../../dist/jeelizAR.js " > </ script >
< script src = " ../../helpers/JeelizMediaStreamAPIHelper.js " > </ script >
< script src = " demo.js " > </ script > Di bagian <body> index.html , kami meletakkan elemen <canvas> yang akan digunakan untuk menginisialisasi konteks WebGL yang digunakan oleh perpustakaan untuk komputasi pembelajaran yang mendalam, dan untuk mungkin menampilkan rendering debug:
< canvas id = ' debugJeeARCanvas ' > </ canvas > Kemudian, di demo.js , kami mendapatkan umpan video webcam setelah pemuatan halaman menggunakan helper MediaStream API :
JeelizMediaStreamAPIHelper . get ( DOMVIDEO , init , function ( ) {
alert ( 'Cannot get video bro :(' ) ;
} , {
video : true //mediaConstraints
audio : false
} ) Anda dapat mengganti bagian ini dengan video statis, dan Anda juga dapat memberikan kontraint media untuk menentukan resolusi video. Ketika umpan video ditangkap, init fungsi callback diluncurkan. Ini menginisialisasi perpustakaan ini:
function init ( ) {
JEEARAPI . init ( {
canvasId : 'debugJeeARCanvas' ,
video : DOMVIDEO ,
callbackReady : function ( errLabel ) {
if ( errLabel ) {
alert ( 'An error happens bro: ' , errLabel ) ;
} else {
load_neuralNet ( ) ;
}
}
} ) ;
} Fungsi load_neuralNet memuat model jaringan saraf:
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 ) ;
}Alih -alih memberikan URL jaringan saraf, Anda juga dapat memberikan objek JSON yang diuraikan.
Fungsi iterate memulai loop iterasi:
function iterate ( ) {
var detectState = JEEARAPI . detect ( 3 ) ;
if ( detectState . label ) {
console . log ( detectState . label , 'IS DETECTED YEAH !!!' ) ;
}
window . requestAnimationFrame ( iterate ) ;
} JEEARAPI.init mengambil kamus sebagai argumen dengan properti ini:
<video> video : Elemen Video HTML5 (dapat berasal dari Helper API Mediastream). Jika false , perbarui tekstur sumber dari videoFrameBuffer object yang disediakan saat memanggil JEEARAPI.detect(...) (seperti dalam demo webxr),<dict> videoCrop : lihat bagian tanaman video untuk detail lebih lanjut<function> callbackReady : Fungsi callback diluncurkan saat siap atau jika ada kesalahan. Dipanggil dengan label kesalahan atau false ,<string> canvasId : ID dari kanvas dari mana konteks WebGL yang digunakan untuk pemrosesan pembelajaran mendalam akan dibuat,<canvas> canvas : Jika canvasId tidak disediakan, Anda juga dapat memberikan secara langsung elemen <canvas><dict> scanSettings : Lihat Bagian Pengaturan Pindai untuk detail lebih lanjut<boolean> isDebugRender : Boolean. Jika benar, rendering debug akan ditampilkan pada elemen <canvas> . Berguna untuk debugging, tetapi harus disetel ke false untuk produksi karena membuang sumber daya komputasi GPU,<int> canvasSize : Ukuran kanvas deteksi dalam piksel (harus persegi). Nilai Khusus -1 Jaga Ukuran Kanvas. Default: 512 .<boolean> followZRot : Hanya berfungsi dengan model jaringan saraf yang menghasilkan sudut pitch, roll dan yaw. Potong jendela input menggunakan gulungan deteksi saat ini selama tahap pelacakan,[<float>, <float>] ZRotRange : hanya berfungsi jika followZRot = true . Mengacak sudut rotasi awal. Nilai -nilai dalam radian. Default: [0,0] . Fungsi yang memicu deteksi adalah JEEARAPI.detect(<int>nDetectionsPerLoop, <videoFrame>frame, <dictionary>options) .
<int> nDetectionPerLoop adalah jumlah deteksi berturut -turut yang dilanjutkan. Semakin tinggi, semakin cepat deteksi. Tetapi dapat memperlambat seluruh aplikasi jika terlalu tinggi karena panggilan fungsi akan mengkonsumsi terlalu banyak sumber daya GPU. Nilai antara 3 dan 6 disarankan. Jika nilainya 0 , jumlah deteksi per loop adalah adaptatif antara 1 dan 6 dengan nilai awal 3 ,<videoFrame> frame hanya digunakan dengan demo WebXR (lihat bagian Integrasi WebXR). Jika tidak atur ke null ,<dictionary> options adalah kamus opsional yang dapat memiliki sifat -sifat ini:<float> thresholdDetectFactor : Faktor yang diterapkan pada ambang deteksi untuk objek yang terdeteksi. Nilai default adalah 1 . Misalnya jika itu sama dengan 0.5 , deteksi akan lebih mudah 2 kali.<string> cutShader : Tweak shader default yang digunakan untuk memotong area video. Nilai yang mungkin adalah:null : Nilai default, tidak menerapkan filter dan menyimpan saluran RGBA,IOS : Nilai yang dioptimalkan perangkat iOS hanya untuk penggunaan webxr. Salin saluran merah ke saluran warna lainnya dan terapkan filter median 5 pikselmedian : Oleskan filter median 3x3 pada saluran RGB secara terpisah,null : Nilai default, tidak menerapkan filter dan menyimpan saluran RGBA<boolean> isSkipConfirmation : Membuat deteksi lebih mudah (lebih sensitif) tetapi dapat memicu lebih banyak positif palsu. Default: false ,<boolean> isKeepTracking : Jika kita harus terus melacak objek setelah deteksi. Default: false ,[<float>,<float>,<float>] trackingFactors : Sensitivitas pelacakan untuk terjemahan sepanjang sumbu x, y dan skala. Default: 1.0 ,<float> thresholdDetectFactorUnstitch : berhenti melacak jika ambang deteksi di bawah nilai ini. Hanya digunakan jika isKeepTracking=true . Harus lebih kecil dari thresholdDetectFactor ,<float> secondNeighborFactor : Jangan konfirmasi objek jika objek lain memiliki skor deteksi setidaknya secondNeighborFactor * objectDetectionScore . Nilai default adalah 0.7 ,<int> nLocateAutomoves : Jumlah langkah deteksi pada tahap LOCATE (juste pindahkan jendela deteksi input dengan noise) (default: 10 ),<float> locateMoveNoiseAmplitude : noise selama tahap LOCATE , relatif terhadap dimensi jendela input (default: 0.01 ),<int> nConfirmAutoMoves : Jumlah langkah deteksi selama tahap CONFIRM (default: 8 ),<float> thresholdConfirmOffset : ABORD konfirmasi tahap jika skor deteksi di bawah ambang deteksi objek + nilai ini (default: -0.02 ),<float> confirmMoveNoiseAmplitude : noise selama tahap CONFIRM , relatif terhadap dimensi jendela input (default: 0.01 ),<int> nConfirmUnstitchMoves : Dalam Mode Pelacakan Keep ( isKeepTracking = true , hentikan pelacakan setelah jumlah deteksi yang gagal ini (default: 20 ),[<float> position, <float> angle] : Jika deteksi ambigu (2 objek memiliki skor dekat) selama tahap CONFIRM , miringkan jendela input. Nilai pertama relatif terhadap dimensi jendela, yang kedua adalah sudut dalam derajat (default: [0.1, 10] ),<float> confirmScoreMinFactorDuringAutoMove : Selama tahap konfirmasi, skor minimum untuk setiap gerakan. Jika skor lebih kecil dari nilai ini, kembalilah ke tahap sapuan. Default adalah 0.3 . Fungsi deteksi mengembalikan suatu objek, detectState . Untuk tujuan optimisasi itu ditugaskan dengan referensi, bukan berdasarkan nilai. Ini adalah kamus dengan sifat -sifat ini:
<float> distance : Jarak belajar, yaitu jarak antara kamera dan objek selama pelatihan dataset. Memberikan petunjuk tentang skala nyata objek,<bool/string> label : false jika tidak ada objek yang terdeteksi, jika tidak label objek yang terdeteksi. Itu selalu dalam huruf besar dan tergantung pada jaringan saraf,<array4> positionScale : Array pelampung yang menyimpan 4 nilai: [x,y,sx,sy] di mana x dan y adalah posisi relatif yang dinormalisasi dari pusat objek yang terdeteksi. sx , sy adalah faktor skala dinormalisasi relatif dari jendela deteksi:x adalah posisi pada sumbu horizontal. Mulai dari 0 (kiri) ke 1 (kanan),y adalah posisi pada sumbu vertikal. Itu berubah dari 0 (bawah) ke 1 (atas),sx adalah skala pada sumbu horizontal. Mulai dari 0 (ukurannya nol) menjadi 1 (ukuran penuh pada sumbu horizontal),sy adalah skala pada sumbu vertikal. Itu berubah dari 0 (ukuran nol) menjadi 1 (ukuran penuh pada sumbu vertikal),<float> yaw : Sudut dalam radian rotasi objek di sekitar sumbu vertikal (Y),<float> detectScore : Skor deteksi objek yang terdeteksi, antara 0 (deteksi buruk) dan 1 (deteksi yang sangat baik).JEEARAPI.set_NN(<string> neuralNetworkPath, <function> callback) : Mengganti jaringan saraf, dan memanggil fungsi ketika selesai, baik dengan false sebagai argumen atau dengan label kesalahan,JEEARAPI.reset_state() : kembali ke mode sapuan,JEEARAPI.get_aspectRatio() : Mengembalikan rasio aspek <width>/<height> dari sumber input,JEEARAPI.set_scanSettings(<dict> scanSettings) : lihat bagian Pengaturan Pindai untuk informasi lebih lanjut. Kode Utama Demo WebXR langsung di file index.html . Bagian 3D ditangani oleh Three.js . Titik awal demo adalah contoh yang disediakan oleh [WebXR Viewer oleh The Mozilla Fundation] (Ghithub Repository of Demo).
Kami menggunakan Jeeliz AR melalui penolong tertentu, helpers/JeelizWebXRHelper.js dan kami sangat menyarankan untuk menggunakan penolong ini untuk demo webxr Anda. Dengan implementasi iOS, ini menangani konversi aliran video (aliran video diberikan sebagai buffer YCBCR . Kami hanya mengambil buffer Y dan kami menerapkan filter median di atasnya.).
JEEARAPI.init callbackReady callback):"GL_INCOMPATIBLE" : WebGL tidak tersedia, atau konfigurasi WebGL ini tidak cukup (tidak ada WebGL2, atau ada WebGL1 tanpa ekstensi OES_TEXTURE_FLOAT atau OES_TEXTURE_HALF_FLOAT),"ALREADY_INITIALIZED" : API telah diinisialisasi,"GLCONTEXT_LOST" : Konteks WebGL hilang. Jika konteksnya hilang setelah inisialisasi, fungsi callbackReady akan diluncurkan untuk kedua kalinya dengan nilai ini sebagai kode kesalahan,"INVALID_CANVASID" : tidak dapat menemukan elemen <canvas> di DOM. Kesalahan ini hanya dapat dipicu jika canvasId disediakan untuk metode init() .JEEARAPI.set_NN fungsi panggilan balik):"INVALID_NN" : Model jaringan saraf tidak valid atau rusak,"NOTFOUND_NN" : Model jaringan saraf tidak ditemukan, atau kesalahan HTTP terjadi selama permintaan. Parameter tanaman video dapat disediakan. Ini hanya berfungsi jika elemen input adalah elemen <video> . Secara default, tidak ada pemangkasan video (seluruh gambar video diambil sebagai input). Pengaturan tanaman video dapat disediakan:
JEEARAPI.init dipanggil, menggunakan parameter videoCrop ,JEEARAPI.set_videoCrop(<dict> videoCrop) videoCrop Dictionnary salah (tidak ada videocrop), atau memiliki parameter berikut:
<int> x : Posisi horizontal dari sudut kiri bawah area yang dipotong, dalam piksel,<int> y : Posisi vertikal sudut kiri bawah area yang dipotong, dalam piksel,<int> w : Lebar area yang dipotong, dalam piksel,<int> h : Tinggi area yang dipotong, dalam piksel.Pengaturan pemindaian dapat disediakan:
JEEARAPI.init dipanggil, menggunakan scanSettings parameterJEEARAPI.set_scanSettings(<dict> scanSettings) The Dictionnary scanSettings memiliki properti berikut:
<float> margins : margin. Jangan mencoba mendeteksi jika pusat jendela deteksi terlalu dekat dengan perbatasan. 0 → Tidak ada margin, 1 → 100% margin. Default: 0.1 ,<int> nSweepXYsteps : Jumlah langkah terjemahan untuk skala tertentu. Default: 6*6=36 ,<int> nSweepSsteps : Jumlah langkah skala. Jumlah total langkah terjemahan =nSweepXYsteps*nSweepSsteps . Default: 4 ,[<float>,<float>] sweepScaleRange : rentang skala jendela deteksi. 1 → seluruh dimensi minimum jendela (antara lebar dan tinggi). Jangan memperhitungkan margin. Default: [0.3, 0.7] ,<int> sweepStepMinPx : Ukuran minimum langkah dalam piksel. Default: 16 ,<boolean> sweepShuffle : Jika kita harus mengocok posisi pemindaian atau tidak. Default: true .Demonstrasi harus di -host di server HTTPS statis dengan sertifikat yang valid. Kalau tidak, WebXR atau MediaStream API mungkin tidak tersedia.
Berhati -hatilah untuk mengaktifkan kompresi GZIP untuk setidaknya file JSON. Model jaringan neuron bisa sangat berat, tetapi untungnya dikompresi dengan baik dengan GZIP.
/dist/jeelizAR.module.js persis sama dari /dist/jeelizAR.js kecuali bahwa ia bekerja dengan ES6, sehingga Anda dapat mengimpornya secara langsung menggunakan:
import 'dist/jeelizAR.module.js' Kami menyediakan beberapa model jaringan saraf di / NeuralNets / Path. Kami akan secara teratur menambahkan jaringan saraf baru di repositori git ini. Kami juga dapat menyediakan layanan pelatihan jaringan saraf tertentu. Silakan hubungi kami di sini untuk harga dan detail. Anda dapat menemukan di sini:
| file model | Label yang terdeteksi | ukuran input | biaya deteksi | keandalan | perkataan |
|---|---|---|---|---|---|
basic4.json | Cangkir, kursi, sepeda, laptop | 128*128px | ** | ** | |
basic4Light.json | Cangkir, kursi, sepeda, laptop | 64*64px | * | * | |
cat.json | KUCING | 64*64px | *** | *** | Mendeteksi wajah kucing |
sprite0.json | Spritecan | 128*128px | *** | *** | Jaringan mandiri (deteksi 6D) |
ARCoffeeStandalone01.json | CANGKIR | 64*64px | ** | *** | Jaringan mandiri (deteksi 6D) |
Ukuran input adalah resolusi gambar input jaringan. Jendela deteksi tidak statis: meluncur di sepanjang video baik untuk posisi maupun skala. Jika Anda menggunakan pustaka ini dengan WebXR dan iOS, resolusi video akan menjadi 480*270 piksel, jadi input 64*64 piksel sudah cukup. Jika misalnya Anda menggunakan model jaringan saraf input 128*128 piksel, gambar input sering perlu diperbesar sebelum diberikan sebagai input.
Perpustakaan ini menggunakan Jeeliz Webgl Deep Learning Technology untuk mendeteksi objek. Jaringan saraf dilatih menggunakan mesin 3D dan dataset model 3D. Semua diproses sisi klien.
WebGL2 tersedia, ia menggunakan WebGL2 dan tidak ada ekstensi khusus yang diperlukan,WebGL2 tidak tersedia tetapi WebGL1 , kami memerlukan ekstensi OES_TEXTURE_FLOAT atau ekstensi OES_TEXTURE_HALF_FLOAT ,WebGL2 tidak tersedia, dan jika WebGL1 tidak tersedia atau tidak ada OES_TEXTURE_FLOAT atau OES_HALF_TEXTURE_FLOAT diimplementasikan, pengguna tidak kompatibel.Jika kesalahan kompatibilitas dipicu, silakan posting masalah pada repositori ini. Jika ini menjadi masalah dengan akses webcam, silakan coba lagi setelah menutup semua aplikasi yang dapat menggunakan perangkat Anda (Skype, Messenger, tab browser lainnya dan Windows, ...). Harap sertakan:
WebGL1 Anda),WebGL2 Anda),Apache 2.0. Aplikasi ini gratis untuk penggunaan komersial dan non-komersial.
Kami menghargai atribusi dengan memasukkan logo Jeeliz dan tautan ke situs web Jeeliz di aplikasi atau situs web desktop Anda. Tentu saja kami tidak mengharapkan tautan besar ke Jeeliz melalui filter wajah Anda, tetapi jika Anda dapat meletakkan tautan di bagian kredit/tentang/bantuan/footer itu akan sangat bagus.
Perpustakaan Deteksi dan Pelacakan Wajah Utama Jeeliz adalah Cjeeliz Facefilter API. Ini menangani pelacakan multi-wajah, dan untuk setiap wajah yang dilacak memberikan sudut rotasi dan faktor pembukaan mulut. Sangat sempurna untuk membangun filter wajah Snapchat/msqrd Anda sendiri yang berjalan di browser. Muncul dengan selusin demo integrasi, termasuk pertukaran wajah.
Perpustakaan berbasis pembelajaran mendalam kami, Weboji, mendeteksi 11 ekspresi wajah secara real time dari feed video webcam. Kemudian mereka direproduksi pada avatar, baik dalam 3D dengan renderer Three.js atau dalam 2D dengan renderer SVG (sehingga Anda dapat menggunakannya bahkan jika Anda bukan pengembang 3D). Anda dapat mengakses repositori GitHub di sini.
Jika Anda hanya ingin mendeteksi jika pengguna melihat layar atau tidak, Jeeliz Glance Tracker adalah apa yang Anda cari. Dapat bermanfaat untuk bermain dan menjeda video apakah pengguna menonton atau tidak. Perpustakaan ini membutuhkan lebih sedikit sumber daya dan file jaringan saraf jauh lebih ringan.
Jika Anda ingin menggunakan perpustakaan ini untuk kacamata virtual mencoba (kacamata hitam, kacamata, masker ski), Anda dapat melihat jeeliz vto widget. Ini mencakup mesin 3D berkualitas tinggi dan ringan yang mengimplementasikan fitur -fitur berikut: bayangan yang ditangguhkan, PBR, bayangan raytraced, pemetaan normal, ... Ini juga merekonstruksi lingkungan pencahayaan di sekitar pengguna (pencahayaan ambien dan arah). Tetapi kacamata berasal dari basis data yang dihosting di server kami. Jika Anda ingin menambahkan beberapa model, silakan hubungi kami.
