Sürükleyici web, tarayıcı aracılığıyla barındırılan sanal dünya deneyimleri anlamına gelir. Bu, tarayıcıda veya Google Daydream, Oculus Rift, Samsung Gear VR, HTC Vive ve Windows Mixed Reality Headsets gibi VR özellikli kulaklıklarda ortaya çıkan tüm sanal gerçeklik (VR) deneyimlerinin yanı sıra AR özellikli mobil cihazlar için geliştirilmiş artırılmış gerçeklik deneyimlerini kapsar. cihazlar.
Sürükleyici deneyimleri tanımlamak için iki terim kullansak da, bunlar, tam gerçeklikten tamamen sürükleyici bir VR ortamına ve aralarında çeşitli AR seviyeleri bulunan bir spektrum olarak düşünülmelidir.
Sürükleyici deneyim örnekleri şunları içerir:
- Sürükleyici 360° videolar
- Sürükleyici bir ortamda sunulan geleneksel 2D (veya 3D) videolar
- Veri görselleştirmeleri
- Ev alışverişi
- Sanat
- Henüz kimsenin aklına gelmemiş harika bir şey
Oraya nasıl giderim? #
Sürükleyici web, neredeyse bir yıldır embriyonik formda mevcut. Bu aracılığıyla yapıldı WebVR 1.1 API’leribir köken denemesi Chrome 62’den beri. Bu API, Safari için bir çoklu doldurmanın yanı sıra Firefox ve Edge tarafından da desteklenmektedir.
Ama devam etme zamanı.
Menşe denemesi 24 Temmuz 2018’de sona erdi ve spesifikasyonun yerini WebXR Cihaz API’sı ve yeni bir köken denemesi.
WebVR 1.1’e ne oldu? #
WebVR 1.1’den çok şey öğrendik, ancak zamanla, geliştiricilerin oluşturmak istediği uygulama türlerini desteklemek için bazı büyük değişikliklerin gerekli olduğu ortaya çıktı. Alınan derslerin tam listesi burada ele alınamayacak kadar uzun, ancak API’nin açık bir şekilde ana JavaScript dizisine bağlı olması, geliştiricilerin bariz bir şekilde yanlış yapılandırmalar kurması için çok fazla fırsat ve sihirli pencerenin bir taraf olması gibi yaygın kullanımlar gibi sorunları içerir. kasıtlı bir özellikten ziyade etki. (Sihirli pencere, sürükleyici içeriği kulaklık olmadan görüntülemeye yönelik bir tekniktir ve burada uygulama, cihazın yön sensörüne dayalı olarak tek bir görünüm oluşturur.)
Yeni tasarım, daha basit uygulamaları ve büyük performans iyileştirmelerini kolaylaştırır. Aynı zamanda, AR ve diğer kullanım durumları ortaya çıkıyordu ve API’nin gelecekte bunları desteklemek için genişletilebilir olması önemli hale geldi.
WebXR Device API, bu genişletilmiş kullanım durumları göz önünde bulundurularak tasarlanmış ve adlandırılmıştır ve ileriye doğru daha iyi bir yol sağlar. WebVR uygulayıcıları, WebXR Cihaz API’sine geçiş yapmayı taahhüt etmiştir.
WebXR Cihaz API’si nedir? #
Kendisinden önceki WebVR spesifikasyonu gibi, WebXR Cihaz API’si de Sürükleyici Web Topluluğu Grubu Google, Microsoft, Mozilla ve diğerlerinden katkıda bulunanlar. XR’deki ‘X’, sürükleyici deneyimler yelpazesindeki herhangi bir şeyi temsil eden bir tür cebirsel değişken olarak tasarlanmıştır. Daha önce bahsedilenlerde mevcuttur köken denemesi ayrıca bir aracılığıyla çoklu doldurma.
Bu makale ilk olarak Chrome 67 beta döneminde yayınlandığında, yalnızca VR özellikleri etkinleştirildi. Artırılmış gerçeklik, Chrome 69’da kullanıma sunuldu. Web için artırılmış gerçeklik.
Bu yeni API’de bunun gibi bir makalede anlatabileceğimden daha fazlası var. Olayı anlamlandırmaya başlaman için sana yeterince şey vermek istiyorum. WebXR örnekleri. Her ikisinde de daha fazla bilgi bulabilirsiniz. orijinal açıklayıcı ve bizim Sürükleyici Web’i Erken Benimseyenler Kılavuzu. Origin denemesi ilerledikçe ikincisini genişleteceğim. Sorunları açmaktan veya çekme istekleri göndermekten çekinmeyin.
Bu makale için, bir XR oturumunu başlatma, durdurma ve çalıştırmanın yanı sıra girdi işlemeyle ilgili birkaç temel konuyu ele alacağım.
Burada ele almayacağım şey, AR/VR içeriğinin ekrana nasıl çizileceğidir. WebXR Device API, görüntü işleme özellikleri sağlamaz. Bu size kalmış. Çizim, WebGL API’leri kullanılarak yapılır. Gerçekten hırslıysan bunu yapabilirsin. Yine de, bir çerçeve kullanmanızı öneririz. Sürükleyici web örnekleri, yalnızca demolar için oluşturulmuş olanı kullanır. pamukkuyruk. Three.js, Mayıs ayından beri WebXR’yi desteklemektedir. A-Frame hakkında hiçbir şey duymadım.
Bir uygulamayı başlatma ve çalıştırma #
Temel süreç şudur:
- Bir XR cihazı talep edin.
- Varsa, bir XR seansı talep edin. Kullanıcının telefonunu kulaklığa takmasını istiyorsanız, buna sürükleyici oturum denir ve girmek için bir kullanıcı hareketi gerekir.
- Saniyede 60 görüntü karesi sağlayan bir işleme döngüsü çalıştırmak için oturumu kullanın. Her karede ekrana uygun içeriği çizin.
- Kullanıcı çıkmaya karar verene kadar oluşturma döngüsünü çalıştırın.
- XR oturumunu sonlandırın.
Buna biraz daha detaylı bakalım ve bazı kodlar ekleyelim. Size göstermek üzere olduğum şeyden bir uygulamayı çalıştıramayacaksınız. Ama yine, bu sadece bir fikir vermek için.
Bir XR cihazı talep edin #
Burada, standart özellik algılama kodunu tanıyacaksınız. Bunu, şöyle bir şey adı verilen bir işleve sarabilirsiniz. checkForXR().
Sürükleyici bir oturum kullanmıyorsanız, işlevin reklamını ve bir kullanıcı hareketi almayı atlayabilir ve doğrudan bir oturum talep etmeye gidebilirsiniz. Sürükleyici bir oturum, kulaklık gerektiren bir oturumdur. Sürükleyici olmayan bir oturum, içeriği yalnızca cihaz ekranında gösterir. İlki, sanal gerçeklik veya artırılmış gerçeklikten bahsettiğinizde çoğu insanın düşündüğü şeydir. İkincisi bazen ‘sihirli pencere’ olarak adlandırılır.
if (navigator.xr) {
navigator.xr.requestDevice()
.then(xrDevice => {
// Advertise the AR/VR functionality to get a user gesture.
})
.catch(err => {
if (err.name === 'NotFoundError') {
// No XRDevices available.
console.error('No XR devices available:', err);
} else {
// An error occurred while requesting an XRDevice.
console.error('Requesting XR device failed:', err);
}
})
} else{
console.log("This browser does not support the WebXR API.");
}
Bir XR seansı talep edin #
Artık cihazımıza ve kullanıcı hareketimize sahip olduğumuza göre, bir oturum alma zamanı. Bir oturum oluşturmak için, tarayıcının çizim yapacağı bir tuvale ihtiyacı vardır.
xrPresentationContext = htmlCanvasElement.getContext('xrpresent');
let sessionOptions = {
// The immersive option is optional for non-immersive sessions; the value
// defaults to false.
immersive: false,
outputContext: xrPresentationContext
}
xrDevice.requestSession(sessionOptions)
.then(xrSession => {
// Use a WebGL context as a base layer.
xrSession.baseLayer = new XRWebGLLayer(session, gl);
// Start the render loop
})
Oluşturma döngüsünü çalıştırın #
Bu adımın kodunun çözülmesi biraz zaman alır. Çözmek için, sana bir sürü kelime atmak üzereyim. Son koda bir göz atmak isterseniz, ileri atla hızlı bir göz atmak için, ardından tam açıklama için geri dönün. Çıkarım yapamayacağınız çok şey var.
Bir oluşturma döngüsü için temel işlem şudur:
- Bir animasyon karesi isteyin.
- Cihazın konumunu sorgulayın.
- Konumuna göre cihazın konumuna içerik çizin.
- Giriş cihazları için gereken işleri yapın.
- Kullanıcı çıkmaya karar verene kadar saniyede 60 kez tekrarlayın.
Bir sunum çerçevesi isteyin #
‘Çerçeve’ kelimesinin bir Web XR bağlamında birkaç anlamı vardır. ilki referans çerçevesi koordinat sisteminin orijininin nereden hesaplandığını ve cihaz hareket ettiğinde bu orijine ne olacağını tanımlar. (Kullanıcı hareket ettiğinde görünüm aynı mı kalıyor yoksa gerçek hayatta olduğu gibi değişiyor mu?)
İkinci tip çerçeve ise sunum çerçevesiile temsil edilen XRFrame nesne. Bu nesne, bir AR/VR sahnesinin tek bir karesini cihaza işlemek için gereken bilgileri içerir. Bu biraz kafa karıştırıcı çünkü sunum çerçevesi çağırılarak alındı. requestAnimationFrame(). Bu uyumlu hale getirir window.requestAnimationFrame().
Size sindirmeniz için daha fazlasını vermeden önce, bazı kodlar sunacağım. Aşağıdaki örnek, oluşturma döngüsünün nasıl başlatıldığını ve sürdürüldüğünü gösterir. Kelime çerçevesinin ikili kullanımına dikkat edin. Ve özyinelemeli çağrıya dikkat edin requestAnimationFrame(). Bu işlev saniyede 60 kez çağrılacaktır.
xrSession.requestFrameOfReference('eye-level')
.then(xrFrameOfRef => {
xrSession.requestAnimationFrame(onFrame(time, xrFrame) {
// The time argument is for future use and not implemented at this time.
// Process the frame.
xrFrame.session.requestAnimationFrame(onFrame);
}
});
pozlar #
Ekrana herhangi bir şey çizmeden önce, görüntüleme cihazının nereye baktığını bilmeniz ve ekrana erişmeniz gerekir. Genel olarak AR/VR’de bir nesnenin konumu ve yönüne poz denir. Hem izleyicilerin hem de giriş cihazlarının bir pozu vardır. (Giriş cihazlarını daha sonra ele alacağım.) Hem izleyici hem de giriş cihazı pozları, bir bellekte saklanan 4’e 4’lük bir matris olarak tanımlanır. Float32Array sütun ana sırasına göre. Arayarak izleyicinin pozunu alırsınız XRFrame.getDevicePose() geçerli animasyon çerçevesi nesnesinde. Her zaman bir poz alıp almadığınızı görmek için test edin. Bir şeyler ters giderse ekrana çizmek istemezsiniz.
let pose = xrFrame.getDevicePose(xrFrameOfRef);
if (pose) {
// Draw something to the screen.
}
Görüntüleme #
Pozu kontrol ettikten sonra, bir şeyler çizme zamanı. Çizdiğiniz nesneye görünüm denir (XRView). Oturum tipinin önem kazandığı yer burasıdır. Görünümler şu adresten alınır: XRFrame dizi olarak nesne. Sürükleyici olmayan bir oturumdaysanız dizinin bir görünümü vardır. Sürükleyici bir oturumdaysanız, dizide her bir göz için bir tane olmak üzere iki tane bulunur.
for (let view of xrFrame.views) {
// Draw something to the screen.
}
Bu, WebXR ve diğer sürükleyici sistemler arasındaki önemli bir farktır. Tek bir görünümde yineleme yapmak anlamsız görünse de, bunu yapmak, çeşitli aygıtlar için tek bir işleme yoluna sahip olmanızı sağlar.
Tüm oluşturma döngüsü #
Bunların hepsini bir araya getirirsem, aşağıdaki kodu alırım. Girdi aygıtları için daha sonraki bir bölümde ele alacağım bir yer tutucu bıraktım.
xrSession.requestFrameOfReference('eye-level')
.then(xrFrameOfRef => {
xrSession.requestAnimationFrame(onFrame(time, xrFrame) {
// The time argument is for future use and not implemented at this time.
let pose = xrFrame.getDevicePose(xrFrameOfRef);
if (pose) {
for (let view of xrFrame.views) {
// Draw something to the screen.
}
}
// Input device code will go here.
frame.session.requestAnimationFrame(onFrame);
}
}
XR oturumunu sonlandırın #
Bir XR oturumu, çağrı yoluyla kendi kodunuzla sonlandırmak da dahil olmak üzere çeşitli nedenlerle sona erebilir. XRSession.end(). Diğer nedenler arasında kulaklığın bağlantısının kesilmesi veya başka bir uygulamanın kulaklığı kontrol altına alması yer alır. Bu nedenle, uslu bir uygulamanın bitiş olayını izlemesi ve gerçekleştiğinde, oturumu ve işleyici nesnelerini atması gerekir. Bir kez sona eren bir XR seansı devam ettirilemez.
xrDevice.requestSession(sessionOptions)
.then(xrSession => {
// Create a WebGL layer and initialize the render loop.
xrSession.addEventListener('end', onSessionEnd);
});// Restore the page to normal after immersive access has been released.
function onSessionEnd() {
xrSession = null;
// Ending the session stops executing callbacks passed to the XRSession's
// requestAnimationFrame(). To continue rendering, use the window's
// requestAnimationFrame() function.
window.requestAnimationFrame(onDrawFrame);
}
Etkileşim nasıl çalışır? #
Uygulama ömründe olduğu gibi, size AR veya VR’de nesnelerle nasıl etkileşim kuracağınız konusunda bir tat vereceğim.
WebXR Cihaz API’si, kullanıcı girişi için bir “işaretle ve tıkla” yaklaşımını benimser. Bu yaklaşımla, her girdi kaynağının tanımlanmış bir işaretçi ışını bir giriş cihazının nereye işaret ettiğini belirtmek için olaylar ve bir şeyin ne zaman seçildiğini belirtmek için olaylar. Uygulamanız işaretçi ışınını çizer ve işaret ettiği yeri gösterir. Kullanıcı giriş cihazını tıkladığında olaylar tetiklenir – select, selectStartVe selectEnd, özellikle. Uygulamanız neyin tıklandığını belirler ve uygun şekilde yanıt verir.
Giriş aygıtı ve işaretçi ışını #
Kullanıcılar için işaretçi ışını, denetleyici ile işaret ettikleri şey arasındaki soluk bir çizgidir. Ancak uygulamanızın onu çizmesi gerekiyor. Bu, girdi cihazının pozunu almak ve AR/VR uzayındaki bir nesneye konumundan bir çizgi çizmek anlamına gelir. Bu süreç kabaca şöyle görünür:
let inputSources = xrSession.getInputSources();
for (let xrInputSource of inputSources) {
let inputPose = frame.getInputPose(inputSource, xrFrameOfRef);
if (!inputPose) {
continue;
}
if (inputPose.gripMatrix) {
// Render a virtual version of the input device
// at the correct position and orientation.
}
if (inputPose.pointerMatrix) {
// Draw a ray from the gripMatrix to the pointerMatrix.
}
}
Bu, soyulmuş bir versiyonudur Giriş İzleme örneği Sürükleyici Web Topluluğu Grubundan. Çerçeve oluşturmada olduğu gibi, işaretçi ışınını ve aygıtı çizmek size kalmıştır. Daha önce ima edildiği gibi, bu kod oluşturma döngüsünün bir parçası olarak çalıştırılmalıdır.
Öğeleri sanal alanda seçme #
Yalnızca AR/VR’deki şeylere işaret etmek oldukça işe yaramaz. Yararlı bir şey yapmak için, kullanıcıların bir şeyler seçme yeteneğine ihtiyacı vardır. WebXR Device API, kullanıcı etkileşimlerine yanıt vermek için üç olay sağlar: select, selectStartVe selectEnd. Beklemediğim bir tuhaflıkları var: size yalnızca bir giriş cihazının tıklandığını söylüyorlar. Size ortamdaki hangi öğenin tıklandığını söylemezler. Olay işleyicileri eklenir XRSession nesne ve kullanılabilir olur olmaz eklenmelidir.
xrDevice.requestSession(sessionOptions)
.then(xrSession => {
// Create a WebGL layer and initialize the render loop.
xrSession.addEventListener('selectstart', onSelectStart);
xrSession.addEventListener('selectend', onSelectEnd);
xrSession.addEventListener('select', onSelect);
});
Bu kod bir Giriş Seçimi örneği daha fazla içerik istemeniz durumunda.
Neyin tıklandığını anlamak için bir poz kullanırsınız. (Şaşırdınız mı? Ben öyle düşünmedim.) Bunun ayrıntıları, uygulamanıza veya kullandığınız çerçeveye özeldir ve dolayısıyla bu makalenin kapsamı dışındadır. Cottontail’in yaklaşımı Girdi Seçimi örneğindedir.
function onSelect(ev) {
let inputPose = ev.frame.getInputPose(ev.inputSource, xrFrameOfRef);
if (!inputPose) {
return;
}
if (inputPose.pointerMatrix) {
// Figure out what was clicked and respond.
}
}
Sonuç: ileriye bakmak #
Daha önce de söylediğim gibi, Chrome 69’da (Haziran 2018’de bir ara Canary) artırılmış gerçeklik bekleniyor. Yine de, şimdiye kadar sahip olduklarımızı denemenizi tavsiye ederim. Daha iyi hale getirmek için geri bildirime ihtiyacımız var. ChromeStatus.com’u izleyerek ilerlemesini takip edin. WebXR İsabet Testi. siz de takip edebilirsiniz WebXR Çapaları bu da poz takibini iyileştirecektir.