เจาะลึก WebXR Depth Sensing: การตั้งค่า Depth Buffer ฉบับมาสเตอร์

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

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

คู่มือฉบับสมบูรณ์นี้ออกแบบมาสำหรับนักพัฒนาเว็บ ผู้ที่ชื่นชอบ XR และนักเทคโนโลยีสร้างสรรค์ทั่วโลก เราจะสำรวจพื้นฐานของการตรวจจับความลึก วิเคราะห์ตัวเลือกการกำหนดค่าของ WebXR API และให้คำแนะนำทีละขั้นตอนที่เป็นประโยชน์สำหรับการนำคุณสมบัติ AR ขั้นสูงไปใช้ เช่น การบดบัง (Occlusion) และฟิสิกส์ที่สมจริง เมื่ออ่านจบ คุณจะมีความรู้ในการตั้งค่า Depth Buffer อย่างเชี่ยวชาญ และสร้างแอปพลิเคชัน WebXR ยุคใหม่ที่น่าสนใจและรับรู้บริบทได้

ทำความเข้าใจแนวคิดหลัก

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

Depth Map คืออะไร?

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

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

• เซ็นเซอร์ Time-of-Flight (ToF): เซ็นเซอร์เหล่านี้จะปล่อยพัลส์ของแสงอินฟราเรดและวัดเวลาที่แสงใช้ในการสะท้อนกลับจากวัตถุ ความแตกต่างของเวลานี้จะถูกแปลงเป็นระยะทางโดยตรง
• LiDAR (Light Detection and Ranging): คล้ายกับ ToF แต่มีความแม่นยำสูงกว่า LiDAR ใช้พัลส์เลเซอร์เพื่อสร้างกลุ่มจุด (point cloud) ความละเอียดสูงของสภาพแวดล้อม ซึ่งจะถูกแปลงเป็น Depth Map ในภายหลัง
• กล้องสเตอริโอ (Stereoscopic Cameras): ด้วยการใช้กล้องสองตัวขึ้นไป อุปกรณ์สามารถเลียนแบบการมองเห็นสองตาของมนุษย์ได้ โดยจะวิเคราะห์ความแตกต่าง (disparity) ระหว่างภาพจากกล้องแต่ละตัวเพื่อคำนวณความลึก

WebXR API จะซ่อนความซับซ้อนของฮาร์ดแวร์ที่อยู่เบื้องหลังไว้ โดยมอบ Depth Map ที่เป็นมาตรฐานให้นักพัฒนาได้ใช้งาน โดยไม่คำนึงถึงอุปกรณ์ที่ใช้

เหตุใด Depth Sensing จึงสำคัญสำหรับ AR?

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

• การบดบัง (Occlusion): นี่น่าจะเป็นประโยชน์ที่สำคัญที่สุด การบดบังคือความสามารถของวัตถุในโลกจริงในการบดบังมุมมองของวัตถุเสมือน ด้วย Depth Map แอปพลิเคชันของคุณจะทราบระยะทางที่แม่นยำของพื้นผิวในโลกจริงในทุกๆ พิกเซล หากวัตถุเสมือนที่คุณกำลังเรนเดอร์อยู่ไกลกว่าพื้นผิวในโลกจริงที่พิกเซลเดียวกัน คุณก็สามารถเลือกที่จะไม่วาดมันได้ การกระทำง่ายๆ นี้ทำให้ตัวละครเสมือนเดินไปด้านหลังโซฟาจริงได้อย่างน่าเชื่อถือ หรือลูกบอลดิจิทัลกลิ้งไปใต้โต๊ะจริง สร้างความรู้สึกของการผสมผสานที่ลึกซึ้ง
• ฟิสิกส์และการโต้ตอบ: วัตถุเสมือนที่อยู่นิ่งๆ ก็น่าสนใจ แต่วัตถุที่โต้ตอบได้นั้นน่าดึงดูดใจกว่า การตรวจจับความลึกช่วยให้สามารถจำลองฟิสิกส์ที่สมจริงได้ ลูกบอลเสมือนสามารถกระเด้งจากพื้นจริง ตัวละครดิจิทัลสามารถนำทางไปรอบๆ เฟอร์นิเจอร์จริง และสีเสมือนสามารถสาดกระเซ็นลงบนกำแพงจริงได้ สิ่งนี้สร้างประสบการณ์ที่มีพลวัตและตอบสนองได้ดี
• การสร้างฉากขึ้นใหม่ (Scene Reconstruction): ด้วยการวิเคราะห์ Depth Map เมื่อเวลาผ่านไป แอปพลิเคชันสามารถสร้างแบบจำลอง 3 มิติ (mesh) ของสภาพแวดล้อมแบบง่ายๆ ได้ ความเข้าใจทางเรขาคณิตนี้มีความสำคัญอย่างยิ่งสำหรับ AR ขั้นสูง ทำให้สามารถใช้คุณสมบัติต่างๆ เช่น แสงที่สมจริง (การทอดเงาบนพื้นผิวจริง) และการวางวัตถุอย่างชาญฉลาด (การวางแจกันเสมือนบนโต๊ะจริง)
• ความสมจริงที่เพิ่มขึ้น: ท้ายที่สุดแล้ว คุณสมบัติทั้งหมดนี้มีส่วนช่วยสร้างประสบการณ์ที่สมจริงและดื่มด่ำยิ่งขึ้น เมื่อเนื้อหาดิจิทัลรับรู้และโต้ตอบกับพื้นที่ทางกายภาพของผู้ใช้ มันจะทลายกำแพงระหว่างโลกและส่งเสริมความรู้สึกของการมีอยู่จริงที่ลึกซึ้งยิ่งขึ้น

ภาพรวมของ WebXR Depth Sensing API

โมดูล Depth Sensing เป็นส่วนขยายของ WebXR Device API หลัก เช่นเดียวกับเทคโนโลยีเว็บที่ล้ำสมัยหลายๆ อย่าง มันอาจไม่ได้เปิดใช้งานโดยค่าเริ่มต้นในทุกเบราว์เซอร์ และอาจต้องใช้แฟล็ก (flag) ที่เฉพาะเจาะจงหรือเป็นส่วนหนึ่งของ Origin Trial สิ่งสำคัญคือต้องสร้างแอปพลิเคชันของคุณอย่างรอบคอบ โดยตรวจสอบการรองรับเสมอ ก่อนที่จะพยายามใช้คุณสมบัตินี้

การตรวจสอบว่ารองรับหรือไม่

ก่อนที่คุณจะสามารถร้องขอเซสชันได้ คุณต้องถามเบราว์เซอร์ก่อนว่ารองรับโหมด 'immersive-ar' พร้อมกับคุณสมบัติ 'depth-sensing' หรือไม่ ซึ่งทำได้โดยใช้เมธอด `navigator.xr.isSessionSupported()`

async function checkDepthSensingSupport() {
  if (!navigator.xr) {
    console.log("WebXR is not available.");
    return false;
  }

  try {
    const supported = await navigator.xr.isSessionSupported('immersive-ar');
    if (supported) {
        // Now check for the specific feature
        const session = await navigator.xr.requestSession('immersive-ar', {
            requiredFeatures: ['depth-sensing']
        });
        // If this succeeds, the feature is supported. We can end the test session.
        await session.end();
        console.log("WebXR AR with Depth Sensing is supported!");
        return true;
    } else {
        console.log("WebXR AR is not supported on this device.");
        return false;
    }
  } catch (error) {
    console.log("Error checking for Depth Sensing support:", error);
    return false;
  }
}

วิธีที่ตรงกว่า แต่สมบูรณ์น้อยกว่า คือการพยายามร้องขอเซสชันโดยตรงและดักจับข้อผิดพลาด (catch the error) แต่วิธีข้างต้นมีความแข็งแกร่งกว่าสำหรับการตรวจสอบความสามารถล่วงหน้า

การร้องขอ Session

เมื่อคุณยืนยันการรองรับแล้ว คุณจะร้องขอ XR session โดยรวม 'depth-sensing' ไว้ในอาร์เรย์ `requiredFeatures` หรือ `optionalFeatures` สิ่งสำคัญคือการส่งอ็อบเจกต์การกำหนดค่าไปพร้อมกับชื่อคุณสมบัติ ซึ่งเป็นที่ที่เรากำหนดค่าที่เราต้องการ

async function startXRSession() {
  const session = await navigator.xr.requestSession('immersive-ar', {
    requiredFeatures: ['local-floor', 'dom-overlay'], // other common features
    optionalFeatures: [
      {
        name: 'depth-sensing',
        usagePreference: ['cpu-optimized', 'gpu-optimized'],
        dataFormatPreference: ['float32', 'luminance-alpha']
      }
    ]
  });
  // ... proceed with session setup
}

สังเกตว่า 'depth-sensing' ตอนนี้เป็นอ็อบเจกต์ นี่คือที่ที่เราให้คำแนะนำการกำหนดค่าแก่เบราว์เซอร์ เรามาดูรายละเอียดของตัวเลือกที่สำคัญเหล่านี้กัน

การตั้งค่า Depth Buffer: หัวใจสำคัญของเรื่อง

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

`usagePreference`: CPU หรือ GPU?

คุณสมบัติ `usagePreference` เป็นอาร์เรย์ของสตริงที่ส่งสัญญาณกรณีการใช้งานหลักของคุณไปยัง User Agent (UA) ซึ่งก็คือเบราว์เซอร์ ช่วยให้ระบบสามารถปรับให้เหมาะสมเพื่อประสิทธิภาพ ความแม่นยำ และการใช้พลังงาน คุณสามารถร้องขอการใช้งานได้หลายแบบ โดยเรียงตามลำดับความต้องการ

'gpu-optimized'

• หมายถึงอะไร: คุณกำลังบอกเบราว์เซอร์ว่าเป้าหมายหลักของคุณคือการใช้ข้อมูลความลึกโดยตรงบน GPU ซึ่งส่วนใหญ่มักจะใช้ภายใน Shader เพื่อวัตถุประสงค์ในการเรนเดอร์
• ข้อมูลถูกจัดเตรียมอย่างไร: Depth Map จะถูกเปิดเผยในรูปแบบ `WebGLTexture` ซึ่งมีประสิทธิภาพอย่างเหลือเชื่อเพราะข้อมูลไม่จำเป็นต้องออกจากหน่วยความจำของ GPU เพื่อนำไปใช้ในการเรนเดอร์
• กรณีการใช้งานหลัก: การบดบัง (Occlusion) โดยการสุ่มตัวอย่าง (sampling) เท็กซ์เจอร์นี้ใน Fragment Shader ของคุณ คุณสามารถเปรียบเทียบความลึกของโลกจริงกับความลึกของวัตถุเสมือนของคุณและทิ้งส่วนที่ไม่ควรแสดง (discard fragments) ที่ควรถูกซ่อนไว้ นอกจากนี้ยังเป็นประโยชน์สำหรับเอฟเฟกต์อื่นๆ ที่ใช้ GPU เช่น อนุภาคที่รับรู้ความลึก หรือเงาที่สมจริง
• ประสิทธิภาพ: นี่คือตัวเลือกที่มีประสิทธิภาพสูงสุดสำหรับงานด้านการเรนเดอร์ ช่วยหลีกเลี่ยงปัญหาคอขวดขนาดใหญ่ของการถ่ายโอนข้อมูลจำนวนมากจาก GPU ไปยัง CPU ในทุกเฟรม

'cpu-optimized'

• หมายถึงอะไร: คุณต้องการเข้าถึงค่าความลึกดิบโดยตรงในโค้ด JavaScript ของคุณบน CPU
• ข้อมูลถูกจัดเตรียมอย่างไร: Depth Map จะถูกเปิดเผยในรูปแบบ `ArrayBuffer` ที่ JavaScript สามารถเข้าถึงได้ คุณสามารถอ่าน แยกวิเคราะห์ และวิเคราะห์ค่าความลึกทุกค่าได้
• กรณีการใช้งานหลัก: ฟิสิกส์, การตรวจจับการชน, และการวิเคราะห์ฉาก ตัวอย่างเช่น คุณสามารถทำการ raycast เพื่อค้นหาพิกัด 3 มิติของจุดที่ผู้ใช้แตะ หรือคุณสามารถวิเคราะห์ข้อมูลเพื่อค้นหาพื้นผิวเรียบ เช่น โต๊ะหรือพื้น สำหรับการวางวัตถุ
• ประสิทธิภาพ: ตัวเลือกนี้มีต้นทุนด้านประสิทธิภาพที่สูงมาก ข้อมูลความลึกจะต้องถูกคัดลอกจากเซ็นเซอร์/GPU ของอุปกรณ์ไปยังหน่วยความจำหลักของระบบเพื่อให้ CPU เข้าถึงได้ การคำนวณที่ซับซ้อนบนอาร์เรย์ข้อมูลขนาดใหญ่นี้ทุกเฟรมใน JavaScript อาจนำไปสู่ปัญหาด้านประสิทธิภาพและอัตราเฟรมที่ต่ำได้อย่างง่ายดาย ควรใช้อย่างรอบคอบและเท่าที่จำเป็น

คำแนะนำ: ร้องขอ 'gpu-optimized' เสมอหากคุณวางแผนที่จะใช้งาน Occlusion คุณสามารถร้องขอทั้งสองอย่างได้ เช่น `['gpu-optimized', 'cpu-optimized']` เบราว์เซอร์จะพยายามทำตามลำดับความต้องการแรกของคุณ โค้ดของคุณต้องมีความแข็งแกร่งพอที่จะตรวจสอบว่าระบบได้ให้รูปแบบการใช้งานใดมาและจัดการได้ทั้งสองกรณี

`dataFormatPreference`: ความแม่นยำ vs. ความเข้ากันได้

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

'float32'

• หมายถึงอะไร: ค่าความลึกแต่ละค่าเป็นตัวเลขทศนิยม (floating-point) ขนาด 32 บิตเต็ม
• ทำงานอย่างไร: ค่านี้แสดงถึงระยะทางเป็นเมตรโดยตรง ไม่จำเป็นต้องถอดรหัส คุณสามารถใช้งานได้ทันที ตัวอย่างเช่น ค่า 1.5 ในบัฟเฟอร์หมายความว่าจุดนั้นอยู่ห่างออกไป 1.5 เมตร
• ข้อดี: มีความแม่นยำสูงและใช้งานง่ายมากทั้งใน Shader และ JavaScript นี่คือรูปแบบในอุดมคติสำหรับความแม่นยำ
• ข้อเสีย: ต้องใช้ WebGL 2 และฮาร์ดแวร์ที่รองรับเท็กซ์เจอร์แบบ floating-point (เช่น ส่วนขยาย `OES_texture_float`) รูปแบบนี้อาจไม่สามารถใช้ได้กับอุปกรณ์ทั้งหมด โดยเฉพาะอุปกรณ์มือถือรุ่นเก่า

'luminance-alpha'

• หมายถึงอะไร: นี่คือรูปแบบที่ออกแบบมาเพื่อความเข้ากันได้กับ WebGL 1 และฮาร์ดแวร์ที่ไม่รองรับเท็กซ์เจอร์แบบ float โดยใช้ช่องสัญญาณ 8 บิตสองช่อง (luminance และ alpha) เพื่อเก็บค่าความลึก 16 บิต
• ทำงานอย่างไร: ค่าความลึกดิบ 16 บิตจะถูกแบ่งออกเป็นสองส่วน ส่วนละ 8 บิต ในการหาค่าความลึกที่แท้จริง คุณต้องรวมส่วนเหล่านี้กลับเข้าด้วยกันในโค้ดของคุณ โดยทั่วไปสูตรคือ: `decodedValue = luminanceValue + alphaValue / 255.0` ผลลัพธ์ที่ได้จะเป็นค่าที่ถูกทำให้เป็นมาตรฐานระหว่าง 0.0 ถึง 1.0 ซึ่งจะต้องนำไปคูณกับตัวคูณแยกต่างหากเพื่อให้ได้ระยะทางเป็นเมตร
• ข้อดี: มีความเข้ากันได้กับฮาร์ดแวร์ที่กว้างกว่ามาก เป็นทางเลือกที่เชื่อถือได้เมื่อ 'float32' ไม่ได้รับการสนับสนุน
• ข้อเสีย: ต้องมีขั้นตอนการถอดรหัสเพิ่มเติมใน Shader หรือ JavaScript ของคุณ ซึ่งเพิ่มความซับซ้อนเล็กน้อย และยังมีความแม่นยำต่ำกว่า (16 บิต) เมื่อเทียบกับ 'float32'

คำแนะนำ: ร้องขอทั้งสองอย่าง โดยให้รูปแบบที่คุณต้องการมากที่สุดเป็นอันดับแรก: `['float32', 'luminance-alpha']` นี่เป็นการบอกเบราว์เซอร์ว่าคุณต้องการรูปแบบที่มีความแม่นยำสูง แต่ก็สามารถจัดการกับรูปแบบที่เข้ากันได้มากกว่าได้หากจำเป็น ย้ำอีกครั้งว่าแอปพลิเคชันของคุณต้องตรวจสอบว่าได้รับรูปแบบใดมาและใช้ตรรกะที่ถูกต้องในการประมวลผลข้อมูล

การนำไปใช้งานจริง: คำแนะนำทีละขั้นตอน

ตอนนี้ เรามารวมแนวคิดเหล่านี้เข้ากับการใช้งานจริงกัน เราจะมุ่งเน้นไปที่กรณีการใช้งานที่พบบ่อยที่สุด: การบดบังที่สมจริงโดยใช้ Depth Buffer ที่ปรับให้เหมาะกับ GPU

ขั้นตอนที่ 1: การตั้งค่าการร้องขอ XR Session ที่แข็งแกร่ง

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

let xrSession = null;
let xrDepthInfo = null;

async function onXRButtonClick() {
  try {
    xrSession = await navigator.xr.requestSession('immersive-ar', {
      requiredFeatures: ['local-floor'],
      domOverlay: { root: document.body }, // Example of another feature
      depthSensing: {
        usagePreference: ['gpu-optimized'],
        dataFormatPreference: ['float32', 'luminance-alpha']
      }
    });

    // ... Session start logic, setup canvas, WebGL context, etc.
    // In your session start logic, get the depth sensing configuration
    const depthSensing = xrSession.depthSensing;
    if (depthSensing) {
      console.log(`Depth sensing granted with usage: ${depthSensing.usage}`);
      console.log(`Depth sensing granted with data format: ${depthSensing.dataFormat}`);
    } else {
      console.warn("Depth sensing was requested but not granted.");
    }
    
    xrSession.requestAnimationFrame(onXRFrame);
  } catch (e) {
    console.error("Failed to start XR session.", e);
  }
}

ขั้นตอนที่ 2: การเข้าถึงข้อมูลความลึกใน Render Loop

ภายในฟังก์ชัน `onXRFrame` ของคุณ ซึ่งจะถูกเรียกทุกเฟรม คุณต้องได้รับข้อมูลความลึกสำหรับมุมมองปัจจุบัน

function onXRFrame(time, frame) {
  const session = frame.session;
  session.requestAnimationFrame(onXRFrame);

  const pose = frame.getViewerPose(xrReferenceSpace);
  if (!pose) return;

  const glLayer = session.renderState.baseLayer;
  const gl = webglContext; // Your WebGL context
  gl.bindFramebuffer(gl.FRAMEBUFFER, glLayer.framebuffer);

  for (const view of pose.views) {
    const viewport = glLayer.getViewport(view);
    gl.viewport(viewport.x, viewport.y, viewport.width, viewport.height);

    // The crucial step: get depth information
    const depthInfo = frame.getDepthInformation(view);

    if (depthInfo) {
      // We have depth data for this frame and view!
      // Pass this to our rendering function
      renderScene(view, depthInfo);
    } else {
      // No depth data available for this frame
      renderScene(view, null);
    }
  }
}

อ็อบเจกต์ `depthInfo` (อินสแตนซ์ของ `XRDepthInformation`) ประกอบด้วยทุกสิ่งที่เราต้องการ:

• `depthInfo.texture`: `WebGLTexture` ที่มี Depth Map (หากใช้ 'gpu-optimized')
• `depthInfo.width`, `depthInfo.height`: ขนาดของเท็กซ์เจอร์ความลึก
• `depthInfo.normDepthFromNormView`: `XRRigidTransform` (เมทริกซ์) ที่ใช้ในการแปลงพิกัดมุมมองที่ทำให้เป็นมาตรฐาน (normalized view coordinates) ไปยังพิกัดเท็กซ์เจอร์ที่ถูกต้องสำหรับการสุ่มตัวอย่าง Depth Map ซึ่งสำคัญอย่างยิ่งสำหรับการจัดตำแหน่งข้อมูลความลึกให้ตรงกับภาพจากกล้องสี
• `depthInfo.rawValueToMeters`: ตัวคูณ คุณต้องคูณค่าดิบจากเท็กซ์เจอร์ด้วยตัวเลขนี้เพื่อให้ได้ระยะทางเป็นเมตร

ขั้นตอนที่ 3: การใช้งาน Occlusion ด้วย Depth Buffer ที่ปรับให้เหมาะกับ GPU

นี่คือจุดที่ความมหัศจรรย์เกิดขึ้น ภายใน GLSL Shader ของคุณ เป้าหมายคือการเปรียบเทียบความลึกของโลกแห่งความจริง (จากเท็กซ์เจอร์) กับความลึกของวัตถุเสมือนที่เรากำลังวาดอยู่

Vertex Shader (แบบย่อ)

Vertex Shader ส่วนใหญ่เป็นแบบมาตรฐาน มันจะแปลงตำแหน่งของจุดยอด (vertices) ของวัตถุและที่สำคัญคือส่งผ่านตำแหน่งใน clip-space ไปยัง Fragment Shader

// GLSL (Vertex Shader)
attribute vec3 a_position;
uniform mat4 u_projectionMatrix;
uniform mat4 u_modelViewMatrix;
varying vec4 v_clipPosition;

void main() {
  vec4 position = u_modelViewMatrix * vec4(a_position, 1.0);
  gl_Position = u_projectionMatrix * position;
  v_clipPosition = gl_Position;
}

Fragment Shader (ตรรกะหลัก)

Fragment Shader จะทำงานหนัก เราจะต้องส่งผ่านเท็กซ์เจอร์ความลึกและข้อมูลเมตาที่เกี่ยวข้องเข้าไปเป็น uniform

// GLSL (Fragment Shader)
precision mediump float;

varying vec4 v_clipPosition;

uniform sampler2D u_depthTexture;
uniform mat4 u_normDepthFromNormViewMatrix;
uniform float u_rawValueToMeters;
// A uniform to tell the shader if we are using float32 or luminance-alpha
uniform bool u_isFloatTexture;

// Function to get real-world depth in meters for the current fragment
float getDepth(vec2 screenUV) {
  // Convert from screen UV to depth texture UV
  vec2 depthUV = (u_normDepthFromNormViewMatrix * vec4(screenUV, 0.0, 1.0)).xy;

  // Ensure we are not sampling outside the texture
  if (depthUV.x < 0.0 || depthUV.x > 1.0 || depthUV.y < 0.0 || depthUV.y > 1.0) {
    return 10000.0; // Return a large value if outside
  }

  float rawDepth;
  if (u_isFloatTexture) {
    rawDepth = texture2D(u_depthTexture, depthUV).r;
  } else {
    // Decode from luminance-alpha format
    vec2 encodedDepth = texture2D(u_depthTexture, depthUV).ra; // .ra is equivalent to .la
    rawDepth = encodedDepth.x + (encodedDepth.y / 255.0);
  }

  // Handle invalid depth values (often 0.0)
  if (rawDepth == 0.0) {
    return 10000.0; // Treat as very far away
  }

  return rawDepth * u_rawValueToMeters;
}

void main() {
  // Calculate the screen-space UV coordinates of this fragment
  // v_clipPosition.w is the perspective-divide factor
  vec2 screenUV = (v_clipPosition.xy / v_clipPosition.w) * 0.5 + 0.5;

  float realWorldDepth = getDepth(screenUV);

  // Get the virtual object's depth
  // gl_FragCoord.z is the normalized depth of the current fragment [0, 1]
  // We need to convert it back to meters (this depends on your projection matrix's near/far planes)
  // A simplified linear conversion for demonstration:
  float virtualObjectDepth = v_clipPosition.z / v_clipPosition.w;

  // THE OCCLUSION CHECK
  if (virtualObjectDepth > realWorldDepth) {
    discard; // This fragment is behind a real-world object, so don't draw it.
  }

  // If we are here, the object is visible. Draw it.
  gl_FragColor = vec4(1.0, 0.0, 1.0, 1.0); // Example: a magenta color
}

หมายเหตุสำคัญเกี่ยวกับการแปลงค่าความลึก: การแปลง `gl_FragCoord.z` หรือค่า Z ใน clip-space กลับเป็นระยะทางเชิงเส้นในหน่วยเมตรนั้นไม่ใช่เรื่องง่าย และขึ้นอยู่กับ projection matrix ของคุณ บรรทัด `float virtualObjectDepth = v_clipPosition.z / v_clipPosition.w;` ให้ค่าความลึกใน view-space ซึ่งเป็นจุดเริ่มต้นที่ดีสำหรับการเปรียบเทียบ เพื่อความแม่นยำสูงสุด คุณจะต้องใช้สูตรที่เกี่ยวข้องกับระนาบการตัดใกล้และไกล (near and far clipping planes) ของกล้องเพื่อทำให้ค่าใน Depth Buffer เป็นเชิงเส้น

แนวปฏิบัติที่ดีที่สุดและข้อควรพิจารณาด้านประสิทธิภาพ

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

• มีความยืดหยุ่นและป้องกันข้อผิดพลาด: อย่าคาดเดาว่าการกำหนดค่าที่คุณต้องการจะได้รับอนุมัติเสมอไป ควรตรวจสอบอ็อบเจกต์ `xrSession.depthSensing` ที่ใช้งานอยู่เสมอเพื่อดู `usage` และ `dataFormat` ที่ได้รับอนุมัติ เขียนตรรกะการเรนเดอร์ของคุณเพื่อจัดการกับทุกความเป็นไปได้ที่คุณยินดีจะรองรับ
• ให้ความสำคัญกับ GPU สำหรับการเรนเดอร์: ความแตกต่างด้านประสิทธิภาพนั้นมหาศาล สำหรับงานใดๆ ที่เกี่ยวข้องกับการแสดงภาพความลึกหรือการบดบัง เส้นทาง 'gpu-optimized' เป็นเพียงตัวเลือกเดียวที่เป็นไปได้สำหรับประสบการณ์ที่ราบรื่นที่ 60/90fps
• ลดและชะลอการทำงานของ CPU: หากคุณต้องใช้ข้อมูล 'cpu-optimized' สำหรับฟิสิกส์หรือ raycasting อย่าประมวลผลบัฟเฟอร์ทั้งหมดทุกเฟรม ให้ทำการอ่านแบบเจาะจง ตัวอย่างเช่น เมื่อผู้ใช้แตะหน้าจอ ให้อ่านเฉพาะค่าความลึกที่พิกัดนั้นๆ พิจารณาใช้ Web Worker เพื่อลดภาระการวิเคราะห์หนักๆ ออกจากเธรดหลัก
• จัดการกับข้อมูลที่หายไปอย่างนุ่มนวล: เซ็นเซอร์ความลึกไม่สมบูรณ์แบบ Depth Map ที่ได้จะมีช่องโหว่ ข้อมูลรบกวน และความไม่แม่นยำ โดยเฉพาะบนพื้นผิวที่สะท้อนแสงหรือโปร่งใส Shader สำหรับการบดบังและตรรกะฟิสิกส์ของคุณควรจัดการกับค่าความลึกที่ไม่ถูกต้อง (มักจะแสดงเป็น 0) เพื่อหลีกเลี่ยงภาพที่ผิดเพี้ยนหรือพฤติกรรมที่ไม่ถูกต้อง
• เชี่ยวชาญเรื่องระบบพิกัด: นี่เป็นจุดที่นักพัฒนามักจะล้มเหลว ให้ใส่ใจกับระบบพิกัดต่างๆ อย่างใกล้ชิด (view, clip, normalized device, texture) และตรวจสอบให้แน่ใจว่าคุณใช้เมทริกซ์ที่ให้มา เช่น `normDepthFromNormView` อย่างถูกต้องเพื่อจัดตำแหน่งทุกอย่างให้ตรงกัน
• จัดการการใช้พลังงาน: ฮาร์ดแวร์ตรวจจับความลึก โดยเฉพาะเซ็นเซอร์แบบแอคทีฟ เช่น LiDAR สามารถใช้พลังงานแบตเตอรี่ได้มาก ควรร้องขอคุณสมบัติ 'depth-sensing' เฉพาะเมื่อแอปพลิเคชันของคุณต้องการจริงๆ เท่านั้น ตรวจสอบให้แน่ใจว่า XR session ของคุณถูกระงับและสิ้นสุดอย่างถูกต้องเพื่อประหยัดพลังงานเมื่อผู้ใช้ไม่ได้ใช้งาน

อนาคตของ WebXR Depth Sensing

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

• ความเข้าใจในฉากและการสร้างเมช (Scene Understanding and Meshing): ขั้นตอนต่อไปที่สมเหตุสมผลคือโมดูล XRMesh ซึ่งจะให้เมชสามเหลี่ยม 3 มิติของสภาพแวดล้อมที่สร้างขึ้นจากข้อมูลความลึก สิ่งนี้จะช่วยให้ฟิสิกส์ การนำทาง และแสงที่สมจริงยิ่งขึ้น
• ป้ายกำกับเชิงความหมาย (Semantic Labels): ลองจินตนาการว่าไม่เพียงแต่รู้รูปทรงเรขาคณิตของพื้นผิว แต่ยังรู้ด้วยว่ามันคือ 'พื้น', 'ผนัง' หรือ 'โต๊ะ' API ในอนาคตมีแนวโน้มที่จะให้ข้อมูลเชิงความหมายนี้ ช่วยให้แอปพลิเคชันมีความฉลาดและรับรู้บริบทได้อย่างไม่น่าเชื่อ
• การผสานรวมกับฮาร์ดแวร์ที่ดีขึ้น: เมื่อแว่นตา AR และอุปกรณ์มือถือมีประสิทธิภาพมากขึ้น พร้อมด้วยเซ็นเซอร์และโปรเซสเซอร์ที่ดีขึ้น คุณภาพ ความละเอียด และความแม่นยำของข้อมูลความลึกที่ส่งไปยัง WebXR จะดีขึ้นอย่างมาก ซึ่งจะเปิดโอกาสให้เกิดความเป็นไปได้ในการสร้างสรรค์ใหม่ๆ

สรุป

WebXR Depth Sensing API เป็นเทคโนโลยีที่เปลี่ยนแปลงวงการ ซึ่งช่วยให้นักพัฒนาสามารถสร้างประสบการณ์ความจริงเสริมบนเว็บรูปแบบใหม่ได้ ด้วยการก้าวข้ามการวางวัตถุแบบง่ายๆ และหันมาให้ความสำคัญกับความเข้าใจในสภาพแวดล้อม เราสามารถสร้างแอปพลิเคชันที่สมจริง โต้ตอบได้ และผสมผสานกับโลกของผู้ใช้ได้อย่างแท้จริง การเชี่ยวชาญในการกำหนดค่า Depth Buffer—การทำความเข้าใจข้อดีข้อเสียระหว่างการใช้งานแบบ 'cpu-optimized' และ 'gpu-optimized' และระหว่างรูปแบบข้อมูล 'float32' และ 'luminance-alpha'—เป็นทักษะที่สำคัญที่จำเป็นในการปลดล็อกศักยภาพนี้

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