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

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

Joe Medley

เว็บที่สมจริงหมายถึงประสบการณ์โลกเสมือนจริงที่โฮสต์ผ่านเบราว์เซอร์ ซึ่งครอบคลุมประสบการณ์ Virtual Reality (VR) ทั้งหมดที่ปรากฏในเบราว์เซอร์หรือในชุดหูฟังที่รองรับ VR เช่น Daydream ของ Google, Oculus Rift, Samsung Gear VR, HTC Vive และ Windows Mixed Reality Headsets รวมถึงประสบการณ์ Auged 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 และช่วงทดลองใช้จากต้นทางใหม่

What happened to WebVR 1.1?

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

การออกแบบใหม่ช่วยให้ติดตั้งใช้งานได้ง่ายขึ้นและปรับปรุงประสิทธิภาพได้อย่างมาก ในขณะเดียวกัน AR และกรณีการใช้งานอื่นๆ ก็เริ่มได้รับความนิยม จึงมีความจําเป็นที่จะต้องขยาย 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 แล้ว อ่านข้อมูลเกี่ยวกับเรื่องนี้ได้ในเทคโนโลยีความจริงเสริม (AR) สําหรับเว็บ

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

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

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

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

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

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

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

ขออุปกรณ์ XR

คุณจะเห็นโค้ดการตรวจหาองค์ประกอบมาตรฐานที่นี่ คุณสามารถรวมข้อมูลนี้ไว้ในฟังก์ชันที่ชื่อประมาณว่า checkForXR()

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

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 ครั้งต่อวินาทีจนกว่าผู้ใช้ตัดสินใจออก

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

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

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

ก่อนจะให้ข้อมูลอื่นๆ เพิ่มเติม เราขอมอบรหัสให้คุณ ตัวอย่างด้านล่างแสดงวิธีเริ่มต้นและดูแลรักษาลูปการแสดงผล สังเกตการใช้เฟรมข้อความแบบ 2 ทาง และสังเกตเห็นการโทรแบบวนซ้ำไปยัง 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 เรียกว่า "ท่าทาง" ทั้งอุปกรณ์รับชมและอุปกรณ์อินพุตมีท่าทาง (เราจะพูดถึงอุปกรณ์อินพุตในภายหลัง) ทั้งท่าทางของอุปกรณ์รับชมและอุปกรณ์อินพุตจะกำหนดเป็นเมทริกซ์ 4x4 ที่เก็บไว้ใน 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.
    }
}

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

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