इस पेज का अनुवाद Cloud Translation API से किया गया है.

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

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

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

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

ड्रैको क्या है?

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

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

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

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

आपको इनकी ज़रूरत होगी

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

2. सेट अप किया जा रहा है

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

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

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

cd draco

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

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

बिल्ड एन्कोडर

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

mkdir build

cd build

cmake ../

make

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

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

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

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

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

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

अभी हम 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>

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

  <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 के कोड में बदले गए मेश को डाउनलोड करने के लिए एक फ़ंक्शन जोड़ें. फ़ंक्शन ‘downloadEnकोडMish' 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' को कॉल करें ड्रैको डिकोडर मॉड्यूल बनाने के लिए फ़ंक्शन का इस्तेमाल करता है, जो ‘downloadEnकोडMash' को कॉल करेगा फ़ंक्शन का इस्तेमाल करके कोड में बदली गई Draco फ़ाइल डाउनलोड करें, जो ‘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. तीन.js के साथ ड्रैको फ़ाइल रेंडर करें

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

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

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

Three.js और Draco तीन.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/');

तीन.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 );
    }

ड्रैको लोडिंग और डिकोड कोड जोड़ें.

    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 आपकी 3D एसेट को छोटा और वेब पर शेयर करने में ज़्यादा कारगर कैसे बना सकता है. Draco के बारे में ज़्यादा जानने और नई लाइब्रेरी पाने के लिए, github पर जाएं.