1. সংক্ষিপ্ত বিবরণ
গেমিং, ডিজাইন এবং ডেটা ভিজ্যুয়ালাইজেশন সহ অনেক অ্যাপ্লিকেশনের একটি মৌলিক অংশ হল 3D গ্রাফিক্স। গ্রাফিক্স প্রসেসর এবং তৈরির সরঞ্জামগুলি উন্নত হওয়ার সাথে সাথে, বৃহত্তর এবং আরও জটিল 3D মডেলগুলি সাধারণ হয়ে উঠবে এবং নিমজ্জিত ভার্চুয়াল রিয়েলিটি (VR) এবং অগমেন্টেড রিয়েলিটি (AR) তে নতুন অ্যাপ্লিকেশনগুলিকে জ্বালানি দিতে সাহায্য করবে। এই বর্ধিত মডেল জটিলতার কারণে, স্টোরেজ এবং ব্যান্ডউইথের প্রয়োজনীয়তা 3D ডেটার বিস্ফোরণের সাথে তাল মিলিয়ে চলতে বাধ্য হয়।
ড্রাকোর সাহায্যে, 3D গ্রাফিক্স ব্যবহার করে অ্যাপ্লিকেশনগুলি দৃশ্যমানতার সাথে আপস না করে উল্লেখযোগ্যভাবে ছোট হতে পারে। ব্যবহারকারীদের জন্য এর অর্থ হল অ্যাপগুলি এখন দ্রুত ডাউনলোড করা যাবে, ব্রাউজারে 3D গ্রাফিক্স দ্রুত লোড করা যাবে এবং VR এবং AR দৃশ্যগুলি এখন ব্যান্ডউইথের একটি ভগ্নাংশের সাথে প্রেরণ করা যাবে, দ্রুত রেন্ডার করা যাবে এবং দুর্দান্ত দেখাবে।
ড্রাকো কি?
ড্রাকো হল 3D জ্যামিতিক জাল এবং পয়েন্ট ক্লাউড সংকুচিত এবং ডিকম্প্রেস করার জন্য একটি লাইব্রেরি। এটি 3D গ্রাফিক্সের স্টোরেজ এবং ট্রান্সমিশন উন্নত করার উদ্দেশ্যে তৈরি।
ড্রাকো কম্প্রেশন দক্ষতা এবং গতির জন্য ডিজাইন এবং তৈরি করা হয়েছিল। কোডটি কম্প্রেশন পয়েন্ট, সংযোগ তথ্য, টেক্সচার স্থানাঙ্ক, রঙের তথ্য, নরমাল এবং জ্যামিতির সাথে সম্পর্কিত অন্য যেকোনো জেনেরিক বৈশিষ্ট্য সমর্থন করে। ড্রাকো C++ সোর্স কোড হিসাবে প্রকাশিত হয়েছে যা 3D গ্রাফিক্স সংকুচিত করতে ব্যবহার করা যেতে পারে, সেইসাথে এনকোডেড ডেটার জন্য C++ এবং জাভাস্ক্রিপ্ট ডিকোডারও ব্যবহার করা যেতে পারে।
তুমি কি শিখবে
- একটি 3D মডেল সংকুচিত করার জন্য ড্রাকো কীভাবে ব্যবহার করবেন
- বিভিন্ন কম্প্রেশন মডেল কীভাবে ব্যবহার করবেন এবং কীভাবে তারা মডেলের মান এবং আকারকে প্রভাবিত করে
- ওয়েবে একটি 3D মডেল কীভাবে দেখবেন
তোমার যা লাগবে
2. সেট আপ করা
এই কমান্ড লাইন ব্যবহার করে Github সংগ্রহস্থলটি ক্লোন করুন:
git clone https://github.com/google/draco
ড্রাকো রুট ডিরেক্টরিতে নেভিগেট করুন।
cd draco
৩. এনকোডার তৈরি করুন
ড্রাকো এনকোডিং এবং ডিকোডিং দিয়ে শুরু করতে, প্রথমে অ্যাপ তৈরি করে শুরু করা যাক।
বিল্ড এনকোডার
- আপনি যে ডিরেক্টরি থেকে বিল্ড ফাইল তৈরি করতে চান সেখান থেকে cmake চালান এবং এটিকে আপনার Draco রিপোজিটরিতে পাঠান।
mkdir build
cd build
cmake ../
make
৪. আপনার প্রথম 3D সম্পদ এনকোড করুন
draco_encoder ইনপুট হিসেবে OBJ অথবা PLY ফাইল পড়বে এবং Draco-এনকোডেড ফাইল আউটপুট করবে। আমরা পরীক্ষার জন্য Stanford's Bunny mesh অন্তর্ভুক্ত করেছি। মৌলিক কমান্ড লাইনটি দেখতে এরকম:
./draco_encoder -i ../testdata/bun_zipper.ply -o bunny.drc
এখন আপনি আউটপুট ফাইলের আকার দেখতে পারেন এবং মূল .ply ফাইলের সাথে তুলনা করতে পারেন। সংকুচিত ফাইলটি মূল ফাইলের আকারের চেয়ে অনেক ছোট হওয়া উচিত।
দ্রষ্টব্য: সংকোচনের আকার সংকোচনের বিকল্পের উপর ভিত্তি করে পরিবর্তিত হতে পারে।
৫. ব্রাউজারে একটি ড্রাকো ফাইল ডিকোড করুন
এই মুহুর্তে আমরা ড্রাকো ফাইলগুলি ডিকোড করার জন্য একটি মৌলিক ওয়েব পৃষ্ঠা দিয়ে শুরু করব। আমরা নিম্নলিখিত কোড বিভাগগুলি টেক্সট এডিটরে কপি এবং পেস্ট করে শুরু করব।
- বেসিক HTML ফাইল দিয়ে শুরু করুন।
<!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);
}
- একটি ড্রাকো এনকোডেড মেশ ডিকোড করার জন্য ফাংশনটি যোগ করুন।
// 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' ফাংশনটি কল করে Draco ডিকোডার মডিউল তৈরি করুন, যা এনকোডেড Draco ফাইলটি ডাউনলোড করতে 'downloadEncodedMesh' ফাংশনটি কল করবে, যা এনকোডেড Draco মেশটি ডিকোড করতে 'decodeMesh' ফাংশনটি কল করবে।
// Create the Draco decoder module.
createDracoDecoderModule();
</script>
</head>
<body>
</body>
</html>
- এই ফাইলটি "DracoDecode.html" হিসেবে সংরক্ষণ করুন।
- পাইথন ওয়েব সার্ভার শুরু করুন। টার্মিনালে টাইপ করুন:
python -m SimpleHTTPServer
- Chrome-এ localhost:8000/DracoDecode.html খুলুন। এটি মডেল থেকে ডিকোড করা পয়েন্টের সংখ্যা (পয়েন্ট সংখ্যা = 34834) সহ একটি সতর্কতা বার্তা বাক্স প্রদর্শন করবে।
৬. three.js সহ একটি Draco ফাইল রেন্ডার করুন।
এখন যেহেতু আমরা WASM ব্যবহার করে একটি Draco ফাইল ডিকোড করতে জানি, আমরা একটি জনপ্রিয় ওয়েব 3D ভিউয়ার - three.js ব্যবহার করব। আগের উদাহরণের মতো আমরা নিম্নলিখিত কোড বিভাগগুলি টেক্সট এডিটরে কপি এবং পেস্ট করে শুরু করব।
- বেসিক HTML ফাইল দিয়ে শুরু করুন
<!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>
- ড্রাকো ডিকোডার পাথ সেটআপ করুন।
<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 );
}
- ড্রাকো লোডিং এবং ডিকোড কোড যোগ করুন।
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 ফাইলটি ব্রাউজারে রেন্ডার করা দেখতে পাবেন।
৭. বিভিন্ন এনকোডিং প্যারামিটার চেষ্টা করুন
ড্রাকো এনকোডারটি অনেকগুলি ভিন্ন ভিন্ন প্যারামিটারের অনুমতি দেয় যা সংকুচিত ফাইলের আকার এবং কোডের ভিজ্যুয়াল মানের উপর প্রভাব ফেলে। কমান্ড লাইনে পরবর্তী কয়েকটি কমান্ড চালানোর চেষ্টা করুন এবং ফলাফলগুলি দেখুন।
- নিম্নলিখিত কমান্ডটি ১২ (ডিফল্ট ১১) বিট ব্যবহার করে মডেলের অবস্থান পরিমাপ করে।
./draco_encoder -i ../testdata/bun_zipper.ply -o out12.drc -qp 12
- আগের বিভাগে bunny.drc ফাইলের তুলনায় out12.drc এর আকার লক্ষ্য করুন। বেশি কোয়ান্টাইজেশন বিট ব্যবহার করলে সংকুচিত ফাইলের আকার বাড়ানো যেতে পারে।
৩. নিম্নলিখিত কমান্ডটি ৬ বিট ব্যবহার করে মডেলের অবস্থান পরিমাপ করে।
./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
ড্রাকো এনকোডার থেকে আউটপুটটি লক্ষ্য করুন। আপনি দেখতে পাচ্ছেন যে বিটগুলিতে সাশ্রয়ের তুলনায় সর্বোচ্চ সংকোচনের স্তরে সংকোচনের জন্য প্রয়োজনীয় সময়ের মধ্যে একটি ট্রেডঅফ রয়েছে। আপনার অ্যাপ্লিকেশনের জন্য সঠিক প্যারামিটার এনকোডের সময় সময় এবং আকারের প্রয়োজনীয়তার উপর নির্ভর করবে।
৮. অভিনন্দন
তুমি ড্রাকোর মেশ কম্প্রেশন কোড ল্যাব শেষ করেছ এবং ড্রাকোর অনেক মূল বৈশিষ্ট্য সফলভাবে অন্বেষণ করেছ!
আশা করি এটা আপনার কাছে স্পষ্ট হয়ে গেছে যে ড্রাকো কীভাবে আপনার 3D সম্পদগুলিকে ছোট করে এবং ওয়েবে প্রেরণের জন্য আরও দক্ষ করে তুলতে পারে। আপনি ড্রাকো সম্পর্কে আরও জানতে পারেন এবং গিটহাব থেকে সর্বশেষ লাইব্রেরি পেতে পারেন।