কী ওয়েবেকিট-ট্রান্সফর্ম: অনুবাদ 3 ডি (0,0,0); ঠিক তাই না? শরীরে প্রয়োগ করবেন?

Question 1

কি -webkit-transform: translate3d(0,0,0); ঠিক হবে? এটির কার্য সম্পাদনের কোনও সমস্যা আছে? আমি কি কেবল এটি শরীর বা স্বতন্ত্র উপাদানগুলিতে প্রয়োগ করব? মনে হচ্ছে এটি স্ক্রোল ইভেন্টগুলিকে মারাত্মকভাবে উন্নতি করবে।

পাঠের জন্য ধন্যবাদ!

Question 2

-webkit-transform: translate3d(0,0,0); কিছু ডিভাইস তাদের হার্ডওয়্যার ত্বরণ চালায়।

একটি ভাল পঠিত পাওয়া যায় এখানে

নেটিভ অ্যাপ্লিকেশনগুলি পিক্সেলগুলি ওড়াতে ডিভাইসের গ্রাফিকাল প্রসেসিং ইউনিট (জিপিইউ) অ্যাক্সেস করতে পারে। অন্যদিকে, ওয়েব অ্যাপ্লিকেশনগুলি, ব্রাউজারের প্রসঙ্গে চালিত হয়, যা সফ্টওয়্যারটি রেন্ডারিংয়ের সর্বাধিক (সমস্ত না থাকলে) করতে দেয়, ফলে রূপান্তরের জন্য কম অশ্বশক্তি হয়। তবে ওয়েবটি ধরা পড়েছে, এবং বেশিরভাগ ব্রাউজার বিক্রেতারা এখন নির্দিষ্ট সিএসএস বিধি দ্বারা গ্রাফিকাল হার্ডওয়্যার ত্বরণ সরবরাহ করে।

ব্যবহারের -webkit-transform: translate3d(0,0,0);ফলে জিপিইউকে সিএসএস রূপান্তরগুলির জন্য কার্যকর করা হবে, এগুলি মসৃণ করা হবে (উচ্চতর এফপিএস)।

দ্রষ্টব্য: আপনি যা translate3d(0,0,0) দেখেন সে অনুসারে কিছুই করে না। এটি অবজেক্টটিকে x, y এবং z অক্ষে 0px দ্বারা সরায়। এটি কেবল একটি হার্ডওয়্যার ত্বরণকে বাধ্য করার কৌশল।

একটি বিকল্প হয় -webkit-transform: translateZ(0)। এবং যদি রূপান্তরগুলির কারণে ক্রোম এবং সাফারিগুলিতে ঝাঁকুনি থাকে তবে চেষ্টা করুন -webkit-backface-visibility: hiddenএবং -webkit-perspective: 1000। আরও তথ্যের জন্য এই নিবন্ধ পড়ুন ।

Question 3

আমি এখানে এমন কোনও উত্তর দেখিনি যা এটি ব্যাখ্যা করে। divবৈধতার জটিল সেট ব্যবহার করে প্রতিটি এবং এর বিকল্পগুলির গণনা করে প্রচুর রূপান্তর করা যায় । তবে আপনি যদি 3 ডি ফাংশন ব্যবহার করেন তবে আপনার 2D উপাদানগুলির প্রত্যেককে 3 ডি উপাদান হিসাবে বিবেচনা করা হয় এবং আমরা ফ্লাইতে এই উপাদানগুলিতে একটি ম্যাট্রিক্স রূপান্তর করতে পারি । তবে, বেশিরভাগ উপাদানগুলি "প্রযুক্তিগতভাবে" ইতিমধ্যে হার্ডওয়্যারকে ত্বরান্বিত করে কারণ তারা সমস্ত জিপিইউ ব্যবহার করে। তবে, 3 ডি রূপান্তরগুলি 2D রেন্ডারগুলির প্রতিটি (বা এর সংস্করণে ক্যাশেড সংস্করণগুলির) ক্যাশেড সংস্করণগুলিতে সরাসরি কাজ করেdiv ) সরাসরি কাজ করে এবং সরাসরি তাদের উপর একটি ম্যাট্রিক্স রূপান্তর ব্যবহার করে (যা ভেক্টরাইজড এবং সমান্তরাল এফপি গণিত)।

এটি লক্ষণীয় গুরুত্বপূর্ণ যে 3 ডি রূপান্তর কেবলমাত্র ক্যাশেড 2 ডি ডিভি-র বৈশিষ্ট্যগুলিতে পরিবর্তন করে (অন্য কথায়, ডিভটি ইতিমধ্যে রেন্ডার করা চিত্র)। সুতরাং, সীমানার প্রস্থ এবং রঙ পরিবর্তন করার মতো জিনিসগুলি এখন "3 ডি" অস্পষ্টভাবে বলার মতো নয়। আপনি যদি এটির বিষয়ে চিন্তা করেন তবে সীমানা প্রস্থের পরিবর্তনের জন্য আপনাকে পুনরায় divরেন্ডার করতে হবে এবং এটিকে পুনরায় সংযুক্ত করতে হবে যাতে থ্রিডি রূপান্তরগুলি প্রয়োগ করা যেতে পারে।

আশা করি এটি বোধগম্য হয় এবং আপনার আরও কোনও প্রশ্ন থাকলে আমাকে জানান।

আপনার কোয়েশনটির উত্তর দেওয়ার জন্য, জিপিইউ শ্যাডারে translate3d: 0x 0y 0zউল্লম্ব অংশ চালিয়ে গঠিত টেক্সচারটিতে রূপান্তরগুলি সরাসরি কাজ করে বলে কিছুই করবে না div। এই শেডার রিসোর্সটি এখন ক্যাশে করা হয়েছে এবং ফ্রেম বাফারের উপর অঙ্কনের সময় একটি ম্যাট্রিক্স প্রয়োগ করা হবে। সুতরাং, মূলত এটি করে কোনও লাভ নেই।

ব্রাউজারটি এভাবে অভ্যন্তরীণভাবে কাজ করে।

পদক্ষেপ 1: পার্স ইনপুট

<div style = "position:absolute;left:0;right:0;bottom:0;top:0;"></div>

পদক্ষেপ 2: সম্মিলিত স্তর বিকাশ করুন

CompositeLayer compLayer = new CompositeLayer();
compLayer.setPosition(0, 0, 0, 0);
compLayer.setPositioning(ABSOLUTE); // Note. this is psuedocode. The actual code
Pipeline.add(compLayer, zIndex); // would be significantly more complex.

পদক্ষেপ 3: যৌগিক স্তর রেন্ডার করুন

for (CompositeLayer compLayer : allCompositeLayers){

     // Create and set cacheTexture as active target
     Texture2D cacheTexture = new Texture2D();
     cacheTexture.setActive();

     // Draw to cachedTexture
     Pipeline.renderVertices(compLayer.getVertices());
     Pipeline.setTexture(compLayer.getBackground());
     Pipeline.drawIndexed(compLayer.getVertexCount());

     // Set the framebuffer as active target
     frameBuffer.setActive();

     // Render to framebuffer from texture and **applying transformMatrix**
     Pipeline.renderFromCache(cacheTexture, transformMatrix);
}

Question 4

মোবাইলসফারিতে (আইওএস 5) স্ক্রোলিংয়ের সাথে একটি ত্রুটি রয়েছে যা স্ক্রোলিং ধারকটিতে ইনপুট উপাদানগুলির অনুলিপি হিসাবে নিদর্শনগুলিতে প্রদর্শিত হয়।

প্রতিটি সন্তানের উপাদানের জন্য ট্রান্সলেট 3 ডি ব্যবহার করা সেই বিজোড় বাগটি ঠিক করতে পারে। সিএসএসের একটি উদাহরণ যা আমার জন্য দিনটি বাঁচিয়েছিল।

.scrolling-container {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

.scrolling-container .child-element {
    position: relative;
    -webkit-transform: translate3d(0,0,0);
}

Question 5

Translate3D বাহিনী হার্ডওয়্যার ত্বরণ সিএসএস অ্যানিমেশন, বদলে দেয় এবং ট্রানজিশন স্বয়ংক্রিয়ভাবে নয় জিপিইউ ত্বরান্বিত এবং এর পরিবর্তে ব্রাউজারের ধীর সফ্টওয়্যার রেন্ডারিং ইঞ্জিন থেকে কার্যকর করা হয় GP জিপিইউ ব্যবহার করার জন্য আমরা অনুবাদ 3d ব্যবহার করি

বর্তমানে, ক্রোম, ফায়ারফক্স, সাফারি, আইই 9 + এবং অপেরার সর্বশেষ সংস্করণগুলির মতো সমস্ত ব্রাউজারগুলি হার্ডওয়্যার ত্বরণ নিয়ে আসে, তারা কেবল তখনই এটি ব্যবহার করে যখন কোনও ডওম উপাদান এটির দ্বারা উপকৃত হবে এমন ইঙ্গিত পাওয়া যায়।

Question 6

সচেতন থাকুন যে এটি একটি স্ট্যাকিং প্রসঙ্গ তৈরি করে (প্লাস অন্যান্য উত্তরগুলি যা বলেছিল) তাই এটি যা দেখেন তার উপর এর সম্ভাব্য প্রভাব রয়েছে, যেমন কোনও কিছু যখন ওভারলেতে প্রদর্শিত হবে এমনটি করা উচিত নয় যখন।