দৃশ্যের পিছনে যেকোনো CSS background-image মান আঁকে, একটি গ্রেডিয়েন্ট বা একটি ছবি, দৃশ্যের
ক্লিয়ার রং স্বচ্ছ করে ও ক্যানভাসকে স্টাইল করে।
CSS ব্যাকগ্রাউন্ড ছবির মান
যে স্টাইলটি প্রয়োগ করা হয়েছে
দৃশ্যের পিছনে দুটি রঙের মধ্যে একটি সরল গ্রেডিয়েন্ট আঁকে, দেওয়া দিকে, এর বরাবর শতাংশ হিসেবে স্টপগুলিসহ।
দুটি রং, দিক এবং দুটি স্টপ
যে স্টাইলটি প্রয়োগ করা হয়েছে
দৃশ্যের পিছনে দুটি রঙের মধ্যে একটি গোল গ্রেডিয়েন্ট আঁকে, position থেকে দেওয়া shape এ
ছড়িয়ে, কেন্দ্র থেকে শতাংশ হিসেবে স্টপগুলিসহ।
দুটি রং, কেন্দ্রের অবস্থান, দুটি স্টপ এবং আকৃতি
যে স্টাইলটি প্রয়োগ করা হয়েছে
দৃশ্যের পিছনে কয়েকটি রঙের মধ্য দিয়ে একটি সরল গ্রেডিয়েন্ট আঁকে, প্রতিটি তার নিজস্ব স্টপ
শতাংশে; colors ও stops একই দৈর্ঘ্যের হতে হবে, নাহলে বদলে একটি এরর অবজেক্ট
ফেরত আসে।
রংগুলি, তাদের স্টপ এবং দিক
যে স্টাইলটি প্রয়োগ করা হয়েছে, অথবা তালিকাগুলির দৈর্ঘ্য ভিন্ন হলে একটি ত্রুটি বার্তা
দৃশ্যের পিছনে কয়েকটি রঙের মধ্য দিয়ে একটি গোল গ্রেডিয়েন্ট আঁকে, প্রতিটি তার নিজস্ব স্টপ
শতাংশে; colors ও stops একই দৈর্ঘ্যের হতে হবে, নাহলে বদলে একটি এরর অবজেক্ট
ফেরত আসে।
রংগুলি, তাদের স্টপ, কেন্দ্রের অবস্থান এবং আকৃতি
যে স্টাইলটি প্রয়োগ করা হয়েছে, অথবা তালিকাগুলির দৈর্ঘ্য ভিন্ন হলে একটি ত্রুটি বার্তা
দৃশ্যের পিছনে একটি ছবি দেখায়, এটি কীভাবে পুনরাবৃত্ত হয়, স্কেল হয়, বসে ও স্ক্রল করে তার CSS ব্যাকগ্রাউন্ড অপশনসহ; দৃশ্যের ক্লিয়ার রং স্বচ্ছ হয়ে যায় যাতে ছবিটি দেখা যায়।
ছবির URL এবং পুনরাবৃত্তি, আকার, অবস্থান, অ্যাটাচমেন্ট, অরিজিন ও ক্লিপ অপশন
যে স্টাইলটি প্রয়োগ করা হয়েছে
bitbybit.babylon.scene.canvasBackgroundImage({ imageUrl: "https://example.com/backdrop.jpg", repeat: Bit.Inputs.Base.backgroundRepeatEnum.noRepeat, size: Bit.Inputs.Base.backgroundSizeEnum.cover, position: Bit.Inputs.Base.gradientPositionEnum.center, attachment: Bit.Inputs.Base.backgroundAttachmentEnum.scroll, origin: Bit.Inputs.Base.backgroundOriginClipEnum.paddingBox, clip: Bit.Inputs.Base.backgroundOriginClipEnum.borderBox });
দৃশ্যের ব্যাকগ্রাউন্ড একটি সাধারণ রং দিয়ে ভরে দেয় এবং আগে সেট করা যেকোনো ক্যানভাস ব্যাকগ্রাউন্ড ছবি বা গ্রেডিয়েন্ট সরায়।
হেক্স রং
একটি ক্যামেরাকে সেই ক্যামেরা করে যার মধ্য দিয়ে দৃশ্য রেন্ডার হয়, আগে সক্রিয় থাকা ক্যামেরার নিয়ন্ত্রণগুলি বিচ্ছিন্ন করে।
যে ক্যামেরাটি সক্রিয় করতে হবে
const camera = bitbybit.babylon.camera.arcRotate.create({ radius: 20, target: [0, 0, 0], alpha: 45, beta: 70, lowerBetaLimit: 1, upperBetaLimit: 179, angularSensibilityX: 1000, angularSensibilityY: 1000, panningSensibility: 1000, wheelPrecision: 3, maxZ: 1000 });
bitbybit.babylon.scene.activateCamera({ camera });
যে ক্যামেরার মধ্য দিয়ে দৃশ্য বর্তমানে রেন্ডার হয় তা দেয়।
সক্রিয় ক্যামেরা
ডিফল্ট প্রদক্ষিণকারী ক্যামেরা, Camera নামেরটি, পুনরায় বসায় এবং তার সীমা ও
সংবেদনশীলতা সেট করে।
ক্যামেরাটি position এ lookAt এর দিকে তাকিয়ে বসানো হয়; ব্যাসার্ধ, alpha ও beta সীমাগুলি
এটি কতদূর জুম ও প্রদক্ষিণ করতে পারে তা বেঁধে দেয়, কোণ ডিগ্রিতে, এবং সংবেদনশীলতাগুলি এটি কত দ্রুত সাড়া
দেয় তা সেট করে, কম মানে দ্রুততর।
অবস্থান, লক্ষ্য এবং ঐচ্ছিক সীমা ও সংবেদনশীলতা
bitbybit.babylon.scene.adjustActiveArcRotateCamera({ position: [20, 20, 20], lookAt: [0, 0, 0], lowerRadiusLimit: 5, upperRadiusLimit: 100, lowerBetaLimit: 1, upperBetaLimit: 179, angularSensibilityX: 1000, angularSensibilityY: 1000, panningSensibility: 1000, wheelPrecision: 3, maxZ: 1000 });
দৃশ্যকে বিল্ট-ইন স্কাইবক্সগুলির একটি দিয়ে ঘিরে দেয় এবং এটিকে সেই এনভায়রনমেন্ট আলো হিসেবে ব্যবহার করে যা প্রতিফলক ম্যাটেরিয়ালগুলি তুলে নেয়।
blur দৃশ্যমান আকাশকে নরম করে, environmentIntensity এটি দৃশ্যকে কতটা আলোকিত করে তা স্কেল করে,
এবং hideSkybox আকাশটিকে লুকিয়ে রেখে আলো রাখে।
বিল্ট-ইন স্কাইবক্স, তার আকার, ব্লার, পরিবেশের তীব্রতা ও দৃশ্যমানতা
দৃশ্যকে আপনার নিজস্ব টেক্সচার থেকে লোড করা একটি স্কাইবক্স দিয়ে ঘিরে দেয় এবং এটিকে এনভায়রনমেন্ট আলো হিসেবে ব্যবহার করে।
textureUrl একটি .hdr ফাইল, একটি .env ফাইল বা ছয়টি কিউব ফেস ছবির রুটের দিকে নির্দেশ করতে পারে;
এটি ছাড়া কিছুই ঘটে না। hideSkybox আকাশটিকে লুকিয়ে রেখে আলো রাখে।
টেক্সচারের URL ও আকার, স্কাইবক্সের আকার, ব্লার, পরিবেশের তীব্রতা ও দৃশ্যমানতা
দৃশ্যকে আপনার নিজে লোড করা একটি কিউব টেক্সচার থেকে তৈরি স্কাইবক্স দিয়ে ঘিরে দেয় এবং এটিকে এনভায়রনমেন্ট আলো হিসেবে ব্যবহার করে।
texture একটি .hdr বা .env ফাইল থেকে আসতে পারে। hideSkybox আকাশ লুকিয়ে রেখে আলো
বজায় রাখে; enableGroundProjection আকাশের নিচের অংশকে সমতল করে এমন একটি ভূমিতে পরিণত করে যার উপর মডেল দাঁড়ায়।
কিউব টেক্সচার, স্কাইবক্সের আকার, ব্লার, পরিবেশের তীব্রতা, দৃশ্যমানতা ও ভূমি প্রক্ষেপণ
const texture = new BABYLON.CubeTexture("https://example.com/env/studio", bitbybit.babylon.scene.getScene());
bitbybit.babylon.scene.enableSkyboxFromTexture({ texture, size: 1000, blur: 0.1, environmentIntensity: 0.7, hideSkybox: false, enableGroundProjection: true, projectedGroundRadius: 20, projectedGroundHeight: 3 });
দূরের জ্যামিতিকে একটি রঙে মিলিয়ে দেয়, যেভাবে কুয়াশা করে।
linear দৃশ্য এককে start থেকে end পর্যন্ত মিলিয়ে দেয়; exponential ও exponentialSquared
দূরত্ব উপেক্ষা করে বদলে density দিয়ে মিলিয়ে দেয়; none কুয়াশা বন্ধ করে।
কুয়াশার মোড, রং, ঘনত্ব এবং শুরু ও শেষের দূরত্ব
drawPointLight যেভাবে করে সেভাবে দৃশ্যে একটি পয়েন্ট লাইট যোগ করে, এটি ফেরত না দিয়ে; এমন
স্ক্রিপ্টের জন্য যার শুধু আলোটির থাকা দরকার।
আলোর অবস্থান, রং, তীব্রতা, বাল্বের ব্যাসার্ধ ও ছায়ার সেটিংস
bitbybit.babylon.scene.drawPointLightNoReturn({ position: [10, 20, 10], intensity: 2000, diffuse: "#ffffff", specular: "#ffffff", radius: 0.5, enableShadows: true, shadowGeneratorMapSize: 1024, shadowDarkness: 0, transparencyShadow: false, shadowUsePercentageCloserFiltering: true, shadowContactHardeningLightSizeUVRatio: 0.2, shadowBias: 0.0001, shadowNormalBias: 0.002, shadowMaxZ: 1000, shadowMinZ: 0.1, shadowRefreshRate: 1 });
এই লাইব্রেরির মাধ্যমে তৈরি আলোগুলির শ্যাডো জেনারেটরগুলি তালিকাভুক্ত করে, ছায়া সক্রিয় প্রতিটি আলোর জন্য একটি; আঁকা মেশগুলি এদের সাথে কাস্টার হিসেবে নিবন্ধিত হয়।
ছায়া জেনারেটরগুলি, অথবা একটি খালি তালিকা
একটি বিন্দু থেকে প্রতিটি দিকে আলো ছড়ানো একটি আলো যোগ করে, বাল্বের মতো, তার অবস্থানে একটি ঐচ্ছিক ছোট জ্বলন্ত গোলকসহ।
enableShadows true হলে একটি শ্যাডো জেনারেটর তৈরি হয় এবং ইতিমধ্যে দৃশ্যে থাকা প্রতিটি মেশ
ছায়া ফেলে ও গ্রহণ করে; intensity হলো আলোক শক্তি, তাই হাজারের ঘরের মান
স্বাভাবিক।
আলোর অবস্থান, রং, তীব্রতা, বাল্বের ব্যাসার্ধ ও ছায়ার সেটিংস
বিন্দু আলো
const light = bitbybit.babylon.scene.drawPointLight({ position: [10, 20, 10], intensity: 2000, diffuse: "#ffffff", specular: "#ffffff", radius: 0.5, enableShadows: true, shadowGeneratorMapSize: 1024, shadowDarkness: 0, transparencyShadow: false, shadowUsePercentageCloserFiltering: true, shadowContactHardeningLightSizeUVRatio: 0.2, shadowBias: 0.0001, shadowNormalBias: 0.002, shadowMaxZ: 1000, shadowMinZ: 0.1, shadowRefreshRate: 1 });
drawDirectionalLight যেভাবে করে সেভাবে দৃশ্যে একটি ডিরেকশনাল লাইট যোগ করে, এটি ফেরত না
দিয়ে; এমন স্ক্রিপ্টের জন্য যার শুধু আলোটির থাকা দরকার।
আলোর দিক, রং, তীব্রতা ও ছায়ার সেটিংস
bitbybit.babylon.scene.drawDirectionalLightNoReturn({ direction: [-100, -100, -100], intensity: 0.5, diffuse: "#ffffff", specular: "#ffffff", enableShadows: true, shadowGeneratorMapSize: 1024, shadowDarkness: 0, transparencyShadow: false, shadowUsePercentageCloserFiltering: true, shadowContactHardeningLightSizeUVRatio: 0.2, shadowBias: 0.0001, shadowNormalBias: 0.002, shadowMaxZ: 1000, shadowMinZ: 0, shadowRefreshRate: 1 });
সব জায়গায় একইভাবে আলো ছড়ানো একটি আলো যোগ করে, সূর্যের মতো, direction বরাবর।
enableShadows true হলে একটি শ্যাডো জেনারেটর তৈরি হয় এবং ইতিমধ্যে দৃশ্যে থাকা প্রতিটি মেশ
ছায়া ফেলে ও গ্রহণ করে; intensity একটি সাধারণ ফ্যাক্টর যেখানে 1 পূর্ণ শক্তি।
আলোর দিক, রং, তীব্রতা ও ছায়ার সেটিংস
দিকনির্দেশক আলো
const sun = bitbybit.babylon.scene.drawDirectionalLight({ direction: [-100, -100, -100], intensity: 0.5, diffuse: "#ffffff", specular: "#ffffff", enableShadows: true, shadowGeneratorMapSize: 1024, shadowDarkness: 0, transparencyShadow: false, shadowUsePercentageCloserFiltering: true, shadowContactHardeningLightSizeUVRatio: 0.2, shadowBias: 0.0001, shadowNormalBias: 0.002, shadowMaxZ: 1000, shadowMinZ: 0, shadowRefreshRate: 1 });
দৃশ্যকে BabylonJS এর ডিফল্টে ব্যবহৃত বাম-হাতি স্থানাঙ্ক ব্যবস্থা ও একটি ডান-হাতি ব্যবস্থার মধ্যে বদলায়, যা বেশিরভাগ CAD টুল ও glTF এর রীতি; সক্রিয় ক্যামেরা মিলিয়ে রিফ্রেশ হয়।
ডান-হাতি সিস্টেম ব্যবহার করতে হবে কিনা
সামগ্রিকভাবে BabylonJS দৃশ্য: সক্রিয় ক্যামেরা ও তার সীমা, ছায়াসহ আলো, স্কাইবক্স ও পরিবেশ আলো, কুয়াশা, পদার্থবিদ্যা, পয়েন্টার ইভেন্ট, ক্যানভাসের ব্যাকগ্রাউন্ড এবং আঁকা সবকিছু মুছে ফেলা। একটি দৃশ্য প্রতিটি মেশ, আলো ও ক্যামেরা ধারণ করে; বেশিরভাগ স্ক্রিপ্ট একবার আলো ও ক্যামেরা সেট করতে এটি স্পর্শ করে এবং তারপর এতে আঁকে।