Offscreen Rendering: ما هو، تقنياته وتطبيقه في التطبيقات

ما هو Offscreen Rendering؟

Offscreen Rendering هو طريقة لعرض المحتوى الرسومي في مخزن مؤقت وسيط في ذاكرة الفيديو بدلاً من المخزن الرئيسي (framebuffer) الذي يُعرض على الشاشة. يتم حفظ نتيجة العرض خارج الشاشة في نسيج أو renderbuffer.

الهدف الرئيسي من العرض خارج الشاشة هو العرض متعدد التمريرات (multi-pass rendering). يتم تقسيم المشهد المعقد إلى عدة تمريرات: أولاً يُعرض المشهد في نسيج (offscreen)، ثم يُستخدم هذا النسيج كمدخل للتمريرة التالية، وهكذا حتى الحصول على الصورة النهائية. هذا النهج يتيح تحقيق تأثيرات مستحيلة في تمريرة واحدة.

Framebuffer Object (FBO)

الآلية الرئيسية للعرض خارج الشاشة في OpenGL ES هي Framebuffer Object (FBO). FBO هو حاوية يمكن إرفاق صور النسيج أو كائنات renderbuffer بها. بعد ربط FBO، يتم توجيه جميع أوامر العرض اللاحقة إلى النسيج المرفق، وليس إلى الشاشة.

كيف يعمل Offscreen Rendering؟

Offscreen Rendering يتم تنفيذه عن طريق إنشاء كائن framebuffer منفصل، وإرفاق نسيج أو renderbuffer به، وتبديل سياق العرض إلى هذا FBO، وتنفيذ أوامر الرسم. بعد اكتمال التمريرة، يتم إعادة السياق إلى framebuffer الرئيسي.

الدورة النموذجية للعرض خارج الشاشة

تتكون العملية من ثلاث خطوات: إنشاء FBO وإرفاق نسيج — عرض المشهد في النسيج خارج الشاشة — استخدام النسيج الناتج في التمريرة التالية. GL_COLOR_ATTACHMENT0 يحدد أي نسيج لوني سيتم العرض عليه.

// إنشاء FBO للعرض خارج الشاشة (OpenGL ES 3.0)
GLuint fbo, offscreenTex;
glGenFramebuffers(1, &fbo);
glGenTextures(1, &offscreenTex);
glBindTexture(GL_TEXTURE_2D, offscreenTex);
glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA,
               width, height, 0,
               GL_RGBA, GL_UNSIGNED_BYTE, NULL);
glBindFramebuffer(GL_FRAMEBUFFER, fbo);
glFramebufferTexture2D(GL_FRAMEBUFFER),
    GL_COLOR_ATTACHMENT0, GL_TEXTURE_2D,
    offscreenTex, 0);

تقنيات العرض خارج الشاشة

Offscreen Rendering يُستخدم لمجموعة واسعة من التأثيرات الرسومية. كل تقنية تتطلب تمريرة أو أكثر خارج الشاشة وتكويناً محدداً لـ FBO.

Render-to-Texture (RTT)

تقنية أساسية يتم فيها حفظ نتيجة العرض في نسيج لاستخدامه لاحقاً. Render-to-Texture يُستخدم لإنشاء الخرائط المصغرة، وقوام الكائنات الديناميكية، والمعاينة المسبقة للمواد المعقدة.

العرض متعدد التمريرات (Multi-pass)

التأثيرات المعقدة (HDR، bloom، depth of field) تتطلب عدة تمريرات متسلسلة. كل تمريرة تعرض المشهد في نسيج خارج الشاشة، وتطبق مرشحاً، وتمرر النتيجة إلى التمريرة التالية. هذا النهج يسمح بتراكم التأثيرات دون فقدان جودة الصورة النهائية.

تخطيط الظلال (Shadow Mapping)

Shadow Mapping هو مثال كلاسيكي لاستخدام العرض خارج الشاشة. يتم إنشاء الظل في تمريرتين: أولاً يُعرض المشهد من منظور مصدر الضوء في نسيج عمق (offscreen)، ثم أثناء العرض الرئيسي تتم مقارنة كل جزء (fragment) بخريطة العمق هذه لتحديد ما إذا كان في الظل.

عملية توليد الظلال

التمريرة الأولى: يتم وضع الكاميرا في موضع مصدر الضوء، ويُعرض المشهد في مخزن خارج الشاشة، مسجلاً العمق فقط في النسيج. التمريرة الثانية: العرض الرئيسي مع فحص كل جزء — إذا كان عمقه أكبر من القيمة في خريطة العمق، فإن الجزء يكون مظللاً.

// Fragment Shader لتخطيط الظلال
in vec4 vShadowCoord;
uniform sampler2D uShadowMap;

float calcShadow(vec4 coord) {
    vec3 uvw = coord.xyz / coord.w;
    float depth = texture(uShadowMap, uvw.xy).r;
    return (uvw.z > depth + 0.005) ? 0.3 : 1.0;
}

أداء العرض خارج الشاشة

Offscreen Rendering يضيف تمريرات إضافية لوحدة معالجة الرسومات، مما يزيد من الحمل الحسابي الإجمالي واستهلاك الطاقة. في تطوير التطبيقات المحمولة، هذا أمر بالغ الأهمية: كل تبديل لـ FBO يتطلب تفريغاً للخط الأنابيب (pipeline flush) ووقتاً إضافياً.

عوامل الأداء

• عدد التمريرات — كل تمريرة إضافية تعرض المشهد بأكمله، مما يضاعف عدد الرؤوس والأجزاء التي تتم معالجتها.
• دقة النسيج خارج الشاشة — اختيار دقة عالية جداً يزيد من حمل عرض النطاق الترددي للذاكرة.
• تبديل FBO — التغيير المتكرر لكائن framebuffer يسبب توقفاً في خط الأنابيب ويقلل من استخدام وحدة معالجة الرسومات.

تحسين العرض خارج الشاشة

للأجهزة المحمولة، يُوصى بما يلي: استخدام renderbuffer بدلاً من النسيج إذا لم تكن هناك حاجة لقراءة النتيجة (تمريرة عمق فقط)؛ اختيار الحد الأدنى من الدقة اللازمة للقوام خارج الشاشة؛ دمج التمريرات حيثما أمكن باستخدام MRT (Multiple Render Targets).

أمثلة كود Offscreen Rendering

Offscreen Rendering على منصات مختلفة يتم تنفيذه عبر واجهات برمجة التطبيقات الخاصة بها. دعنا نستعرض أمثلة لـ OpenGL ES و Apple Metal.

مثال على OpenGL ES 3.0: العرض في نسيج

// إعداد FBO وعرض المشهد في نسيج
glBindFramebuffer(GL_FRAMEBUFFER, fbo);
glViewport(0, 0, texWidth, texHeight);
glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
glUseProgram(offscreenProgram);
glBindVertexArray(sceneVAO);
glDrawElements(GL_TRIANGLES, indexCount, GL_UNSIGNED_SHORT, 0);
// العودة إلى framebuffer الافتراضي
glBindFramebuffer(GL_FRAMEBUFFER, 0);

مثال على Metal (iOS)

// Metal: تمريرة عرض خارج الشاشة إلى نسيج
MTLRenderPassDescriptor passDesc = [MTLRenderPassDescriptor renderPassDescriptor];
passDesc.colorAttachments[0].texture = offscreenTexture;
passDesc.colorAttachments[0].loadAction = MTLLoadActionClear;
passDesc.colorAttachments[0].clearColor =
    MTLClearColorMake(0.0, 0.0, 0.0, 0.0);

id<MTLCommandBuffer> cmdBuffer = [commandQueue commandBuffer];
id<MTLRenderCommandEncoder> enc =
    [cmdBuffer renderCommandEncoderWithDescriptor:passDesc];
[enc drawIndexedPrimitives:MTLPrimitiveTypeTriangle
             indexCount:indexCount
              indexType:MTLIndexTypeUInt16
            indexBuffer:indexBuffer
      indexBufferOffset:0];
[enc endEncoding];