WebGPU দিয়ে শুরু করা

Jetpack WebGPU ব্যবহার করার জন্য, আপনার প্রকল্পকে নিম্নলিখিত ন্যূনতম প্রয়োজনীয়তা পূরণ করতে হবে:

  • ন্যূনতম API স্তর : Android API 24 (Nougat) বা উচ্চতর সংস্করণ প্রয়োজন।
  • হার্ডওয়্যার : ব্যাকএন্ডের জন্য Vulkan 1.1+ সমর্থনকারী ডিভাইসগুলি পছন্দ করা হয়।
  • সামঞ্জস্যতা মোড এবং OpenGL ES সাপোর্ট : GPUAdapter অনুরোধ করার সময় স্ট্যান্ডার্ডাইজড featureLevel বিকল্পটিকে compatibility সেট করে সামঞ্জস্যতা মোডের সাথে WebGPU ব্যবহার করা সম্ভব। 
// Example of requesting an adapter with "compatibility" mode enabled:
val adapter = instance.requestAdapter(
  GPURequestAdapterOptions(featureLevel = FeatureLevel.Compatibility))

ইনস্টলেশন ও সেটআপ

পূর্বশর্ত:

অ্যান্ড্রয়েড স্টুডিও : অফিসিয়াল ওয়েবসাইট থেকে অ্যান্ড্রয়েড স্টুডিওর সর্বশেষ সংস্করণটি ডাউনলোড করুন এবং অ্যান্ড্রয়েড স্টুডিও ইনস্টলেশন গাইডে প্রদত্ত নির্দেশাবলী অনুসরণ করুন।

একটি নতুন প্রকল্প তৈরি করুন

অ্যান্ড্রয়েড স্টুডিও ইনস্টল হয়ে গেলে, আপনার ওয়েবজিপিইউ প্রকল্প সেট আপ করতে এই পদক্ষেপগুলি অনুসরণ করুন:

  1. একটি নতুন প্রকল্প শুরু করুন : অ্যান্ড্রয়েড স্টুডিও খুলুন এবং নতুন প্রকল্পে ক্লিক করুন।

  2. একটি টেমপ্লেট নির্বাচন করুন : অ্যান্ড্রয়েড স্টুডিওতে খালি কার্যকলাপ টেমপ্লেটটি নির্বাচন করুন এবং পরবর্তী ক্লিক করুন।

    অ্যান্ড্রয়েড স্টুডিও নতুন প্রকল্পের ডায়ালগ, যা স্টুডিও আপনার পক্ষ থেকে তৈরি করবে এমন কার্যকলাপের অন্তর্নির্মিত তালিকা দেখায়।
    চিত্র ১. অ্যান্ড্রয়েড স্টুডিওতে একটি নতুন প্রকল্প তৈরি করা

  3. আপনার প্রকল্পটি কনফিগার করুন :

    • নাম : আপনার প্রকল্পের একটি নাম দিন (যেমন, "JetpackWebGPUSample")।
    • প্যাকেজের নাম : যাচাই করুন যে প্যাকেজের নামটি আপনার নির্বাচিত নেমস্পেসের সাথে মেলে (যেমন, com.example.webgpuapp)।
    • ভাষা : কোটলিন নির্বাচন করুন।
    • ন্যূনতম SDK : এই লাইব্রেরির জন্য সুপারিশকৃত API 24: Android 7.0 (Nougat) বা উচ্চতর সংস্করণ নির্বাচন করুন।
    • বিল্ড কনফিগারেশন ভাষা : আধুনিক নির্ভরতা ব্যবস্থাপনার জন্য কোটলিন ডিএসএল (build.gradle.kts) ব্যবহার করার পরামর্শ দেওয়া হচ্ছে।
    অ্যান্ড্রয়েড স্টুডিও খালি অ্যাক্টিভিটি ডায়ালগটিতে নতুন খালি অ্যাক্টিভিটি পূরণ করার জন্য ক্ষেত্র রয়েছে, যেমন নাম, প্যাকেজের নাম, সংরক্ষণ অবস্থান এবং ন্যূনতম SDK।
    চিত্র ২। একটি খালি কার্যকলাপ দিয়ে শুরু করা

  4. Finish : Finish এ ক্লিক করুন এবং Android Studio আপনার প্রোজেক্ট ফাইল সিঙ্ক করার জন্য অপেক্ষা করুন।

WebGPU Jetpack লাইব্রেরি যোগ করুন

androidx.webgpu লাইব্রেরিতে WebGPU NDK .so লাইব্রেরি ফাইলের পাশাপাশি পরিচালিত কোড ইন্টারফেসও রয়েছে।

আপনি আপনার build.gradle আপডেট করে এবং Android Studio-তে "Sync Project" বোতামটি ব্যবহার করে gradle ফাইলগুলির সাথে আপনার প্রকল্পটি সিঙ্ক্রোনাইজ করে লাইব্রেরি সংস্করণটি আপডেট করতে পারেন।

উচ্চ-স্তরের স্থাপত্য

একটি অ্যান্ড্রয়েড অ্যাপ্লিকেশনের মধ্যে WebGPU রেন্ডারিং একটি ডেডিকেটেড রেন্ডারিং থ্রেডে চালানো হয় যাতে UI এর প্রতিক্রিয়াশীলতা বজায় থাকে।

  • UI লেয়ার : UIটি Jetpack Compose দিয়ে তৈরি। একটি WebGPU অঙ্কন পৃষ্ঠ AndroidExternalSurface ব্যবহার করে Compose অনুক্রমের সাথে একীভূত করা হয়।
  • রেন্ডারিং লজিক : একটি বিশেষায়িত ক্লাস (যেমন, WebGpuRenderer) সমস্ত WebGPU অবজেক্ট পরিচালনা এবং রেন্ডারিং লুপ সমন্বয়ের জন্য দায়ী।
  • শেডার লেয়ার : WGSL শেডার কোড res বা স্ট্রিং ধ্রুবকগুলিতে সংরক্ষিত।
একটি WebGPU অ্যান্ড্রয়েড অ্যাপ্লিকেশনে UI থ্রেড, একটি ডেডিকেটেড রেন্ডারিং থ্রেড এবং GPU হার্ডওয়্যারের মধ্যে মিথস্ক্রিয়া দেখানো উচ্চ-স্তরের আর্কিটেকচার ডায়াগ্রাম।
চিত্র ৩. অ্যান্ড্রয়েড উচ্চ-স্তরের আর্কিটেকচারে ওয়েবজিপিইউ

ধাপে ধাপে: নমুনা অ্যাপ

এই বিভাগটি স্ক্রিনে একটি রঙিন ত্রিভুজ তৈরি করার জন্য প্রয়োজনীয় পদক্ষেপগুলি নিয়ে আলোচনা করে, মূল WebGPU কর্মপ্রবাহটি প্রদর্শন করে।

প্রধান কার্যকলাপ 

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            WebGpuSurface()
        }
    }
}

বাহ্যিক পৃষ্ঠ কম্পোজেবল

WebgpuSurface.kt নামে একটি নতুন ফাইল তৈরি করুন। এই Composable AndroidExternalSurface কে মোড়ানোর মাধ্যমে Compose এবং আপনার রেন্ডারারের মধ্যে একটি সেতু তৈরি করে।

@Composable
fun WebGpuSurface(modifier: Modifier = Modifier) {
    // Create and remember a WebGpuRenderer instance.
    val renderer = remember { WebGpuRenderer() }
    AndroidExternalSurface(
        modifier = modifier.fillMaxSize(),
    ) {
        // This block is called when the surface is created or resized.
        onSurface { surface, width, height ->
            // Run the rendering logic on a background thread.
            withContext(Dispatchers.Default) {
                try {
                    // Initialize the renderer with the surface
                    renderer.init(surface, width, height)
                    // Render a frame.
                    renderer.render() 
                } finally {
                    // Clean up resources when the surface is destroyed.
                    renderer.cleanup()
                }
            }
        }
    }
}

রেন্ডারার সেট আপ করুন

WebGpuRenderer.kt তে একটি WebGpuRenderer ক্লাস তৈরি করুন। এই ক্লাসটি GPU এর সাথে যোগাযোগের ভারী কাজ পরিচালনা করবে।

প্রথমে, ক্লাস স্ট্রাকচার এবং ভেরিয়েবলগুলি সংজ্ঞায়িত করুন:

class WebGpuRenderer() {
    private lateinit var webGpu: WebGpu
    private lateinit var renderPipeline: GPURenderPipeline
}

ইনিশিয়ালাইজেশন: এরপর, WebGPU ইনস্ট্যান্স তৈরি করতে এবং সারফেস কনফিগার করতে init ফাংশনটি বাস্তবায়ন করুন। এই ফাংশনটি AndroidExternalSurface স্কোপ দ্বারা ডাকা হয় যা আমরা আগে তৈরি বাহ্যিক সারফেস কম্পোজেবলের ভিতরে।

দ্রষ্টব্য: init ফাংশনটি createWebGpu ব্যবহার করে, যা একটি সহায়ক পদ্ধতি ( androidx.webgpu.helper এর অংশ) সেটআপকে স্ট্রিমলাইন করার জন্য। এই ইউটিলিটি WebGPU ইনস্ট্যান্স তৈরি করে, একটি অ্যাডাপ্টার নির্বাচন করে এবং একটি ডিভাইসের জন্য অনুরোধ করে।

// Inside WebGpuRenderer class
suspend fun init(surface: Surface, width: Int, height: Int) {
    // 1. Create Instance & Device
    webGpu = createWebGpu(surface)
    val device = webGpu.device

    // 2. Setup Pipeline (compile shaders)
    initPipeline(device)

    // 3. Configure the Surface
    webGpu.webgpuSurface.configure(
      GPUSurfaceConfiguration(
        device,
        width,
        height,
        TextureFormat.RGBA8Unorm,
      )
    )
  }

androidx.webgpu লাইব্রেরিতে JNI এবং .so ফাইল রয়েছে, যেগুলি স্বয়ংক্রিয়ভাবে বিল্ড সিস্টেম দ্বারা সংযুক্ত এবং পরিচালিত হয়। সহায়ক পদ্ধতি createWebGpu বান্ডেল করা libwebgpu_c_bundled.so লোড করার যত্ন নেয়।

পাইপলাইন সেটআপ

এখন যেহেতু আমাদের একটি ডিভাইস আছে, আমাদের GPU কে ​​বলতে হবে কিভাবে আমাদের ত্রিভুজ আঁকতে হয়। আমরা একটি "পাইপলাইন" তৈরি করে এটি করি যাতে আমাদের শেডার কোড থাকে (WGSL তে লেখা)।

শেডার কম্পাইল করতে এবং রেন্ডার পাইপলাইন তৈরি করতে আপনার WebGpuRenderer ক্লাসে এই প্রাইভেট হেল্পার ফাংশনটি যোগ করুন।

// Inside WebGpuRenderer class
private fun initPipeline(device: GPUDevice) {
    val shaderCode = """
        @vertex fn vs_main(@builtin(vertex_index) vertexIndex : u32) ->
        @builtin(position) vec4f {
            const pos = array(vec2f(0.0, 0.5), vec2f(-0.5, -0.5), vec2f(0.5, -0.5));
            return vec4f(pos[vertexIndex], 0, 1);
        }
        @fragment fn fs_main() -> @location(0) vec4f {
            return vec4f(1, 0, 0, 1);
        }
    """

    // Create Shader Module
    val shaderModule = device.createShaderModule(
      GPUShaderModuleDescriptor(shaderSourceWGSL = GPUShaderSourceWGSL(shaderCode))
    )

    // Create Render Pipeline
    renderPipeline = device.createRenderPipeline(
      GPURenderPipelineDescriptor(
        vertex = GPUVertexState(
          shaderModule,
        ), fragment = GPUFragmentState(
          shaderModule, targets = arrayOf(GPUColorTargetState(TextureFormat.RGBA8Unorm))
        ), primitive = GPUPrimitiveState(PrimitiveTopology.TriangleList)
      )
    )
  }

একটি ফ্রেম আঁকুন

পাইপলাইন প্রস্তুত হওয়ার পর, আমরা এখন রেন্ডার ফাংশনটি বাস্তবায়ন করতে পারি। এই ফাংশনটি স্ক্রিন থেকে পরবর্তী উপলব্ধ টেক্সচারটি অর্জন করে, অঙ্কন কমান্ড রেকর্ড করে এবং GPU-তে জমা দেয়।

আপনার WebGpuRenderer ক্লাসে এই পদ্ধতিটি যোগ করুন:

// Inside WebGpuRenderer class
fun render() {
    if (!::webGpu.isInitialized) {
      return
    }

    val gpu = webGpu

    // 1. Get the next available texture from the screen
    val surfaceTexture = gpu.webgpuSurface.getCurrentTexture()

    // 2. Create a command encoder
    val commandEncoder = gpu.device.createCommandEncoder()

    // 3. Begin a render pass (clearing the screen to blue)
    val renderPass = commandEncoder.beginRenderPass(
      GPURenderPassDescriptor(
        colorAttachments = arrayOf(
          GPURenderPassColorAttachment(
            GPUColor(0.0, 0.0, 0.5, 1.0),
            surfaceTexture.texture.createView(),
            loadOp = LoadOp.Clear,
            storeOp = StoreOp.Store,
          )
        )
      )
    )

    // 4. Draw
    renderPass.setPipeline(renderPipeline)
    renderPass.draw(3) // Draw 3 vertices
    renderPass.end()

    // 5. Submit and Present
    gpu.device.queue.submit(arrayOf(commandEncoder.finish()))
    gpu.webgpuSurface.present()
  }

রিসোর্স পরিষ্কার

পরিষ্কারকরণ ফাংশনটি বাস্তবায়ন করুন, যা WebGpuSurface দ্বারা কল করা হয় যখন পৃষ্ঠটি ধ্বংস হয়ে যায়।

// Inside WebGpuRenderer class
fun cleanup() {
    if (::webGpu.isInitialized) {
      webGpu.close()
    }
  }

রেন্ডার করা আউটপুট

একটি অ্যান্ড্রয়েড ফোনের স্ক্রিনশট যেখানে একটি ওয়েবজিপিইউ অ্যাপ্লিকেশনের আউটপুট দেখানো হচ্ছে: একটি গাঢ় নীল পটভূমির কেন্দ্রে একটি ঘন লাল ত্রিভুজ।
চিত্র ৪। নমুনা WebGPU অ্যাপ্লিকেশনের রেন্ডার করা আউটপুট যেখানে একটি লাল ত্রিভুজ দেখানো হয়েছে

নমুনা অ্যাপ কাঠামো

আপনার রেন্ডারিং বাস্তবায়নকে আপনার UI লজিক থেকে আলাদা করা একটি ভালো অভ্যাস, যেমনটি sample অ্যাপে ব্যবহৃত কাঠামোতে করা হয়েছে:

app/src/main/
├── java/com/example/app/
│   ├── MainActivity.kt       // Entry point
│   ├── WebGpuSurface.kt      // Composable Surface
│   └── WebGpuRenderer.kt     // Pure WebGPU logic
  • MainActivity.kt : অ্যাপ্লিকেশন এন্ট্রি পয়েন্ট। এটি কন্টেন্টকে WebGpuSurface Composable এ সেট করে।
  • WebGpuSurface.kt : [AndroidExternalSurface](/reference/kotlin/androidx/compose/foundation/package-summary#AndroidExternalSurface(androidx.compose.ui.Modifier,kotlin.Boolean,androidx.compose.ui.unit.IntSize,androidx.compose.foundation.AndroidExternalSurfaceZOrder,kotlin.Boolean,kotlin.Function1)) ব্যবহার করে UI উপাদান সংজ্ঞায়িত করে। এটি Surface লাইফসাইকেল স্কোপ পরিচালনা করে, সারফেস প্রস্তুত হলে রেন্ডারার শুরু করে এবং ধ্বংস হয়ে গেলে পরিষ্কার করে।
  • WebGpuRenderer.kt : সমস্ত WebGPU-নির্দিষ্ট লজিক (ডিভাইস তৈরি, পাইপলাইন সেটআপ) ধারণ করে। এটি UI থেকে আলাদা করা হয়, শুধুমাত্র [Surface](/reference/android/view/Surface.html) এবং এটি আঁকতে প্রয়োজনীয় মাত্রা গ্রহণ করে।

জীবনচক্র এবং সম্পদ ব্যবস্থাপনা

জীবনচক্র ব্যবস্থাপনা Jetpack Compose-এর মধ্যে [AndroidExternalSurface](/reference/kotlin/androidx/compose/foundation/package-summary#AndroidExternalSurface(androidx.compose.ui.Modifier,kotlin.Boolean,androidx.compose.ui.unit.IntSize,androidx.compose.foundation.AndroidExternalSurfaceZOrder,kotlin.Boolean,kotlin.Function1)) দ্বারা প্রদত্ত Kotlin Coroutine স্কোপ দ্বারা পরিচালিত হয়।

  • সারফেস তৈরি : onSurface ল্যাম্বডা ব্লকের শুরুতে Device এবং Surface কনফিগারেশন শুরু করুন। Surface উপলব্ধ হওয়ার সাথে সাথে এই কোডটি কাজ করে।
  • সারফেস ডেস্ট্রাকশন : যখন ব্যবহারকারী অন্যত্র চলে যায় অথবা সিস্টেম দ্বারা Surface ধ্বংস হয়ে যায়, তখন ল্যাম্বডা ব্লক বাতিল হয়ে যায়। মেমোরি লিক প্রতিরোধের জন্য renderer.cleanup() নামে একটি finally ব্লক কার্যকর করা হয়।
  • আকার পরিবর্তন : যদি পৃষ্ঠের মাত্রা পরিবর্তন হয়, তাহলে AndroidExternalSurface ব্লকটি পুনরায় চালু করতে পারে অথবা কনফিগারেশনের উপর নির্ভর করে সরাসরি আপডেটগুলি পরিচালনা করতে পারে, তাই রেন্ডারার সর্বদা একটি বৈধ বাফারে লেখে।

ডিবাগিং এবং যাচাইকরণ

WebGPU-তে ইনপুট স্ট্রাকচার যাচাই এবং রানটাইম ত্রুটি ক্যাপচার করার জন্য ডিজাইন করা মেকানিজম রয়েছে।

  • লগক্যাট: যাচাইকরণ ত্রুটিগুলি অ্যান্ড্রয়েড লগক্যাটে প্রিন্ট করা হয়।
  • ত্রুটির সুযোগ: আপনি [device.pushErrorScope()](/reference/kotlin/androidx/webgpu/GPUDevice#pushErrorScope(kotlin.Int)) এবং ` device.popErrorScope() ব্লকের মধ্যে GPU কমান্ডগুলিকে এনক্যাপসুলেট করে নির্দিষ্ট ত্রুটিগুলি ক্যাপচার করতে পারেন। 
device.pushErrorScope(ErrorFilter.Validation)
// ... potentially incorrect code ...
device.popErrorScope { status, type, message ->
    if (status == PopErrorScopeStatus.Success && type != ErrorType.NoError) {
        Log.e("WebGPU", "Validation Error: $message")
    } 
}

পারফর্ম্যান্স টিপস

WebGPU তে প্রোগ্রামিং করার সময়, পারফরম্যান্সের বাধা এড়াতে নিম্নলিখিত বিষয়গুলি বিবেচনা করুন:

  • প্রতি-ফ্রেম অবজেক্ট তৈরি এড়িয়ে চলুন : অ্যাপ্লিকেশন সেটআপের সময় একবার পাইপলাইন ( GPURenderPipeline ), গ্রুপ লেআউট এবং শেডার মডিউলগুলিকে বাইন্ড করুন যাতে পুনঃব্যবহার সর্বাধিক হয়।
  • বাফার ব্যবহার অপ্টিমাইজ করুন : প্রতিটি ফ্রেমে নতুন বাফার তৈরি করার পরিবর্তে GPUQueue.writeBuffer এর মাধ্যমে বিদ্যমান GPUBuffers এর বিষয়বস্তু আপডেট করুন।
  • স্টেট পরিবর্তনগুলি মিনিমাইজ করুন : একই পাইপলাইন ভাগ করে এমন কলগুলিকে গ্রুপ ড্র করুন এবং ড্রাইভার ওভারহেড কমাতে এবং রেন্ডারিং দক্ষতা উন্নত করতে গ্রুপগুলিকে আবদ্ধ করুন।