ड्रेको ज्यामिति संपीड़न के साथ 3D डेटा ऑप्टिमाइज़ करना

1. खास जानकारी

3D ग्राफ़िक्स, गेमिंग, डिज़ाइन, और डेटा विज़ुअलाइज़ेशन जैसे कई ऐप्लिकेशन का अहम हिस्सा हैं. ग्राफ़िक्स प्रोसेसर और कॉन्टेंट बनाने के टूल में लगातार सुधार हो रहा है. इसलिए, बड़े और ज़्यादा जटिल 3D मॉडल का इस्तेमाल आम हो जाएगा. इससे इमर्सिव वर्चुअल रिएलिटी (वीआर) और ऑगमेंटेड रिएलिटी (एआर) में नए ऐप्लिकेशन बनाने में मदद मिलेगी. मॉडल की जटिलता बढ़ने की वजह से, स्टोरेज और बैंडविथ की ज़रूरतें भी 3D डेटा के साथ बढ़ती जाती हैं.

ड्रेको की मदद से, 3D ग्राफ़िक का इस्तेमाल करने वाले ऐप्लिकेशन का साइज़ काफ़ी कम किया जा सकता है. साथ ही, विज़ुअल फ़िडेलिटी (इमेज की क्वालिटी) पर भी कोई असर नहीं पड़ता. उपयोगकर्ताओं के लिए इसका मतलब है कि अब ऐप्लिकेशन को तेज़ी से डाउनलोड किया जा सकता है. साथ ही, ब्राउज़र में 3D ग्राफ़िक तेज़ी से लोड हो सकते हैं. इसके अलावा, वीआर और एआर सीन को अब बैंडविड्थ के एक छोटे से हिस्से के साथ ट्रांसमिट किया जा सकता है. साथ ही, इन्हें तेज़ी से रेंडर किया जा सकता है और ये शानदार दिखते हैं.

Draco क्या है?

ड्रेको, 3D ज्योमेट्रिक मेश और पॉइंट क्लाउड को कंप्रेस और डिकंप्रेस करने के लिए एक लाइब्रेरी है. इसका मकसद, 3D ग्राफ़िक को सेव करने और ट्रांसफ़र करने की प्रोसेस को बेहतर बनाना है.

Draco को कंप्रेस करने की बेहतर क्षमता और तेज़ी से काम करने के लिए डिज़ाइन किया गया है. यह कोड, पॉइंट, कनेक्टिविटी की जानकारी, टेक्सचर कोऑर्डिनेट, रंग की जानकारी, सामान्य जानकारी, और ज्यामिति से जुड़े किसी भी अन्य सामान्य एट्रिब्यूट को कंप्रेस करने की सुविधा देता है. Draco को C++ सोर्स कोड के तौर पर रिलीज़ किया गया है. इसका इस्तेमाल 3D ग्राफ़िक को कंप्रेस करने के साथ-साथ, एन्कोड किए गए डेटा के लिए C++ और JavaScript डिकोडर के तौर पर किया जा सकता है.

आपको क्या सीखने को मिलेगा

3D मॉडल को कंप्रेस करने के लिए, ड्रेको का इस्तेमाल कैसे करें
अलग-अलग कंप्रेसर मॉडल का इस्तेमाल कैसे करें और उनसे मॉडल की क्वालिटी और साइज़ पर क्या असर पड़ता है
वेब पर 3D मॉडल कैसे देखें

आपको किन चीज़ों की ज़रूरत होगी

Chrome का नया वर्शन
सैंपल कोड
टेक्स्ट एडिटर
Python
cmake

2. सेट अप करना

इस कमांड लाइन का इस्तेमाल करके, Github रिपॉज़िटरी को क्लोन करें:

git clone https://github.com/google/draco

Draco की रूट डायरेक्ट्री पर जाएं.

cd draco

3. एन्कोडर बनाना

Draco एन्कोडिंग और डिकोडिंग का इस्तेमाल शुरू करने के लिए, सबसे पहले ऐप्लिकेशन बनाते हैं.

एन्कोडर बनाना

उस डायरेक्ट्री से cmake चलाएं जहां आपको बिल्ड फ़ाइलें जनरेट करनी हैं. साथ ही, इसे अपनी Draco रिपॉज़िटरी का पाथ दें.

mkdir build

cd build

cmake ../

make

4. अपनी पहली 3D ऐसेट को कोड में बदलना

draco_encoder, OBJ या PLY फ़ाइलों को इनपुट के तौर पर पढ़ेगा और Draco-encoded फ़ाइलें आउटपुट करेगा. हमने टेस्टिंग के लिए, स्टैनफ़ोर्ड का बनी मेश शामिल किया है. बेसिक कमांड लाइन ऐसी दिखती है:

./draco_encoder -i ../testdata/bun_zipper.ply -o bunny.drc

अब आउटपुट फ़ाइल का साइज़ देखा जा सकता है. साथ ही, इसकी तुलना ओरिजनल .ply फ़ाइल से की जा सकती है. कंप्रेस की गई फ़ाइल का साइज़, ओरिजनल फ़ाइल के साइज़ से काफ़ी कम होना चाहिए.

ध्यान दें: कंप्रेस किए गए फ़ाइल का साइज़, कंप्रेस करने के विकल्पों के आधार पर अलग-अलग हो सकता है.

5. ब्राउज़र में किसी Draco फ़ाइल को डिकोड करना

इस समय, हम ड्रेको फ़ाइलों को डिकोड करने के लिए, बुनियादी वेब पेज से शुरुआत करेंगे. हम यहां दिए गए कोड सेक्शन को कॉपी करके, टेक्स्ट एडिटर में चिपकाएंगे.

बुनियादी एचटीएमएल फ़ाइल से शुरू करें.

<!DOCTYPE html>
<html>
<head>
  <title>Codelab - Draco Decoder</title>

नीचे दिया गया कोड स्निपेट, Draco WASM डिकोडर को लोड करेगा.

  <script src="https://www.gstatic.com/draco/versioned/decoders/1.4.1/draco_wasm_wrapper.js">
    // It is recommended to always pull your Draco JavaScript and WASM decoders
    // from the above URL. Users will benefit from having the Draco decoder in
    // cache as more sites start using the static URL.
  </script>

इसके बाद, यह फ़ंक्शन जोड़ें. इससे Draco डिकोडर मॉड्यूल बनेगा. डिकोडर मॉड्यूल को एसिंक्रोनस तरीके से बनाया जाता है. इसलिए, मॉड्यूल का इस्तेमाल करने से पहले, आपको कॉलबैक के कॉल होने का इंतज़ार करना होगा.

  <script>
    'use strict';

    // The global Draco decoder module.
    let decoderModule = null;

    // Creates the Draco decoder module.
    function createDracoDecoderModule() {
      let dracoDecoderType = {};

      // Callback when the Draco decoder module is fully instantiated. The
      // module parameter is the created Draco decoder module.
      dracoDecoderType['onModuleLoaded'] = function(module) {
        decoderModule = module;

        // Download the Draco encoded file and decode.
        downloadEncodedMesh('bunny.drc');
      };
      DracoDecoderModule(dracoDecoderType);
    }

Draco एन्कोड किए गए मेश को डिकोड करने के लिए, फ़ंक्शन जोड़ें.

    // Decode an encoded Draco mesh. byteArray is the encoded mesh as
    // an Uint8Array.
    function decodeMesh(byteArray) {
      // Create the Draco decoder.
      const decoder = new decoderModule.Decoder();

      // Create a buffer to hold the encoded data.
      const buffer = new decoderModule.DecoderBuffer();
      buffer.Init(byteArray, byteArray.length);

      // Decode the encoded geometry.
      let outputGeometry = new decoderModule.Mesh();
      let decodingStatus = decoder.DecodeBufferToMesh(buffer, outputGeometry);

      alert('Num points = ' + outputGeometry.num_points());

      // You must explicitly delete objects created from the DracoModule
      // or Decoder.
      decoderModule.destroy(outputGeometry);
      decoderModule.destroy(decoder);
      decoderModule.destroy(buffer);
    }

अब हमारे पास Draco डिकोड फ़ंक्शन है. इसलिए, Draco एन्कोड किए गए मेश को डाउनलोड करने के लिए एक फ़ंक्शन जोड़ें. 'downloadEncodedMesh' फ़ंक्शन, लोड की जाने वाली Draco फ़ाइल के लिए एक पैरामीटर स्वीकार करता है. इस मामले में, यह पिछली स्टेज से ‘bunny.drc' होगा.

    // Download and decode the Draco encoded geometry.
    function downloadEncodedMesh(filename) {
      // Download the encoded file.
      const xhr = new XMLHttpRequest();
      xhr.open("GET", filename, true);
      xhr.responseType = "arraybuffer";
      xhr.onload = function(event) {
        const arrayBuffer = xhr.response;
        if (arrayBuffer) {
          const byteArray = new Uint8Array(arrayBuffer);
          decodeMesh(byteArray);
        }
      };
      xhr.send(null);
    }

ड्रेको डिकोडर मॉड्यूल बनाने के लिए, ‘createDracoDecoderModule' फ़ंक्शन को कॉल करें. यह ‘downloadEncodedMesh' फ़ंक्शन को कॉल करेगा, ताकि एन्कोड की गई ड्रेको फ़ाइल डाउनलोड की जा सके. यह ‘decodeMesh' फ़ंक्शन को कॉल करेगा, ताकि एन्कोड किए गए ड्रेको मेश को डिकोड किया जा सके.

    // Create the Draco decoder module.
    createDracoDecoderModule();
  </script>
</head>
<body>
</body>
</html>

इस फ़ाइल को "DracoDecode.html" के तौर पर सेव करें
Python वेबसर्वर शुरू करें. टर्मिनल टाइप में:

python -m SimpleHTTPServer

Chrome में localhost:8000/DracoDecode.html खोलें. इसमें एक सूचना वाला मैसेज बॉक्स दिखना चाहिए. इसमें मॉडल से डिकोड किए गए पॉइंट की संख्या (Num points = 34834) दिखनी चाहिए.

6. three.js की मदद से Draco फ़ाइल रेंडर करना

अब हमें पता है कि WASM का इस्तेमाल करके, Draco फ़ाइल को कैसे डिकोड किया जाता है. इसलिए, हम एक लोकप्रिय वेब 3D व्यूअर - three.js का इस्तेमाल करेंगे. पिछले उदाहरण की तरह, हम यहां भी टेक्स्ट एडिटर में, कोड के इन सेक्शन को कॉपी करके चिपकाएंगे.

बेसिक एचटीएमएल फ़ाइल से शुरुआत करना

<!DOCTYPE html>
<html>
<head>
  <title>Codelab - Draco three.js Render</title>

three.js और Draco three.js लोडर को लोड करने के लिए कोड जोड़ें.

  <script type="importmap">
          {
            "imports": {
              "three": "https://unpkg.com/three@v0.162.0/build/three.module.js",
              "three/addons/": "https://unpkg.com/three@v0.162.0/examples/jsm/"
            }
          }
  </script>

Draco डिकोडर का पाथ सेट अप करें.

  <script type="module">
    // import three.js and DRACOLoader.
    import * as THREE from 'three';
    import {DRACOLoader} from 'three/addons/loaders/DRACOLoader.js'

    // three.js globals.
    var camera, scene, renderer;

    // Create the Draco loader.
    var dracoLoader = new DRACOLoader();

    // Specify path to a folder containing WASM/JS decoding libraries.
    // It is recommended to always pull your Draco JavaScript and WASM decoders
    // from the below URL. Users will benefit from having the Draco decoder in
    // cache as more sites start using the static URL.
    dracoLoader.setDecoderPath('https://www.gstatic.com/draco/versioned/decoders/1.4.1/');

three.js रेंडरिंग कोड जोड़ें.

    function initThreejs() {
      camera = new THREE.PerspectiveCamera( 35, window.innerWidth / window.innerHeight, 0.1, 15 );
      camera.position.set( 3, 0.25, 3 );

      scene = new THREE.Scene();
      scene.background = new THREE.Color( 0x443333 );
      scene.fog = new THREE.Fog( 0x443333, 1, 4 );

      // Ground
      var plane = new THREE.Mesh(
        new THREE.PlaneGeometry( 8, 8 ),
        new THREE.MeshPhongMaterial( { color: 0x999999, specular: 0x101010 } )
      );
      plane.rotation.x = - Math.PI / 2;
      plane.position.y = 0.03;
      plane.receiveShadow = true;
      scene.add(plane);

      // Lights
      var light = new THREE.HemisphereLight( 0x443333, 0x111122 );
      scene.add( light );

      var light = new THREE.SpotLight();
      light.angle = Math.PI / 16;
      light.penumbra = 0.5;
      light.castShadow = true;
      light.position.set( - 1, 1, 1 );
      scene.add( light );

      // renderer
      renderer = new THREE.WebGLRenderer( { antialias: true } );
      renderer.setPixelRatio( window.devicePixelRatio );
      renderer.setSize( window.innerWidth, window.innerHeight );
      renderer.shadowMap.enabled = true;

      const container = document.getElementById('container');
      container.appendChild( renderer.domElement );

      window.addEventListener( 'resize', onWindowResize, false );
    }

    function onWindowResize() {
      camera.aspect = window.innerWidth / window.innerHeight;
      camera.updateProjectionMatrix();

      renderer.setSize( window.innerWidth, window.innerHeight );
    }

    function animate() {
      render();
      requestAnimationFrame( animate );
    }

    function render() {
      var timer = Date.now() * 0.0003;

      camera.position.x = Math.sin( timer ) * 0.5;
      camera.position.z = Math.cos( timer ) * 0.5;
      camera.lookAt( new THREE.Vector3( 0, 0.1, 0 ) );

      renderer.render( scene, camera );
    }

Draco को लोड करने और डिकोड करने का कोड जोड़ें.

    function loadDracoMesh(dracoFile) {
      dracoLoader.load(dracoFile, function ( geometry ) {
        geometry.computeVertexNormals();

        var material = new THREE.MeshStandardMaterial( { vertexColors: THREE.VertexColors } );
        var mesh = new THREE.Mesh( geometry, material );
        mesh.castShadow = true;
        mesh.receiveShadow = true;
        scene.add( mesh );
      } );
    }

फ़ाइल लोड करने के लिए कोड जोड़ें.

    window.onload = function() {
      initThreejs();
      animate();
      loadDracoMesh('bunny.drc');
    }
  </script>
</head>
<body>
  <div id="container"></div>
</body>
</html>

इस फ़ाइल को "DracoRender.html" के तौर पर सेव करें
अगर ज़रूरी हो, तो वेबसर्वर को रीस्टार्ट करें.

python -m SimpleHTTPServer

Chrome में localhost:8000/DracoRender.html खोलें. अब आपको ब्राउज़र में रेंडर की गई Draco फ़ाइल दिखेगी.

7. अलग-अलग एन्कोडिंग पैरामीटर आज़माएं

Draco एनकोडर, कई अलग-अलग पैरामीटर की अनुमति देता है. इनसे कंप्रेस की गई फ़ाइल के साइज़ और कोड की विज़ुअल क्वालिटी पर असर पड़ता है. कमांड लाइन में यहां दिए गए कुछ कमांड चलाकर देखें और उनके नतीजे देखें.

नीचे दी गई कमांड, मॉडल की पोज़िशन को 12 बिट का इस्तेमाल करके क्वांटाइज़ करती है. डिफ़ॉल्ट रूप से, 11 बिट का इस्तेमाल किया जाता है.

./draco_encoder -i ../testdata/bun_zipper.ply -o out12.drc -qp 12

पिछले सेक्शन में, bunny.drc फ़ाइल की तुलना में out12.drc फ़ाइल के साइज़ पर ध्यान दें. क्वांटाइज़ेशन बिट का ज़्यादा इस्तेमाल करने से, कंप्रेस की गई फ़ाइल का साइज़ बढ़ सकता है.

3.नीचे दिए गए निर्देश से, मॉडल की पोज़िशन को 6 बिट का इस्तेमाल करके क्वांटाइज़ किया जाता है.

./draco_encoder -i ../testdata/bun_zipper.ply -o out6.drc -qp 6

पिछले सेक्शन में, bunny.drc फ़ाइल की तुलना में out6.drc फ़ाइल के साइज़ पर ध्यान दें. क्वांटाइज़ेशन बिट का कम इस्तेमाल करने से, कंप्रेस की गई फ़ाइल का साइज़ कम किया जा सकता है.

नीचे दिए गए पैरामीटर, मॉडल के कंप्रेस करने के लेवल पर असर डालते हैं. cl फ़्लैग का इस्तेमाल करके, कंप्रेशन को 1 (सबसे कम कंप्रेशन रेशियो) से 10 (सबसे ज़्यादा) तक सेट किया जा सकता है.

./draco_encoder -i ../testdata/bun_zipper.ply -o outLow.drc -cl 1

./draco_encoder -i ../testdata/bun_zipper.ply -o outHigh.drc -cl 10

Draco एनकोडर से मिले आउटपुट को नोट करें. यहां देखा जा सकता है कि बिट की बचत की तुलना में, सबसे ज़्यादा कंप्रेस करने के लिए ज़रूरी समय में समझौता किया गया है. आपके ऐप्लिकेशन के लिए सही पैरामीटर, एन्कोड करने के समय की ज़रूरत और साइज़ की ज़रूरी शर्तों पर निर्भर करेगा.

8. बधाई हो

आपने Draco मेश कंप्रेशन कोड लैब पूरा कर लिया है. साथ ही, Draco की कई मुख्य सुविधाओं के बारे में जान लिया है!

हमें उम्मीद है कि आपको यह समझ आ गया होगा कि Draco, आपकी 3D ऐसेट को छोटा और वेब पर ट्रांसफ़र करने के लिए ज़्यादा असरदार बनाने में कैसे मदद कर सकता है. Draco के बारे में ज़्यादा जानें और github से इसकी नई लाइब्रेरी पाएं.