WebVR และการปฏิวัติคอมพิวเตอร์ขอบเบราว์เซอร์

เผยแพร่แล้ว: 2022-03-11

คลื่นเทคโนโลยีขนาดใหญ่มาถึงแล้ว - Virtual Reality (VR) ไม่ว่าคุณจะรู้สึกอะไรในครั้งแรกที่คุณถือสมาร์ทโฟน การได้สัมผัสกับ VR เป็นครั้งแรกจะมอบประสบการณ์ทางอารมณ์ที่สำคัญยิ่งขึ้นในทุกแง่มุมของการใช้คอมพิวเตอร์ เป็นเวลาเพียง 12 ปีแล้วตั้งแต่ iPhone เครื่องแรก ตามแนวคิด VR มีมานานแล้ว แต่เทคโนโลยีที่จำเป็นในการนำ VR มาสู่ผู้ใช้ทั่วไปนั้นยังไม่มีให้บริการจนกระทั่งเมื่อไม่นานมานี้

Oculus Quest เป็นแพลตฟอร์มเกมสำหรับผู้บริโภคของ Facebook สำหรับ VR คุณสมบัติหลักคือไม่ต้องใช้พีซี ให้ประสบการณ์ VR แบบไร้สายและเคลื่อนที่ได้ คุณสามารถมอบชุดหูฟัง VR ให้กับใครบางคนในร้านกาแฟเพื่อแชร์โมเดล 3 มิติที่มีความอึดอัดใจเหมือนกับการค้นหาบางสิ่งในการสนทนา แต่ผลตอบแทนจากประสบการณ์ที่แชร์นั้นน่าสนใจกว่ามาก

VR จะเปลี่ยนวิธีการทำงาน จับจ่าย เพลิดเพลินกับเนื้อหา และอื่นๆ อีกมากมาย

ในชุดนี้ เราจะสำรวจเทคโนโลยีเบราว์เซอร์ปัจจุบันที่เปิดใช้งาน WebVR และการประมวลผลขอบของเบราว์เซอร์ โพสต์แรกนี้เน้นย้ำถึงเทคโนโลยีเหล่านั้นและสถาปัตยกรรมสำหรับการจำลองของเรา

ในบทความต่อไปนี้ เราจะเน้นถึงความท้าทายและโอกาสที่ไม่เหมือนใครในโค้ด ในการสำรวจเทคโนโลยีนี้ ฉันได้ทำการสาธิต Canvas และ WebVR และเผยแพร่โค้ดบน GitHub

ALT_TEXT
สำหรับรายละเอียดเพิ่มเติม โปรดดูการสาธิต Canvas การสาธิต WebVR และโค้ดตัวอย่าง

VR หมายถึงอะไรสำหรับ UX

ในฐานะนักพัฒนา Toptal ฉันช่วยให้ธุรกิจต่างๆ ได้โครงการต่างๆ ตั้งแต่แนวคิดไปจนถึงการทดสอบเบต้ากับผู้ใช้ VR เกี่ยวข้องกับเว็บแอปพลิเคชันธุรกิจอย่างไร

เนื้อหาด้านความบันเทิงจะนำไปสู่การเข้าถึง Virtual Reality (เช่นเดียวกับในอุปกรณ์เคลื่อนที่) อย่างไรก็ตาม เมื่อ VR กลายเป็นกระแสหลักเช่นเดียวกับอุปกรณ์พกพา “การออกแบบ VR-first” จะเป็นประสบการณ์ที่คาดหวัง (คล้ายกับ

“เน้นมือถือเป็นหลัก” เป็นการปรับเปลี่ยนกระบวนทัศน์ “เน้นออฟไลน์ก่อน” คือการเปลี่ยนกระบวนทัศน์ในปัจจุบัน และ “VR-first” กำลังจะเริ่มต้นขึ้น นี่เป็นช่วงเวลาที่น่าตื่นเต้นมากในการเป็นนักออกแบบและนักพัฒนา เนื่องจาก VR เป็นกระบวนทัศน์การออกแบบที่แตกต่างไปจากเดิมอย่างสิ้นเชิง (เราจะสำรวจสิ่งนี้ในบทความสุดท้ายของซีรีส์) คุณไม่ใช่นักออกแบบ VR หากคุณจับไม่ได้

VR เริ่มต้นในการปฏิวัติคอมพิวเตอร์ส่วนบุคคล (PC) แต่กำลังมาถึงในฐานะขั้นตอนต่อไปในการปฏิวัติอุปกรณ์พกพา Oculus Quest ของ Facebook สร้างขึ้นบน Google Cardboard โดยใช้ Snapdragon 835 System-on-Chip (SoC) ของ Qualcomm) การติดตามชุดหูฟัง (การใช้กล้องมือถือ) และทำงานบน Android - ทั้งหมดบรรจุเพื่อให้ติดตั้งกับอวัยวะรับความรู้สึกอ่อนโยนของใบหน้าได้อย่างสะดวกสบาย

Oculus Quest มูลค่า 400 เหรียญมอบประสบการณ์ที่น่าอัศจรรย์ที่ฉันสามารถแบ่งปันกับเพื่อน ๆ ได้ iPhone ใหม่มูลค่า 1,000 ดอลลาร์ไม่สร้างความประทับใจให้ใครอีกต่อไป มนุษยชาติจะไม่ถ่มน้ำลาย VR hook

การประยุกต์ใช้ในอุตสาหกรรม VR

VR เริ่มที่จะปรากฏตัวในอุตสาหกรรมและสาขาการคำนวณมากมาย นอกเหนือจากการบริโภคเนื้อหาและการเล่นเกมซึ่งมักจะได้รับการรายงานข่าวเป็นจำนวนมาก VR กำลังเปลี่ยนแปลงอุตสาหกรรมอย่างช้าๆ ตั้งแต่สถาปัตยกรรมไปจนถึงการดูแลสุขภาพ

  • สถาปัตยกรรมและอสังหาริมทรัพย์ สร้างมูลค่าของความเป็นจริงทางกายภาพด้วยต้นทุนที่ไม่ธรรมดา (เมื่อเทียบกับดิจิทัล) ดังนั้นจึงเหมาะอย่างยิ่งสำหรับสถาปนิกและตัวแทนอสังหาริมทรัพย์ในการนำลูกค้าผ่านความเป็นจริงเสมือนเพื่อแสดงประสบการณ์ VR เสนอ "การทดสอบเบต้า" ของสนามกีฬามูลค่า 200 ล้านเหรียญของคุณหรือคำแนะนำแบบเสมือนจริงทางโทรศัพท์
  • การเรียนรู้และการศึกษา ใน VR ถ่ายทอดประสบการณ์ที่ไม่อาจจำลองด้วยรูปภาพหรือวิดีโอได้
  • บริษัท ยานยนต์ ได้รับประโยชน์จาก VR ตั้งแต่การออกแบบและความปลอดภัย ไปจนถึงการฝึกอบรมและการตลาด
  • ผู้เชี่ยวชาญ ด้านสุขภาพ ที่โรงพยาบาลเด็ก Lucile Packard แห่งสแตนฟอร์ดใช้ VR ในการวางแผนการผ่าตัดหัวใจ ซึ่งช่วยให้พวกเขาเข้าใจกายวิภาคของผู้ป่วยก่อนทำแผลเพียงครั้งเดียว VR ยังเข้ามาแทนที่ยาเพื่อบรรเทาอาการปวด
  • การค้าปลีก การตลาด และการบริการ มีทัวร์ชมผลิตภัณฑ์และสถานที่ต่างๆ เสมือนจริงอยู่แล้ว เมื่อผู้ค้าปลีกเริ่มเข้าใจว่าประสบการณ์การช็อปปิ้งของพวกเขาน่าดึงดูดใจเพียงใด นักนวัตกรรมการค้าปลีกจะตอกย้ำจุดแข็งสุดท้ายในโลงศพของการซื้อของจากอิฐและปูน

เมื่อเทคโนโลยีก้าวหน้า เราจะเห็นการยอมรับที่เพิ่มขึ้นในอุตสาหกรรมต่างๆ คำถามในตอนนี้คือการเปลี่ยนแปลงนี้จะเกิดขึ้นได้เร็วเพียงใดและอุตสาหกรรมใดจะได้รับผลกระทบมากที่สุด

VR หมายถึงอะไรสำหรับเว็บและ Edge Computing

“Edge Computing” จะย้ายการประมวลผลออกจากคลัสเตอร์แอปพลิเคชันเซิร์ฟเวอร์หลักของคุณและเข้าใกล้ผู้ใช้ปลายทางมากขึ้น มีข่าวลือทางการตลาดเนื่องจากบริษัทโฮสติ้งแทบรอที่จะเช่าเซิร์ฟเวอร์ที่มีความหน่วงต่ำในทุกเมือง

ตัวอย่างการประมวลผลขอบ B2C คือบริการ Stadia ของ Google ซึ่งรันเวิร์กโหลดเกมที่เน้น CPU/GPU บนเซิร์ฟเวอร์ของ Google แล้วส่งเกมไปยังอุปกรณ์เช่น Netflix Netflix Chromebook ที่โง่เขลาสามารถเล่นเกมได้เหมือนกับคอมพิวเตอร์เกมระดับไฮเอนด์ สิ่งนี้ยังสร้างตัวเลือกสถาปัตยกรรมใหม่ของเกมผู้เล่นหลายคนแบบเสาหินที่ผสานรวมอย่างแน่นหนา

ตัวอย่างการคำนวณขอบ B2B คือ GRID ของ Nvidia ซึ่งให้เวิร์กสเตชันระยะไกลเสมือนที่เปิดใช้งาน Nvidia GPU แก่อุปกรณ์ระดับ Netflix ราคาถูก

คำถาม: ทำไมไม่ย้าย edge computing ออกจาก data center ไปที่ browser?

กรณีการใช้งานสำหรับการประมวลผลขอบของเบราว์เซอร์คือ “ฟาร์มเรนเดอร์แอนิเมชั่น” ของคอมพิวเตอร์ที่แสดงภาพยนตร์ 3 มิติโดยแบ่งกระบวนการที่ใช้เวลาทั้งวันออกเป็นส่วนๆ ที่คอมพิวเตอร์หลายพันเครื่องสามารถประมวลผลได้ในเวลาไม่กี่นาที

เทคโนโลยีอย่าง Electron และ NW.js นำการเขียนโปรแกรมเว็บมาสู่แอปพลิเคชันเดสก์ท็อป เทคโนโลยีเบราว์เซอร์ใหม่ (เช่น กปภ.) กำลังนำรูปแบบการแจกจ่ายเว็บแอปพลิเคชัน (SaaS เกี่ยวกับการแจกจ่าย) กลับสู่คอมพิวเตอร์เดสก์ท็อป ตัวอย่าง ได้แก่ โครงการต่างๆ เช่น SETI@Home, Folding@Home (การพับโปรตีน) หรือฟาร์มเรนเดอร์ต่างๆ แทนที่จะต้องดาวน์โหลดโปรแกรมติดตั้ง ตอนนี้สามารถเข้าร่วมฟาร์มคำนวณโดยเข้าไปที่เว็บไซต์ได้แล้ว

คำถาม: WebVR เป็น "ของจริง" หรือเนื้อหา VR จะคึกคักใน "ร้านแอป" และสวนที่มีกำแพงล้อมรอบ?

ในฐานะนักแปลอิสระและนักเทคโนโลยีของ Toptal เป็นงานของฉันที่ต้องรู้ ดังนั้นฉันจึงสร้างต้นแบบเทคโนโลยีเพื่อตอบคำถามของตัวเอง คำตอบที่ฉันพบนั้นน่าตื่นเต้นมาก และฉันเขียนชุดบล็อกนี้เพื่อแบ่งปันกับคุณ

สปอยเลอร์: ใช่ WebVR เป็นของจริง และใช่ การประมวลผลขอบของเบราว์เซอร์สามารถใช้ API เดียวกันเพื่อเข้าถึงพลังการประมวลผลที่เปิดใช้งาน WebVR

เขียนสนุกมาก! มาสร้างการพิสูจน์แนวคิดกันเถอะ

เพื่อทดสอบสิ่งนี้ เราจะสร้างแบบจำลองทางฟิสิกส์ดาราศาสตร์ของปัญหา n-body

นักดาราศาสตร์สามารถใช้สมการในการคำนวณแรงโน้มถ่วงระหว่างวัตถุสองชิ้นได้ อย่างไรก็ตาม ไม่มีสมการสำหรับระบบที่มีร่างกายตั้งแต่สามตัวขึ้นไป ซึ่งไม่สะดวกทุกระบบในจักรวาลที่รู้จัก ศาสตร์!

แม้ว่าปัญหา n-body ไม่มีวิธีแก้ปัญหาเชิงวิเคราะห์ (สมการ) แต่ก็มีวิธีแก้ปัญหาเชิงคำนวณ (อัลกอริทึม) ซึ่งก็คือ O(n²) O(n²) เป็นกรณีที่เลวร้ายที่สุดที่เป็นไปได้ แต่มันเป็นวิธีที่จะได้สิ่งที่เราต้องการและสาเหตุที่สัญกรณ์ Big O ถูกประดิษฐ์ขึ้นตั้งแต่แรก

O(n²) ประสิทธิภาพ

รูปที่ 2: “ขึ้นและไปทางขวา? ฉันไม่ใช่วิศวกร แต่ผลงานดูดีสำหรับฉัน!”

หากคุณกำลังปัดฝุ่นทักษะ Big O ของคุณ โปรดจำไว้ว่าสัญลักษณ์ Big O จะวัดว่าอัลกอริทึมทำงาน "ปรับขนาด" อย่างไรตามขนาดของข้อมูลที่ทำงานอยู่

คอลเล็กชันของเราคือเนื้อหาทั้งหมดในการจำลองของเรา การเพิ่มเนื้อหาใหม่หมายถึงการเพิ่มการคำนวณแรงโน้มถ่วงแบบสองส่วนใหม่สำหรับวัตถุที่มีอยู่ในชุด

ในขณะที่วงในของเราคือ < n มันไม่ใช่ <= O(log n) ดังนั้นอัลกอริธึมทั้งหมดจึงเป็น O(n²) นั่นคือช่วงพัก ไม่มีเครดิตพิเศษ

 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 ทำให้เราอยู่ในโลกแห่งฟิสิกส์/เอนจิ้นเกม และการสำรวจเทคโนโลยีที่จำเป็นสำหรับ WebVR

สำหรับต้นแบบของเรา เมื่อเราสร้างแบบจำลองแล้ว เราจะสร้างภาพ 2 มิติ

สุดท้าย เราจะสลับการแสดงภาพ Canvas เป็นเวอร์ชัน WebVR

หากคุณใจร้อน คุณสามารถข้ามไปที่รหัสของโครงการได้เลย

Web Workers, WebAssembly, AssemblyScript, Canvas, Rollup, WebVR, Aframe

เตรียมตัวให้พร้อมสำหรับการผจญภัยที่อัดแน่นไปด้วยความตื่นเต้น ผ่านกลุ่มเทคโนโลยีใหม่ที่มาถึงเบราว์เซอร์มือถือที่ทันสมัยของคุณแล้ว (ขออภัย ไม่ใช่ Safari ของคุณ):

  • เราจะใช้ Web Workers เพื่อย้ายการจำลองไปยังเธรด CPU ของตัวเอง - ปรับปรุงการรับรู้และประสิทธิภาพที่แท้จริง
  • เราจะใช้ WebAssembly เพื่อเรียกใช้อัลกอริทึม O(n²) ในโค้ดที่คอมไพล์ประสิทธิภาพสูง (C/C++/Rust/AssemblyScript/ฯลฯ) ในเธรดใหม่นั้น
  • เราจะใช้ Canvas เพื่อแสดงภาพการจำลองของเราในแบบ 2 มิติ
  • เราจะใช้ Rollup และ Gulp เป็นทางเลือกที่มีน้ำหนักเบาสำหรับ Webpack
  • สุดท้าย เราจะใช้ WebVR และ Aframe เพื่อสร้าง Virtual Reality สำหรับโทรศัพท์ของคุณ

สถาปัตยกรรมหลังผ้าเช็ดปากก่อนดำดิ่งสู่โค้ด

เราจะเริ่มด้วยเวอร์ชัน Canvas เพราะคุณอาจอ่านข้อความนี้ในที่ทำงานอยู่

เวอร์ชั่นแคนวาส

ในโพสต์แรกๆ เราจะใช้ API ของเบราว์เซอร์ที่มีอยู่เพื่อเข้าถึงทรัพยากรการคำนวณที่จำเป็นในการสร้างการจำลองแบบเข้มข้นของ CPU โดยไม่ลดทอนประสบการณ์ของผู้ใช้

จากนั้น เราจะเห็นภาพสิ่งนี้ในเบราว์เซอร์โดยใช้ Canvas ในที่สุดก็สลับการแสดงภาพ Canvas ของเราเป็น WebVR โดยใช้ Aframe

การออกแบบ API และลูปการจำลอง

การจำลอง n-body ของเราทำนายตำแหน่งของวัตถุท้องฟ้าโดยใช้แรงโน้มถ่วง เราสามารถคำนวณแรงที่แน่นอนระหว่างวัตถุสองชิ้นด้วยสมการ แต่ในการคำนวณแรงระหว่างวัตถุสามชิ้นขึ้นไป เราต้องแยกการจำลองออกเป็นส่วนย่อยเวลาเล็กๆ และทำซ้ำ เป้าหมายของเราคือ 30 เฟรม/วินาที (ความเร็วของภาพยนตร์) หรือ ~33 ms/เฟรม

เพื่อให้ได้แนวทาง ต่อไปนี้คือภาพรวมคร่าวๆ ของโค้ด:

  1. index.html . ของเบราว์เซอร์ GET
  2. ซึ่งรัน main.js ตามรหัสด้านล่าง import จะได้รับการจัดการด้วย Rollup ซึ่งเป็นทางเลือกแทน Webpack
  3. ซึ่งสร้าง nBodySimulator() ใหม่
  4. ซึ่งมี API ภายนอก:
    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))) } }) }

ดาวเคราะห์น้อยทั้งสองมีมวลเป็นศูนย์จึงไม่ได้รับผลกระทบจากแรงโน้มถ่วง พวกเขาทำให้การแสดงภาพ 2 มิติของเราซูมออกอย่างน้อย 30x30 รหัสสุดท้ายคือปุ่ม "ทำร้ายร่างกาย" ของเราเพื่อเพิ่ม 10 ดาวเคราะห์น้อยภายในเพื่อความสนุกสนาน!

ต่อไปคือ "การจำลองแบบวนซ้ำ" ของเรา - ทุกๆ 33ms คำนวณใหม่และทาสีใหม่ หากคุณกำลังสนุก เราสามารถเรียกมันว่า "game loop" สิ่งที่ง่ายที่สุดที่สามารถใช้ลูปของเราคือ setTimeout() - และนั่นก็เป็นไปตามจุดประสงค์ของฉัน ทางเลือกอื่นอาจเป็น requestAnimationFrame()

sim.start() เริ่มการดำเนินการโดยเรียก sim.step() ทุกๆ 33ms (ประมาณ 30 เฟรมต่อวินาที)

 // 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() }

เย่! เรากำลังย้ายการออกแบบที่ผ่านมาไปสู่การใช้งาน เราจะใช้การคำนวณทางฟิสิกส์ใน WebAssembly และเรียกใช้ในเธรด Web Worker ที่แยกต่างหาก

nBodySimulator ปิดความซับซ้อนของการใช้งานและแบ่งออกเป็นหลายส่วน:

  1. calculateForces() สัญญาว่าจะคำนวณแรงที่จะใช้
    1. สิ่งเหล่านี้ส่วนใหญ่เป็นการดำเนินการจุดลอยตัวและทำใน WebAssembly
    2. การคำนวณเหล่านี้เป็น O(n²) และคอขวดประสิทธิภาพของเรา
    3. เราใช้ Web Worker เพื่อย้ายพวกเขาออกจากเธรดหลักเพื่อประสิทธิภาพที่แท้จริงและการรับรู้ที่ดีขึ้น
  2. trimDebris() ลบสิ่งแปลกปลอมที่ไม่น่าสนใจอีกต่อไป (และจะซูมภาพออก) บน)
  3. applyForces() ใช้แรงที่คำนวณได้กับร่างกาย บน)
    1. เรานำกองกำลังเก่ามาใช้ใหม่หากเราข้าม calcForces() เนื่องจากผู้ปฏิบัติงานไม่ว่างอยู่แล้ว สิ่งนี้ช่วยปรับปรุงประสิทธิภาพการรับรู้ (ขจัดความกระวนกระวายใจ) ด้วยต้นทุนความแม่นยำ
    2. เธรด UI หลักสามารถวาดกองกำลังเก่าได้ แม้ว่าการคำนวณจะใช้เวลานานกว่า 33 มิลลิวินาที
  4. visualize() ส่งผ่านอาร์เรย์ของร่างกายไปยัง Visualizer แต่ละอันเพื่อระบายสี บน)

และทุกอย่างเกิดขึ้นใน 33ms! เราสามารถปรับปรุงการออกแบบนี้ได้หรือไม่? ใช่. อยากรู้หรือมีข้อเสนอแนะ? ตรวจสอบความคิดเห็นด้านล่าง หากคุณกำลังมองหาการออกแบบและการใช้งานที่ทันสมัยขั้นสูง ลองดู Matter.js ที่เป็นโอเพ่นซอร์ส

บลาสทอฟ!

ฉันสนุกมากที่ได้สร้างสรรค์สิ่งนี้และรู้สึกตื่นเต้นที่จะแบ่งปันกับคุณ เจอกันหลังกระโดด!

  1. Intro - หน้านี้
  2. Web Workers - เข้าถึงหลายเธรด
  3. WebAssembly - การประมวลผลเบราว์เซอร์โดยไม่ต้องใช้ JavaScript
  4. Rollup และ Gulp - ทางเลือกแทน WebPack
  5. Canvas - การวาดไปยัง Canvas API และ “ซิมลูป”
  6. WebVR - สลับ Visualizer Canvas ของเราสำหรับ WebVR และ Aframe

ความบันเทิงจะนำไปสู่เนื้อหาใน Virtual Reality (เช่นอุปกรณ์เคลื่อนที่) แต่เมื่อ VR เป็นปกติ (เช่นอุปกรณ์เคลื่อนที่) ก็จะเป็นประสบการณ์ของผู้บริโภคและประสิทธิภาพการทำงานที่คาดหวัง (เช่นอุปกรณ์เคลื่อนที่)

เราไม่เคยได้รับอำนาจมากไปกว่านี้ในการสร้างประสบการณ์ของมนุษย์ ไม่เคยมีเวลาที่น่าตื่นเต้นมากในการเป็นนักออกแบบและนักพัฒนา ลืมหน้าเว็บ - เราจะสร้างโลก

การเดินทางของเราเริ่มต้นด้วย Web Worker ที่อ่อนน้อมถ่อมตน ดังนั้นโปรดคอยติดตามส่วนต่อไปของซีรี่ส์ WebVR ของเรา