ভূমিকা
আমি আমার কিছু পরীক্ষা-নিরীক্ষার জন্য Three.js ব্যবহার করেছি এবং ব্রাউজারে 3D নিয়ে যাওয়ার মাথাব্যথা দূর করার জন্য এটি সত্যিই একটি দুর্দান্ত কাজ করে। এটির সাহায্যে আপনি ক্যামেরা, অবজেক্ট, লাইট, উপকরণ এবং আরও অনেক কিছু তৈরি করতে পারেন এবং আপনার কাছে রেন্ডারারের একটি পছন্দ রয়েছে, যার মানে আপনি এইচটিএমএল 5 এর ক্যানভাস, ওয়েবজিএল বা এসভিজি ব্যবহার করে আপনার দৃশ্যটি আঁকতে চান কিনা তা আপনি সিদ্ধান্ত নিতে পারেন। এবং যেহেতু এটি ওপেন সোর্স আপনি এমনকি প্রকল্পের সাথে জড়িত হতে পারেন। কিন্তু এই মুহুর্তে আমি এটির সাথে একটি ইঞ্জিন হিসাবে খেলে যা শিখেছি তার উপর ফোকাস করব এবং কিছু মৌলিক বিষয়ের মাধ্যমে আপনার সাথে কথা বলব।
Three.js-এর সমস্ত অসাধারণতার জন্য, এমন সময় থাকতে পারে যেখানে আপনি সংগ্রাম করতে পারেন। সাধারণত আপনাকে উদাহরণ, বিপরীত প্রকৌশল এবং (আমার ক্ষেত্রে অবশ্যই) নির্দিষ্ট কার্যকারিতা খুঁজে বের করতে এবং মাঝে মাঝে GitHub এর মাধ্যমে প্রশ্ন জিজ্ঞাসা করার জন্য বেশ বড় পরিমাণ সময় ব্যয় করতে হবে। আপনার যদি প্রশ্ন থাকে, যাইহোক, আমি খুঁজে পেয়েছি মিস্টার ডুব এবং অল্টারড কোয়ালিয়া অত্যন্ত সহায়ক!
1. বুনিয়াদি
আমি অনুমান করব যে আপনার অন্তত 3D-এর জ্ঞান এবং জাভাস্ক্রিপ্টের সাথে যুক্তিসঙ্গত দক্ষতা রয়েছে। আপনি যদি এটি না করেন তবে আপনি এই জিনিসটি নিয়ে চেষ্টা করার এবং খেলার আগে কিছুটা শেখার মূল্য হতে পারে, কারণ এটি কিছুটা বিভ্রান্তিকর হতে পারে।
আমাদের 3D বিশ্বে আমাদের নিম্নলিখিত কিছু থাকবে, যা আমি তৈরি করার প্রক্রিয়ার মাধ্যমে আপনাকে গাইড করব:
- একটি দৃশ্য
- একজন রেন্ডারার
- একটি ক্যামেরা
- একটি বা দুটি বস্তু (উপকরণ সহ)
আপনি অবশ্যই কিছু দুর্দান্ত জিনিস করতে পারেন, এবং আমার আশা আপনি এটি করতে যাবেন এবং আপনার ব্রাউজারে 3D নিয়ে পরীক্ষা শুরু করবেন।
2. সমর্থন
ব্রাউজারে সমর্থনের উপর শুধু একটি দ্রুত নোট। গুগলের ক্রোম ব্রাউজারটি আমার অভিজ্ঞতায়, রেন্ডারার সমর্থিত এবং অন্তর্নিহিত জাভাস্ক্রিপ্ট ইঞ্জিনের গতির পরিপ্রেক্ষিতে কাজ করার জন্য সেরা ব্রাউজার। ক্রোম ক্যানভাস, ওয়েবজিএল এবং এসভিজি সমর্থন করে এবং এটি অত্যন্ত দ্রুত। ফায়ারফক্স 4 সংস্করণের আবির্ভাবের সাথে একটি কাছাকাছি সেকেন্ড। এর জাভাস্ক্রিপ্ট ইঞ্জিনটি ক্রোমের তুলনায় একটি স্পর্শ ধীর বলে মনে হয়, কিন্তু আবার রেন্ডার প্রযুক্তির জন্য এটির সমর্থন দুর্দান্ত। Opera এবং Safari WebGL সমর্থন যোগ করার প্রক্রিয়াধীন, কিন্তু তাদের বর্তমান সংস্করণ শুধুমাত্র ক্যানভাস সমর্থন করে। ইন্টারনেট এক্সপ্লোরার (সংস্করণ 9+) শুধুমাত্র ক্যানভাস রেন্ডারিং সমর্থন করে, এবং আমি Microsoft এর WebGL ক্ষমতা যোগ করার পরিকল্পনার কিছু শুনিনি।
3. দৃশ্য সেট করুন
আমি অনুমান করব যে আপনি এমন একটি ব্রাউজার বেছে নিয়েছেন যা সমস্ত রেন্ডারিং প্রযুক্তি সমর্থন করে এবং আপনি ক্যানভাস বা WebGL এর সাথে রেন্ডার করতে চান, কারণ সেগুলি আরও আদর্শ পছন্দ। ক্যানভাস WebGL-এর তুলনায় আরও ব্যাপকভাবে সমর্থিত, কিন্তু এটা লক্ষণীয় যে WebGL আপনার গ্রাফিক্স কার্ডের GPU-তে চলে, যার মানে হল আপনার CPU অন্যান্য নন-রেন্ডারিং কাজগুলিতে মনোনিবেশ করতে পারে যেমন কোনো পদার্থবিদ্যা বা ব্যবহারকারীর ইন্টারঅ্যাকশন আপনি করার চেষ্টা করছেন।
আপনার নির্বাচিত রেন্ডারার নির্বিশেষে আপনার মনে রাখা উচিত যে জাভাস্ক্রিপ্টকে পারফরম্যান্সের জন্য অপ্টিমাইজ করতে হবে। 3D একটি ব্রাউজারের জন্য একটি হালকা কাজ নয় (এবং এটি দুর্দান্ত যে এটি এমনকি সম্ভব), তাই আপনার কোডে কোথায় কোন বাধা রয়েছে তা বোঝার জন্য সতর্ক থাকুন এবং আপনি যদি পারেন তবে সেগুলি সরিয়ে ফেলুন!
তাই বলেছে, এবং অনুমানে আপনি ডাউনলোড করেছেন এবং আপনার HTML ফাইলে three.js অন্তর্ভুক্ত করেছেন, আপনি কীভাবে একটি দৃশ্য সেট আপ করতে চান? এটার মত:
// set the scene size
var WIDTH = 400,
HEIGHT = 300;
// set some camera attributes
var VIEW_ANGLE = 45,
ASPECT = WIDTH / HEIGHT,
NEAR = 0.1,
FAR = 10000;
// get the DOM element to attach to
// - assume we've got jQuery to hand
var $container = $('#container');
// create a WebGL renderer, camera
// and a scene
var renderer = new THREE.WebGLRenderer();
var camera = new THREE.PerspectiveCamera(
VIEW_ANGLE,
ASPECT,
NEAR,
FAR );
var scene = new THREE.Scene();
// the camera starts at 0,0,0 so pull it back
camera.position.z = 300;
// start the renderer
renderer.setSize(WIDTH, HEIGHT);
// attach the render-supplied DOM element
$container.append(renderer.domElement);
খুব চতুর না, সত্যিই!
4. একটি জাল তৈরি
তাই আমাদের কাছে একটি দৃশ্য, একটি ক্যামেরা এবং একটি রেন্ডারার রয়েছে (আমি আমার নমুনা কোডে একটি WebGL বেছে নিয়েছি) কিন্তু আমাদের আসলে আঁকার কিছু নেই৷ Three.js আসলে কয়েকটি ভিন্ন স্ট্যান্ডার্ড ফাইল টাইপ লোড করার জন্য সমর্থনের সাথে আসে, যা আপনি যদি ব্লেন্ডার, মায়া, Cinema4D বা অন্য কিছু থেকে মডেল আউটপুট করেন তবে এটি দুর্দান্ত। জিনিসগুলি সহজ রাখতে (এটি সর্বোপরি শুরু করার বিষয়ে!) আমি আদিম সম্পর্কে কথা বলব। আদিম হল জ্যামিতিক জাল, তুলনামূলকভাবে মৌলিক যেমন গোলক, সমতল, কিউব এবং সিলিন্ডার। Three.js আপনাকে সহজেই এই ধরনের আদিম তৈরি করতে দেয়:
// set up the sphere vars
var radius = 50, segments = 16, rings = 16;
// create a new mesh with sphere geometry -
// we will cover the sphereMaterial next!
var sphere = new THREE.Mesh(
new THREE.SphereGeometry(radius,
segments,
rings),
sphereMaterial);
// add the sphere to the scene
scene.add(sphere);
সব ভাল, কিন্তু গোলক জন্য উপাদান সম্পর্কে কি? কোডটিতে আমরা একটি পরিবর্তনশীল গোলক উপাদান ব্যবহার করেছি কিন্তু আমরা এখনও এটি সংজ্ঞায়িত করিনি। প্রথমে আমাদের আরও বিশদে উপকরণ সম্পর্কে কথা বলতে হবে।
5. উপকরণ
নিঃসন্দেহে এটি Three.js-এর সবচেয়ে দরকারী অংশগুলির মধ্যে একটি। এটি আপনার জালগুলিতে প্রয়োগ করার জন্য বেশ কয়েকটি সাধারণ (এবং খুব সহজ) উপকরণ সরবরাহ করে:
- 'বেসিক' - যার মানে হল এটি 'আনলিট' রেন্ডার করে
- ল্যাম্বার্ট
- ফং
আরও আছে, কিন্তু আবার সরলতার স্বার্থে আমি আপনাকে নিজের জন্য সেগুলি আবিষ্কার করতে দেব। WebGL এর ক্ষেত্রে বিশেষ করে এই উপকরণগুলি জীবন রক্ষাকারী হতে পারে। কেন? ভাল কারণ WebGL-এ আপনাকে রেন্ডার করা সবকিছুর জন্য shaders লিখতে হবে। Shaders নিজেদের মধ্যে একটি বিশাল বিষয়, কিন্তু সংক্ষেপে তারা GLSL (OpenGL Shader Language) এ লেখা হয়, যা GPU কে বলে যে কোন কিছু কেমন হওয়া উচিত। এর মানে আপনাকে আলো, প্রতিফলন ইত্যাদির গণিত অনুকরণ করতে হবে। এটি খুব দ্রুত খুব জটিল হতে পারে। Three.js কে ধন্যবাদ যদি আপনি না চান তবে আপনাকে এটি করতে হবে না কারণ এটি আপনার জন্য এটিকে বিমূর্ত করে দেয়। আপনি যদি শেডার লিখতে চান তবে, আপনি এটিও একটি MeshShaderMaterial দিয়ে করতে পারেন, তাই এটি একটি নমনীয় সেটআপ।
আপাতত, তবে, গোলকটিতে একটি ল্যাম্বার্ট উপাদান প্রয়োগ করা যাক:
// create the sphere's material
var sphereMaterial = new THREE.MeshLambertMaterial(
{
// a gorgeous red.
color: 0xCC0000
});
এটি উল্লেখ করাও মূল্যবান যে অন্যান্য বৈশিষ্ট্য রয়েছে যা আপনি নির্দিষ্ট করতে পারেন যখন আপনি রঙের পাশাপাশি একটি উপাদান তৈরি করেন, যেমন মসৃণকরণ বা পরিবেশের মানচিত্র। আপনি উপকরণগুলিতে সেট করতে পারেন এমন বিভিন্ন বৈশিষ্ট্যের জন্য আপনার উইকি পৃষ্ঠাটি পরীক্ষা করা উচিত এবং প্রকৃতপক্ষে, ইঞ্জিন আপনার জন্য যে কোনো বস্তু সরবরাহ করে। এছাড়াও threejs.org সম্প্রতি উত্থিত হয়েছে, যা এপিআই-এর আরও আকর্ষণীয় দৃশ্য প্রদান করে।
6. লাইট!
আপনি যদি এই মুহূর্তে দৃশ্যটি রেন্ডার করতে চান তাহলে আপনি একটি লাল বৃত্ত দেখতে পাবেন। যদিও আমাদের কাছে একটি ল্যামবার্ট উপাদান প্রয়োগ করা হয়েছে সেখানে দৃশ্যে কোন আলো নেই তাই ডিফল্টরূপে Three.js একটি পূর্ণ পরিবেষ্টিত আলোতে ফিরে যাবে, যা সমতল রঙের সমান। আলোর একটি সাধারণ বিন্দু দিয়ে এটি ঠিক করা যাক:
// create a point light
var pointLight = new THREE.PointLight( 0xFFFFFF );
// set its position
pointLight.position.x = 10;
pointLight.position.y = 50;
pointLight.position.z = 130;
// add to the scene
scene.add(pointLight);
7. রেন্ডার
আমরা এখন আসলে সবকিছু রেন্ডার করার জন্য সেট আপ আছে, উল্লেখযোগ্যভাবে. কিন্তু আমাদের আসলে এগিয়ে যেতে হবে এবং এটি করতে হবে:
// draw!
renderer.render(scene, camera);
আপনি সম্ভবত একাধিকবার রেন্ডার করতে চাইছেন, যদিও, তাই যদি আপনি একটি লুপ করতে যাচ্ছেন তবে আপনাকে সত্যিই অনুরোধ অ্যানিমেশনফ্রেম ব্যবহার করা উচিত; এটি ব্রাউজারে অ্যানিমেশন পরিচালনার সবচেয়ে স্মার্ট উপায়। এটি এখনও সম্পূর্ণরূপে সমর্থিত নয়, তাই আমি সম্পূর্ণরূপে সুপারিশ করব যে আপনি পল আইরিশের শিমটি একবার দেখুন৷
8. সাধারণ বস্তুর বৈশিষ্ট্য
আপনি যদি Three.js-এর কোডটি দেখতে সময় নেন তাহলে আপনি Object3D থেকে অনেকগুলি বস্তু 'উত্তরাধিকারী' দেখতে পাবেন। এটি একটি বেস অবজেক্ট যা কিছু খুব দরকারী বৈশিষ্ট্য ধারণ করে, যেমন অবস্থান , ঘূর্ণন এবং স্কেল তথ্য। বিশেষ করে আমাদের গোলক হল একটি জাল যা অবজেক্ট3ডি থেকে উত্তরাধিকারসূত্রে প্রাপ্ত, যেখানে এটি নিজস্ব বৈশিষ্ট্য যোগ করে: জ্যামিতি এবং উপকরণ । আমি কেন এসব উল্লেখ করব? ভাল, এটা অসম্ভাব্য যে আপনি আপনার স্ক্রিনে একটি গোলক রাখতে চান যা কিছুই করে না, এবং এই বৈশিষ্ট্যগুলি তদন্তের যোগ্য কারণ তারা আপনাকে উড়তে থাকা জাল এবং উপকরণগুলির অন্তর্নিহিত বিবরণগুলি পরিচালনা করতে দেয়৷
// sphere geometry
sphere.geometry
// which contains the vertices and faces
sphere.geometry.vertices // an array
sphere.geometry.faces // also an array
// its position
sphere.position // has x, y and z properties
sphere.rotation // same
sphere.scale // ... same
9. ডার্টি লিটল সিক্রেটস
আমি শুধু Three.js-এর জন্য একটি দ্রুত গোটচা তুলে ধরতে চেয়েছিলাম, যা হল আপনি যদি পরিবর্তন করেন, উদাহরণস্বরূপ, একটি জালের শীর্ষবিন্দু, আপনি আপনার রেন্ডার লুপে লক্ষ্য করবেন যে কিছুই পরিবর্তন হয় না। কেন? ভাল কারণ Three.js (যতদূর আমি বলতে পারি) একটি অপ্টিমাইজেশন হিসাবে একটি জালের জন্য ডেটা ক্যাশে করে। আপনাকে আসলে যা করতে হবে তা হল Three.js-এ ফ্ল্যাগ করা যা কিছু পরিবর্তিত হয়েছে যাতে এটি যা প্রয়োজন তা পুনরায় গণনা করতে পারে। আপনি নিম্নলিখিতগুলির সাথে এটি করবেন:
// changes to the vertices
sphere.geometry.__dirtyVertices = true;
// changes to the normals
sphere.geometry.__dirtyNormals = true;
আবার আরো আছে, কিন্তু যে দুটি আমি খুঁজে পেয়েছি সবচেয়ে দরকারী. অপ্রয়োজনীয় গণনা এড়াতে আপনার স্পষ্টতই কেবল সেই জিনিসগুলিকে ফ্ল্যাগ করা উচিত যা পরিবর্তিত হয়েছে৷
উপসংহার
আচ্ছা আমি আশা করি আপনি Three.js-এর এই সংক্ষিপ্ত ভূমিকাটি সহায়ক পেয়েছেন। আসলে আপনার হাত নোংরা করা এবং কিছু চেষ্টা করার মতো কিছুই নেই এবং আমি এটিকে যথেষ্ট সুপারিশ করতে পারি না। ব্রাউজারে স্থানীয়ভাবে 3D চালানো অনেক মজার, এবং Three.js-এর মতো একটি ইঞ্জিন ব্যবহার করা আপনার জন্য অনেক মাথাব্যথা দূর করে এবং আপনাকে কিছু গুরুতরভাবে দুর্দান্ত জিনিস তৈরি করতে দেয়৷ আপনাকে কিছুটা সাহায্য করার জন্য আমি এই ল্যাব নিবন্ধে সোর্স কোডটি গুটিয়ে রেখেছি , যাতে আপনি এটি একটি রেফারেন্স হিসাবে ব্যবহার করতে পারেন। আপনি যদি এটি উপভোগ করেন তবে আমাকে টুইটারের মাধ্যমে জানান, হ্যালো বলা সবসময়ই ভালো!