இயற்பியல் உலகத்தைத் திறத்தல்: டிவைஸ் மோஷன் ஏபிஐ-யின் ஆழமான பார்வை

தொடர்ந்து வளர்ந்து வரும் இணைய மேம்பாட்டு உலகில், நேட்டிவ் செயலிகளுக்கும் இணைய செயலிகளுக்கும் இடையிலான கோடு மென்மேலும் மங்கி வருகிறது. நவீன இணைய உலாவிகள் இனி நிலையான ஆவணப் பார்வையாளர்கள் மட்டுமல்ல; அவை வளம் நிறைந்த, ஊடாடும், மற்றும் ஆழ்ந்த அனுபவங்களை வழங்கும் சக்திவாய்ந்த தளங்களாகும். இந்த பரிணாம வளர்ச்சியின் மிக அற்புதமான எல்லைகளில் ஒன்று, இணையம் இயற்பியல் உலகத்துடன் தொடர்பு கொள்ளும் திறன் ஆகும். உங்கள் ஒவ்வொரு அசைவிற்கும் சாய்தலுக்கும் பதிலளிக்கும் மொபைல் கேம்கள் முதல், உங்கள் சுற்றுப்புறத்தில் டிஜிட்டல் தகவல்களைப் படிய வைக்கும் ஆக்மென்டட் ரியாலிட்டி வியூவர்கள் வரை, இந்த அனுபவங்கள் சக்திவாய்ந்த உலாவி ஏபிஐ-களின் தொகுப்பால் இயக்கப்படுகின்றன. இந்தத் திறனுக்கு மையமாக இருப்பது டிவைஸ் மோஷன் ஏபிஐ ஆகும்.

இந்த விரிவான வழிகாட்டி உலகெங்கிலும் உள்ள இணைய டெவலப்பர்களுக்காக வடிவமைக்கப்பட்டுள்ளது. பெரும்பாலான நவீன சாதனங்களில் காணப்படும் இரண்டு அடிப்படை சென்சார்களான அக்சலரோமீட்டர் மற்றும் கைரோஸ்கோப் ஆகியவற்றிலிருந்து தரவை எவ்வாறு அணுகுவது மற்றும் விளக்குவது என்பதில் குறிப்பாக கவனம் செலுத்தி, டிவைஸ் மோஷன் ஏபிஐ-ஐ நாம் ஆராய்வோம். நீங்கள் ஒரு முற்போக்கான இணைய செயலி (PWA), உலாவியில் இயங்கும் விளையாட்டு, அல்லது ஒரு தனித்துவமான பயன்பாட்டை உருவாக்கினாலும், அவர்கள் உலகில் எங்கிருந்தாலும், இந்த ஏபிஐ-ஐப் புரிந்துகொள்வது உங்கள் பயனர்களுக்கு ஒரு புதிய ஊடாடும் பரிமாணத்தைத் திறக்கும்.

முக்கிய கருத்துகளைப் புரிந்துகொள்ளுதல்: இயக்கம் மற்றும் திசையமைவு

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

• சாதன இயக்கம் (`devicemotion` நிகழ்வு): இந்த நிகழ்வு சாதனத்தின் முடுக்கம் மற்றும் அதன் சுழற்சி வீதம் பற்றிய தகவல்களை வழங்குகிறது. சாதனம் எவ்வாறு நகர்கிறது என்பதை இது கூறுகிறது. இந்தக் கட்டுரையில் இதுவே நமது முதன்மை கவனம்.
• சாதன திசையமைவு (`deviceorientation` நிகழ்வு): இந்த நிகழ்வு 3D வெளியில் சாதனத்தின் இயற்பியல் திசையமைவு பற்றிய தகவல்களை வழங்குகிறது. சாதனம் எந்தத் திசையை நோக்கி உள்ளது என்பதை இது கூறுகிறது, பொதுவாக பூமியில் ஒரு நிலையான ஒருங்கிணைப்பு அமைப்புடன் தொடர்புடைய கோணங்களின் தொடராக இது இருக்கும்.

இதை இப்படி யோசித்துப் பாருங்கள்: `devicemotion` பயணத்தைப் பற்றி (இயக்கத்தின் விசைகள்) சொல்கிறது, அதேசமயம் `deviceorientation` சேருமிடத்தைப் பற்றி (இறுதி நிலை) சொல்கிறது. அவை பெரும்பாலும் ஒன்றாகப் பயன்படுத்தப்பட்டாலும், அவற்றின் திறன்களை முழுமையாகப் பயன்படுத்த அவற்றை தனித்தனியாகப் புரிந்துகொள்வது முக்கியம். இந்தக் வழிகாட்டியில், அக்சலரோமீட்டர் மற்றும் கைரோஸ்கோப்பிலிருந்து நேரடியாக வரும் `devicemotion` நிகழ்வு வழங்கும் வளமான தரவுகளில் நாம் கவனம் செலுத்துவோம்.

அடிப்படைக் கூறுகள்: அக்சலரோமீட்டர்கள் மற்றும் கைரோஸ்கோப்புகள் விளக்கம்

டிவைஸ் மோஷன் ஏபிஐ-யின் இதயத்தில் இரண்டு நம்பமுடியாத மைக்ரோ-எலக்ட்ரோமெக்கானிக்கல் சிஸ்டம்ஸ் (MEMS) வன்பொருள்கள் உள்ளன. ஒவ்வொன்றும் என்ன செய்கிறது என்பதைப் பார்ப்போம்.

அக்சலரோமீட்டர்: இயக்கம் மற்றும் ஈர்ப்பை உணர்தல்

அக்சலரோமீட்டர் என்பது சரியான முடுக்கத்தை அளவிடும் ஒரு சென்சார் ஆகும். இது உங்கள் தொலைபேசியை வேகமாக நகர்த்தும்போது (எ.கா., அதை உலுக்கும்போது) நீங்கள் அனுபவிக்கும் முடுக்கம் மட்டுமல்ல, ஈர்ப்பு விசையால் ஏற்படும் தொடர்ச்சியான முடுக்கத்தையும் அளவிடுகிறது. இதைப் புரிந்துகொள்வது ஒரு அடிப்படைக் கருத்தாகும்: ஒரு தட்டையான மேசையில் முற்றிலும் அசையாமல் இருக்கும் ஒரு சாதனம் கூட ஈர்ப்பு விசையை அனுபவிக்கிறது, மேலும் அக்சலரோமீட்டர் இதை வினாடிக்கு சுமார் 9.81 மீட்டர் சதுரம் (m/s²) முடுக்கமாக கண்டறிகிறது.

உலகளாவிய வலை கூட்டமைப்பு (W3C) வரையறுத்துள்ள ஒரு தரப்படுத்தப்பட்ட ஒருங்கிணைப்பு அமைப்பின் அடிப்படையில் மூன்று அச்சுகளில் தரவு வழங்கப்படுகிறது:

• x-அச்சு: திரையின் குறுக்கே இடமிருந்து வலமாக செல்கிறது.
• y-அச்சு: திரையின் குறுக்கே கீழிருந்து மேலாக செல்கிறது.
• z-அச்சு: திரைக்கு செங்குத்தாக, பயனரை நோக்கி வெளிப்புறமாகச் செல்கிறது.

`devicemotion` நிகழ்வு முடுக்கம் தொடர்பான இரண்டு முக்கிய பண்புகளை உங்களுக்கு வழங்குகிறது:

1. accelerationIncludingGravity: இந்த ஆப்ஜெக்ட் சென்சாரிலிருந்து வரும் மூலத் தரவைக் கொண்டுள்ளது. இது சாதனத்தின் இயக்கம் மற்றும் பூமியின் ஈர்ப்பு விசையின் ஒருங்கிணைந்த சக்திகளை அளவிடுகிறது. ஸ்பிரிட் லெவல் உருவாக்குவது அல்லது ஒரு சாய்வைக் கண்டறிவது போன்ற பல பயன்பாடுகளுக்கு, இதுவே பயன்படுத்த மிகவும் நம்பகமான பண்பு ஆகும், ஏனெனில் ஈர்ப்பு ஒரு நிலையான, கணிக்கக்கூடிய குறிப்பு புள்ளியை வழங்குகிறது.
2. acceleration: இந்த ஆப்ஜெக்ட் ஈர்ப்பு விசையின் விளைவைக் கழிப்பதன் மூலம் பயனர்-தொடங்கிய இயக்கத்தை தனிமைப்படுத்த உலாவியின் முயற்சியைக் குறிக்கிறது. கோட்பாட்டளவில் பயனுள்ளதாக இருந்தாலும், அதன் கிடைக்கும் தன்மை மற்றும் துல்லியம் வெவ்வேறு சாதனங்கள் மற்றும் உலாவிகளில் கணிசமாக மாறுபடலாம். பல சாதனங்கள் இதை அடைய ஒரு ஹை-பாஸ் ஃபில்டரைப் பயன்படுத்துகின்றன, அது சரியானதாக இல்லாமல் இருக்கலாம். எனவே, பல பயன்பாட்டு நிகழ்வுகளுக்கு, மூல `accelerationIncludingGravity` தரவுகளுடன் வேலை செய்து உங்கள் சொந்த கணக்கீடுகளைச் செய்வது மிகவும் சீரான முடிவுகளுக்கு வழிவகுக்கும்.

கைரோஸ்கோப்: சுழற்சியை உணர்தல்

அக்சலரோமீட்டர் நேரியல் இயக்கத்தை அளவிடும் அதே வேளையில், கைரோஸ்கோப் கோண திசைவேகத்தை அல்லது சுழற்சி விகிதத்தை அளவிடுகிறது. சாதனம் மூன்று அச்சுகளைச் சுற்றி எவ்வளவு வேகமாகத் திரும்புகிறது என்பதை இது உங்களுக்குக் கூறுகிறது. சாதனத்தைத் திருப்புதல், சுழற்றுதல் அல்லது நகர்த்துதல் போன்றவற்றுக்குப் பதிலளிக்க வேண்டிய பயன்பாடுகளுக்கு இது அவசியம்.

கைரோஸ்கோப் தரவு `devicemotion` நிகழ்வின் rotationRate பண்பில் வழங்கப்படுகிறது. இது வினாடிக்கு டிகிரி என்ற அளவில் அளவிடப்பட்ட மூன்று மதிப்புகளைக் கொண்டுள்ளது:

• ஆல்ஃபா: z-அச்சைச் சுற்றியுள்ள சுழற்சி விகிதம் (ஒரு டர்ன்டேபிளில் ஒரு ரெக்கார்டு போல தட்டையாகச் சுற்றுவது).
• பீட்டா: x-அச்சைச் சுற்றியுள்ள சுழற்சி விகிதம் (முன்னும் பின்னுமாகச் சாய்தல்).
• காமா: y-அச்சைச் சுற்றியுள்ள சுழற்சி விகிதம் (பக்கவாட்டில் சாய்தல்).

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

தொடங்குதல்: டிவைஸ் மோஷன் ஏபிஐ-ஐ செயல்படுத்துதல்

இப்போது நாம் கோட்பாட்டைப் புரிந்துகொண்டோம், நடைமுறைக்கு வருவோம். டிவைஸ் மோஷன் ஏபிஐ-ஐ செயல்படுத்துவது சில முக்கியமான படிகளை உள்ளடக்கியது, குறிப்பாக பாதுகாப்பு மற்றும் பயனர் தனியுரிமையில் நவீன இணையத்தின் கவனத்தைக் கருத்தில் கொள்ளும்போது.

படி 1: அம்சத்தைக் கண்டறிதல்

முதலாவதாக, பயனரின் உலாவி அல்லது சாதனம் இந்த ஏபிஐ-ஐ ஆதரிக்கிறது என்று நீங்கள் ஒருபோதும் கருதக்கூடாது. எப்போதும் அம்சத்தைக் கண்டறிதலுடன் தொடங்குங்கள். `window` இல் `DeviceMotionEvent` ஆப்ஜெக்ட் இருக்கிறதா என்று பார்ப்பது ஒரு எளிய சோதனை.

            if (window.DeviceMotionEvent) {
  console.log("Device Motion is supported");
} else {
  console.log("Device Motion is not supported on this device.");
}
            

              
                Copy
              
            
          

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

படி 2: அனுமதிகளைக் கோருதல் - நவீன வலை பாதுகாப்பு மாதிரி

இது இன்று டெவலப்பர்களுக்கு மிகவும் முக்கியமான மற்றும் அடிக்கடி தவறவிடப்படும் படியாகும். தனியுரிமை மற்றும் பாதுகாப்பு காரணங்களுக்காக, பல நவீன உலாவிகள், குறிப்பாக iOS 13 மற்றும் அதற்குப் பிந்தைய பதிப்புகளில் உள்ள சஃபாரி, இயக்கம் மற்றும் திசையமைவு சென்சார் தரவை அணுக வெளிப்படையான பயனர் அனுமதியைக் கோருகின்றன. இந்த அனுமதியை ஒரு பட்டன் கிளிக் போன்ற நேரடி பயனர் தொடர்புக்குப் பதிலாக மட்டுமே கோர முடியும்.

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

இதோ ஒரு சிறந்த நடைமுறைச் செயலாக்கம்:

            const permissionButton = document.getElementById('permission-button');

permissionButton.addEventListener('click', () => {
  // Check if the permission function exists
  if (typeof DeviceMotionEvent.requestPermission === 'function') {
    // iOS 13+ devices
    DeviceMotionEvent.requestPermission()
      .then(permissionState => {
        if (permissionState === 'granted') {
          window.addEventListener('devicemotion', handleMotionEvent);
          // Hide the button after permission is granted
          permissionButton.style.display = 'none';
        } else {
          // Handle permission denial
          alert('Permission to access motion sensors was denied.');
        }
      })
      .catch(console.error); // Handle potential errors
  } else {
    // Non-iOS 13+ devices
    window.addEventListener('devicemotion', handleMotionEvent);
    // You might also want to hide the button here as it's not needed
    permissionButton.style.display = 'none';
  }
});

function handleMotionEvent(event) {
  // Data handling logic goes here...
  console.log(event);
}
            

              
                Copy
              
            
          

இந்த குறியீட்டுத் துணுக்கு வலுவானது மற்றும் உலகளவில் இணக்கமானது. இது முதலில் `requestPermission` முறை இருக்கிறதா என்று சரிபார்க்கிறது. அது இருந்தால் (ஒரு iOS 13+ சூழலைக் குறிக்கிறது), அது அதை அழைக்கிறது. இந்த முறை அனுமதி நிலையுடன் தீர்க்கப்படும் ஒரு ப்ராமிஸைத் திருப்பித் தருகிறது. நிலை 'granted' ஆக இருந்தால், நாம் நமது நிகழ்வு கேட்பானைச் சேர்க்கிறோம். `requestPermission` முறை இல்லை என்றால், நாம் வேறு தளத்தில் (குரோம் கொண்ட ஆண்ட்ராய்டு போன்றவை) இருப்பதாகக் கருதலாம், அங்கு அனுமதி இயல்பாகவே வழங்கப்படுகிறது அல்லது வித்தியாசமாகக் கையாளப்படுகிறது, மேலும் நாம் நேரடியாக கேட்பானைச் சேர்க்கலாம்.

படி 3: நிகழ்வு கேட்பானைச் சேர்த்தல் மற்றும் கையாளுதல்

அனுமதி பாதுகாக்கப்பட்டவுடன், உங்கள் நிகழ்வு கேட்பானை `window` ஆப்ஜெக்ட்டுடன் இணைக்கிறீர்கள். ஒவ்வொரு முறையும் சென்சார் தரவு புதுப்பிக்கப்படும்போது, கால்பேக் செயல்பாடு அதன் வாதமாக ஒரு `DeviceMotionEvent` ஆப்ஜெக்ட்டைப் பெறும், இது பொதுவாக வினாடிக்கு 60 முறை (60Hz) ஆகும்.

தரவைப் பாகுபடுத்த `handleMotionEvent` செயல்பாட்டை உருவாக்குவோம்:

            function handleMotionEvent(event) {
  const acceleration = event.acceleration;
  const gravity = event.accelerationIncludingGravity;
  const rotation = event.rotationRate;
  const interval = event.interval;

  // For demonstration, let's display the data
  const dataContainer = document.getElementById('data-container');

  dataContainer.innerHTML = `
    <h3>Acceleration (without gravity)</h3>
    <p>X: ${acceleration.x ? acceleration.x.toFixed(3) : 'N/A'}</p>
    <p>Y: ${acceleration.y ? acceleration.y.toFixed(3) : 'N/A'}</p>
    <p>Z: ${acceleration.z ? acceleration.z.toFixed(3) : 'N/A'}</p>

    <h3>Acceleration (including gravity)</h3>
    <p>X: ${gravity.x ? gravity.x.toFixed(3) : 'N/A'}</p>
    <p>Y: ${gravity.y ? gravity.y.toFixed(3) : 'N/A'}</p>
    <p>Z: ${gravity.z ? gravity.z.toFixed(3) : 'N/A'}</p>

    <h3>Rotation Rate</h3>
    <p>Alpha (z): ${rotation.alpha ? rotation.alpha.toFixed(3) : 'N/A'}</p>
    <p>Beta (x): ${rotation.beta ? rotation.beta.toFixed(3) : 'N/A'}</p>
    <p>Gamma (y): ${rotation.gamma ? rotation.gamma.toFixed(3) : 'N/A'}</p>

    <h3>Update Interval</h3>
    <p>${interval.toFixed(3)} ms</p>
  `;
}
            

              
                Copy
              
            
          

இந்த ஹேண்ட்லர் செயல்பாடு நிகழ்வு ஆப்ஜெக்ட்டிலிருந்து தொடர்புடைய பண்புகளைப் பிரித்து அவற்றைக் காட்டுகிறது. `null` அல்லது `undefined` மதிப்புகளுக்கான சோதனைகளைக் கவனியுங்கள், ஏனெனில் எல்லா பண்புகளும் ஒவ்வொரு சாதனத்திலும் கிடைக்கும் என்று உத்தரவாதம் இல்லை. உதாரணமாக, கைரோஸ்கோப் இல்லாத ஒரு சாதனம் `event.rotationRate` க்கு `null` என்று தெரிவிக்கும்.

நடைமுறைப் பயன்பாடுகள் மற்றும் குறியீட்டு எடுத்துக்காட்டுகள்

கோட்பாடு சிறந்தது, ஆனால் டிவைஸ் மோஷன் ஏபிஐ-யின் உண்மையான சக்தி நடைமுறைப் பயன்பாடுகளுடன் உயிர்ப்பிக்கிறது. நீங்கள் உருவாக்கக்கூடிய சில எடுத்துக்காட்டுகளை ஆராய்வோம்.

எடுத்துக்காட்டு 1: "குலுக்கல் கண்டறிவான்" - ஒரு உலகளாவிய சைகை

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

            let lastX, lastY, lastZ;
let moveCounter = 0;
const shakeThreshold = 15; // Experiment with this value

function handleShake(event) {
  const { x, y, z } = event.accelerationIncludingGravity;

  if (lastX !== undefined) {
    const deltaX = Math.abs(lastX - x);
    const deltaY = Math.abs(lastY - y);
    const deltaZ = Math.abs(lastZ - z);

    if (deltaX + deltaY + deltaZ > shakeThreshold) {
      moveCounter++;
    } else {
      moveCounter = 0;
    }

    if (moveCounter > 3) { // Trigger after a few rapid movements
      console.log('Shake detected!');
      // Trigger your action here, e.g., shufflePlaylist();
      moveCounter = 0; // Reset counter to avoid multiple triggers
    }
  }

  lastX = x;
  lastY = y;
  lastZ = z;
}

// Add 'handleShake' as your event listener callback
            

              
                Copy
              
            
          

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

எடுத்துக்காட்டு 2: ஒரு எளிய ஸ்பிரிட் லெவல் (நீர்மட்டமானி) உருவாக்குதல்

ஒரு டிஜிட்டல் ஸ்பிரிட் லெவலை உருவாக்க நாம் ஈர்ப்பு விசையின் நிலையான சக்தியைப் பயன்படுத்தலாம். சாதனம் முற்றிலும் தட்டையாக இருக்கும்போது, ஈர்ப்பு விசை (~-9.81 மீ/வி²) முற்றிலும் z-அச்சில் இருக்கும். நீங்கள் சாதனத்தைச் சாய்க்கும்போது, இந்த விசை x மற்றும் y அச்சுகளில் பகிரப்படுகிறது. திரையில் ஒரு "குமிழி"யை நிலைநிறுத்த இந்த விநியோகத்தைப் பயன்படுத்தலாம்.

            const bubble = document.getElementById('bubble');
const MAX_TILT = 10; // Corresponds to 9.81 m/s^2

function handleSpiritLevel(event) {
  const { x, y } = event.accelerationIncludingGravity;

  // Map the acceleration values to a CSS transform
  // Clamp the values to a reasonable range for a better visual effect
  const tiltX = Math.min(Math.max(y, -MAX_TILT), MAX_TILT) * -5; // Invert and scale
  const tiltY = Math.min(Math.max(x, -MAX_TILT), MAX_TILT) * 5;  // Scale

  bubble.style.transform = `translateX(${tiltY}px) translateY(${tiltX}px)`;
}

// Add 'handleSpiritLevel' as your event listener callback
            

              
                Copy
              
            
          

இந்த எடுத்துக்காட்டில், ஈர்ப்பு விசையின் `x` மற்றும் `y` கூறுகளை ஒரு குமிழி உறுப்பின் `translateX` மற்றும் `translateY` CSS பண்புகளுக்கு நாம் வரைபடமாக்குகிறோம். உணர்திறனைக் கட்டுப்படுத்த அளவீட்டுக் காரணியை (`* 5`) சரிசெய்யலாம். இது `accelerationIncludingGravity` பண்பின் நேரடி மற்றும் சக்திவாய்ந்த பயன்பாட்டை நிரூபிக்கிறது.

எடுத்துக்காட்டு 3: கைரோஸ்கோப் அடிப்படையிலான "சுற்றிப் பார்க்கும்" காட்சி (360° புகைப்பட பார்வையாளர்)

ஒரு ஆழ்ந்த அனுபவத்திற்காக, கைரோஸ்கோப்பின் `rotationRate`-ஐப் பயன்படுத்தி ஒரு "மேஜிக் விண்டோ" விளைவை உருவாக்கலாம், அங்கு இயற்பியல் சாதனத்தைச் சுழற்றுவது 360° புகைப்படம் அல்லது 3D காட்சி போன்ற ஒரு பார்வையை நகர்த்துகிறது.

            const scene = document.getElementById('scene');
let currentRotation = { beta: 0, gamma: 0 };
let lastTimestamp = 0;

function handleLookAround(event) {
  if (lastTimestamp === 0) {
    lastTimestamp = event.timeStamp;
    return;
  }

  const delta = (event.timeStamp - lastTimestamp) / 1000; // Time delta in seconds
  lastTimestamp = event.timeStamp;

  const rotation = event.rotationRate;
  if (!rotation) return; // No gyroscope data

  // Integrate rotation rate over time to get the angle change
  currentRotation.beta += rotation.beta * delta;
  currentRotation.gamma += rotation.gamma * delta;

  // Apply rotation to the scene element using CSS transform
  // Note: The axes might need to be swapped or inverted depending on desired effect
  scene.style.transform = `rotateX(${-currentRotation.beta}deg) rotateY(${-currentRotation.gamma}deg)`;
}

// Add 'handleLookAround' as your event listener callback
            

              
                Copy
              
            
          

இந்த எடுத்துக்காட்டு மிகவும் மேம்பட்டது. இது கோணத்தின் மொத்த மாற்றத்தைக் கணக்கிட நிகழ்வுகளுக்கு இடையேயான நேர இடைவெளியில் கோண திசைவேகத்தை (`rotationRate`) ஒருங்கிணைக்கிறது. இந்த கோணம் பின்னர் CSS `rotateX` மற்றும் `rotateY` பண்புகளைப் புதுப்பிக்கப் பயன்படுகிறது. இந்த அணுகுமுறையில் ஒரு முக்கிய சவால் கைரோஸ்கோப் சறுக்கல் ஆகும், அங்கு காலப்போக்கில் சிறிய பிழைகள் குவிந்து, பார்வை மெதுவாக நகர காரணமாகிறது. மேலும் துல்லியமான பயன்பாடுகளுக்கு, இது பெரும்பாலும் சென்சார் இணைப்பைப் பயன்படுத்தி சரிசெய்யப்படுகிறது, கைரோஸ்கோப் தரவை அக்சலரோமீட்டர் மற்றும் காந்தமானி (பெரும்பாலும் `deviceorientation` நிகழ்வு வழியாக) தரவுகளுடன் இணைக்கிறது.

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

டிவைஸ் மோஷன் ஏபிஐ உடன் உருவாக்குவது சக்தி வாய்ந்தது, ஆனால் அதை பொறுப்புடன் செய்வது அனைவருக்கும், எல்லா இடங்களிலும் ஒரு நல்ல பயனர் அனுபவத்தை உருவாக்க அவசியம்.

செயல்திறன் மற்றும் பேட்டரி ஆயுள்

மோஷன் சென்சார்கள் சக்தியைப் பயன்படுத்துகின்றன. உங்கள் பயன்பாடு பின்னணியில் இருக்கும்போதும் கூட `devicemotion` நிகழ்வுகளை தொடர்ந்து கேட்பது பயனரின் பேட்டரியை கணிசமாகக் குறைக்கலாம். தொடர்ந்து சார்ஜ் செய்வதற்கான அணுகல் குறைவாக இருக்கும் பகுதிகளில் உள்ள பயனர்களுக்கு இது ஒரு முக்கியமான கருத்தாகும்.

• தேவைப்படும்போது மட்டும் கேளுங்கள்: உங்கள் கூறு செயலில் மற்றும் தெரியும் போது நிகழ்வு கேட்பானைச் சேர்க்கவும்.
• பயன்பாட்டிற்குப் பிறகு சுத்தம் செய்யுங்கள்: கூறு அழிக்கப்படும்போது அல்லது அம்சம் இனி தேவைப்படாதபோது எப்போதும் நிகழ்வு கேட்பானை அகற்றவும். `window.removeEventListener('devicemotion', yourHandlerFunction);`
• உங்கள் ஹேண்ட்லரை த்ராட்டில் செய்யவும்: உங்களுக்கு வினாடிக்கு 60 புதுப்பிப்புகள் தேவையில்லை என்றால், உங்கள் தர்க்கம் எவ்வளவு அடிக்கடி இயங்குகிறது என்பதைக் கட்டுப்படுத்த `requestAnimationFrame` அல்லது ஒரு எளிய த்ராட்டில்/டிபவுன்ஸ் செயல்பாடு போன்ற நுட்பங்களைப் பயன்படுத்தலாம், இது CPU சுழற்சிகள் மற்றும் பேட்டரியைச் சேமிக்கும்.

பல உலாவி மற்றும் பல சாதனப் பொருத்தம்

இணையம் பன்முகத்தன்மை வாய்ந்தது, அதை அணுகும் சாதனங்களும் அவ்வாறே. iOS அனுமதி மாதிரியில் நாம் பார்த்தது போல், செயலாக்கங்கள் வேறுபடுகின்றன. எப்போதும் தற்காப்புடன் குறியீடு செய்யுங்கள்:

• எல்லாவற்றையும் அம்சம் கண்டறியுங்கள்: `DeviceMotionEvent` மற்றும் `DeviceMotionEvent.requestPermission` இருக்கிறதா என்று சரிபார்க்கவும்.
• பூஜ்யத் தரவைச் சரிபார்க்கவும்: எல்லா சாதனங்களிலும் கைரோஸ்கோப் இல்லை. `rotationRate` ஆப்ஜெக்ட் `null` ஆக இருக்கலாம். உங்கள் குறியீடு இதை மென்மையாகக் கையாள வேண்டும்.
• மாற்று வழிகளை வழங்குங்கள்: பயனர் அனுமதியை மறுத்தால் அல்லது அவர்களின் சாதனத்தில் சென்சார்கள் இல்லை என்றால் என்ன நடக்கும்? 360° வியூவருக்கு தொடுதல் அடிப்படையிலான இழுத்து நகர்த்தும் கட்டுப்பாடு போன்ற ஒரு மாற்று கட்டுப்பாட்டுத் திட்டத்தை வழங்குங்கள். இது உங்கள் பயன்பாடு பரந்த உலகளாவிய பார்வையாளர்களால் அணுகக்கூடியதாகவும் பயன்படுத்தக்கூடியதாகவும் இருப்பதை உறுதி செய்கிறது.

தரவு மென்மையாக்கல் மற்றும் இரைச்சல் குறைப்பு

மூல சென்சார் தரவு "நடுக்கமானதாக" அல்லது "இரைச்சலாக" இருக்கலாம், இது ஒரு நடுங்கும் பயனர் அனுபவத்திற்கு வழிவகுக்கும். மென்மையான அனிமேஷன்கள் அல்லது கட்டுப்பாடுகளுக்கு, நீங்கள் பெரும்பாலும் இந்தத் தரவை மென்மையாக்க வேண்டும். ஒரு எளிய நுட்பம் லோ-பாஸ் ஃபில்டர் அல்லது நகரும் சராசரியைப் பயன்படுத்துவதாகும்.

இதோ ஒரு எளிய லோ-பாஸ் ஃபில்டர் செயலாக்கம்:

            let smoothedX = 0, smoothedY = 0;
const filterFactor = 0.1; // Value between 0 and 1. Lower is smoother but has more lag.

function handleSmoothedMotion(event) {
  const { x, y } = event.accelerationIncludingGravity;

  smoothedX = (x * filterFactor) + (smoothedX * (1.0 - filterFactor));
  smoothedY = (y * filterFactor) + (smoothedY * (1.0 - filterFactor));

  // Use smoothedX and smoothedY in your application logic
}

            

              
                Copy
              
            
          

பாதுகாப்பு மற்றும் தனியுரிமை: ஒரு பயனர்-முதல் அணுகுமுறை

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

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

எதிர்காலம்: சென்சார் இணைப்பு மற்றும் ஜெனரிக் சென்சார் ஏபிஐ

டிவைஸ் மோஷன் ஏபிஐ நன்கு ஆதரிக்கப்பட்டது மற்றும் சக்தி வாய்ந்தது, ஆனால் இது ஒரு வளர்ந்து வரும் கதையின் ஒரு பகுதியாகும். இணையத்தில் சென்சார் அணுகலின் எதிர்காலம் ஜெனரிக் சென்சார் ஏபிஐ-ஐ நோக்கிச் செல்கிறது. இது சாதன சென்சார்களை அணுகுவதற்கு ஒரு சீரான, பாதுகாப்பான, மற்றும் விரிவாக்கக்கூடிய வழியை வழங்க வடிவமைக்கப்பட்ட ஒரு புதிய விவரக்குறிப்பாகும்.

ஜெனரிக் சென்சார் ஏபிஐ பல நன்மைகளை வழங்குகிறது:

• ஒரு நவீன, ப்ராமிஸ் அடிப்படையிலான ஏபிஐ: இது ஒத்திசைவற்ற செயல்பாடுகளுடன் வேலை செய்வதை எளிதாக்குகிறது.
• தெளிவான, ஒவ்வொரு சென்சாருக்குமான அனுமதி: இது ஒரு நுட்பமான மற்றும் தெளிவான பாதுகாப்பு மாதிரியைக் கொண்டுள்ளது.
• விரிவாக்கத்தன்மை: இது இயக்கம் தவிர, சுற்றுப்புற ஒளி, அருகாமை, மற்றும் பல வகையான சென்சார்களை ஆதரிக்க வடிவமைக்கப்பட்டுள்ளது.

ஒப்பீட்டிற்காக அதன் தொடரியலின் ஒரு விரைவான பார்வை இதோ:

            // Generic Sensor API example
const accelerometer = new Accelerometer({ frequency: 60 });

accelerometer.addEventListener('reading', () => {
  console.log(`Acceleration along the X-axis: ${accelerometer.x}`);
  console.log(`Acceleration along the Y-axis: ${accelerometer.y}`);
  console.log(`Acceleration along the Z-axis: ${accelerometer.z}`);
});

accelerometer.addEventListener('error', event => {
  console.log(event.error.name, event.error.message);
});

accelerometer.start();
            

              
                Copy
              
            
          

ஜெனரிக் சென்சார் ஏபிஐ-க்கான உலாவி ஆதரவு இன்னும் வளர்ந்து கொண்டிருந்தாலும், அதுவே தெளிவான வாரிசு ஆகும். இப்போதைக்கு, அக்சலரோமீட்டர் மற்றும் கைரோஸ்கோப் தரவை அணுகுவதற்கான மிகவும் நம்பகமான மற்றும் பரவலாக ஆதரிக்கப்படும் முறையாக `devicemotion` நிகழ்வு உள்ளது. டெவலப்பர்கள் எதிர்கால திட்டங்களுக்கு ஜெனரிக் சென்சார் ஏபிஐ-யின் தத்தெடுப்பைக் கண்காணிக்க வேண்டும்.

முடிவுரை

டிவைஸ் மோஷன் ஏபிஐ என்பது பயனரின் இயற்பியல் உலகத்துடன் மிகவும் உள்ளுணர்வு, ஈடுபாடு மற்றும் இணைக்கப்பட்ட வலை அனுபவங்களை உருவாக்குவதற்கான ஒரு நுழைவாயில் ஆகும். அக்சலரோமீட்டர் மற்றும் கைரோஸ்கோப்பைத் தட்டுவதன் மூலம், பாரம்பரிய பாயிண்ட்-அண்ட்-கிளிக் என்பதைத் தாண்டிய தொடர்புகளை நாம் வடிவமைக்க முடியும், இது கேமிங், பயன்பாடுகள் மற்றும் ஆழ்ந்த கதைசொல்லலுக்கான சாத்தியங்களைத் திறக்கிறது.

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