WebXR ஆழம் உணர்தல் பற்றிய ஒரு ஆழமான பார்வை: டெப்த் பஃபர் உள்ளமைவில் தேர்ச்சி பெறுதல்

வலைத்தளம் இருபரிமாண தகவல் தளத்திலிருந்து ஒரு முப்பரிமாண, உள்ளீர்க்கும் இடமாக மாறி வருகிறது. இந்த மாற்றத்தின் முன்னணியில் WebXR உள்ளது, இது உலாவிக்கு மெய்நிகர் மற்றும் ஆக்மென்டட் ரியாலிட்டியை கொண்டு வரும் ஒரு சக்திவாய்ந்த API ஆகும். இணையத்தில் ஆரம்பகால AR அனுபவங்கள் ஈர்க்கக்கூடியதாக இருந்தாலும், அவை பெரும்பாலும் நிஜ உலகிலிருந்து துண்டிக்கப்பட்டதாக உணர்ந்தன. மெய்நிகர் பொருள்கள் நிஜ உலக மரச்சாமான்கள் மற்றும் சுவர்கள் வழியாக நம்பமுடியாத வகையில் மிதந்து செல்லும், ஒரு உண்மையான இருப்பு உணர்வு இல்லாமல்.

WebXR டெப்த் சென்சிங் API-ஐ அறிமுகப்படுத்துகிறோம். இந்த புரட்சிகரமான அம்சம் ஒரு மகத்தான பாய்ச்சலாகும், இது வலை பயன்பாடுகளை பயனரின் சூழலின் வடிவவியலைப் புரிந்துகொள்ள உதவுகிறது. இது டிஜிட்டல் மற்றும் பௌதீக உலகிற்கு இடையிலான இடைவெளியைக் குறைக்கிறது, மெய்நிகர் உள்ளடக்கம் நிஜ உலகின் விதிகள் மற்றும் அமைப்பை மதிக்கும் உண்மையான உள்ளீர்க்கும் மற்றும் ஊடாடும் அனுபவங்களை அனுமதிக்கிறது. இந்த சக்தியைத் திறப்பதற்கான திறவுகோல், டெப்த் பஃபரைப் புரிந்துகொண்டு சரியாக உள்ளமைப்பதில் உள்ளது.

இந்த விரிவான வழிகாட்டி உலகளாவிய வலை உருவாக்குநர்கள், XR ஆர்வலர்கள் மற்றும் படைப்பாற்றல் தொழில்நுட்பவியலாளர்களுக்காக வடிவமைக்கப்பட்டுள்ளது. நாம் ஆழம் உணர்தலின் அடிப்படைகளை ஆராய்வோம், WebXR API-யின் உள்ளமைவு விருப்பங்களை பகுப்பாய்வு செய்வோம், மற்றும் யதார்த்தமான மறைப்பு மற்றும் இயற்பியல் போன்ற மேம்பட்ட AR அம்சங்களை செயல்படுத்துவதற்கான நடைமுறை, படிப்படியான வழிகாட்டுதலை வழங்குவோம். இதன் முடிவில், டெப்த் பஃபர் உள்ளமைவில் தேர்ச்சி பெறவும், அடுத்த தலைமுறை ஈர்க்கக்கூடிய, சூழல்-அறிந்த WebXR பயன்பாடுகளை உருவாக்கவும் தேவையான அறிவைப் பெற்றிருப்பீர்கள்.

முக்கிய கருத்துக்களைப் புரிந்துகொள்ளுதல்

API விவரங்களுக்குள் நாம் மூழ்குவதற்கு முன், ஒரு திடமான அடித்தளத்தை உருவாக்குவது முக்கியம். ஆழம்-அறிந்த ஆக்மென்டட் ரியாலிட்டியை இயக்கும் முக்கிய கருத்துக்களை தெளிவுபடுத்துவோம்.

ஆழ வரைபடம் (Depth Map) என்றால் என்ன?

நீங்கள் ஒரு அறையைப் பார்க்கிறீர்கள் என்று கற்பனை செய்து பாருங்கள். உங்கள் மூளை சிரமமின்றி காட்சியைக் கையாளுகிறது, மேசை சுவரை விட அருகில் உள்ளது, மற்றும் நாற்காலி மேசைக்கு முன்னால் உள்ளது என்பதைப் புரிந்துகொள்கிறது. ஒரு ஆழ வரைபடம் என்பது இந்த புரிதலின் டிஜிட்டல் பிரதிநிதித்துவமாகும். அதன் மையத்தில், ஆழ வரைபடம் ஒரு 2D படம், இதில் ஒவ்வொரு பிக்சலின் மதிப்பும் நிறத்தைக் குறிக்காது, மாறாக பௌதீக உலகில் அந்தப் புள்ளியின் சென்சாரிலிருந்து (உங்கள் சாதனத்தின் கேமரா) உள்ள தூரத்தைக் குறிக்கிறது.

இதை ஒரு கிரேஸ்கேல் படமாக நினைத்துப் பாருங்கள்: இருண்ட பிக்சல்கள் மிக அருகில் உள்ள பொருட்களைக் குறிக்கலாம், அதே நேரத்தில் பிரகாசமான பிக்சல்கள் தொலைவில் உள்ள பொருட்களைக் குறிக்கலாம் (அல்லது மரபை பொறுத்து நேர்மாறாகவும் இருக்கலாம்). இந்தத் தரவு பொதுவாக சிறப்பு வன்பொருள் மூலம் கைப்பற்றப்படுகிறது, அதாவது:

• டைம்-ஆஃப்-ஃப்ளைட் (ToF) சென்சார்கள்: இந்த சென்சார்கள் அகச்சிவப்பு ஒளியின் ஒரு துடிப்பை வெளியிட்டு, ஒளி ஒரு பொருளின் மீது பட்டுத் திரும்ப எடுக்கும் நேரத்தை அளவிடுகின்றன. இந்த நேர வேறுபாடு நேரடியாக தூரமாக மாற்றப்படுகிறது.
• LiDAR (ஒளி கண்டறிதல் மற்றும் வரம்பு): ToF-ஐப் போன்றது ஆனால் பெரும்பாலும் மிகவும் துல்லியமானது, LiDAR லேசர் துடிப்புகளைப் பயன்படுத்தி சூழலின் உயர்-தெளிவுத்திறன் கொண்ட புள்ளி மேகத்தை உருவாக்குகிறது, இது பின்னர் ஒரு ஆழ வரைபடமாக மாற்றப்படுகிறது.
• ஸ்டீரியோஸ்கோபிக் கேமராக்கள்: இரண்டு அல்லது அதற்கு மேற்பட்ட கேமராக்களைப் பயன்படுத்துவதன் மூலம், ஒரு சாதனம் மனிதனின் இருகண் பார்வையைப் பின்பற்ற முடியும். இது ஒவ்வொரு கேமராவிலிருந்தும் வரும் படங்களுக்கு இடையிலான வேறுபாடுகளை (disparity) பகுப்பாய்வு செய்து ஆழத்தைக் கணக்கிடுகிறது.

WebXR API அடிப்படையிலான வன்பொருளை மறைத்து, சாதனத்தைப் பொருட்படுத்தாமல், உருவாக்குநர்களுக்கு ஒரு தரப்படுத்தப்பட்ட ஆழ வரைபடத்தை வழங்குகிறது.

AR-க்கு ஆழம் உணர்தல் ஏன் முக்கியமானது?

ஒரு எளிய ஆழ வரைபடம் பயனரின் AR அனுபவத்தை அடிப்படையாக மாற்றும் சாத்தியக்கூறுகளின் உலகத்தைத் திறக்கிறது, அதை ஒரு புதுமையிலிருந்து உண்மையாக நம்பக்கூடிய ஒரு ஊடாட்டமாக உயர்த்துகிறது.

• மறைப்பு (Occlusion): இதுவே மிக முக்கியமான நன்மை என்று வாதிடலாம். மறைப்பு என்பது நிஜ உலகப் பொருட்கள் மெய்நிகர் பொருட்களின் பார்வையைத் தடுக்கும் திறன் ஆகும். ஒரு ஆழ வரைபடத்துடன், உங்கள் பயன்பாடு ஒவ்வொரு பிக்சலிலும் நிஜ உலக மேற்பரப்பின் துல்லியமான தூரத்தை அறியும். நீங்கள் ரெண்டரிங் செய்யும் ஒரு மெய்நிகர் பொருள் அதே பிக்சலில் உள்ள நிஜ உலக மேற்பரப்பை விட தொலைவில் இருந்தால், நீங்கள் அதை வரைய வேண்டாம் என்று எளிதாக தேர்வு செய்யலாம். இந்த எளிய செயல் ஒரு மெய்நிகர் பாத்திரம் ஒரு உண்மையான சோபாவின் பின்னால் நம்பத்தகுந்த வகையில் நடக்கவும் அல்லது ஒரு டிஜிட்டல் பந்து ஒரு உண்மையான மேசையின் கீழ் உருண்டு செல்லவும் செய்கிறது, இது ஒரு ஆழ்ந்த ஒருங்கிணைப்பு உணர்வை உருவாக்குகிறது.
• இயற்பியல் மற்றும் ஊடாட்டங்கள்: ஒரு நிலையான மெய்நிகர் பொருள் சுவாரஸ்யமானது, ஆனால் ஒரு ஊடாடும் பொருள் ஈர்க்கக்கூடியது. ஆழம் உணர்தல் யதார்த்தமான இயற்பியல் உருவகப்படுத்துதல்களை அனுமதிக்கிறது. ஒரு மெய்நிகர் பந்து ஒரு உண்மையான தரையில் ಪುಟிய முடியும், ஒரு டிஜிட்டல் பாத்திரம் உண்மையான மரச்சாமான்களைச் சுற்றி செல்ல முடியும், மற்றும் மெய்நிகர் வண்ணப்பூச்சு ஒரு பௌதீக சுவரில் தெளிக்கப்படலாம். இது ஒரு மாறும் மற்றும் பதிலளிக்கக்கூடிய அனுபவத்தை உருவாக்குகிறது.
• காட்சி புனரமைப்பு (Scene Reconstruction): காலப்போக்கில் ஆழ வரைபடத்தை பகுப்பாய்வு செய்வதன் மூலம், ஒரு பயன்பாடு சூழலின் ஒரு எளிமைப்படுத்தப்பட்ட 3D மெஷ்ஷை உருவாக்க முடியும். இந்த வடிவவியல் புரிதல் மேம்பட்ட AR-க்கு இன்றியமையாதது, யதார்த்தமான விளக்கு (நிஜ பரப்புகளில் நிழல்களை வீசுதல்) மற்றும் அறிவார்ந்த பொருள் வேலை வாய்ப்பு (ஒரு உண்மையான மேஜையில் ஒரு மெய்நிகர் பூ ஜாடியை வைப்பது) போன்ற அம்சங்களை செயல்படுத்துகிறது.
• மேம்படுத்தப்பட்ட யதார்த்தவாதம்: இறுதியில், இந்த அனைத்து அம்சங்களும் மிகவும் யதார்த்தமான மற்றும் உள்ளீர்க்கும் அனுபவத்திற்கு பங்களிக்கின்றன. டிஜிட்டல் உள்ளடக்கம் பயனரின் பௌதீக இடத்தைக் గుర్తించి அதனுடன் ஊடாடும்போது, அது உலகங்களுக்கு இடையிலான தடையை உடைத்து, ஆழ்ந்த இருப்பு உணர்வை வளர்க்கிறது.

WebXR டெப்த் சென்சிங் API: ஒரு கண்ணோட்டம்

டெப்த் சென்சிங் தொகுதி முக்கிய WebXR டிவைஸ் API-யின் ஒரு நீட்டிப்பாகும். பல அதிநவீன வலை தொழில்நுட்பங்களைப் போலவே, இது அனைத்து உலாவிகளிலும் இயல்பாக இயக்கப்பட்டிருக்காது மற்றும் குறிப்பிட்ட கொடிகள் தேவைப்படலாம் அல்லது ஒரு 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;
  }
}

ஒரு நேரடியான, ஆனால் முழுமையற்ற வழி, அமர்வை நேரடியாகக் கோரி பிழையைப் பிடிப்பது, ஆனால் மேலே உள்ள முறை திறன்களை முன்கூட்டியே சரிபார்க்க மிகவும் வலுவானது.

ஒரு அமர்வைக் கோருதல்

நீங்கள் ஆதரவை உறுதிசெய்தவுடன், `requiredFeatures` அல்லது `optionalFeatures` வரிசையில் 'depth-sensing'-ஐச் சேர்ப்பதன் மூலம் ஒரு XR அமர்வைக் கோருகிறீர்கள். முக்கிய விஷயம், அம்சப் பெயருடன் ஒரு உள்ளமைவு பொருளை அனுப்புவது, இங்குதான் நாம் நமது விருப்பங்களை வரையறுக்கிறோம்.

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' இப்போது ஒரு பொருள் என்பதைக் கவனியுங்கள். இங்குதான் நாம் உலாவிக்கு நமது உள்ளமைவு குறிப்புகளை வழங்குகிறோம். இந்த முக்கியமான விருப்பங்களை உடைப்போம்.

டெப்த் பஃபரை உள்ளமைத்தல்: விஷயத்தின் இதயம்

டெப்த் சென்சிங் API-யின் சக்தி அதன் நெகிழ்வுத்தன்மையில் உள்ளது. ஆழத் தரவை நீங்கள் எப்படி பயன்படுத்த விரும்புகிறீர்கள் என்பதை உலாவிக்குச் சொல்லலாம், இது உங்கள் பயன்பாட்டு வழக்கிற்கு மிகவும் திறமையான வடிவத்தில் தகவலை வழங்க அனுமதிக்கிறது. இந்த உள்ளமைவு அம்ச വിവரிப்புப் பொருளுக்குள் நிகழ்கிறது, முதன்மையாக இரண்டு பண்புகள் மூலம்: `usagePreference` மற்றும் `dataFormatPreference`.

`usagePreference`: CPU அல்லது GPU?

`usagePreference` பண்பு என்பது உங்கள் முதன்மை பயன்பாட்டு வழக்கை பயனர் முகவருக்கு (UA), அதாவது உலாவிக்கு, சமிக்ஞை செய்யும் சரங்களின் வரிசையாகும். இது செயல்திறன், துல்லியம் மற்றும் மின் நுகர்வு ஆகியவற்றை மேம்படுத்த கணினியை அனுமதிக்கிறது. நீங்கள் பல பயன்பாடுகளை, விருப்பப்படி வரிசைப்படுத்தி கோரலாம்.

'gpu-optimized'

• இதன் பொருள் என்ன: ஆழத் தரவை நேரடியாக GPU-வில், பெரும்பாலும் ரெண்டரிங் நோக்கங்களுக்காக ஷேடர்களுக்குள் பயன்படுத்த வேண்டும் என்பதே உங்கள் முக்கிய குறிக்கோள் என்று உலாவிக்குச் சொல்கிறீர்கள்.
• தரவு எவ்வாறு வழங்கப்படுகிறது: ஆழ வரைபடம் ஒரு `WebGLTexture` ஆக வெளிப்படுத்தப்படும். இது நம்பமுடியாத அளவிற்கு திறமையானது, ஏனெனில் ரெண்டரிங்கிற்குப் பயன்படுத்த தரவு GPU-வின் நினைவகத்தை விட்டு வெளியேறத் தேவையில்லை.
• முதன்மை பயன்பாட்டு வழக்கு: மறைப்பு (Occlusion). உங்கள் ஃபிராக்மென்ட் ஷேடரில் இந்த டெக்ஸ்ச்சரை மாதிரி செய்வதன் மூலம், நிஜ உலக ஆழத்தை உங்கள் மெய்நிகர் பொருளின் ஆழத்துடன் ஒப்பிட்டு மறைக்கப்பட வேண்டிய ஃபிராக்மென்ட்களை நிராகரிக்கலாம். இது ஆழம்-அறிந்த துகள்கள் அல்லது யதார்த்தமான நிழல்கள் போன்ற பிற GPU-அடிப்படையிலான விளைவுகளுக்கும் பயனுள்ளதாக இருக்கும்.
• செயல்திறன்: இது ரெண்டரிங் பணிகளுக்கான மிக உயர்ந்த செயல்திறன் கொண்ட விருப்பமாகும். ஒவ்வொரு பிரேமிலும் GPU-விலிருந்து CPU-க்கு பெரிய அளவிலான தரவை மாற்றுவதற்கான மிகப்பெரிய இடையூறை இது தவிர்க்கிறது.

'cpu-optimized'

• இதன் பொருள் என்ன: நீங்கள் CPU-வில் உங்கள் JavaScript குறியீட்டில் மூல ஆழ மதிப்புகளை நேரடியாக அணுக வேண்டும்.
• தரவு எவ்வாறு வழங்கப்படுகிறது: ஆழ வரைபடம் JavaScript-அணுகக்கூடிய `ArrayBuffer` ஆக வெளிப்படுத்தப்படும். நீங்கள் ஒவ்வொரு ஆழ மதிப்பையும் படிக்கலாம், பாகுபடுத்தலாம் மற்றும் பகுப்பாய்வு செய்யலாம்.
• முதன்மை பயன்பாட்டு வழக்குகள்: இயற்பியல், மோதல் கண்டறிதல், மற்றும் காட்சி பகுப்பாய்வு. எடுத்துக்காட்டாக, ஒரு பயனர் தட்டும் புள்ளியின் 3D ஆயங்களைக் கண்டுபிடிக்க நீங்கள் ஒரு ரேகாஸ்ட் செய்யலாம், அல்லது பொருள் வைப்பதற்காக மேசைகள் அல்லது தளங்கள் போன்ற தட்டையான பரப்புகளைக் கண்டுபிடிக்க தரவைப் பகுப்பாய்வு செய்யலாம்.
• செயல்திறன்: இந்த விருப்பம் ஒரு குறிப்பிடத்தக்க செயல்திறன் செலவைக் கொண்டுள்ளது. CPU அணுகுவதற்காக ஆழத் தரவு சாதனத்தின் சென்சார்/GPU-விலிருந்து கணினியின் பிரதான நினைவகத்திற்கு நகலெடுக்கப்பட வேண்டும். JavaScript-இல் ஒவ்வொரு பிரேமிலும் இந்த பெரிய தரவு வரிசையில் சிக்கலான கணக்கீடுகளைச் செய்வது எளிதில் செயல்திறன் சிக்கல்களுக்கும் குறைந்த பிரேம் விகிதத்திற்கும் வழிவகுக்கும். இது வேண்டுமென்றே மற்றும் குறைவாகப் பயன்படுத்தப்பட வேண்டும்.

பரிந்துரை: மறைப்பை செயல்படுத்த திட்டமிட்டால் எப்போதும் 'gpu-optimized'-ஐக் கோருங்கள். நீங்கள் இரண்டையும் கோரலாம், எடுத்துக்காட்டாக: `['gpu-optimized', 'cpu-optimized']`. உலாவி உங்கள் முதல் விருப்பத்தை மதிக்க முயற்சிக்கும். உங்கள் குறியீடு கணினியால் உண்மையில் எந்தப் பயன்பாட்டு மாதிரி வழங்கப்பட்டது என்பதைச் சரிபார்த்து இரு வழக்குகளையும் கையாளும் அளவுக்கு வலுவாக இருக்க வேண்டும்.

`dataFormatPreference`: துல்லியம் மற்றும் இணக்கத்தன்மை

`dataFormatPreference` பண்பு என்பது ஆழ மதிப்புகளின் விரும்பிய தரவு வடிவம் மற்றும் துல்லியத்தைக் குறிக்கும் சரங்களின் வரிசையாகும். இந்தத் தேர்வு துல்லியம் மற்றும் வன்பொருள் இணக்கத்தன்மை இரண்டையும் பாதிக்கிறது.

'float32'

• இதன் பொருள் என்ன: ஒவ்வொரு ஆழ மதிப்பும் ஒரு முழு 32-பிட் மிதக்கும்-புள்ளி எண்ணாகும்.
• இது எவ்வாறு செயல்படுகிறது: மதிப்பு நேரடியாக மீட்டர்களில் உள்ள தூரத்தைக் குறிக்கிறது. குறிவிலக்கம் செய்யத் தேவையில்லை; நீங்கள் அதை அப்படியே பயன்படுத்தலாம். எடுத்துக்காட்டாக, பஃபரில் 1.5 என்ற மதிப்பு அந்தப் புள்ளி 1.5 மீட்டர் தொலைவில் உள்ளது என்று அர்த்தம்.
• நன்மைகள்: உயர் துல்லியம் மற்றும் ஷேடர்கள் மற்றும் JavaScript இரண்டிலும் பயன்படுத்த மிகவும் எளிதானது. இது துல்லியத்திற்கான சிறந்த வடிவமாகும்.
• குறைகள்: WebGL 2 மற்றும் மிதக்கும்-புள்ளி டெக்ஸ்ச்சர்களை ஆதரிக்கும் வன்பொருள் (`OES_texture_float` நீட்டிப்பு போன்றவை) தேவை. இந்த வடிவம் அனைத்து, குறிப்பாக பழைய, மொபைல் சாதனங்களில் கிடைக்காமல் போகலாம்.

'luminance-alpha'

• இதன் பொருள் என்ன: இது WebGL 1 மற்றும் மிதப்பு டெக்ஸ்ச்சர்களை ஆதரிக்காத வன்பொருளுடன் இணக்கத்தன்மைக்காக வடிவமைக்கப்பட்ட ஒரு வடிவமாகும். இது ஒரு 16-பிட் ஆழ மதிப்பைச் சேமிக்க இரண்டு 8-பிட் சேனல்களை (luminance மற்றும் alpha) பயன்படுத்துகிறது.
• இது எவ்வாறு செயல்படுகிறது: மூல 16-பிட் ஆழ மதிப்பு இரண்டு 8-பிட் பகுதிகளாகப் பிரிக்கப்படுகிறது. உண்மையான ஆழத்தைப் பெற, உங்கள் குறியீட்டில் இந்தப் பகுதிகளை மீண்டும் இணைக்க வேண்டும். சூத்திரம் பொதுவாக: `decodedValue = luminanceValue + alphaValue / 255.0`. இதன் விளைவாக 0.0 மற்றும் 1.0 க்கு இடையில் ஒரு இயல்பாக்கப்பட்ட மதிப்பு கிடைக்கும், இது பின்னர் மீட்டர்களில் தூரத்தைப் பெற ஒரு தனி காரணியால் அளவிடப்பட வேண்டும்.
• நன்மைகள்: மிகவும் பரந்த வன்பொருள் இணக்கத்தன்மை. 'float32' ஆதரிக்கப்படாதபோது இது ஒரு நம்பகமான மாற்று வழியாகும்.
• குறைகள்: உங்கள் ஷேடர் அல்லது JavaScript-இல் ஒரு கூடுதல் குறிவிலக்கப் படி தேவைப்படுகிறது, இது ஒரு சிறிய அளவு சிக்கலைச் சேர்க்கிறது. இது 'float32'-ஐ விட குறைந்த துல்லியத்தையும் (16-பிட்) வழங்குகிறது.

பரிந்துரை: இரண்டையும் கோருங்கள், உங்கள் மிகவும் விரும்பிய வடிவத்தை முதலில் வைத்து: `['float32', 'luminance-alpha']`. இது உயர்-துல்லியமான வடிவத்தை நீங்கள் விரும்புகிறீர்கள், ஆனால் தேவைப்பட்டால் மிகவும் இணக்கமான ஒன்றைக் கையாள முடியும் என்று உலாவிக்குச் சொல்கிறது. மீண்டும், உங்கள் பயன்பாடு எந்த வடிவம் வழங்கப்பட்டது என்பதைச் சரிபார்த்து, தரவைச் செயலாக்க சரியான தர்க்கத்தைப் பயன்படுத்த வேண்டும்.

நடைமுறைச் செயலாக்கம்: ஒரு படிப்படியான வழிகாட்டி

இப்போது, இந்த கருத்துக்களை ஒரு நடைமுறைச் செயலாக்கத்தில் இணைப்போம். GPU-மேம்படுத்தப்பட்ட டெப்த் பஃபரைப் பயன்படுத்தி யதார்த்தமான மறைப்பு என்ற மிகவும் பொதுவான பயன்பாட்டு வழக்கில் கவனம் செலுத்துவோம்.

படி 1: வலுவான XR அமர்வுக் கோரிக்கையை அமைத்தல்

நமது சிறந்த விருப்பங்களுடன் அமர்வைக் கோருவோம், ஆனால் மாற்று வழிகளைக் கையாள நமது பயன்பாட்டை வடிவமைப்போம்.

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: ரெண்டர் லூப்பில் ஆழத் தகவலை அணுகுதல்

உங்கள் `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` ('gpu-optimized' பயன்படுத்தினால்).
• `depthInfo.width`, `depthInfo.height`: ஆழ டெக்ஸ்ச்சரின் பரிமாணங்கள்.
• `depthInfo.normDepthFromNormView`: இயல்பாக்கப்பட்ட பார்வை ஆயங்களை ஆழ வரைபடத்தை மாதிரி செய்வதற்கான சரியான டெக்ஸ்ச்சர் ஆயங்களுக்கு மாற்றப் பயன்படுத்தப்படும் ஒரு `XRRigidTransform` (அணி). ஆழத் தரவை வண்ண கேமரா படத்துடன் சரியாக சீரமைக்க இது இன்றியமையாதது.
• `depthInfo.rawValueToMeters`: ஒரு அளவீட்டுக் காரணி. டெக்ஸ்ச்சரிலிருந்து வரும் மூல மதிப்பை இந்த எண்ணால் பெருக்கி மீட்டர்களில் தூரத்தைப் பெறுவீர்கள்.

படி 3: GPU-மேம்படுத்தப்பட்ட டெப்த் பஃபருடன் மறைப்பைச் செயல்படுத்துதல்

உங்கள் GLSL ஷேடர்களுக்குள் இங்குதான் மாயாஜாலம் நடக்கிறது. நிஜ உலகின் ஆழத்தை (டெக்ஸ்ச்சரிலிருந்து) நாம் தற்போது வரையும் மெய்நிகர் பொருளின் ஆழத்துடன் ஒப்பிடுவதே குறிக்கோள்.

வெர்டெக்ஸ் ஷேடர் (எளிமைப்படுத்தப்பட்டது)

வெர்டெக்ஸ் ஷேடர் பெரும்பாலும் நிலையானது. இது பொருளின் வெர்டெக்ஸுகளை மாற்றி, கிளிப்-ஸ்பேஸ் நிலையை ஃபிராக்மென்ட் ஷேடருக்கு அனுப்புகிறது.

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

ஃபிராக்மென்ட் ஷேடர் (முக்கிய தர்க்கம்)

ஃபிராக்மென்ட் ஷேடர் கடினமான வேலையைச் செய்கிறது. ஆழ டெக்ஸ்ச்சர் மற்றும் அதன் தொடர்புடைய மெட்டாடேட்டாவை யூனிஃபார்ம்களாக அனுப்ப வேண்டும்.

// 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-ஐ மீட்டர்களில் ஒரு நேரியல் தூரத்திற்கு மாற்றுவது உங்கள் ப்ரொஜெக்ஷன் அணியைப் பொறுத்தது ஒரு அற்பமான பணி அல்ல. `float virtualObjectDepth = v_clipPosition.z / v_clipPosition.w;` என்ற வரி பார்வை-வெளி ஆழத்தை வழங்குகிறது, இது ஒப்பிடுவதற்கு ஒரு நல்ல தொடக்கப் புள்ளியாகும். சரியான துல்லியத்திற்கு, ஆழ பஃபர் மதிப்பை நேரியல்மயமாக்க உங்கள் கேமராவின் அருகில் மற்றும் தொலைவில் உள்ள கிளிப்பிங் தளங்களை உள்ளடக்கிய ஒரு சூத்திரத்தைப் பயன்படுத்த வேண்டும்.

சிறந்த நடைமுறைகள் மற்றும் செயல்திறன் பரிசீலனைகள்

வலுவான மற்றும் செயல்திறன் மிக்க ஆழம்-அறிந்த அனுபவங்களை உருவாக்குவதற்கு பின்வரும் புள்ளிகளை கவனமாக பரிசீலிக்க வேண்டும்.

• நெகிழ்வாகவும் பாதுகாப்பாகவும் இருங்கள்: உங்கள் விரும்பிய உள்ளமைவு வழங்கப்படும் என்று ஒருபோதும் கருத வேண்டாம். வழங்கப்பட்ட `usage` மற்றும் `dataFormat`-ஐச் சரிபார்க்க செயலில் உள்ள `xrSession.depthSensing` பொருளை எப்போதும் வினவவும். நீங்கள் ஆதரிக்கத் தயாராக உள்ள அனைத்து சாத்தியமான சேர்க்கைகளையும் கையாள உங்கள் ரெண்டரிங் தர்க்கத்தை எழுதுங்கள்.
• ரெண்டரிங்கிற்கு GPU-க்கு முன்னுரிமை கொடுங்கள்: செயல்திறன் வேறுபாடு மிகப்பெரியது. ஆழத்தை காட்சிப்படுத்துவது அல்லது மறைப்பது சம்பந்தப்பட்ட எந்தப் பணிக்கும், 'gpu-optimized' பாதை ஒரு மென்மையான 60/90fps அனுபவத்திற்கு ஒரே சாத்தியமான விருப்பமாகும்.
• CPU வேலையைக் குறைத்து தாமதப்படுத்துங்கள்: இயற்பியல் அல்லது ரேகாஸ்டிங்கிற்காக 'cpu-optimized' தரவைப் பயன்படுத்த வேண்டியிருந்தால், ஒவ்வொரு பிரேமிலும் முழு பஃபரையும் செயலாக்க வேண்டாம். இலக்கு வைக்கப்பட்ட வாசிப்புகளைச் செய்யுங்கள். எடுத்துக்காட்டாக, ஒரு பயனர் திரையைத் தட்டும்போது, அந்த குறிப்பிட்ட ஆயத்தில் உள்ள ஆழ மதிப்பை மட்டும் படிக்கவும். முக்கிய த்ரெட்டிலிருந்து கனமான பகுப்பாய்வை ஆஃப்லோட் செய்ய ஒரு வெப் வொர்க்கரைப் பயன்படுத்துவதைக் கருத்தில் கொள்ளுங்கள்.
• விடுபட்ட தரவை நளினமாகக் கையாளுங்கள்: ஆழ சென்சார்கள் சரியானவை அல்ல. இதன் விளைவாக வரும் ஆழ வரைபடத்தில் துளைகள், இரைச்சலான தரவு மற்றும் துல்லியமின்மைகள் இருக்கும், குறிப்பாக பிரதிபலிப்பு அல்லது வெளிப்படையான பரப்புகளில். உங்கள் மறைப்பு ஷேடர் மற்றும் இயற்பியல் தர்க்கம் தவறான ஆழ மதிப்புகளை (பெரும்பாலும் 0 ஆகக் குறிப்பிடப்படுகிறது) கையாள வேண்டும், காட்சி கலைப்பொருட்கள் அல்லது தவறான நடத்தையைத் தவிர்க்க.
• ஆய அமைப்புகளில் தேர்ச்சி பெறுங்கள்: இது உருவாக்குநர்களுக்கு ஒரு பொதுவான தோல்விப் புள்ளியாகும். பல்வேறு ஆய அமைப்புகளுக்கு (பார்வை, கிளிப், இயல்பாக்கப்பட்ட சாதனம், டெக்ஸ்ச்சர்) நெருக்கமான கவனம் செலுத்துங்கள் மற்றும் அனைத்தையும் சீரமைக்க `normDepthFromNormView` போன்ற வழங்கப்பட்ட அணிகளைச் சரியாகப் பயன்படுத்துகிறீர்கள் என்பதை உறுதிப்படுத்திக் கொள்ளுங்கள்.
• மின் நுகர்வை நிர்வகிக்கவும்: ஆழம் உணர்தல் வன்பொருள், குறிப்பாக LiDAR போன்ற செயலில் உள்ள சென்சார்கள், குறிப்பிடத்தக்க பேட்டரி சக்தியை நுகரலாம். உங்கள் பயன்பாட்டிற்கு உண்மையிலேயே தேவைப்படும்போது மட்டுமே 'depth-sensing' அம்சத்தைக் கோருங்கள். பயனர் தீவிரமாக ஈடுபடாதபோது மின்சாரத்தைச் சேமிக்க உங்கள் XR அமர்வு சரியாக இடைநிறுத்தப்பட்டு முடிக்கப்படுவதை உறுதிப்படுத்திக் கொள்ளுங்கள்.

WebXR ஆழம் உணர்தலின் எதிர்காலம்

ஆழம் உணர்தல் ஒரு அடித்தளத் தொழில்நுட்பமாகும், மேலும் WebXR விவரக்குறிப்பு அதைச் சுற்றி தொடர்ந்து உருவாகி வருகிறது. உலகளாவிய டெவலப்பர் சமூகம் எதிர்காலத்தில் இன்னும் சக்திவாய்ந்த திறன்களை எதிர்பார்க்கலாம்:

• காட்சி புரிதல் மற்றும் மெஷ்ஷிங்: அடுத்த தர்க்கரீதியான படி XRMesh தொகுதி ஆகும், இது ஆழத் தரவிலிருந்து உருவாக்கப்பட்ட சூழலின் உண்மையான 3D முக்கோண மெஷ்ஷை வழங்கும். இது இன்னும் யதார்த்தமான இயற்பியல், வழிசெலுத்தல் மற்றும் விளக்குகளை செயல்படுத்தும்.
• சொற்பொருள் லேபிள்கள்: ஒரு மேற்பரப்பின் வடிவவியலை அறிவது மட்டுமல்லாமல், அது ஒரு 'தரை', 'சுவர்' அல்லது 'மேசை' என்பதையும் அறிவதை கற்பனை செய்து பாருங்கள். எதிர்கால API-கள் இந்த சொற்பொருள் தகவலை வழங்கும், இது நம்பமுடியாத அளவிற்கு அறிவார்ந்த மற்றும் சூழல்-அறிந்த பயன்பாடுகளை அனுமதிக்கும்.
• மேம்படுத்தப்பட்ட வன்பொருள் ஒருங்கிணைப்பு: AR கண்ணாடிகள் மற்றும் மொபைல் சாதனங்கள் சிறந்த சென்சார்கள் மற்றும் செயலிகளுடன் மிகவும் சக்திவாய்ந்ததாக மாறும்போது, WebXR-க்கு வழங்கப்படும் ஆழத் தரவின் தரம், தெளிவுத்திறன் மற்றும் துல்லியம் வியத்தகு முறையில் மேம்படும், புதிய படைப்பு சாத்தியங்களைத் திறக்கும்.

முடிவுரை

WebXR டெப்த் சென்சிங் API என்பது ஒரு உருமாறும் தொழில்நுட்பமாகும், இது வலை அடிப்படையிலான ஆக்மென்டட் ரியாலிட்டி அனுபவங்களின் ஒரு புதிய வகுப்பை உருவாக்க டெவலப்பர்களுக்கு அதிகாரம் அளிக்கிறது. எளிய பொருள் வைப்பதைக் கடந்து சுற்றுச்சூழல் புரிதலைத் தழுவுவதன் மூலம், பயனரின் உலகத்துடன் மிகவும் யதார்த்தமான, ஊடாடும் மற்றும் உண்மையாக ஒருங்கிணைக்கப்பட்ட பயன்பாடுகளை நாம் உருவாக்க முடியும். டெப்த் பஃபரின் உள்ளமைவில் தேர்ச்சி பெறுவது—'cpu-optimized' மற்றும் 'gpu-optimized' பயன்பாட்டிற்கு இடையேயான வர்த்தக-பரிமாற்றங்களைப் புரிந்துகொள்வது, மற்றும் 'float32' மற்றும் 'luminance-alpha' தரவு வடிவங்களுக்கு இடையில்—இந்த ஆற்றலைத் திறக்கத் தேவையான முக்கியமான திறமையாகும்.

பயனரின் சாதனத் திறன்களுக்கு ஏற்றவாறு நெகிழ்வான, செயல்திறன் மிக்க மற்றும் வலுவான பயன்பாடுகளை உருவாக்குவதன் மூலம், நீங்கள் ஒரு தனிப்பட்ட அனுபவத்தை மட்டும் உருவாக்கவில்லை; நீங்கள் உள்ளீர்க்கும், இடஞ்சார்ந்த வலையின் அடித்தளத்திற்கு பங்களிக்கிறீர்கள். கருவிகள் உங்கள் கைகளில் உள்ளன. ஆழமாகச் சென்று எதிர்காலத்தை உருவாக்கும் நேரம் இது.