ยินดีต้อนรับสู่เว็บสมจริง

เว็บสมจริงหมายถึงประสบการณ์ในโลกเสมือนจริงที่โฮสต์ผ่านเบราว์เซอร์ ประสบการณ์ Virtual Reality ทั้งหมดนี้แสดงในเบราว์เซอร์หรือในชุดหูฟังที่เปิดใช้งาน VR

Joe Medley
Joe Medley
GitHub

เว็บสมจริงหมายถึงประสบการณ์ในโลกเสมือนจริงที่โฮสต์ผ่านเบราว์เซอร์ ซึ่งครอบคลุมประสบการณ์ Virtual Reality (VR) ทั้งหมดที่แสดงในเบราว์เซอร์หรือในชุดหูฟังที่รองรับ VR เช่น Daydream, Oculus Rift, Samsung Gear VR, HTC Vive และชุดหูฟัง Windows Mixed Reality รวมถึงประสบการณ์ Augmented Reality ที่พัฒนาขึ้นสำหรับอุปกรณ์เคลื่อนที่ที่เปิดใช้ AR

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

ตัวอย่างของประสบการณ์ที่สมจริง ได้แก่

  • วิดีโอ 360° ที่สมจริง
  • วิดีโอ 2 มิติแบบดั้งเดิม (หรือ 3 มิติ) ที่นำเสนอในสภาพแวดล้อมที่สมจริง
  • ภาพข้อมูล
  • การช็อปปิ้งที่บ้าน
  • ศิลปะ
  • ของเจ๋งๆ ที่ใครๆ ก็นึกถึง

ผมจะไปที่นั่นได้ยังไง

เว็บแบบสมจริงได้เปิดให้ใช้งานแล้วเกือบ 1 ปีในรูปแบบเอ็มบริโอ ซึ่งดำเนินการผ่าน WebVR 1.1 API ซึ่งพร้อมใช้งานในช่วงทดลองใช้จากต้นทางตั้งแต่ Chrome 62 เป็นต้นไป Firefox และ Edge รวมถึง Polyfill สำหรับ Safari ก็รองรับ API ดังกล่าวด้วย

แต่ถึงเวลาก้าวไปต่อแล้ว

ช่วงทดลองใช้จากต้นทางสิ้นสุดลงเมื่อวันที่ 24 กรกฎาคม 2018 และได้มี WebXR Device API และช่วงทดลองใช้จากต้นทางใหม่มาแทนที่ข้อกำหนดแล้ว

เกิดอะไรขึ้นกับ WebVR 1.1

เราได้เรียนรู้หลายอย่างจาก WebVR 1.1 แต่เมื่อเวลาผ่านไป เราเห็นได้ชัดว่าต้องมีการเปลี่ยนแปลงครั้งใหญ่เพื่อรองรับแอปพลิเคชันประเภทที่นักพัฒนาซอฟต์แวร์ต้องการสร้าง รายการบทเรียนทั้งหมดที่ได้เรียนรู้ยาวเกินกว่าที่จะอธิบายเพิ่มเติม แต่ยังมีปัญหาอย่าง API ถูกเชื่อมโยงกับเทรด JavaScript หลักอย่างชัดเจน นักพัฒนาแอปมีโอกาสมากมายที่จะกำหนดค่าผิดอย่างเห็นได้ชัด และการใช้งานทั่วไปอย่าง Magic Window เป็นผลข้างเคียงแทนที่จะเป็นฟีเจอร์เจตนา (หน้าต่างอัจฉริยะเป็นเทคนิคในการดูเนื้อหาแบบสมจริงโดยไม่ต้องใช้ชุดหูฟัง ซึ่งแอปแสดงมุมมองเดียวตามเซ็นเซอร์การวางแนวของอุปกรณ์)

การออกแบบใหม่ช่วยให้การติดตั้งใช้งานง่ายขึ้นและปรับปรุงประสิทธิภาพครั้งใหญ่ ในขณะเดียวกัน AR และ Use Case อื่นๆ ก็เติบโตขึ้นเรื่อยๆ ทำให้ API สามารถรองรับได้มากมายในอนาคต

WebXR Device API ได้รับการออกแบบและตั้งชื่อตามกรณีการใช้งานเพิ่มเติมเหล่านี้ และช่วยให้มีเส้นทางที่ดีกว่า ผู้ติดตั้ง WebVR มุ่งมั่นที่จะย้ายข้อมูลไปยัง WebXR Device API

WebXR Device API คืออะไร

WebXR Device API เป็นผลิตภัณฑ์ของ Immersive Web Community Group ที่มีผู้จัดทำจาก Google, Microsoft, Mozilla และอื่นๆ เช่นเดียวกับข้อกำหนด WebVR ก่อนหน้า "X ใน XR ได้รับการออกแบบมาให้เป็นตัวแปรพีชคณิตชนิดหนึ่งที่หมายถึงอะไรก็ได้ในสเปกตรัมของประสบการณ์ที่สมจริง โดยพร้อมให้ใช้งานในช่วงทดลองใช้จากต้นทางที่กล่าวถึงก่อนหน้านี้และผ่าน polyfill

เมื่อเผยแพร่บทความนี้ครั้งแรกในช่วง Chrome 67 รุ่นเบต้า ระบบจะเปิดใช้เฉพาะความสามารถ VR เท่านั้น Augmented Reality พร้อมใช้งานใน Chrome 69 แล้ว โปรดอ่านเรื่องนี้ใน Augmented Reality สำหรับเว็บ

API ใหม่นี้มีอะไรน่าสนใจเกินกว่าที่ฉันจะหาได้ในบทความเช่นนี้ ผมอยากให้คุณเริ่มทำความเข้าใจตัวอย่าง WebXR อย่างเพียงพอ คุณสามารถดูข้อมูลเพิ่มเติมได้ทั้งในผู้อธิบายเดิมและคู่มือลูกค้ารายแรกสุดที่เปิดรับนวัตกรรมเว็บที่สมจริง ผมจะขยายระยะเวลาหลัง เมื่อช่วงทดลองใช้จากต้นทางดำเนินไป เปิดปัญหาหรือส่งคำขอพุล ได้เลย

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

สิ่งที่ผมจะไม่พูดถึงคือวิธีวาดเนื้อหา AR/VR บนหน้าจอ WebXR Device API ไม่มีฟีเจอร์การแสดงรูปภาพ นั่นขึ้นอยู่กับคุณ การวาดเสร็จสิ้นโดยใช้ API ของ WebGL คุณสามารถทำได้ถ้าทะเยอทะยานจริงๆ อย่างไรก็ตาม เราขอแนะนำให้ใช้เฟรมเวิร์ก ตัวอย่างเว็บที่สมจริงใช้ตัวอย่างเว็บที่สร้างขึ้นสำหรับการสาธิตที่ชื่อว่า Cottontail Three.js สนับสนุน WebXR ตั้งแต่เดือนพฤษภาคม ฉันไม่เคยได้ยินอะไรเกี่ยวกับ A-Frame เลย

การเริ่มและการเรียกใช้แอป

ขั้นตอนพื้นฐานมีดังนี้

  1. ขออุปกรณ์ XR
  2. หากมี ให้ขอเซสชัน XR ถ้าคุณต้องการให้ผู้ใช้ใส่โทรศัพท์ในชุดหูฟัง จะเรียกว่าเซสชันสมจริงและต้องใช้ท่าทางสัมผัสของผู้ใช้ในการเข้าใช้งาน
  3. ใช้เซสชันเพื่อเรียกใช้ลูปการแสดงผลที่มีเฟรมรูปภาพ 60 เฟรมต่อวินาที วาดเนื้อหาที่เหมาะสมลงในหน้าจอในแต่ละเฟรม
  4. เรียกใช้ลูปการแสดงผลจนกว่าผู้ใช้จะตัดสินใจออก
  5. สิ้นสุดเซสชัน XR

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

ขออุปกรณ์ XR

ซึ่งคุณจะรู้จักโค้ดการตรวจจับฟีเจอร์มาตรฐาน คุณอาจรวมรายการนี้ ในฟังก์ชันที่เรียกว่า checkForXR()

หากคุณไม่ได้ใช้เซสชันสมจริง คุณสามารถข้ามการโฆษณาฟังก์ชันดังกล่าวและดูท่าทางสัมผัสของผู้ใช้ และไปที่การขอเซสชันได้โดยตรง เซสชันที่สมจริงคือเซสชันที่ต้องใช้ชุดหูฟัง เซสชันที่ไม่สมจริงจะแสดงเนื้อหาบนหน้าจออุปกรณ์เท่านั้น อย่างแรกคือสิ่งที่คนส่วนใหญ่นึกถึงเมื่อพูดถึง Virtual Reality หรือ Augmented Reality บางครั้งหลังเรียกว่า "หน้าต่างวิเศษ"

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.");
}

ขอเซสชัน XR

ตอนนี้เรามีอุปกรณ์และท่าทางสัมผัสของผู้ใช้แล้ว ถึงเวลารับเซสชัน หากต้องการสร้างเซสชัน เบราว์เซอร์จะต้องมีผืนผ้าใบสำหรับวาด

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

เรียกใช้ลูปการแสดงภาพ

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

ขั้นตอนพื้นฐานสำหรับการวนซ้ำการแสดงผลมีดังนี้

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

ขอเฟรมงานนำเสนอ

คำว่า "เฟรม" มีความหมายหลายประการในบริบทของ Web XR ส่วนแรกคือเฟรมของการอ้างอิงซึ่งกำหนดตำแหน่งที่มีการคำนวณต้นทางของระบบพิกัด และสิ่งที่จะเกิดขึ้นกับต้นทางนั้นเมื่ออุปกรณ์เคลื่อนที่ (มุมมองจะยังเหมือนเดิมไหมเมื่อผู้ใช้เคลื่อนไหว หรือเปลี่ยนเหมือนกับในชีวิตจริง)

เฟรมประเภทที่ 2 คือเฟรมงานนำเสนอ ซึ่งแสดงด้วยวัตถุ XRFrame ออบเจ็กต์นี้มีข้อมูลที่จำเป็นต่อการแสดงผลเฟรมเดียวของฉาก AR/VR ไปยังอุปกรณ์ อาจสับสนเล็กน้อยเพราะมีการเรียกเฟรมงานนำเสนอขึ้นมาจากการเรียกใช้ requestAnimationFrame() ซึ่งทำให้ใช้งานกับ window.requestAnimationFrame() ได้

ก่อนที่จะพูดอะไรเพิ่มเติม ฉันจะขอรหัสบางอย่างนะ ตัวอย่างด้านล่างแสดงวิธีเริ่มและบำรุงรักษาลูปการแสดงผล โปรดสังเกตการใช้เฟรมคำ แบบคู่ แล้วสังเกตการเรียกซ้ำๆ หา requestAnimationFrame() โดยระบบจะเรียกฟังก์ชันนี้ 60 ครั้งต่อวินาที

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);
    }
});

ท่าทาง

ก่อนวาดสิ่งต่างๆ ลงในหน้าจอ คุณต้องทราบว่าอุปกรณ์แสดงผลกำลังชี้ไปที่ไหนและจำเป็นต้องเข้าถึงหน้าจอ โดยทั่วไป ตำแหน่งและการวางแนว ของสิ่งต่างๆ ใน AR/VR เรียกว่าท่าทาง ทั้งผู้ดูและอุปกรณ์อินพุต ต่างก็มีท่าทาง (ฉันจะพูดถึงอุปกรณ์อินพุตในภายหลัง) ทั้งท่าทางของผู้ดูและอุปกรณ์อินพุตจะได้รับการกำหนดเป็นเมทริกซ์ 4 x 4 ที่จัดเก็บไว้ใน Float32Array โดยเรียงลำดับตามคอลัมน์หลัก คุณจะรับท่าทางของผู้ดูได้โดยเรียกใช้ XRFrame.getDevicePose() ในออบเจ็กต์เฟรมภาพเคลื่อนไหวปัจจุบัน ทดสอบเสมอเพื่อดูท่าโพสของคุณกลับคืนมา ถ้ามีอะไรผิดพลาด คุณ ไม่ต้องการวาดลงในหน้าจอ

let pose = xrFrame.getDevicePose(xrFrameOfRef);
if (pose) {
    // Draw something to the screen.
}

ยอดดู

หลังจากโพสต์ท่าแล้ว ก็ได้เวลาวาดรูป วัตถุที่คุณวาดเข้าไปนี้ เรียกว่ามุมมอง (XRView) ซึ่งเป็นจุดที่ประเภทเซสชันจะกลายเป็นสิ่งสำคัญ ระบบจะดึงข้อมูลพร็อพเพอร์ตี้จากออบเจ็กต์ XRFrame เป็นอาร์เรย์ ถ้าคุณอยู่ในเซสชันที่ไม่สมจริง อาร์เรย์จะมีมุมมอง 1 รายการ ถ้าคุณอยู่ในเซสชันแบบสมจริง อาร์เรย์จะมี 2 จุดสำหรับตาแต่ละข้าง

for (let view of xrFrame.views) {
    // Draw something to the screen.
}

นี่เป็นข้อแตกต่างที่สำคัญระหว่าง WebXR และระบบสมจริงอื่นๆ แม้การทำซ้ำในมุมมองแบบเดียวอาจฟังดูไม่น่าสนใจ แต่การทำเช่นนี้จะช่วยให้คุณมีเส้นทางการแสดงผลเดียวสำหรับอุปกรณ์ที่หลากหลาย

ลูปการแสดงภาพทั้งหมด

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

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

เซสชัน XR อาจสิ้นสุดลงด้วยเหตุผลหลายประการ ซึ่งรวมถึงการสิ้นสุดด้วยโค้ดของคุณเองผ่านการโทรไปยัง XRSession.end() สาเหตุอื่นๆ ได้แก่ การเชื่อมต่อชุดหูฟัง ขาดหาย หรือแอปพลิเคชันอื่นควบคุมชุดหูฟัง นี่เป็นเหตุผลที่แอปพลิเคชันที่มีลักษณะการทำงานที่ดีควรตรวจสอบเหตุการณ์สิ้นสุด และเมื่อเกิดเหตุการณ์ขึ้น ให้ยกเลิกออบเจ็กต์เซสชันและตัวแสดงผล เซสชัน XR เมื่อสิ้นสุดแล้วจะกลับมาทำงานอีกครั้งไม่ได้

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);
}

การโต้ตอบทำงานอย่างไร

ผมขอแนะนำวิธีโต้ตอบกับวัตถุใน AR หรือ VR เช่นเดียวกับอายุการใช้งานของแอปพลิเคชัน

WebXR Device API ใช้วิธีการ "ชี้และคลิก" ในการป้อนข้อมูลของผู้ใช้ ด้วยวิธีนี้ แหล่งที่มาของอินพุตทุกแหล่งจะมีรังสีตัวชี้ที่กำหนดไว้เพื่อระบุตำแหน่งที่อุปกรณ์อินพุตชี้ไปและเหตุการณ์เพื่อระบุว่ามีการเลือกสิ่งใดไว้ แอปของคุณจะวาดตัวชี้และแสดงตำแหน่งใน เมื่อผู้ใช้คลิกอุปกรณ์อินพุต เหตุการณ์จะเริ่มทำงานโดยเฉพาะอย่างยิ่ง select, selectStart และ selectEnd แอปจะพิจารณาสิ่งที่คลิกและตอบกลับอย่างเหมาะสม

อุปกรณ์อินพุตและตัวชี้เรย์

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

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.
    }
}

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

กำลังเลือกรายการในพื้นที่เสมือน

การหันไปที่สิ่งต่างๆ ใน AR/VR นั้นไม่มีประโยชน์เลย ในการทำสิ่งที่เป็นประโยชน์ ผู้ใช้ต้องใช้ความสามารถในการเลือกสิ่งต่างๆ WebXR Device API มี 3 เหตุการณ์สำหรับการตอบสนองการโต้ตอบของผู้ใช้ ได้แก่ select, selectStart และ selectEnd แต่แปลกใจที่ผมไม่คาดคิด มันแค่บอกคุณแค่ว่ามีการคลิกอุปกรณ์อินพุต แต่ไม่ได้บอกว่ามีการคลิกรายการใดในสภาพแวดล้อม ระบบจะเพิ่มตัวแฮนเดิลเหตุการณ์ลงในออบเจ็กต์ XRSession และควรเพิ่มทันทีที่พร้อมใช้งาน

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);
});

โค้ดนี้อิงตามตัวอย่างการเลือกอินพุตในกรณีที่คุณต้องการบริบทเพิ่มเติม

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

function onSelect(ev) {
    let inputPose = ev.frame.getInputPose(ev.inputSource, xrFrameOfRef);
    if (!inputPose) {
    return;
    }
    if (inputPose.pointerMatrix) {
    // Figure out what was clicked and respond.
    }
}

บทสรุป: การมองไปข้างหน้า

อย่างที่บอกไปก่อนหน้านี้ คาดว่า Augmented Reality จะอยู่ใน Chrome 69 (Canary จะมีขึ้นในเดือนมิถุนายน 2018) อย่างไรก็ตาม เราขอแนะนำให้คุณลองสิ่งที่เรามีจนถึงตอนนี้ เราต้องการความคิดเห็นเพื่อปรับปรุงให้ดีขึ้น ติดตามความคืบหน้าได้โดยดู ChromeStatus.com สำหรับ WebXR Hit Test นอกจากนี้คุณยังติดตาม Anchor ของ WebXR ได้อีกด้วย ซึ่งจะปรับปรุงการติดตามท่าทาง