WebVR ve Tarayıcı Kenarında Bilgi İşlem Devrimi

Yayınlanan: 2022-03-11

Devasa bir teknoloji dalgası geldi - Sanal Gerçeklik (VR). Bir akıllı telefonu ilk tuttuğunuzda ne hissettiyseniz, VR'yi ilk kez deneyimlemek, bilgisayarın her alanında daha önemli bir duygusal deneyim sunar. İlk iPhone'un üzerinden sadece 12 yıl geçti. Bir konsept olarak, VR daha da uzun süredir var, ancak VR'yi ortalama kullanıcılara getirmek için gereken teknoloji yakın zamana kadar mevcut değildi.

Oculus Quest, Facebook'un VR için tüketici oyun platformudur. Ana özelliği, bir PC'ye ihtiyaç duymamasıdır. Kablosuz, mobil bir VR deneyimi sağlar. Bir kahve dükkanında birine bir VR kulaklığı vererek bir 3D modeli paylaşarak bir sohbette bir şeyler aramakla aynı beceriksizliğe sahip olabilirsiniz, ancak paylaşılan deneyimin getirisi çok daha zorlayıcıdır.

VR çalışma, alışveriş yapma, içeriğin keyfini çıkarma ve çok daha fazlasını değiştirecek.

Bu seride, WebVR ve tarayıcı uç bilişimini etkinleştiren mevcut tarayıcı teknolojilerini keşfedeceğiz. Bu ilk gönderi, simülasyonumuz için bu teknolojileri ve bir mimariyi vurgulamaktadır.

Aşağıdaki makalelerde, koddaki bazı benzersiz zorlukları ve fırsatları vurgulayacağız. Bu teknolojiyi keşfetmek için bir Canvas ve WebVR demosu yaptım ve kodu GitHub'da yayınladım.

ALT_TEXT
Daha fazla ayrıntı için Canvas demosuna, WebVR demosuna ve Örnek koda bakın.

UX için VR Ne Anlama Geliyor?

Bir Toptal Geliştiricisi olarak, işletmelerin fikir aşamasından projelerini kullanıcılarla bir beta testine dönüştürmelerine yardımcı oluyorum. Peki VR, iş web uygulamalarıyla nasıl alakalı?

Eğlence içeriği, Sanal Gerçekliğin benimsenmesine öncülük edecek (mobil cihazlarda olduğu gibi). Bununla birlikte, VR mobil cihazlar gibi ana akım haline geldiğinde, beklenen deneyim "VR öncelikli tasarım" olacaktır ("mobil öncelikli" gibi).

"Önce mobil" bir paradigma değişikliğiydi, "Çevrimdışı öncelikli" mevcut bir paradigma değişikliğidir ve "önce VR" ufuktadır. Bu, tasarımcı ve geliştirici olmak için çok heyecan verici bir zaman, çünkü VR tamamen farklı bir tasarım paradigması (bunu serinin son makalesinde inceleyeceğiz). Eğer kavrayamıyorsanız, bir VR tasarımcısı değilsiniz.

VR, Kişisel Bilgi İşlem (PC) devriminde başladı, ancak mobil devrimde bir sonraki adım olarak geliyor. Facebook'un Oculus Quest'i, Qualcomm'un Snapdragon 835 Çip Üzerinde Sistem (SoC), kulaklık takibi (mobil kameralar kullanarak) kullanan Google Cardboard üzerine kuruludur ve Android'de çalışır - tümü yüzünüzün hassas duyu organlarına rahatça monte edilecek şekilde paketlenmiştir.

400 dolarlık Oculus Quest, arkadaşlarımla paylaşabileceğim harika deneyimler barındırıyor. 1000 dolarlık yeni bir iPhone artık kimseyi etkilemiyor. İnsanlık VR kancasını tükürmeyecek.

VR Endüstri Uygulamaları

VR, sayısız endüstri ve bilgi işlem alanında varlığını hissettirmeye başlıyor. Basında çokça yer bulma eğiliminde olan içerik tüketimi ve oyun oynamanın yanı sıra, VR, mimariden sağlık hizmetlerine kadar değişen endüstrileri yavaş yavaş değiştiriyor.

  • Mimarlık ve Emlak , olağanüstü maliyetlerle (dijital ile karşılaştırıldığında) fiziksel bir gerçekliğin değerini yaratır; bu nedenle, mimarların ve emlakçıların müşterilere deneyimi göstermek için sanal bir gerçeklik aracılığıyla getirmeleri için doğal bir seçimdir. VR, 200 milyon dolarlık stadyumunuz için bir "beta testi" veya telefon üzerinden sanal bir adım adım inceleme sunar.
  • VR'de Öğrenme ve Eğitim , aksi takdirde görüntüler veya videolarla çoğaltılması imkansız olacak deneyimleri aktarır.
  • Otomotiv şirketleri, tasarım ve güvenlikten eğitim ve pazarlamaya kadar VR'den yararlanır.
  • Stanford'daki Lucile Packard Çocuk Hastanesi'ndeki sağlık uzmanları, kalp ameliyatlarını planlamak için VR kullanıyor ve tek bir kesi yapmadan önce hastanın anatomisini anlamalarını sağlıyor. VR ayrıca ağrı kesici için farmasötiklerin yerini alıyor.
  • Perakende, Pazarlama ve Otelcilik zaten ürün ve yerlerin sanal turlarını sunuyor. Perakendeciler, alışveriş deneyimlerinin ne kadar çekici olabileceğini anlamaya başladıkça, perakende yenilikçileri tuğla ve harçlı alışveriş tabutuna son çiviyi koyacaklar.

Teknoloji ilerledikçe, çeşitli endüstrilerde artan benimseme göreceğiz. Şimdi soru, bu değişimin ne kadar hızlı gerçekleşeceği ve en çok hangi sektörlerin etkileneceği.

Web ve Uç Bilgi İşlem için VR Ne Anlama Geliyor?

"Edge Computing", bilgi işlemi ana uygulama sunucusu kümenizden çıkarır ve son kullanıcınıza yaklaştırır. Barındırma şirketleri size her şehirde düşük gecikmeli bir sunucu kiralamak için sabırsızlandıkları için pazarlamada bir vızıltı var.

B2C uç bilgi işlem örneği, Google'ın sunucularında CPU/GPU yoğun oyun iş yüklerini çalıştıran ve ardından oyunu Netflix gibi bir cihaza gönderen Google'ın Stadia hizmetidir. Herhangi bir aptal Netflix Chromebook, aniden yüksek kaliteli bir oyun bilgisayarı gibi oyunlar oynayabilir. Bu aynı zamanda sıkı bir şekilde entegre edilmiş monolitik çok oyunculu oyunların yeni mimari seçeneklerini yaratır.

Bir B2B uç bilgi işlem örneği, Nvidia'nın ucuz Netflix sınıfı cihazlara Nvidia GPU etkin sanal uzak iş istasyonları sağlayan GRID'dir.

Soru: Neden uç bilgi işlemi veri merkezinden tarayıcıya taşımıyorsunuz?

Tarayıcı uç bilgi işlem için bir kullanım örneği, gün boyu süren süreci binlerce bilgisayarın birkaç dakika içinde işleyebileceği parçalara bölerek bir 3D film oluşturan bilgisayarlardan oluşan bir "animasyon oluşturma grubudur".

Electron ve NW.js gibi teknolojiler web programlamayı masaüstü uygulamalarına getirdi. Yeni tarayıcı teknolojileri (PWA'lar gibi) web uygulaması dağıtım modelini (SaaS dağıtımla ilgilidir) masaüstü bilgi işlemine geri getiriyor. Örnekler arasında SETI@Home, Folding@Home (protein katlama) veya çeşitli işleme çiftlikleri gibi projeler yer alır. Bir yükleyici indirmek zorunda kalmak yerine, artık sadece web sitesini ziyaret ederek bilgi işlem grubuna katılmak mümkün.

Soru: WebVR “gerçek bir şey” mi yoksa VR içeriği “uygulama mağazalarına” ve duvarlarla çevrili bahçelere mi karışacak?

Bir Toptal serbest çalışanı ve teknoloji uzmanı olarak, bunu bilmek benim işim. Bu yüzden kendi sorularıma cevap vermek için bir teknoloji prototipi oluşturdum. Bulduğum cevaplar çok heyecan verici ve bunları sizlerle paylaşmak için bu blog serisini yazdım.

Spoiler: Evet, WebVR gerçek bir şeydir. Ve evet, tarayıcı uç bilgi işlem, WebVR'yi etkinleştiren işlem gücüne erişmek için aynı API'leri kullanabilir.

Yazmak Çok Eğlenceli! Bir Kavram Kanıtı Oluşturalım

Bunu test etmek için, n-cisim probleminin astrofizik simülasyonunu yapacağız.

Astronavigatörler, iki nesne arasındaki yerçekimi kuvvetlerini hesaplamak için denklemleri kullanabilir. Ancak, bilinen evrendeki her sistemde olduğu gibi, üç veya daha fazla gövdeli sistemler için denklem yoktur. Bilim!

n-cisim probleminin analitik çözümü (denklemler) olmamasına rağmen, O(n²) olan bir hesaplama çözümü (algoritmalar) vardır. O(n²) hemen hemen olası en kötü durumdur, ancak istediğimizi nasıl elde edeceğimiz ve Big O notasyonunun ilk etapta neden icat edildiğinin bir türüdür.

O(n²) performans

Şekil 2: “Yukarı ve sağa mı? Ben mühendis değilim ama performans bana iyi görünüyor!”

Big O becerilerinizin tozunu alıyorsanız, Big O notasyonunun bir algoritmanın çalışmasının üzerinde çalıştığı verinin boyutuna göre nasıl "ölçeklendiğini" ölçtüğünü unutmayın.

Koleksiyonumuz, simülasyonumuzdaki tüm bedenlerdir. Yeni bir gövde eklemek, setteki her mevcut gövde için yeni bir iki gövdeli yerçekimi hesaplaması eklemek anlamına gelir.

İç döngümüz < n iken, <= O(log n) değildir, yani tüm algoritma O(n²)'dir. Bunlar molalar, ekstra kredi yok.

 for (let i: i32 = 0; i < numBodies; i++) { // n // Given body i: pair with every body[j] where j > i for (let j: i32 = i + 1; j < numBodies; j++) { // 1/2 n is > log n, so n. // Calculate the force the bodies apply to one another stuff = stuff } }

n-body çözümü aynı zamanda bizi fizik/oyun motorları dünyasına ve WebVR için gereken teknolojinin keşfine götürür.

Prototipimiz için simülasyonu oluşturduktan sonra 2 boyutlu bir görselleştirme yapacağız.

Son olarak, bir WebVR sürümü için Canvas görselleştirmesini değiştireceğiz.

Sabırsızsanız, doğrudan projenin koduna atlayabilirsiniz.

Web Çalışanları, WebAssembly, AssemblyScript, Canvas, Rollup, WebVR, Aframe

Modern mobil tarayıcınıza (üzgünüz, Safari değil) gelmiş olan bir dizi yeni teknoloji aracılığıyla aksiyon ve eğlence dolu bir maceraya hazır olun:

  • Simülasyonu kendi CPU iş parçacığına taşımak için Web Çalışanlarını kullanacağız - algılanan ve gerçek performansı iyileştireceğiz.
  • O(n²) algoritmasını bu yeni iş parçacığında yüksek performanslı (C/C++/Rust/AssemblyScript/etc.) derlenmiş kodda çalıştırmak için WebAssembly'ı kullanacağız.
  • Simülasyonumuzu 2B olarak görselleştirmek için Canvas'ı kullanacağız.
  • Webpack'e hafif bir alternatif olarak Rollup ve Gulp kullanacağız.
  • Son olarak, telefonunuz için bir Sanal Gerçeklik oluşturmak için WebVR ve Aframe kullanacağız.

Kodlara Dalmadan Önce Peçete Arkası Mimarisi

Bir Canvas versiyonuyla başlayacağız çünkü muhtemelen bunu iş yerinde okuyorsunuz.

Tuval versiyonu

İlk birkaç gönderide, kullanıcı deneyimini bozmadan CPU yoğun bir simülasyon oluşturmak için gereken bilgi işlem kaynaklarına erişmek için mevcut tarayıcı API'lerini kullanacağız.

Ardından, bunu Canvas kullanarak tarayıcıda görselleştireceğiz ve son olarak Canvas görselleştirmemizi Aframe kullanarak bir WebVR ile değiştireceğiz.

API Tasarımı ve Simülasyon Döngüsü

N-vücut simülasyonumuz, yerçekimi kuvvetlerini kullanarak gök cisimlerinin konumunu tahmin eder. İki nesne arasındaki tam kuvveti bir denklemle hesaplayabiliriz, ancak üç veya daha fazla nesne arasındaki kuvvetleri hesaplamak için simülasyonu küçük zaman dilimlerine bölmeli ve yinelemeliyiz. Hedefimiz 30 kare/saniye (film hızı) veya ~33 ms/kare.

Yönlendirilmek için, koda hızlı bir genel bakış:

  1. Tarayıcı GET'in index.html'si
  2. Aşağıdaki kod olarak main.js çalıştırır. import işlemleri, Webpack'e bir alternatif olan Rollup ile gerçekleştirilir.
  3. Hangi yeni bir nBodySimulator() oluşturur
  4. Hangisinin harici bir API'si vardır:
    1. sim.addVisualization()
    2. sim.addBody()
    3. sim.start()
 // src/main.js import { nBodyVisPrettyPrint, nBodyVisCanvas } from "./nBodyVisualizer" import { Body, nBodySimulator } from "./nBodySimulator" window.onload = function() { // Create a Simulation const sim = new nBodySimulator() // Add some visualizers sim.addVisualization(new nBodyVisPrettyPrint(document.getElementById("visPrettyPrint"))) sim.addVisualization(new nBodyVisCanvas(document.getElementById("visCanvas"))) // This is a simulation, using opinionated G = 6.674e-11 // So boring values are allowed and create systems that collapse over billions of years. // For spinny, where distance=1, masses of 1e10 are fun. // Set Z coords to 1 for best visualization in overhead 2D Canvas. // lol, making up stable universes is hard // name color xyzm vz vy vz sim.addBody(new Body("star", "yellow", 0, 0, 0, 1e9)) sim.addBody(new Body("hot jupiter", "red", -1, -1, 0, 1e4, .24, -0.05, 0)) sim.addBody(new Body("cold jupiter", "purple", 4, 4, -.1, 1e4, -.07, 0.04, 0)) // A couple far-out asteroids to pin the canvas visualization in place. sim.addBody(new Body("asteroid", "black", -15, -15, 0, 0)) sim.addBody(new Body("asteroid", "black", 15, 15, 0, 0)) // Start simulation sim.start() // Add another sim.addBody(new Body("saturn", "blue", -8, -8, .1, 1e3, .07, -.035, 0)) // That is the extent of my effort to handcraft a stable solar system. // We can now play in that system by throwing debris around (inner plants). // Because that debris will have significantly smaller mass, it won't disturb our stable system (hopefully :-) // This requires we remove bodies that fly out of bounds past our 30x30 space created by the asteroids. // See sim.trimDebris(). It's a bit hacky, but my client (me) doesn't want to pay for it and wants the WebVR version. function rando(scale) { return (Math.random()-.5) * scale } document.getElementById("mayhem").addEventListener('click', () => { for (let x=0; x<10; x++) { sim.addBody(new Body("debris", "white", rando(10), rando(10), rando(10), 1, rando(.1), rando(.1), rando(.1))) } }) }

İki asteroitin kütlesi sıfır olduğundan yerçekiminden etkilenmezler. 2D görselleştirmemizi en az 30x30'a yakınlaştırıyorlar. Son kod parçası, biraz eğlenceli eğlence için 10 küçük iç gezegen eklemek için "kargaşa" düğmemizdir!

Sıradaki "simülasyon döngümüz" - her 33 ms'de bir yeniden hesaplayın ve yeniden boyayın. Eğleniyorsanız, buna “oyun döngüsü” diyebiliriz. Döngümüzü uygulamak için işe yarayabilecek en basit şey setTimeout() - ve bu benim amacımı yerine getirdi. Bir alternatif requestAnimationFrame() olabilir.

sim.start() , her 33 ms'de bir (saniyede yaklaşık 30 kare sim.step() çağırarak eylemi başlatır.

 // Methods from class nBodySimulator // The simulation loop start() { // This is the simulation loop. step() calls visualize() const step = this.step.bind(this) setInterval(step, this.simulationSpeed) } // A step in the simulation loop. async step() { // Skip calculation if worker not ready. Runs every 33ms (30fps), so expect skips. if (this.ready()) { await this.calculateForces() } else { console.log(`Skipping: ${this.workerReady}, ${this.workerCalculating}`) } // Remove any "debris" that has traveled out of bounds - this is for the button this.trimDebris() // Now Update forces. Reuse old forces if we skipped calculateForces() above this.applyForces() // Ta-dah! this.visualize() }

Yaşasın! Tasarımdan uygulamaya geçiyoruz. Fizik hesaplamalarını WebAssembly'de uygulayacağız ve bunları ayrı bir Web Worker iş parçacığında çalıştıracağız.

nBodySimulator, bu uygulama karmaşıklığını sarar ve birkaç parçaya böler:

  1. calculateForces() , uygulanacak kuvvetleri hesaplamayı vaat ediyor.
    1. Bunlar çoğunlukla kayan nokta işlemleridir ve WebAssembly'de yapılır.
    2. Bu hesaplamalar O(n²) ve performans darboğazımızdır.
    3. Daha iyi algılanan ve gerçek performans için onları ana iş parçacığından çıkarmak için bir Web Çalışanı kullanıyoruz.
  2. trimDebris() artık ilginç olmayan (ve görselleştirmemizi uzaklaştıracak) tüm kalıntıları kaldırır. Açık)
  3. applyForces() , hesaplanan kuvvetleri gövdelere uygular. Açık)
    1. Çalışan zaten meşgul olduğu için hesapForces()'i atlarsak eski kuvvetleri yeniden kullanırız. Bu, doğruluk pahasına algılanan performansı artırır (titremeyi ortadan kaldırır).
    2. Ana UI iş parçacığı, hesaplama 33 ms'den uzun sürse bile eski kuvvetleri boyayabilir.
  4. visualize() , gövde dizisini boyamak için her bir görselleştiriciye iletir. Açık)

Ve hepsi 33 ms'de oluyor! Bu tasarımı geliştirebilir miyiz? Evet. Merak ediyor musunuz veya bir öneriniz mi var? Aşağıdaki yorumları kontrol edin. Gelişmiş bir modern tasarım ve uygulama arıyorsanız, açık kaynaklı Matter.js'ye göz atın.

Patlama!

Bunu yaratırken çok eğlendim ve sizinle paylaşmaktan heyecan duyuyorum. Atlamadan sonra görüşürüz!

  1. Giriş - bu sayfa
  2. Web Çalışanları - birden çok iş parçacığına erişim
  3. WebAssembly - JavaScript olmadan tarayıcı bilgi işlem
  4. Rollup ve Gulp - WebPack'e bir alternatif
  5. Canvas - Canvas API'sine ve "sim döngüsüne" çizim
  6. WebVR - Canvas görselleştiricimizi WebVR ve Aframe ile değiştirme

Eğlence, Sanal Gerçeklikte (mobil gibi) içeriğe öncülük edecek, ancak VR normal olduğunda (mobil gibi), beklenen tüketici ve üretkenlik deneyimi (mobil gibi) olacaktır.

İnsan deneyimleri yaratmak için hiç bu kadar güçlü olmamıştık. Tasarımcı ve geliştirici olmak için hiç bu kadar heyecan verici bir zaman olmamıştı. Web sayfalarını unutun - dünyalar inşa edeceğiz.

Yolculuğumuz mütevazi Web Çalışanı ile başlıyor, bu nedenle WebVR serimizin bir sonraki bölümü için bizi izlemeye devam edin.