মোবাইল অ্যাপে ফ্রেম রেট — এটি কী, fps এবং কীভাবে বাড়ানো যায়

ফ্রেম রেট কী

ফ্রেম রেট (ফ্রেমের হার) হল একটি মেট্রিক যা প্রতি সেকেন্ডে ফ্রেমে (fps) পরিমাপ করা হয় এবং দেখায় যে একটি অ্যাপ্লিকেশন প্রতি সেকেন্ডে কতবার স্ক্রিনে ছবি আপডেট করে। মানুষের চোখ 24 fps (সিনেমা) থেকে গতিকে মসৃণ হিসেবে উপলব্ধি করে, কিন্তু ইন্টারেক্টিভ UI-এর জন্য স্পর্শ এবং অ্যানিমেশন তাৎক্ষণিক অনুভব করতে কমপক্ষে 60 fps প্রয়োজন। প্রতিটি ফ্রেম একটি সম্পূর্ণ চক্র: ব্যবহারকারীর ইনপুট প্রক্রিয়াকরণ, লেআউট গণনা, ভিউ পর্যায়ক্রম রেন্ডারিং এবং স্ক্রিনে আউটপুট। যদি কোনো ধাপ বরাদ্দকৃত সময় বাজেট (60 fps-এ 16.6 মি.সে.) অতিক্রম করে, তবে ফ্রেমটি হারিয়ে যায় এবং ব্যবহারকারী জ্যাঙ্ক দেখেন।

অ্যাপ্লিকেশনের ফ্রেম রেট এবং ডিসপ্লের রিফ্রেশ রেটের মধ্যে পার্থক্য করা গুরুত্বপূর্ণ। রিফ্রেশ রেট একটি স্ক্রিন বৈশিষ্ট্য: ডিসপ্লে প্রতি সেকেন্ডে কতবার শারীরিকভাবে ছবি আপডেট করে (60, 90, 120 বা 144 Hz)। ফ্রেম রেট হল অ্যাপ্লিকেশন প্রতি সেকেন্ডে কতগুলি ফ্রেম রেন্ডার করতে পারে। যদি অ্যাপ্লিকেশনটি 120 Hz ডিসপ্লেতে 60 fps আউটপুট করে, তবে প্রতিটি দ্বিতীয় ফ্রেম নকল হবে — ছবিটি মসৃণ থাকবে তবে যতটা প্রতিক্রিয়াশীল হতে পারত ততটা নয়। Google I/O 2023 অনুসারে, আধুনিক ফ্ল্যাগশিপ সহজ UI দৃশ্যে 120 fps ধরে রাখতে পারে, কিন্তু ভারী লোডে (গেম, জটিল তালিকা) হার 40–60 fps-এ নেমে যায়।

ফ্রেম রেন্ডারিং কীভাবে কাজ করে

মোবাইল অ্যাপ্লিকেশনে ফ্রেম রেন্ডারিং বেশ কয়েকটি ধাপের পাইপলাইনের মধ্য দিয়ে যায়। Android-এ, পাইপলাইনে অন্তর্ভুক্ত: ইনপুট প্রক্রিয়াকরণ (Input), অ্যানিমেশন (Animation), পরিমাপ এবং বিন্যাস (Layout), অঙ্কন (Draw), GPU সিঙ্ক্রোনাইজেশন এবং স্ক্রিন আউটপুট (Swap)। প্রতিটি ধাপ CPU বা GPU-তে সম্পাদিত হয় এবং সমস্ত ধাপের মোট সময় ফ্রেম বাজেট অতিক্রম করা উচিত নয়। 60 fps-এর জন্য বাজেট 16.6 মি.সে., 120 fps-এর জন্য — 8.3 মি.সে.। Choreographer (Android) এবং CADisplayLink (iOS) ডিসপ্লের উল্লম্ব ব্ল্যাঙ্কিং ইন্টারভাল (VSync) এর সাথে রেন্ডারিং সিঙ্ক্রোনাইজ করে, নিশ্চিত করে যে ফ্রেমটি কেবল স্ক্রিন রিফ্রেশের মুহূর্তেই আউটপুট হয়, টিয়ারিং এড়িয়ে।

iOS-এ, পাইপলাইন অনুরূপ: Run Loop ইভেন্ট প্রক্রিয়া করে, Core Animation স্তর গণনা করে, Render Server (একটি পৃথক প্রক্রিয়া) রেন্ডার করে এবং ফ্রেমটি GPU-তে পাঠায়। iOS-এ পার্থক্য হল ডেডিকেটেড Render Server প্রক্রিয়া, যা রেন্ডারিংকে মূল অ্যাপ্লিকেশন থেকে আলাদা করে। যদি অ্যাপ্লিকেশন প্রধান থ্রেড ব্লক করে, তবুও Render Server শেষ পরিচিত ফ্রেম আঁকতে পারে, কিন্তু অ্যানিমেশন বন্ধ হয়ে যাবে। যদি Render Server নিজেই গতি ধরে রাখতে না পারে — GPU নিষ্ক্রিয় হয় এবং ফ্রেম রেট কমে যায়। Apple WWDC 2022 অনুসারে, iOS-এ কম ফ্রেম রেটের সবচেয়ে সাধারণ কারণ হল অত্যধিক CALayer নেস্টিং, ভারী shadowPath এবং অফস্ক্রিন রেন্ডারিং।

Choreographer-এর মাধ্যমে ফ্রেম ট্র্যাকিং

Kotlin কোড Choreographer.FrameCallback-এ সাবস্ক্রাইব করে এবং ফ্রেমের মধ্যে প্রকৃত সময় লগ করে। যদি ব্যবধান 16.6 মি.সে. অতিক্রম করে, একটি হারানো ফ্রেম রেকর্ড করা হয়।

class FrameRateMonitor {

    private var lastFrameTime = 0L
    private val frameCallback =
        Choreographer.FrameCallback { frameTimeNanos ->
            if (lastFrameTime != 0L) {
                val deltaMs = (frameTimeNanos - lastFrameTime) / 1_000_000f
                if (deltaMs > 16.6f) {
                    Log.w("FrameRate",
                        "Skipped frame: $deltaMs ms")
                }
            }
            lastFrameTime = frameTimeNanos
            Choreographer.getInstance()
                .postFrameCallback(this)
        }

    fun start() {
        Choreographer.getInstance()
            .postFrameCallback(frameCallback)
    }
}

ডিসপ্লে রিফ্রেশ রেট এবং ফ্রেম রেট

রিফ্রেশ রেট ডিসপ্লের একটি হার্ডওয়্যার বৈশিষ্ট্য যা নির্ধারণ করে স্ক্রিন প্রতি সেকেন্ডে কতবার শারীরিকভাবে ছবি পুনরায় আঁকে। স্ট্যান্ডার্ড ডিসপ্লেতে 60 Hz থাকে, আধুনিক ফ্ল্যাগশিপে 90, 120 বা 144 Hz থাকে। অ্যাপ্লিকেশনের ফ্রেম রেট রিফ্রেশ রেটের চেয়ে কম, সমান বা বেশি হতে পারে (শেষ ক্ষেত্রে, অতিরিক্ত ফ্রেম বাদ দেওয়া হয়)। আদর্শ দৃশ্য হল যখন ফ্রেম রেট রিফ্রেশ রেটের সাথে মেলে: প্রতিটি হার্ডওয়্যার চক্র অ্যাপ্লিকেশন থেকে একটি নতুন ফ্রেম পায় এবং গতি সর্বাধিক মসৃণ হয়। যদি ফ্রেম রেট কম হয়, ডিসপ্লে শেষ ফ্রেমটি পুনরাবৃত্তি করে, যা মাইক্রো-জ্যাঙ্ক হিসাবে ধরা হয়।

Android এবং iOS ডায়নামিক রিফ্রেশ রেট স্যুইচিং সমর্থন করে। Android 12+ Smart Refresh Rate ব্যবহার করে: স্ক্রোল করার সময় সিস্টেম রেট 120 Hz-এ বাড়ায়, স্থিতিশীল কন্টেন্টে ব্যাটারি বাঁচাতে 60 Hz-এ কমায়। iOS ProMotion (iPhone 13 Pro এবং নতুন) একইভাবে কাজ করে — কন্টেন্টের উপর নির্ভর করে রেট 10 থেকে 120 Hz-এর মধ্যে পরিবর্তিত হয়। ডেভেলপারের উচিত ডিভাইসটি উচ্চ রেট সমর্থন করে কিনা তা পরীক্ষা করা এবং প্রতি ফ্রেমের সময় বাজেট মানিয়ে নেওয়া। যদি অ্যাপ্লিকেশনটি 8.3 মি.সে. (120 Hz-এর জন্য) এর মধ্যে একটি ফ্রেম রেন্ডার করতে না পারে, তবে 60 Hz বাধ্য করা ভাল — এটি হারানো ফ্রেম ছাড়াই একটি স্থিতিশীল ফ্রেম রেট নিশ্চিত করবে।

ফ্রেম রেট পরিমাপের টুল

মোবাইল অ্যাপ্লিকেশনে ফ্রেম রেট পরিমাপের জন্য প্ল্যাটফর্মের অন্তর্নির্মিত টুল এবং থার্ড-পার্টি প্রোফাইলার উভয়ই উপলব্ধ। Android-এ, প্রাথমিক টুল হল GPU Profiling (Developer Options → Profile GPU Rendering), যা প্রতিটি ফ্রেমের ধাপে (Draw, Prepare, Process, Execute) বিভক্ত টাইমলাইন দেখায়। আরও বিশদ বিশ্লেষণ Android Studio Profiler দ্বারা সরবরাহ করা হয় — এটি পুনরায় অঙ্কনের কারণ নির্দিষ্ট ভিউ নির্দেশ করে একটি সম্পূর্ণ রেন্ডারিং প্রোফাইল রেকর্ড করে। iOS-এ, Core Animation টেমপ্লেট সহ Instruments ব্যবহার করা হয় — এটি FPS, স্তর রেন্ডারিং সময় এবং অফস্ক্রিন রেন্ডারের সংখ্যা দেখায়।

প্রোডাকশন ফ্রেম রেট মনিটরিংয়ের জন্য, Firebase Performance (Android) ব্যবহার করা হয় — এটি পটভূমিতে ফ্রেম রেট সংগ্রহ করে এবং ডিভাইস, OS সংস্করণ এবং সেশন অনুসারে সমষ্টি করে। iOS-এ, MetricKit MXAnimatoryMetric-এর মাধ্যমে অনুরূপ ডেটা সরবরাহ করে। গেম এবং Flutter অ্যাপ্লিকেশনের জন্য, FrameTimingCallback (Flutter) এবং Unity Profiler ব্যবহার করা হয়। গড় ফ্রেম রেট নয় বরং পার্সেন্টাইল পরিমাপ করা গুরুত্বপূর্ণ: P50, P90 এবং P99। একটি অ্যাপ্লিকেশন গড় 55 fps দেখাতে পারে কিন্তু এর P99 = 30 fps হতে পারে — এর মানে হল 1% সময় ব্যবহারকারীরা তীব্র জ্যাঙ্ক দেখেন, যা নেতিবাচক পর্যালোচনার জন্য যথেষ্ট।

Flutter-এ ফ্রেম রেট পরিমাপ

Dart উদাহরণ দেখায় কিভাবে Flutter-এ FrameTimingCallback-এ সাবস্ক্রাইব করতে হয় এবং হারানো ফ্রেমের সংখ্যা লগ করতে হয়। কলব্যাক প্রতিটি সম্পূর্ণ ফ্রেমের পরে ফায়ার হয়।

import 'package:flutter/scheduler.dart';

class FrameRateLogger {
    int totalFrames = 0;
    int missedFrames = 0;

    void start() {
        SchedulerBinding.instance
            .addTimingsCallback(_onReportTimings);
    }

    void _onReportTimings(List<FrameTiming> timings) {
        for (final timing in timings) {
            totalFrames++;
            if (timing.totalSpan()
                > Duration(milliseconds: 16)) {
                missedFrames++;
            }
        }
        debugPrint("FPS: \${totalFrames - missedFrames}");
    }
}

ফ্রেমের হারের অপ্টিমাইজেশন

ফ্রেম রেট অপ্টিমাইজেশন রেন্ডারিং পাইপলাইনে বাধা চিহ্নিত করার মাধ্যমে শুরু হয়। লেআউট ধাপে, প্রধান সমস্যাগুলি হল অত্যধিক ভিউ পর্যায়ক্রম নেস্টিং, রিলেটিভ লেআউট (অনেক নিয়ম সহ RelativeLayout) ব্যবহার এবং ঘন ঘন requestLayout কল। সমাধান — ConstraintLayout বা ফ্ল্যাট পর্যায়ক্রম ব্যবহার করা, 5–6 স্তরের বেশি নেস্টিং এড়ানো। Draw ধাপে — overdraw: যখন একটি পিক্সেল প্রতি ফ্রেমে একাধিকবার আঁকা হয়। উদাহরণস্বরূপ, একটি আধা-স্বচ্ছ ফ্র্যাগমেন্টের নীচে সাদা Activity ব্যাকগ্রাউন্ড, যার নীচে আরেকটি স্তর — প্রতিটি পিক্সেল তিনবার আঁকা হয়। Debug GPU Overdraw টুল রঙ সংকেত সহ সমস্যা এলাকা দেখায়। overdraw 2x বা তার নীচে রাখার সুপারিশ করা হয়।

iOS-এ, প্রধান সমস্যাগুলি হল ভারী cornerRadius এবং masksToBounds — এগুলি অফস্ক্রিন রেন্ডারিং ঘটায়, যেখানে Core Animation একটি অস্থায়ী বাফার তৈরি করে, তাতে আঁকে, তারপর ফলাফল স্ক্রিনে কপি করে। Instruments Core Animation-এ অফস্ক্রিন রেন্ডারিং সহজেই দেখা যায়: যদি Renderer লাইন লাল হয় — সমস্যা আছে। সমাধান — cornerRadius-এর পরিবর্তে প্রি-ক্রপ করা ছবি সহ UIImageView ব্যবহার করা, একান্ত প্রয়োজন না হলে groupOpacity এবং shouldRasterize এড়ানো। উভয় প্ল্যাটফর্মের জন্যই invalidate() এবং setNeedsDisplay() কলের সংখ্যা কমানো গুরুত্বপূর্ণ — এই ধরনের প্রতিটি কল একটি সম্পূর্ণ ভিউ পুনরায় অঙ্কন চক্র শুরু করে।

Android-এ পর্যায়ক্রম অপ্টিমাইজেশন

কোডটি গভীর RelativeLayout নেস্টিংকে ফ্ল্যাট ConstraintLayout কাঠামো দিয়ে প্রতিস্থাপন প্রদর্শন করে। নেস্টিং স্তর 4 থেকে 1-এ কমালে লেআউট সময় 30–50% হ্রাস পায়।

// উদাহরণ: ConstraintLayout-এর মাধ্যমে ফ্ল্যাট কাঠামো
class OptimizedView(context: Context) :
    ConstraintLayout(context) {

    private val binding =
        ItemProfileBinding.inflate(
            LayoutInflater.from(context)
        )

    fun bind(user: User) {
        binding.avatar.setImageURI(user.avatarUrl)
        binding.nameText.text = user.name
        // পুরো কন্টেইনার পুনরায় অঙ্কন না করে ডেটা বাইন্ড করা
    }
}

অভিযোজিত ফ্রিকোয়েন্সি এবং ডায়নামিক ফ্রেম রেট

আধুনিক মোবাইল অ্যাপ্লিকেশনগুলি ক্রমবর্ধমানভাবে অভিযোজিত ফ্রেম রেট ব্যবহার করছে — একটি সিস্টেম যা বর্তমান দৃশ্য অনুসারে লক্ষ্য ফ্রিকোয়েন্সি গতিশীলভাবে সামঞ্জস্য করে। দ্রুত স্ক্রোলিংয়ের জন্য মসৃণতার জন্য 120 fps প্রয়োজন, যখন একটি স্থিতিশীল স্ক্রিনে কেবল 60 fps বা ভিডিওর জন্য 30 fps প্রয়োজন। Android-এ, অভিযোজন Choreographer.setFrameInterval (API 33+) এবং Window.setFrameRate-এর মাধ্যমে বাস্তবায়িত হয়। ডেভেলপার পছন্দের ফ্রিকোয়েন্সি নির্দিষ্ট করতে পারেন: SurfaceView-এ setPreferredRefreshRate বা Window-এ setFrameRate। iOS ProMotion-এর মাধ্যমে স্বয়ংক্রিয়ভাবে ফ্রিকোয়েন্সি পরিচালনা করে, কিন্তু ডেভেলপার CADisplayLink-এর জন্য স্পষ্টভাবে preferredFramesPerSecond সেট করতে পারেন।

ডায়নামিক ফ্রেম রেট বিশেষ করে গেম এবং অ্যানিমেশন সহ অ্যাপ্লিকেশনের জন্য গুরুত্বপূর্ণ। Google-এর মতে, স্থিতিশীল স্ক্রিনে ফ্রেম রেট 120 থেকে 60 Hz-এ কমানো GPU শক্তির 30–40% পর্যন্ত সাশ্রয় করে। মসৃণতা এবং পাওয়ার খরচের মধ্যে সর্বোত্তম ভারসাম্য অর্জনের জন্য সুপারিশ করা হয়: বিভিন্ন দৃশ্যে প্রকৃত ফ্রেম রেট পরিমাপ করুন, দৃশ্যের উপর নির্ভর করে টার্গেট fps সেট করুন (গেম — 60, মেনু — 30, ভিডিও — 24), এবং Lifecycle-aware উপাদানের মাধ্যমে মোড স্যুইচ করুন যাতে অ্যাপ্লিকেশনটি ছোট হলে পটভূমিতে 120 fps রেন্ডার করতে সম্পদ নষ্ট না করে।

পছন্দের ফ্রেম রেট সেট করা

Swift কোড iOS-এ CADisplayLink-এর জন্য preferredFramesPerSecond সেট করে। স্ক্রোল করার সময় রেট 120 Hz-এ বেড়ে যায়, থামলে 60 Hz-এ কমে যায়।

class AdaptiveFrameRateManager {

    private var displayLink: CADisplayLink?

    func startWithHighRate() {
        displayLink = CADisplayLink(
            target: self,
            selector: #selector(step)
        )
        if #available(iOS 15.0, *) {
            displayLink?.preferredFrameRateRange =
                CAFrameRateRange(
                    minimum: 60,
                    maximum: 120,
                    preferred: 120
                )
        }
        displayLink?.add(to: .current,
            forMode: .common)
    }

    @objc
    private func step() {
        // অ্যানিমেশন আপডেট
    }
}