1. ওভারভিউ
3D গ্রাফিক্স গেমিং, ডিজাইন এবং ডেটা ভিজ্যুয়ালাইজেশন সহ অনেক অ্যাপ্লিকেশনের একটি মৌলিক অংশ। গ্রাফিক্স প্রসেসর এবং তৈরির সরঞ্জামগুলির উন্নতি অব্যাহত থাকায়, বড় এবং আরও জটিল 3D মডেলগুলি সাধারণ হয়ে উঠবে এবং ইমারসিভ ভার্চুয়াল রিয়েলিটি (ভিআর) এবং অগমেন্টেড রিয়েলিটি (এআর) এ নতুন অ্যাপ্লিকেশনগুলিকে জ্বালানীতে সহায়তা করবে৷ এই বর্ধিত মডেল জটিলতার কারণে, স্টোরেজ এবং ব্যান্ডউইথের প্রয়োজনীয়তাগুলি 3D ডেটার বিস্ফোরণের সাথে তাল মিলিয়ে চলতে বাধ্য হয়।
ড্রাকোর সাথে, 3D গ্রাফিক্স ব্যবহার করে অ্যাপ্লিকেশনগুলি দৃশ্যমান বিশ্বস্ততার সাথে আপস না করে উল্লেখযোগ্যভাবে ছোট হতে পারে। ব্যবহারকারীদের জন্য এর অর্থ হল অ্যাপগুলি এখন দ্রুত ডাউনলোড করা যায়, ব্রাউজারে 3D গ্রাফিক্স দ্রুত লোড হতে পারে এবং VR এবং AR দৃশ্যগুলি এখন ব্যান্ডউইথের একটি ভগ্নাংশের সাথে প্রেরণ করা যেতে পারে, দ্রুত রেন্ডার করা যায় এবং চমত্কার দেখায়।
ড্রাকো কি?
Draco হল 3D জ্যামিতিক মেশ এবং পয়েন্ট ক্লাউডগুলিকে সংকুচিত এবং ডিকম্প্রেস করার জন্য একটি লাইব্রেরি। এটি 3D গ্রাফিক্সের স্টোরেজ এবং ট্রান্সমিশন উন্নত করার উদ্দেশ্যে করা হয়েছে।
Draco কম্প্রেশন দক্ষতা এবং গতির জন্য ডিজাইন এবং নির্মিত হয়েছিল। কোডটি কম্প্রেসিং পয়েন্ট, কানেক্টিভিটি তথ্য, টেক্সচার কোঅর্ডিনেট, কালার ইনফরমেশন, নরমাল এবং জ্যামিতির সাথে যুক্ত অন্য কোন জেনেরিক অ্যাট্রিবিউট সমর্থন করে। Draco C++ সোর্স কোড হিসাবে প্রকাশ করা হয়েছে যা 3D গ্রাফিক্সের পাশাপাশি C++ এবং জাভাস্ক্রিপ্ট ডিকোডারকে এনকোড করা ডেটার জন্য সংকুচিত করতে ব্যবহার করা যেতে পারে।
যা শিখবেন
- একটি 3D মডেল সংকুচিত করতে কিভাবে Draco ব্যবহার করবেন
- কীভাবে বিভিন্ন কম্প্রেশন মডেল ব্যবহার করবেন এবং কীভাবে তারা মডেলের গুণমান এবং আকারকে প্রভাবিত করে
- ওয়েবে একটি 3D মডেল কিভাবে দেখতে হয়
আপনি কি প্রয়োজন হবে
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-এনকোডেড ফাইলগুলিকে আউটপুট করবে। আমরা পরীক্ষার জন্য স্ট্যানফোর্ডের বানি জাল অন্তর্ভুক্ত করেছি। মৌলিক কমান্ড লাইন এই মত দেখায়:
./draco_encoder -i ../testdata/bun_zipper.ply -o bunny.drc
আপনি এখন আউটপুট ফাইলের আকার দেখতে পারেন এবং মূল .ply ফাইলের সাথে তুলনা করতে পারেন। সংকুচিত ফাইলটি আসল ফাইলের আকারের চেয়ে অনেক ছোট হওয়া উচিত।
দ্রষ্টব্য: সংকুচিত আকার কম্প্রেশন বিকল্পের উপর ভিত্তি করে পরিবর্তিত হতে পারে।
5. ব্রাউজারে একটি Draco ফাইল ডিকোড করুন
এই মুহুর্তে আমরা Draco ফাইলগুলি ডিকোড করার জন্য একটি মৌলিক ওয়েব পৃষ্ঠা দিয়ে শুরু করব। আমরা পাঠ্য সম্পাদকে নিম্নলিখিত কোড বিভাগগুলি অনুলিপি এবং পেস্ট করে শুরু করব।
- মৌলিক 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);
}
- একটি 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 এনকোডেড মেশ ডাউনলোড করতে একটি ফাংশন যোগ করুন। 'ডাউনলোড এনকোডেডমেশ' ফাংশনটি লোড করার জন্য ড্রাকো ফাইলে একটি প্যারামিটার গ্রহণ করে। এক্ষেত্রে আগের স্টেজ থেকে '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);
}
- Draco ডিকোডার মডিউল তৈরি করতে 'createDracoDecoderModule' ফাংশনটি কল করুন, যা এনকোড করা 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) সহ একটি সতর্কতা বার্তা বাক্স প্রদর্শন করা উচিত।
6. 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>
- 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 );
}
- ড্রাকো লোডিং এবং ডিকোড কোড যোগ করুন।
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 খুলুন। আপনার এখন ব্রাউজারে রেন্ডার করা আপনার ড্রাকো ফাইলটি দেখতে হবে।
7. বিভিন্ন এনকোডিং পরামিতি চেষ্টা করুন
ড্রাকো এনকোডার অনেকগুলি বিভিন্ন প্যারামিটারের জন্য অনুমতি দেয় যা সংকুচিত ফাইলের আকার এবং কোডের ভিজ্যুয়াল গুণমানকে প্রভাবিত করে। কমান্ড লাইনে পরবর্তী কয়েকটি কমান্ড চালানোর চেষ্টা করুন এবং ফলাফলগুলি দেখুন।
- নিম্নলিখিত কমান্ডটি 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
ড্রাকো এনকোডার থেকে আউটপুট নোট করুন। আপনি দেখতে পারেন যে বিটগুলিতে সঞ্চয়ের তুলনায় সর্বোচ্চ কম্প্রেশন স্তরে সংকুচিত করার জন্য প্রয়োজনীয় সময়ের মধ্যে একটি ট্রেডঅফ রয়েছে। আপনার অ্যাপ্লিকেশনের জন্য সঠিক প্যারামিটারটি এনকোডের সময় সময় এবং আকারের প্রয়োজনীয়তার উপর নির্ভর করবে।
8. অভিনন্দন
আপনি Draco মেশ কম্প্রেশন কোড ল্যাব শেষ করেছেন এবং সফলভাবে Draco এর অনেক মূল বৈশিষ্ট্য অন্বেষণ করেছেন!
আশা করি এটি আপনার কাছে পরিষ্কার যে কিভাবে Draco আপনার 3D সম্পদগুলিকে ওয়েবে প্রেরণের জন্য আরও ছোট এবং আরও দক্ষ করে তুলতে সাহায্য করতে পারে৷ আপনি Draco সম্পর্কে আরও শিখতে পারেন এবং github থেকে সর্বশেষ লাইব্রেরি পেতে পারেন।