यह मूल पोलिश लेख का एक एआई-जनित अनुवाद है और इसमें मामूली त्रुटियां हो सकती हैं।

Vue 3 और WebGL में एक इंटरैक्टिव 3D रूबिक्स क्यूब का निर्माण

ब्राउज़र में 3D ग्राफ़िक्स अब केवल तकनीकी जिज्ञासा नहीं रह गए हैं, बल्कि एक शक्तिशाली उपकरण बन गए हैं अत्यधिक इंटरैक्टिव अनुभव बनाने के लिए। जब हम वेब पर 3D की बात करते हैं, तो अक्सर सबसे पहले थ्री.जेएस (Three.js) लाइब्रेरी का ख्याल आता है। हालाँकि, इस पोस्ट में मैं एक वास्तुशिल्पीय दृष्टिकोण प्रस्तुत करना चाहूँगा, जिसमें इंटरैक्टिव 3D रूबिक्स क्यूब पूरी तरह से Vue 3 फ्रेमवर्क में बनाया गया है, जो बहुत हद्द तक देशी WebGL इंटरफ़ेस API और घूर्णन अंशों के सटीक स्टेट प्रबंधन पर निर्भर है।

आप मेरे नवीनतम ओपन-सोर्स प्रोजेक्ट – rubic-cube का पूरा अध्ययन मेरे सार्वजनिक Gitea उदाहरण पर कर सकते हैं। पढ़ने का आनंद लें!

वास्तुकला और चुनौतियाँ

रूबिक्स क्यूब जैसे लॉजिक गेम्स को लागू करते समय मुख्य समस्या स्पेस में क्यूब्स को केवल "ड्रा" करना नहीं है, बल्कि अलग-अलग एक्सस में उनके ঘূর্ণन को बिना किसी टकराव के प्रबंधित करना है।

Vue 3 क्यों?

Vue 3 की प्रतिक्रियाशील अवस्था का उपयोग (Composition API – ref, computed, watch के कारण) हमें खूबसूरती से क्यूब के लॉजिक और गणित (जो 27 छोटे क्यूब्स की अवस्था है, जिन्हें Cubies कहा जाता है) को चित्रकारी करने वाली परत (rendering layer) से अलग करने देता है, जो <canvas> पर फ्रेम डालती है। उपयोगकर्ता द्वारा किसी हिस्से को घुमाने के "इरादे" को समझने (जैसे, स्क्रीन पर उंगली खिसकाना) में Vue का प्रतिक्रियात्मक इंजन शानदार प्रदर्शन करता है।

रेंडरिंग लूप बनाम रिएक्टिविटी बोर्ड

एक सामान्य वेब 3D फ्लो में एक requestAnimationFrame लूप होता है, जो प्रति सेकंड 60 (या 120) बार दुनिया की गणना करता है और फिर से बनाता है। संपूर्ण प्रतिक्रियाशील Vue अवस्था को उसमें झोंकने से कमजोर डिवाइस (मोबाइल) पर प्रदर्शन बहुत खराब हो सकता है।

60 FPS बनाए रखने के लिए मेरा समाधान रिएक्टिविटी को सीमित करना था। क्यूब की व्यवस्था का प्रतिनिधित्व (data model) केवल विशेष कूट-चाल (algorithm moves) के दौरान ऑन डिमांड अपडेट किया जाता है, जबकि WebGL केवल पॉलीगॉन को सीधे एक साधारण लूप में स्पेस में डालता है, ट्रांसफॉर्मेशन मैट्रिक्स से पूछता है, और पेंटिंग (rendering) के दौरान Vue प्रॉक्सी को लगभग पूरी तरह से नकार देता है।

TIP

भारी रेंडरिंग प्रोजेक्शन संचालन के लिए Vue में सबसे अच्छी अनुकूलन रणनीति ट्रांसफॉर्मेशन मैट्रिक्स को बिना Reactivity के बोझ के कच्चे JS ऑब्जेक्ट्स के रूप में अलग करना है।

गणितीय मॉडल – क्वाटरनियंस (Quaternions) और यूलर कोण (Euler Angles)

मशहूर गिम्बल लॉक (Gimbal Lock) समस्या से बचने के लिए, हम अलग-अलग प्लेस के पूरे 3x3x3 मैट्रिक्स के घूमने को यूलर एंगल्स के बजाय क्वाटरनियंस का उपयोग करके लागू करते हैं। जब हम दाहिने फेस का "क्विक टर्न" करते हैं, तो CSS एनिमेशन इतना विश्वसनीय नहीं होता है कि उस पर निर्भर रहा जा सके।

घूर्णन (Rotation) केंद्र सापेक्ष पोजीशंस को मैप करके होता है:

// Vue में कॉलम रोटेशन एल्गोरिथ्म का एक काल्पनिक अंश
function rotateSlice(axis, index, direction) {
  state.isAnimating = true;
  const targetAngle = direction * (Math.PI / 2); // 90 डिग्री
  
  animateValue(0, targetAngle, 300, (currentAngle) => {
    // एक्टिव अंशों (cubies) के लिए रोटेशन मैट्रिक्स को अपडेट करना
    updateActiveCubiesMatrix(axis, currentAngle);
  }).then(() => {
    snapToGrid();
    state.isAnimating = false;
  });
}

इसके कारण, हम एकदम सुचारू, आइसोमेट्रिक प्रोजेक्शन वाले घूर्णन को बनाए रखते हुए ठीक हर 90 डिग्री पर क्यूब के अपनी कड़ी जगहों पर "स्नैप" होने का प्रभाव पाते हैं।

रिस्पॉन्सिवनेस और मोबाइल टच

एक रूबिक्स क्यूब में थ्री-डायमेंशनल खींचने (dragging) की जरूरत होती है - यहां हमारे पास कोई सपाट स्क्रॉलिंग (flat scrolling) नहीं है। यह <canvas> ऑब्जेक्ट पर नेटिव touchstart, touchmove घटनाओं (events) दर्ज करके हल किया गया था, जो ड्रैग डेल्टा वेक्टर्स का विश्लेषण करने की अनुमति देता है:

<template>
  <div class="cube-container">
    <canvas 
      ref="webglCanvas" 
      @touchstart="handleTouchStart"
      @touchmove="handleTouchMove"
    ></canvas>
  </div>
</template>

पूरी चीज टच स्क्रीन पर पूरी तरह से खेलने योग्य है और बहुत कम देरी (latency) के साथ काम करती है - लगभग एक देशी एप्लिकेशन जितनी अच्छी, जो आधुनिक वेब मानकों की एक अभूतपूर्व सफलता है।

इसे स्वयं परखें!

स्थानिक गणित के आधार पर ग्राफिक्स बनाने वाला तरीका, REST फॉर्म और क्वेरीज़ को एक साथ जोड़ने की तुलना में, एक इंजीनियर के दिमाग को बहुत अधिक विकसित करता है। यह हार्डवेयर ऑप्टिमाइज़ेशन की आँखें खोल देता है।

कोड को खुद डाउनलोड करने और उसे लोकेल रन करने के लिए मेरे डोमेन पर सार्वजनिक भंडार पर एक नज़र डालें: 👉 Gitea 7u.pl पर रुबिक क्यूब रिपॉजिटरी

इसे हल करें और अपना एल्गोरिदम पीआर (PR) समय दिखाएँ! 🚀