WebGL Transform Feedback Varying: ثبت دقیق ویژگی‌های رأس (Vertex Attribute)

Transform Feedback یک ویژگی قدرتمند WebGL است که به شما امکان می‌دهد خروجی شیدرهای رأس (vertex shaders) را ثبت کرده و از آن به عنوان ورودی برای مراحل رندرینگ بعدی استفاده کنید. این تکنیک درهای جدیدی را به روی طیف گسترده‌ای از افکت‌های رندرینگ پیشرفته و وظایف پردازش هندسه مستقیماً روی GPU باز می‌کند. یکی از جنبه‌های حیاتی Transform Feedback، درک چگونگی مشخص کردن ویژگی‌های رأسی است که باید ثبت شوند، که به آنها "varying" گفته می‌شود. این راهنما یک نمای کلی و جامع از WebGL Transform Feedback با تمرکز بر ثبت ویژگی‌های رأس با استفاده از varying ارائه می‌دهد.

بازخورد تبدیل (Transform Feedback) چیست؟

به طور سنتی، رندرینگ WebGL شامل ارسال داده‌های رأس به GPU، پردازش آنها از طریق شیدرهای رأس و قطعه (fragment shaders) و نمایش پیکسل‌های حاصل بر روی صفحه است. خروجی شیدر رأس، پس از برش (clipping) و تقسیم پرسپکتیو، معمولاً دور ریخته می‌شود. Transform Feedback این پارادایم را با اجازه دادن به شما برای رهگیری و ذخیره این نتایج پس از شیدر رأس در یک بافر آبجکت (buffer object) تغییر می‌دهد.

سناریویی را تصور کنید که در آن می‌خواهید فیزیک ذرات را شبیه‌سازی کنید. شما می‌توانید موقعیت ذرات را در CPU به‌روزرسانی کرده و داده‌های به‌روز شده را برای رندرینگ در هر فریم به GPU ارسال کنید. Transform Feedback با انجام محاسبات فیزیک (با استفاده از یک شیدر رأس) بر روی GPU و ثبت مستقیم موقعیت‌های به‌روز شده ذرات در یک بافر، که برای رندرینگ فریم بعدی آماده است، رویکرد کارآمدتری ارائه می‌دهد. این کار باعث کاهش بار پردازشی CPU و بهبود عملکرد، به ویژه برای شبیه‌سازی‌های پیچیده می‌شود.

مفاهیم کلیدی Transform Feedback

• شیدر رأس (Vertex Shader): هسته اصلی Transform Feedback. شیدر رأس محاسباتی را انجام می‌دهد که نتایج آنها ثبت می‌شود.
• متغیرهای Varying: اینها متغیرهای خروجی از شیدر رأس هستند که می‌خواهید ثبت کنید. آنها مشخص می‌کنند که کدام ویژگی‌های رأس در بافر آبجکت نوشته می‌شوند.
• بافر آبجکت‌ها (Buffer Objects): محل ذخیره‌سازی که ویژگی‌های رأس ثبت‌شده در آن نوشته می‌شوند. این بافرها به آبجکت Transform Feedback متصل (bind) می‌شوند.
• آبجکت Transform Feedback: یک آبجکت WebGL که فرآیند ثبت ویژگی‌های رأس را مدیریت می‌کند. این آبجکت بافرهای هدف و متغیرهای varying را تعریف می‌کند.
• حالت اولیه (Primitive Mode): نوع اشکال اولیه (نقاط، خطوط، مثلث‌ها) تولید شده توسط شیدر رأس را مشخص می‌کند. این موضوع برای چیدمان صحیح بافر مهم است.

راه‌اندازی Transform Feedback در WebGL

فرآیند استفاده از Transform Feedback شامل چندین مرحله است:

1. ایجاد و پیکربندی یک آبجکت Transform Feedback:

   از gl.createTransformFeedback() برای ایجاد یک آبجکت Transform Feedback استفاده کنید. سپس، آن را با استفاده از gl.bindTransformFeedback(gl.TRANSFORM_FEEDBACK, transformFeedback) متصل کنید.

2. ایجاد و اتصال بافر آبجکت‌ها:

   با استفاده از gl.createBuffer() بافر آبجکت‌هایی برای ذخیره ویژگی‌های رأس ثبت‌شده ایجاد کنید. هر بافر آبجکت را به هدف gl.TRANSFORM_FEEDBACK_BUFFER با استفاده از gl.bindBufferBase(gl.TRANSFORM_FEEDBACK_BUFFER, index, buffer) متصل کنید. `index` با ترتیب متغیرهای varying مشخص شده در برنامه شیدر مطابقت دارد.

3. مشخص کردن متغیرهای Varying:

   این یک مرحله حیاتی است. قبل از لینک کردن برنامه شیدر، باید به WebGL بگویید که کدام متغیرهای خروجی (متغیرهای varying) از شیدر رأس باید ثبت شوند. از gl.transformFeedbackVaryings(program, varyings, bufferMode) استفاده کنید.

   • program: آبجکت برنامه شیدر.
   • varyings: آرایه‌ای از رشته‌ها، که هر رشته نام یک متغیر varying در شیدر رأس است. ترتیب این متغیرها مهم است، زیرا ایندکس اتصال بافر را تعیین می‌کند.
   • bufferMode: نحوه نوشته شدن متغیرهای varying در بافر آبجکت‌ها را مشخص می‌کند. گزینه‌های رایج عبارتند از gl.SEPARATE_ATTRIBS (هر varying به یک بافر جداگانه می‌رود) و gl.INTERLEAVED_ATTRIBS (تمام متغیرهای varying به صورت درهم‌تنیده در یک بافر واحد نوشته می‌شوند).
4. ایجاد و کامپایل شیدرها:

   شیدرهای رأس و قطعه را ایجاد کنید. شیدر رأس باید متغیرهای varying که می‌خواهید ثبت کنید را خروجی دهد. شیدر قطعه ممکن است بسته به کاربرد شما مورد نیاز باشد یا نباشد. این شیدر می‌تواند برای اشکال‌زدایی مفید باشد.

5. لینک کردن برنامه شیدر:

   برنامه شیدر را با استفاده از gl.linkProgram(program) لینک کنید. مهم است که gl.transformFeedbackVaryings() را *قبل* از لینک کردن برنامه فراخوانی کنید.

6. شروع و پایان Transform Feedback:

   برای شروع ثبت ویژگی‌های رأس، gl.beginTransformFeedback(primitiveMode) را فراخوانی کنید، که در آن primitiveMode نوع اشکال اولیه تولید شده را مشخص می‌کند (مثلاً gl.POINTS، gl.LINES، gl.TRIANGLES). پس از رندرینگ، gl.endTransformFeedback() را برای توقف ثبت فراخوانی کنید.

7. رسم هندسه:

   از gl.drawArrays() یا gl.drawElements() برای رندر کردن هندسه استفاده کنید. شیدر رأس اجرا خواهد شد و متغیرهای varying مشخص شده در بافر آبجکت‌ها ثبت خواهند شد.

مثال: ثبت موقعیت ذرات

بیایید این موضوع را با یک مثال ساده از ثبت موقعیت ذرات نشان دهیم. فرض کنید یک شیدر رأس داریم که موقعیت ذرات را بر اساس سرعت و گرانش به‌روزرسانی می‌کند.

شیدر رأس (particle.vert)

#version 300 es

in vec3 a_position;

in vec3 a_velocity;

uniform float u_timeStep;

out vec3 v_position;

out vec3 v_velocity;

void main() {
 vec3 gravity = vec3(0.0, -9.8, 0.0);
 v_velocity = a_velocity + gravity * u_timeStep;
 v_position = a_position + v_velocity * u_timeStep;

 gl_Position = vec4(v_position, 1.0);
}

این شیدر رأس a_position و a_velocity را به عنوان ویژگی‌های ورودی دریافت می‌کند. سپس سرعت و موقعیت جدید هر ذره را محاسبه کرده و نتایج را در متغیرهای varying v_position و v_velocity ذخیره می‌کند. `gl_Position` برای رندرینگ روی موقعیت جدید تنظیم می‌شود.

کد جاوا اسکریپت

// ... مقداردهی اولیه کانتکست WebGL ...

// ۱. ایجاد آبجکت Transform Feedback
const transformFeedback = gl.createTransformFeedback();
gl.bindTransformFeedback(gl.TRANSFORM_FEEDBACK, transformFeedback);

// ۲. ایجاد بافر آبجکت‌ها برای موقعیت و سرعت
const positionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
gl.bufferData(gl.ARRAY_BUFFER, particlePositions, gl.DYNAMIC_COPY); // موقعیت‌های اولیه ذرات

const velocityBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, velocityBuffer);
gl.bufferData(gl.ARRAY_BUFFER, particleVelocities, gl.DYNAMIC_COPY); // سرعت‌های اولیه ذرات

// ۳. مشخص کردن متغیرهای Varying
const varyings = ['v_position', 'v_velocity'];
gl.transformFeedbackVaryings(program, varyings, gl.SEPARATE_ATTRIBS);  // باید *قبل* از لینک کردن برنامه فراخوانی شود.

// ۴. ایجاد و کامپایل شیدرها (برای اختصار حذف شده)
// ...

// ۵. لینک کردن برنامه شیدر
gl.linkProgram(program);

// اتصال بافرهای Transform Feedback
gl.bindBufferBase(gl.TRANSFORM_FEEDBACK_BUFFER, 0, positionBuffer);  // ایندکس 0 برای v_position
gl.bindBufferBase(gl.TRANSFORM_FEEDBACK_BUFFER, 1, velocityBuffer);  // ایندکس 1 برای v_velocity

// دریافت مکان‌های ویژگی‌ها
const positionLocation = gl.getAttribLocation(program, 'a_position');
const velocityLocation = gl.getAttribLocation(program, 'a_velocity');

// --- حلقه رندر ---
function render() {
 gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

 gl.useProgram(program);

 // فعال کردن ویژگی‌ها
 gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
gl.vertexAttribPointer(positionLocation, 3, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(positionLocation);

 gl.bindBuffer(gl.ARRAY_BUFFER, velocityBuffer);
gl.vertexAttribPointer(velocityLocation, 3, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(velocityLocation);

 // ۶. شروع Transform Feedback
 gl.enable(gl.RASTERIZER_DISCARD); // غیرفعال کردن растеرایزیشن
gl.beginTransformFeedback(gl.POINTS);

 // ۷. رسم هندسه
 gl.drawArrays(gl.POINTS, 0, numParticles);

 // ۸. پایان Transform Feedback
 gl.endTransformFeedback();
gl.disable(gl.RASTERIZER_DISCARD); // فعال کردن مجدد растеرایزیشن

 // جابجایی بافرها (اختیاری، اگر می‌خواهید نقاط را رندر کنید)
 // به عنوان مثال، رندر مجدد بافر موقعیت به‌روز شده.

 requestAnimationFrame(render);
}

render();

در این مثال:

• ما دو بافر آبجکت ایجاد می‌کنیم، یکی برای موقعیت‌های ذرات و دیگری برای سرعت‌ها.
• ما v_position و v_velocity را به عنوان متغیرهای varying مشخص می‌کنیم.
• ما بافر موقعیت را به ایندکس 0 و بافر سرعت را به ایندکس 1 از بافرهای Transform Feedback متصل می‌کنیم.
• ما растеرایزیشن را با استفاده از gl.enable(gl.RASTERIZER_DISCARD) غیرفعال می‌کنیم زیرا فقط می‌خواهیم داده‌های ویژگی‌های رأس را ثبت کنیم؛ ما نمی‌خواهیم در این مرحله چیزی را رندر کنیم. این برای عملکرد مهم است.
• ما gl.drawArrays(gl.POINTS, 0, numParticles) را برای اجرای شیدر رأس روی هر ذره فراخوانی می‌کنیم.
• موقعیت‌ها و سرعت‌های به‌روز شده ذرات در بافر آبجکت‌ها ثبت می‌شوند.
• پس از مرحله Transform Feedback، می‌توانید بافرهای ورودی و خروجی را جابجا کرده و ذرات را بر اساس موقعیت‌های به‌روز شده رندر کنید.

متغیرهای Varying: جزئیات و ملاحظات

پارامتر `varyings` در `gl.transformFeedbackVaryings()` یک آرایه از رشته‌ها است که نام متغیرهای خروجی از شیدر رأس شما را که می‌خواهید ثبت کنید، نشان می‌دهد. این متغیرها باید:

• به عنوان متغیرهای out در شیدر رأس اعلام شوند.
• نوع داده‌ای منطبق بین خروجی شیدر رأس و محل ذخیره‌سازی بافر آبجکت داشته باشند. به عنوان مثال، اگر یک متغیر varying از نوع vec3 باشد، بافر آبجکت مربوطه باید به اندازه کافی بزرگ باشد تا مقادیر vec3 را برای همه رأس‌ها ذخیره کند.
• در ترتیب صحیح باشند. ترتیب در آرایه `varyings`، ایندکس اتصال بافر را تعیین می‌کند. اولین varying در بافر ایندکس 0، دومی در ایندکس 1 و به همین ترتیب نوشته خواهد شد.

تراز داده و چیدمان بافر

درک تراز داده برای عملکرد صحیح Transform Feedback حیاتی است. چیدمان ویژگی‌های رأس ثبت‌شده در بافر آبجکت‌ها به پارامتر bufferMode در `gl.transformFeedbackVaryings()` بستگی دارد:

• gl.SEPARATE_ATTRIBS: هر متغیر varying در یک بافر آبجکت جداگانه نوشته می‌شود. بافر آبجکت متصل به ایندکس 0 شامل تمام مقادیر برای اولین varying، بافر آبجکت متصل به ایندکس 1 شامل تمام مقادیر برای دومین varying و به همین ترتیب خواهد بود. این حالت به طور کلی برای درک و اشکال‌زدایی ساده‌تر است.
• gl.INTERLEAVED_ATTRIBS: تمام متغیرهای varying به صورت درهم‌تنیده در یک بافر آبجکت واحد نوشته می‌شوند. به عنوان مثال، اگر دو متغیر varying، v_position (vec3) و v_velocity (vec3) داشته باشید، بافر شامل دنباله‌ای از vec3 (موقعیت)، vec3 (سرعت)، vec3 (موقعیت)، vec3 (سرعت) و غیره خواهد بود. این حالت می‌تواند برای برخی موارد استفاده کارآمدتر باشد، به ویژه زمانی که داده‌های ثبت‌شده به عنوان ویژگی‌های رأس درهم‌تنیده در یک مرحله رندرینگ بعدی استفاده شوند.

تطبیق انواع داده

انواع داده متغیرهای varying در شیدر رأس باید با فرمت ذخیره‌سازی بافر آبجکت‌ها سازگار باشد. به عنوان مثال، اگر یک متغیر varying را به صورت out vec3 v_color اعلام کنید، باید اطمینان حاصل کنید که بافر آبجکت به اندازه کافی بزرگ است تا مقادیر vec3 (معمولاً مقادیر ممیز شناور) را برای همه رأس‌ها ذخیره کند. عدم تطابق انواع داده می‌تواند منجر به نتایج غیرمنتظره یا خطا شود.

کار با Rasterizer Discard

هنگامی که از Transform Feedback صرفاً برای ثبت داده‌های ویژگی‌های رأس (و نه برای رندر کردن چیزی در مرحله اولیه) استفاده می‌کنید، حیاتی است که растеرایزیشن را با استفاده از gl.enable(gl.RASTERIZER_DISCARD) قبل از فراخوانی gl.beginTransformFeedback() غیرفعال کنید. این کار از انجام عملیات غیرضروری растеرایزیشن توسط GPU جلوگیری می‌کند، که می‌تواند به طور قابل توجهی عملکرد را بهبود بخشد. به یاد داشته باشید که اگر قصد دارید در مرحله بعدی چیزی را رندر کنید، растеرایزیشن را با استفاده از gl.disable(gl.RASTERIZER_DISCARD) پس از فراخوانی gl.endTransformFeedback() دوباره فعال کنید.

موارد استفاده از Transform Feedback

Transform Feedback کاربردهای متعددی در رندرینگ WebGL دارد، از جمله:

• سیستم‌های ذرات: همانطور که در مثال نشان داده شد، Transform Feedback برای به‌روزرسانی موقعیت‌ها، سرعت‌ها و سایر ویژگی‌های ذرات مستقیماً روی GPU ایده‌آل است و شبیه‌سازی‌های کارآمد ذرات را ممکن می‌سازد.
• پردازش هندسه: می‌توانید از Transform Feedback برای انجام تبدیلات هندسی، مانند تغییر شکل مش، تقسیم‌بندی یا ساده‌سازی، به طور کامل روی GPU استفاده کنید. تغییر شکل یک مدل کاراکتر برای انیمیشن را تصور کنید.
• دینامیک سیالات: شبیه‌سازی جریان سیال روی GPU با Transform Feedback قابل دستیابی است. موقعیت‌ها و سرعت‌های ذرات سیال را به‌روزرسانی کنید و سپس از یک مرحله رندرینگ جداگانه برای تجسم سیال استفاده کنید.
• شبیه‌سازی‌های فیزیک: به طور کلی، هر شبیه‌سازی فیزیکی که نیاز به به‌روزرسانی ویژگی‌های رأس داشته باشد، می‌تواند از Transform Feedback بهره‌مند شود. این می‌تواند شامل شبیه‌سازی پارچه، دینامیک اجسام صلب یا سایر افکت‌های مبتنی بر فیزیک باشد.
• پردازش ابر نقاط: داده‌های پردازش‌شده از ابرهای نقاط را برای تجسم یا تحلیل ثبت کنید. این می‌تواند شامل فیلتر کردن، هموارسازی یا استخراج ویژگی روی GPU باشد.
• ویژگی‌های رأس سفارشی: ویژگی‌های رأس سفارشی، مانند بردارهای نرمال یا مختصات بافت را بر اساس داده‌های دیگر رأس محاسبه کنید. این ممکن است برای تکنیک‌های تولید رویه‌ای مفید باشد.
• مراحل پیش-پردازش سایه‌زنی تأخیری (Deferred Shading): داده‌های موقعیت و نرمال را در G-bufferها برای خطوط لوله سایه‌زنی تأخیری ثبت کنید. این تکنیک امکان محاسبات نورپردازی پیچیده‌تر را فراهم می‌کند.

ملاحظات عملکردی

در حالی که Transform Feedback می‌تواند بهبودهای عملکردی قابل توجهی ارائه دهد، مهم است که عوامل زیر را در نظر بگیرید:

• اندازه بافر آبجکت: اطمینان حاصل کنید که بافر آبجکت‌ها به اندازه کافی بزرگ هستند تا تمام ویژگی‌های رأس ثبت‌شده را ذخیره کنند. اندازه صحیح را بر اساس تعداد رأس‌ها و انواع داده متغیرهای varying اختصاص دهید.
• هزینه انتقال داده: از انتقال غیرضروری داده بین CPU و GPU خودداری کنید. از Transform Feedback برای انجام هرچه بیشتر پردازش بر روی GPU استفاده کنید.
• Rasterization Discard: هنگامی که Transform Feedback صرفاً برای ثبت داده استفاده می‌شود، gl.RASTERIZER_DISCARD را فعال کنید.
• پیچیدگی شیدر: کد شیدر رأس را برای به حداقل رساندن هزینه محاسباتی بهینه کنید. شیدرهای پیچیده می‌توانند بر عملکرد تأثیر بگذارند، به ویژه هنگام کار با تعداد زیادی رأس.
• جابجایی بافر: هنگام استفاده از Transform Feedback در یک حلقه (مثلاً برای شبیه‌سازی ذرات)، استفاده از بافرینگ دوگانه (جابجایی بافرهای ورودی و خروجی) را برای جلوگیری از خطرات خواندن-پس-از-نوشتن در نظر بگیرید.
• نوع اولیه (Primitive Type): انتخاب نوع اولیه (gl.POINTS، gl.LINES، gl.TRIANGLES) می‌تواند بر عملکرد تأثیر بگذارد. مناسب‌ترین نوع اولیه را برای برنامه خود انتخاب کنید.

اشکال‌زدایی Transform Feedback

اشکال‌زدایی Transform Feedback می‌تواند چالش‌برانگیز باشد، اما در اینجا چند نکته وجود دارد:

• بررسی خطاها: از gl.getError() برای بررسی خطاهای WebGL پس از هر مرحله در راه‌اندازی Transform Feedback استفاده کنید.
• تأیید اندازه‌های بافر: اطمینان حاصل کنید که بافر آبجکت‌ها به اندازه کافی بزرگ هستند تا داده‌های ثبت‌شده را ذخیره کنند.
• بازرسی محتویات بافر: از gl.getBufferSubData() برای خواندن محتویات بافر آبجکت‌ها به CPU و بازرسی داده‌های ثبت‌شده استفاده کنید. این می‌تواند به شناسایی مشکلات مربوط به تراز داده یا محاسبات شیدر کمک کند.
• استفاده از یک دیباگر: از یک دیباگر WebGL (مانند Spector.js) برای بازرسی وضعیت WebGL و اجرای شیدر استفاده کنید. این می‌تواند بینش‌های ارزشمندی در مورد فرآیند Transform Feedback ارائه دهد.
• ساده‌سازی شیدر: با یک شیدر رأس ساده که فقط چند متغیر varying خروجی می‌دهد، شروع کنید. به تدریج با تأیید هر مرحله، پیچیدگی را اضافه کنید.
• بررسی ترتیب Varying: دوباره بررسی کنید که ترتیب متغیرهای varying در آرایه varyings با ترتیبی که در شیدر رأس نوشته می‌شوند و ایندکس‌های اتصال بافر مطابقت داشته باشد.
• غیرفعال کردن بهینه‌سازی‌ها: به طور موقت بهینه‌سازی‌های شیدر را غیرفعال کنید تا اشکال‌زدایی آسان‌تر شود.

سازگاری و افزونه‌ها

Transform Feedback در WebGL 2 و OpenGL ES 3.0 و بالاتر پشتیبانی می‌شود. در WebGL 1، افزونه OES_transform_feedback عملکرد مشابهی را ارائه می‌دهد. با این حال، پیاده‌سازی WebGL 2 کارآمدتر و غنی‌تر از نظر ویژگی‌ها است.

پشتیبانی از افزونه را با استفاده از کد زیر بررسی کنید:

const transformFeedbackExtension = gl.getExtension('OES_transform_feedback');
if (transformFeedbackExtension) {
 // از افزونه استفاده کنید
}

نتیجه‌گیری

WebGL Transform Feedback یک تکنیک قدرتمند برای ثبت داده‌های ویژگی‌های رأس مستقیماً روی GPU است. با درک مفاهیم متغیرهای varying، بافر آبجکت‌ها و آبجکت Transform Feedback، می‌توانید از این ویژگی برای ایجاد افکت‌های رندرینگ پیشرفته، انجام وظایف پردازش هندسه و بهینه‌سازی برنامه‌های WebGL خود استفاده کنید. به یاد داشته باشید که هنگام پیاده‌سازی Transform Feedback، تراز داده، اندازه‌های بافر و پیامدهای عملکردی را به دقت در نظر بگیرید. با برنامه‌ریزی دقیق و اشکال‌زدایی، می‌توانید پتانسیل کامل این قابلیت ارزشمند WebGL را آزاد کنید.