การใช้ Metal หรือ Vulkan API ใน Flutter

การใช้ Metal หรือ Vulkan API ใน Flutter

ในบทความก่อนหน้า เราได้สำรวจการสร้าง Custom Render Objects เพื่อควบคุมการแสดงผล UI ใน Flutter ได้อย่างละเอียด ซึ่งเป็นพื้นฐานสำคัญในการปรับแต่งการแสดงผลในระดับล่าง ในบทความนี้ เราจะก้าวไปอีกขั้นด้วยการสำรวจการใช้ Metal หรือ Vulkan API เพื่อเพิ่มประสิทธิภาพการแสดงผลกราฟิกในแอปพลิเคชัน Flutter ของคุณ

ทำไมต้อง Metal หรือ Vulkan?

Flutter ใช้ Skia Graphics Engine เป็นตัวกลางในการแปลง Widget ต่างๆ ให้เป็นภาพที่แสดงบนหน้าจอ Skia ทำงานได้ดีในหลายแพลตฟอร์ม แต่ในบางสถานการณ์ที่ต้องการประสิทธิภาพสูงสุด เช่น เกม หรือแอปพลิเคชันที่เน้นกราฟิกหนักๆ การเข้าถึงฮาร์ดแวร์โดยตรงผ่าน Metal (สำหรับ iOS และ macOS) หรือ Vulkan (สำหรับ Android และ Windows) อาจเป็นทางเลือกที่ดีกว่า

ข้อดีของการใช้ Metal หรือ Vulkan:

• ประสิทธิภาพที่สูงขึ้น: เข้าถึง GPU โดยตรง ทำให้สามารถควบคุมการทำงานของกราฟิกได้อย่างละเอียด และลด overhead ที่เกิดจาก abstraction layer
• การควบคุมที่มากขึ้น: สามารถปรับแต่ง pipeline การ rendering ได้ตามต้องการ เพื่อให้เหมาะสมกับความต้องการของแอปพลิเคชัน
• การใช้ทรัพยากรอย่างมีประสิทธิภาพ: สามารถจัดการ memory และ resources อื่นๆ ของ GPU ได้อย่างละเอียด

อย่างไรก็ตาม การใช้ Metal หรือ Vulkan ก็มีข้อเสียเช่นกัน:

• ความซับซ้อน: การเขียนโค้ด Metal หรือ Vulkan นั้นซับซ้อนกว่าการใช้ Skia มาก ต้องมีความเข้าใจอย่างลึกซึ้งเกี่ยวกับการทำงานของ GPU
• Platform-Specific: Metal ใช้ได้เฉพาะบน iOS และ macOS, Vulkan ใช้ได้บน Android และ Windows ทำให้ต้องเขียนโค้ดแยกกันสำหรับแต่ละแพลตฟอร์ม
• Maintenance ที่สูงขึ้น: เนื่องจากเป็นโค้ดระดับต่ำ การดูแลรักษาและ debugging จะยากกว่า

Skia: ตัวกลางในการแสดงผลของ Flutter

ก่อนที่จะเจาะลึกเรื่อง Metal และ Vulkan มาทำความเข้าใจ Skia กันก่อน Skia เป็น 2D graphics library ที่ใช้กันอย่างแพร่หลาย ถูกพัฒนาโดย Google และเป็นหัวใจหลักในการแสดงผลของ Flutter, Chrome, Android และอื่นๆ อีกมากมาย

Skia ทำหน้าที่เป็น abstraction layer ที่ช่วยให้ Flutter สามารถทำงานกับ hardware graphics acceleration บนแพลตฟอร์มต่างๆ ได้อย่างราบรื่น โดยไม่ต้องกังวลเรื่องรายละเอียด implementation ที่แตกต่างกัน

Skia รองรับ backend หลายประเภท เช่น:

• OpenGL: API มาตรฐานสำหรับการ rendering กราฟิก 2D และ 3D
• Metal: API สำหรับ rendering กราฟิกบน iOS และ macOS
• Vulkan: API สำหรับ rendering กราฟิกประสิทธิภาพสูงบน Android, Windows และ Linux
• Software Rendering: ใช้ CPU ในการ rendering กราฟิก (ช้ากว่า GPU แต่ใช้ได้ในกรณีที่ไม่มี GPU หรือ driver มีปัญหา)

โดยปกติแล้ว Flutter จะเลือก backend ที่เหมาะสมที่สุดโดยอัตโนมัติ แต่เราสามารถบังคับให้ Flutter ใช้ backend ที่ต้องการได้ (เช่น เพื่อการ debugging) โดยใช้ command-line flags

การใช้ Metal หรือ Vulkan ใน Flutter: แนวทาง

เนื่องจาก Flutter ไม่ได้ออกแบบมาให้ใช้งาน Metal หรือ Vulkan โดยตรง การ integrate Metal หรือ Vulkan เข้าไปใน Flutter จำเป็นต้องใช้ Platform Channels และ FFI (Foreign Function Interface)

1. Platform Channels: ใช้สำหรับสื่อสารระหว่างโค้ด Dart ใน Flutter และโค้ด native (Objective-C/Swift สำหรับ iOS/macOS, Java/Kotlin สำหรับ Android, C++ สำหรับ Windows) โค้ด native จะทำหน้าที่เป็น bridge ในการเรียกใช้ Metal หรือ Vulkan API

2. FFI (Foreign Function Interface): ใช้สำหรับเรียกใช้โค้ด C/C++ จากโค้ด Dart โดยตรง วิธีนี้มีประสิทธิภาพสูงกว่า Platform Channels แต่มีความซับซ้อนกว่า

ขั้นตอนการใช้งานโดยรวม:

1. เขียนโค้ด Metal/Vulkan: สร้างโค้ด native ที่ใช้ Metal หรือ Vulkan API เพื่อทำการ rendering กราฟิก
2. สร้าง Platform Channel/FFI Bridge: สร้าง bridge ระหว่างโค้ด Dart และโค้ด native
3. เรียกใช้โค้ด native จาก Flutter: เรียกใช้ฟังก์ชันในโค้ด native จาก Flutter ผ่าน Platform Channel หรือ FFI เพื่อทำการ rendering
4. แสดงผลลัพธ์: ส่งผลลัพธ์ของการ rendering กลับมายัง Flutter และแสดงผลบนหน้าจอ

ตัวอย่าง (แนวคิด):

สมมติว่าเราต้องการแสดงผลสามเหลี่ยมง่ายๆ โดยใช้ Metal บน iOS:

1. โค้ด Swift (Native):

// TriangleRender.swift

import MetalKit

class TriangleRender {
    private var device: MTLDevice!
    private var commandQueue: MTLCommandQueue!
    private var renderPipelineState: MTLRenderPipelineState!

    init() {
        device = MTLCreateSystemDefaultDevice()!
        commandQueue = device.makeCommandQueue()!

        let vertexShader = // โค้ด Metal Shading Language สำหรับ Vertex Shader
        let fragmentShader = // โค้ด Metal Shading Language สำหรับ Fragment Shader

        let pipelineDescriptor = MTLRenderPipelineDescriptor()
        pipelineDescriptor.vertexFunction = vertexShader
        pipelineDescriptor.fragmentFunction = fragmentShader
        pipelineDescriptor.colorAttachments[0].pixelFormat = .bgra8Unorm

        renderPipelineState = try! device.makeRenderPipelineState(descriptor: pipelineDescriptor)
    }

    func render(drawable: CAMetalDrawable) {
        let renderPassDescriptor = MTLRenderPassDescriptor()
        renderPassDescriptor.colorAttachments[0].texture = drawable.texture
        renderPassDescriptor.colorAttachments[0].loadAction = .clear
        renderPassDescriptor.colorAttachments[0].clearColor = MTLClearColor(red: 0.0, green: 0.5, blue: 0.5, alpha: 1.0)
        renderPassDescriptor.colorAttachments[0].storeAction = .store

        let commandBuffer = commandQueue.makeCommandBuffer()!
        let renderEncoder = commandBuffer.makeRenderCommandEncoder(descriptor: renderPassDescriptor)!

        // กำหนด vertex data และ draw triangle
        renderEncoder.setRenderPipelineState(renderPipelineState)
        // ...
        renderEncoder.drawPrimitives(type: .triangle, vertexStart: 0, vertexCount: 3)

        renderEncoder.endEncoding()
        commandBuffer.present(drawable: drawable)
        commandBuffer.commit()
    }
}

2. โค้ด Dart (Flutter):

// main.dart

import 'dart:ffi' as ffi;
import 'package:flutter/material.dart';
import 'dart:ui' as ui;

class MetalView extends StatefulWidget {
  @override
  _MetalViewState createState() => _MetalViewState();
}

class _MetalViewState extends State<MetalView> {
  // Load native library (สมมติว่าสร้าง shared library ไว้)
  final dylib = ffi.DynamicLibrary.open('libtriangle_render.dylib');

  // Define function pointer (สมมติว่ามีฟังก์ชัน renderTriangle)
  typedef RenderTriangleFunc = void Function(int);
  late RenderTriangleFunc renderTriangle;

  @override
  void initState() {
    super.initState();
    // Lookup function in the library
    renderTriangle = dylib
        .lookup<ffi.NativeFunction<ffi.Void Function(ffi.Int32)>>('renderTriangle')
        .asFunction<RenderTriangleFunc>();
  }

  @override
  Widget build(BuildContext context) {
    return CustomPaint(
      painter: MetalPainter(renderTriangle: renderTriangle),
      size: Size(200, 200),
    );
  }
}

class MetalPainter extends CustomPainter {
  final Function(int) renderTriangle;

  MetalPainter({required this.renderTriangle});

  @override
  void paint(Canvas canvas, Size size) {
    // Get native window handle (จำเป็นต้องใช้ native code)
    // สมมติว่ามีฟังก์ชัน getNativeWindowHandle() ที่ return handle ของ window
    int nativeWindowHandle = getNativeWindowHandle(); // ต้อง implement native side

    // Call native render function
    renderTriangle(nativeWindowHandle);

    // (อาจจะต้องมีการ convert จาก native texture เป็น Flutter Image)
    // canvas.drawImage(image, Offset.zero, Paint()); // แสดงผลลัพธ์
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return true; // repaint ทุก frame
  }
}

ข้อควรระวัง: ตัวอย่างนี้เป็นเพียงแนวคิดเท่านั้น การ implement จริงต้องใช้ความรู้และความเข้าใจเกี่ยวกับ Metal/Vulkan, Platform Channels/FFI และการจัดการ memory อย่างละเอียด

Trade-offs และแนวปฏิบัติที่ดี

การตัดสินใจว่าจะใช้ Metal หรือ Vulkan แทน Skia หรือไม่นั้น ควรพิจารณาจากปัจจัยหลายอย่าง:

• ความซับซ้อนของแอปพลิเคชัน: ถ้าแอปพลิเคชันไม่ได้ต้องการกราฟิกที่ซับซ้อนมาก Skia อาจเป็นทางเลือกที่ง่ายและรวดเร็วกว่า
• Platform Support: ถ้าแอปพลิเคชันต้องทำงานบนหลายแพลตฟอร์ม การใช้ Skia จะช่วยลดความซับซ้อนในการพัฒนา
• ประสิทธิภาพที่ต้องการ: ถ้าแอปพลิเคชันต้องการประสิทธิภาพสูงสุด และพร้อมที่จะลงทุนในความซับซ้อน Metal หรือ Vulkan อาจเป็นทางเลือกที่เหมาะสม
• ทีมงาน: ทีมงานต้องมีความรู้และความเชี่ยวชาญในการเขียนโค้ด Metal/Vulkan

แนวปฏิบัติที่ดี:

• เริ่มต้นด้วย Skia: เริ่มต้นด้วยการใช้ Skia ก่อน และค่อยพิจารณาใช้ Metal/Vulkan ถ้าจำเป็น
• Profiling: ใช้ tools ในการ profiling เพื่อระบุ bottlenecks ในการ rendering
• Incremental Integration: ค่อยๆ Integrate Metal/Vulkan เข้าไปในแอปพลิเคชัน แทนที่จะพยายาม rewrite ทั้งหมด
• Abstraction: สร้าง abstraction layer เพื่อซ่อนความซับซ้อนของ Metal/Vulkan จากโค้ด Flutter

สรุป

การใช้ Metal หรือ Vulkan API ใน Flutter เป็นหัวข้อที่ซับซ้อน แต่สามารถให้ประสิทธิภาพที่สูงขึ้นสำหรับแอปพลิเคชันที่ต้องการกราฟิกหนักๆ การตัดสินใจว่าจะใช้ Metal หรือ Vulkan หรือไม่นั้น ควรพิจารณาจากปัจจัยหลายอย่าง และควรเริ่มต้นด้วย Skia ก่อน ค่อยพิจารณาใช้ Metal/Vulkan ถ้าจำเป็น

ในบทความถัดไป เราจะสำรวจการใช้ Flutter บน Embedded Systems ซึ่งเป็นการนำ Flutter ไปใช้ในอุปกรณ์ที่ไม่ใช่โทรศัพท์มือถือหรือคอมพิวเตอร์