১. সংক্ষিপ্ত বিবরণ
গেমিং, ডিজাইন এবং ডেটা ভিজ্যুয়ালাইজেশন সহ অনেক অ্যাপ্লিকেশনের একটি মৌলিক অংশ হলো 3D গ্রাফিক্স। গ্রাফিক্স প্রসেসর এবং তৈরির সরঞ্জামগুলির ক্রমাগত উন্নতির সাথে সাথে, আরও বড় এবং জটিল 3D মডেলগুলি সাধারণ হয়ে উঠবে এবং ইমারসিভ ভার্চুয়াল রিয়েলিটি (VR) ও অগমেন্টেড রিয়েলিটি (AR)-এর মতো নতুন অ্যাপ্লিকেশনগুলিকে চালিত করতে সাহায্য করবে। মডেলের এই বর্ধিত জটিলতার কারণে, 3D ডেটার বিপুল পরিমাণ বৃদ্ধির সাথে তাল মিলিয়ে স্টোরেজ এবং ব্যান্ডউইথের প্রয়োজনীয়তাও বাড়তে বাধ্য হচ্ছে।
ড্রাকোর সাহায্যে, ভিজ্যুয়াল কোয়ালিটির সাথে আপোস না করেই 3D গ্রাফিক্স ব্যবহারকারী অ্যাপ্লিকেশনগুলো উল্লেখযোগ্যভাবে ছোট হতে পারে। এর ফলে ব্যবহারকারীরা অ্যাপগুলো আরও দ্রুত ডাউনলোড করতে পারবেন, ব্রাউজারে 3D গ্রাফিক্স আরও দ্রুত লোড হবে এবং VR ও AR সিনগুলো এখন অনেক কম ব্যান্ডউইথে ট্রান্সমিট করা যাবে, দ্রুত রেন্ডার হবে ও দেখতে চমৎকার লাগবে।
ড্রাকো কী?
ড্রাকো হলো ত্রিমাত্রিক জ্যামিতিক মেশ এবং পয়েন্ট ক্লাউড কম্প্রেস ও ডিকম্প্রেস করার একটি লাইব্রেরি। এর উদ্দেশ্য হলো ত্রিমাত্রিক গ্রাফিক্সের সংরক্ষণ ও স্থানান্তর উন্নত করা।
ড্রাকোকে কম্প্রেশন দক্ষতা এবং গতির জন্য ডিজাইন ও তৈরি করা হয়েছে। এই কোডটি পয়েন্ট, কানেক্টিভিটি তথ্য, টেক্সচার কোঅর্ডিনেট, রঙের তথ্য, নরমাল এবং জ্যামিতির সাথে সম্পর্কিত অন্য যেকোনো সাধারণ অ্যাট্রিবিউট কম্প্রেস করতে সমর্থন করে। ড্রাকো C++ সোর্স কোড হিসেবে প্রকাশিত হয়েছে, যা 3D গ্রাফিক্স কম্প্রেস করতে ব্যবহার করা যায়। এছাড়াও এনকোড করা ডেটার জন্য C++ এবং জাভাস্ক্রিপ্ট ডিকোডারও রয়েছে।
আপনি যা শিখবেন
- ড্রাকো ব্যবহার করে কীভাবে একটি 3D মডেল সংকুচিত করবেন
- কীভাবে বিভিন্ন কম্প্রেশন মডেল ব্যবহার করতে হয় এবং কীভাবে সেগুলি মডেলের গুণমান ও আকারকে প্রভাবিত করে
- ওয়েবে কীভাবে একটি 3D মডেল দেখবেন
আপনার যা যা লাগবে
২. প্রস্তুতি গ্রহণ
এই কমান্ড লাইন ব্যবহার করে গিটহাব রিপোজিটরিটি ক্লোন করুন:
git clone https://github.com/google/draco
ড্রাকো রুট ডিরেক্টরিতে যান।
cd draco
৩. এনকোডারটি তৈরি করুন।
ড্রাকো এনকোডিং এবং ডিকোডিং শুরু করার জন্য, চলুন প্রথমে অ্যাপগুলো তৈরি করা দিয়ে শুরু করি।
এনকোডার তৈরি করুন
- যে ডিরেক্টরিতে আপনি বিল্ড ফাইল তৈরি করতে চান, সেখান থেকে cmake চালান এবং এটিকে আপনার Draco রিপোজিটরির পাথটি দিন।
mkdir build
cd build
cmake ../
make
৪. আপনার প্রথম 3D অ্যাসেটটি এনকোড করুন
draco_encoder ইনপুট হিসেবে OBJ বা PLY ফাইল গ্রহণ করবে এবং আউটপুট হিসেবে ড্রাকো-এনকোডেড ফাইল প্রদান করবে। পরীক্ষার জন্য আমরা স্ট্যানফোর্ডের বানি মেশটি অন্তর্ভুক্ত করেছি। এর বেসিক কমান্ড লাইনটি দেখতে এইরকম:
./draco_encoder -i ../testdata/bun_zipper.ply -o bunny.drc
এখন আপনি আউটপুট ফাইলের আকার দেখে মূল .ply ফাইলের সাথে তুলনা করতে পারেন। সংকুচিত ফাইলটি মূল ফাইলের আকারের চেয়ে অনেক ছোট হওয়া উচিত।
দ্রষ্টব্য: কম্প্রেশন অপশনের উপর ভিত্তি করে সংকুচিত আকার ভিন্ন হতে পারে।
৫. ব্রাউজারে একটি ড্রাকো ফাইল ডিকোড করুন
এই পর্যায়ে আমরা ড্রাকো ফাইল ডিকোড করার জন্য একটি সাধারণ ওয়েব পেজ দিয়ে শুরু করব। আমরা নিচের কোড অংশগুলো টেক্সট এডিটরে কপি ও পেস্ট করার মাধ্যমে কাজ শুরু করব।
- একটি সাধারণ HTML ফাইল দিয়ে শুরু করুন।
<!DOCTYPE html>
<html>
<head>
<title>Codelab - Draco Decoder</title>
- নিম্নলিখিত কোড স্নিপেটটি ড্রাকো 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);
}
- এখন যেহেতু আমাদের ড্রাকো ডিকোড ফাংশনটি তৈরি আছে, তাই একটি ড্রাকো এনকোডেড মেশ ডাউনলোড করার জন্য একটি ফাংশন যোগ করুন। 'downloadEncodedMesh' ফাংশনটি লোড করার জন্য ড্রাকো ফাইলের একটি প্যারামিটার গ্রহণ করে। এক্ষেত্রে, এটি হবে পূর্ববর্তী ধাপের '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 -m SimpleHTTPServer
- ক্রোমে localhost:8000/DracoDecode.html খুলুন। এটি একটি অ্যালার্ট মেসেজ বক্স প্রদর্শন করবে, যেখানে মডেল থেকে ডিকোড করা পয়েন্টের সংখ্যা (পয়েন্টের সংখ্যা = 34834) দেখানো হবে।
৬. three.js ব্যবহার করে একটি Draco ফাইল রেন্ডার করুন।
এখন যেহেতু আমরা WASM ব্যবহার করে একটি Draco ফাইল ডিকোড করার পদ্ধতি জানি, আমরা একটি জনপ্রিয় ওয়েব ৩ডি ভিউয়ার - 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>
- ড্রাকো ডিকোডার পাথ সেটআপ করুন।
<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 ফ্ল্যাগ ব্যবহার করে, আপনি আপনার কম্প্রেশন ১ (সর্বনিম্ন কম্প্রেশন রেশিও) থেকে ১০ (সর্বোচ্চ) পর্যন্ত টিউন করতে পারেন।
./draco_encoder -i ../testdata/bun_zipper.ply -o outLow.drc -cl 1
./draco_encoder -i ../testdata/bun_zipper.ply -o outHigh.drc -cl 10
ড্রাকো এনকোডারের আউটপুটটি লক্ষ্য করুন। আপনি দেখতে পাবেন যে, সর্বোচ্চ কম্প্রেশন লেভেলে কম্প্রেস করার জন্য প্রয়োজনীয় সময়ের তুলনায় বিট সাশ্রয়ের ক্ষেত্রে একটি আপেক্ষিক সুবিধা-অসুবিধা রয়েছে। আপনার অ্যাপ্লিকেশনের জন্য সঠিক প্যারামিটারটি এনকোড করার সময়কার টাইমিং এবং আকারের প্রয়োজনীয়তার উপর নির্ভর করবে।
৮. অভিনন্দন
আপনি ড্রাকো মেশ কম্প্রেশন কোড ল্যাবটি সম্পন্ন করেছেন এবং সফলভাবে ড্রাকোর অনেক গুরুত্বপূর্ণ বৈশিষ্ট্য সম্পর্কে জেনেছেন!
আশা করি, আপনার কাছে এটা স্পষ্ট যে ড্রাকো কীভাবে আপনার ৩ডি অ্যাসেটগুলোকে আরও ছোট এবং ওয়েবের মাধ্যমে আরও কার্যকরভাবে প্রেরণ করতে সাহায্য করতে পারে। আপনি গিটহাব থেকে ড্রাকো সম্পর্কে আরও জানতে এবং এর সর্বশেষ লাইব্রেরিটি পেতে পারেন।