WebGPU দিয়ে একটি অ্যাপ তৈরি করুন

François Beaufort

ওয়েব ডেভেলপারদের জন্য, WebGPU হল একটি ওয়েব গ্রাফিক্স API যা GPU-তে একীভূত এবং দ্রুত অ্যাক্সেস প্রদান করে। WebGPU আধুনিক হার্ডওয়্যার সক্ষমতা প্রকাশ করে এবং Direct3D 12, Metal, এবং Vulkan-এর মতো GPU-তে রেন্ডারিং এবং গণনা করার অনুমতি দেয়।

যদিও সত্য, সেই গল্পটি অসম্পূর্ণ। WebGPU হল অ্যাপল, গুগল, ইন্টেল, মজিলা এবং মাইক্রোসফ্টের মতো বড় কোম্পানিগুলি সহ একটি সহযোগী প্রচেষ্টার ফলাফল। তাদের মধ্যে, কেউ কেউ বুঝতে পেরেছিলেন যে WebGPU একটি Javascript API এর চেয়ে বেশি হতে পারে, কিন্তু ওয়েব ছাড়া অন্য ইকোসিস্টেম জুড়ে বিকাশকারীদের জন্য একটি ক্রস-প্ল্যাটফর্ম গ্রাফিক্স API।

প্রাথমিক ব্যবহারের ক্ষেত্রে, Chrome 113-এ একটি JavaScript API প্রবর্তন করা হয়েছিল। যাইহোক, এটির পাশাপাশি আরেকটি উল্লেখযোগ্য প্রকল্প তৈরি করা হয়েছে: webgpu.h C API। এই C শিরোনাম ফাইলটি WebGPU এর সমস্ত উপলব্ধ পদ্ধতি এবং ডেটা স্ট্রাকচার তালিকাভুক্ত করে। এটি একটি প্ল্যাটফর্ম-অজ্ঞেয়বাদী হার্ডওয়্যার বিমূর্ত স্তর হিসাবে কাজ করে, যা আপনাকে বিভিন্ন প্ল্যাটফর্ম জুড়ে একটি সামঞ্জস্যপূর্ণ ইন্টারফেস প্রদান করে প্ল্যাটফর্ম-নির্দিষ্ট অ্যাপ্লিকেশন তৈরি করতে দেয়।

এই নথিতে, আপনি ওয়েবজিপিউ ব্যবহার করে একটি ছোট C++ অ্যাপ কীভাবে লিখবেন তা শিখবেন যা ওয়েব এবং নির্দিষ্ট প্ল্যাটফর্ম উভয়েই চলে। স্পয়লার সতর্কতা, আপনি একই লাল ত্রিভুজ পাবেন যা ব্রাউজার উইন্ডোতে প্রদর্শিত হয় এবং একটি ডেস্কটপ উইন্ডোতে আপনার কোডবেসে ন্যূনতম সমন্বয় সহ।

একটি ব্রাউজার উইন্ডো এবং একটি ডেস্কটপ উইন্ডোতে WebGPU দ্বারা চালিত একই ত্রিভুজ।

এটা কিভাবে কাজ করে?

সম্পূর্ণ অ্যাপ্লিকেশন দেখতে WebGPU ক্রস-প্ল্যাটফর্ম অ্যাপ রিপোজিটরি দেখুন।

অ্যাপটি হল একটি সংক্ষিপ্ত C++ উদাহরণ যা দেখায় কিভাবে একটি একক কোডবেস থেকে ডেস্কটপ এবং ওয়েব অ্যাপ তৈরি করতে WebGPU ব্যবহার করতে হয়। হুডের নিচে, এটি WebGPU-এর webgpu.h-কে একটি প্ল্যাটফর্ম-অজ্ঞেয়বাদী হার্ডওয়্যার বিমূর্তকরণ স্তর হিসাবে একটি C++ র‍্যাপার ওয়েবgpu_cpp.h নামে ব্যবহার করে।

সতর্কতা: webgpu.h এবং webgpu_cpp.h API পরিবর্তন সাপেক্ষে।

ওয়েবে, অ্যাপটি Emscripten এর বিপরীতে তৈরি করা হয়েছে, যা JavaScript API-এর উপরে webgpu.h প্রয়োগকারী বাইন্ডিং রয়েছে। macOS বা Windows এর মতো নির্দিষ্ট প্ল্যাটফর্মে, এই প্রকল্পটি Dawn , Chromium-এর ক্রস-প্ল্যাটফর্ম WebGPU বাস্তবায়নের বিপরীতে তৈরি করা যেতে পারে। এটা উল্লেখ করার মতো wgpu-native , webgpu.h এর একটি মরিচা বাস্তবায়ন, এছাড়াও বিদ্যমান কিন্তু এই নথিতে ব্যবহার করা হয় না।

এবার শুরু করা যাক

শুরু করতে, আপনাকে একটি C++ কম্পাইলার এবং CMake ক্রস-প্ল্যাটফর্ম বিল্ডগুলিকে একটি আদর্শ উপায়ে পরিচালনা করতে হবে। একটি ডেডিকেটেড ফোল্ডারের ভিতরে, একটি main.cpp সোর্স ফাইল এবং একটি CMakeLists.txt বিল্ড ফাইল তৈরি করুন৷

main.cpp ফাইলে আপাতত একটি খালি main() ফাংশন থাকা উচিত।

int main() {}

CMakeLists.txt ফাইলটিতে প্রকল্প সম্পর্কে প্রাথমিক তথ্য রয়েছে। শেষ লাইনটি উল্লেখ করে যে এক্সিকিউটেবল নাম "অ্যাপ" এবং এর সোর্স কোড হল main.cpp ।

cmake_minimum_required(VERSION 3.13) # CMake version check
project(app)                         # Create project "app"
set(CMAKE_CXX_STANDARD 20)           # Enable C++20 standard

add_executable(app "main.cpp")

একটি "build/" সাব ফোল্ডারে বিল্ড ফাইল তৈরি করতে cmake -B build চালান এবং অ্যাপটি তৈরি করতে এবং এক্সিকিউটেবল ফাইল জেনারেট করতে cmake --build build চালান।

# Build the app with CMake.
$ cmake -B build && cmake --build build

# Run the app.
$ ./build/app

অ্যাপটি চলে কিন্তু এখনও কোনও আউটপুট নেই, কারণ আপনার স্ক্রিনে জিনিস আঁকার একটি উপায় প্রয়োজন।

ডন পান

আপনার ত্রিভুজ আঁকতে, আপনি Dawn , Chromium-এর ক্রস-প্ল্যাটফর্ম WebGPU বাস্তবায়নের সুবিধা নিতে পারেন। এতে পর্দায় আঁকার জন্য GLFW C++ লাইব্রেরি রয়েছে। ডন ডাউনলোড করার একটি উপায় হল এটিকে আপনার সংগ্রহস্থলে একটি গিট সাবমডিউল হিসাবে যুক্ত করা। নিম্নলিখিত কমান্ডগুলি এটিকে "dawn/" সাব ফোল্ডারে নিয়ে আসে।

$ git init
$ git submodule add https://dawn.googlesource.com/dawn

তারপরে, CMakeLists.txt ফাইলে নিম্নরূপ যুক্ত করুন:

• CMake DAWN_FETCH_DEPENDENCIES বিকল্পটি সমস্ত ডন নির্ভরতা নিয়ে আসে।
• dawn/ সাব ফোল্ডার টার্গেটে অন্তর্ভুক্ত করা হয়েছে।
• আপনার অ্যাপটি webgpu_cpp , webgpu_dawn , এবং webgpu_glfw টার্গেটের উপর নির্ভর করবে যাতে আপনি সেগুলিকে পরে main.cpp ফাইলে ব্যবহার করতে পারেন।

…
set(DAWN_FETCH_DEPENDENCIES ON)
add_subdirectory("dawn" EXCLUDE_FROM_ALL)
target_link_libraries(app PRIVATE webgpu_cpp webgpu_dawn webgpu_glfw)

একটি জানালা খুলুন

এখন যেহেতু ডন উপলব্ধ, স্ক্রিনে জিনিসগুলি আঁকতে GLFW ব্যবহার করুন৷ সুবিধার জন্য webgpu_glfw তে অন্তর্ভুক্ত এই লাইব্রেরিটি আপনাকে উইন্ডো পরিচালনার জন্য প্ল্যাটফর্ম-অজ্ঞেয়বাদী কোড লিখতে দেয়।

512x512 রেজোলিউশন সহ "WebGPU উইন্ডো" নামে একটি উইন্ডো খুলতে, নীচের মত main.cpp ফাইলটি আপডেট করুন৷ উল্লেখ্য যে glfwWindowHint() এখানে ব্যবহার করা হয়েছে কোনো বিশেষ গ্রাফিক্স API আরম্ভ করার অনুরোধ করতে।

#include <GLFW/glfw3.h>

const uint32_t kWidth = 512;
const uint32_t kHeight = 512;

void Start() {
  if (!glfwInit()) {
    return;
  }

  glfwWindowHint(GLFW_CLIENT_API, GLFW_NO_API);
  GLFWwindow* window =
      glfwCreateWindow(kWidth, kHeight, "WebGPU window", nullptr, nullptr);

  while (!glfwWindowShouldClose(window)) {
    glfwPollEvents();
    // TODO: Render a triangle using WebGPU.
  }
}

int main() {
  Start();
}

অ্যাপটি পুনর্নির্মাণ করা এবং এটিকে আগের মতো চালানোর ফলে একটি খালি উইন্ডো দেখা যায়। আপনি উন্নতি করছেন!

একটা খালি জানালা।

জিপিইউ ডিভাইস পান

জাভাস্ক্রিপ্টে, navigator.gpu হল GPU অ্যাক্সেস করার জন্য আপনার এন্ট্রিপয়েন্ট। C++ এ, আপনাকে ম্যানুয়ালি একটি wgpu::Instance ভেরিয়েবল তৈরি করতে হবে যা একই উদ্দেশ্যে ব্যবহৃত হয়। সুবিধার জন্য, main.cpp ফাইলের উপরে instance ঘোষণা করুন এবং main() ভিতরে wgpu::CreateInstance() কল করুন।

…
#include <webgpu/webgpu_cpp.h>

wgpu::Instance instance;
…

int main() {
  instance = wgpu::CreateInstance();
  Start();
}

জাভাস্ক্রিপ্ট API এর আকৃতির কারণে GPU অ্যাক্সেস করা অ্যাসিঙ্ক্রোনাস। C++ এ, একটি হেল্পার GetDevice() ফাংশন তৈরি করুন যা একটি কলব্যাক ফাংশন আর্গুমেন্ট নেয় এবং ফলস্বরূপ wgpu::Device সাথে কল করে।

দ্রষ্টব্য: WebAssembly JavaScript প্রতিশ্রুতি ইন্টিগ্রেশন API উপলব্ধ হলে এই উদাহরণটি সরলীকৃত হয়। লেখার সময় এটি এমন নয়।

#include <iostream>
…

void GetDevice(void (*callback)(wgpu::Device)) {
  instance.RequestAdapter(
      nullptr,
      [](WGPURequestAdapterStatus status, WGPUAdapter cAdapter,
         const char* message, void* userdata) {
        if (status != WGPURequestAdapterStatus_Success) {
          exit(0);
        }
        wgpu::Adapter adapter = wgpu::Adapter::Acquire(cAdapter);
        adapter.RequestDevice(
            nullptr,
            [](WGPURequestDeviceStatus status, WGPUDevice cDevice,
               const char* message, void* userdata) {
              wgpu::Device device = wgpu::Device::Acquire(cDevice);
              device.SetUncapturedErrorCallback(
                  [](WGPUErrorType type, const char* message, void* userdata) {
                    std::cout << "Error: " << type << " - message: " << message;
                  },
                  nullptr);
              reinterpret_cast<void (*)(wgpu::Device)>(userdata)(device);
            },
            userdata);
      },
      reinterpret_cast<void*>(callback));
}

সহজে অ্যাক্সেসের জন্য, main.cpp ফাইলের শীর্ষে একটি wgpu::Device ভেরিয়েবল ঘোষণা করুন এবং GetDevice() কল করতে main() ফাংশন আপডেট করুন এবং Start() কল করার আগে device এর ফলাফল কলব্যাক বরাদ্দ করুন।

wgpu::Device device;
…

int main() {
  instance = wgpu::CreateInstance();
  GetDevice([](wgpu::Device dev) {
    device = dev;
    Start();
  });
}

একটি ত্রিভুজ আঁকুন

জাভাস্ক্রিপ্ট এপিআইতে সোয়াপ চেইনটি প্রকাশ করা হয় না কারণ ব্রাউজার এটির যত্ন নেয়। C++ এ, আপনাকে এটি ম্যানুয়ালি তৈরি করতে হবে। আবারও, সুবিধার জন্য, main.cpp ফাইলের উপরে একটি wgpu::SwapChain ভেরিয়েবল ঘোষণা করুন। Start() এ GLFW উইন্ডো তৈরি করার পর, একটি wgpu:: wgpu::Surface (একটি HTML ক্যানভাসের মতো) তৈরি করতে সহজ wgpu::glfw::CreateSurfaceForWindow() ফাংশনটি কল করুন এবং নতুন কল করে সোয়াপ চেইন সেটআপ করতে এটি ব্যবহার করুন। InitGraphics() এ helper SetupSwapChain() ফাংশন। আপনি swapChain.Present() কল করতে হবে যখন লুপে পরবর্তী টেক্সচার উপস্থাপন করুন। এটির কোনো দৃশ্যমান প্রভাব নেই কারণ এখনো কোনো রেন্ডারিং হচ্ছে না।

#include <webgpu/webgpu_glfw.h>
…

wgpu::SwapChain swapChain;

void SetupSwapChain(wgpu::Surface surface) {
  wgpu::SwapChainDescriptor scDesc{
      .usage = wgpu::TextureUsage::RenderAttachment,
      .format = wgpu::TextureFormat::BGRA8Unorm,
      .width = kWidth,
      .height = kHeight,
      .presentMode = wgpu::PresentMode::Fifo};
  swapChain = device.CreateSwapChain(surface, &scDesc);
}

void InitGraphics(wgpu::Surface surface) {
  SetupSwapChain(surface);
}

void Render() {
  // TODO: Render a triangle using WebGPU.
}

void Start() {
  …
  wgpu::Surface surface =
      wgpu::glfw::CreateSurfaceForWindow(instance, window);

  InitGraphics(surface);

  while (!glfwWindowShouldClose(window)) {
    glfwPollEvents();
    Render();
    swapChain.Present();
    instance.ProcessEvents();
  }
}

নীচের কোডটি দিয়ে রেন্ডার পাইপলাইন তৈরি করার এখন একটি ভাল সময়। সহজে অ্যাক্সেসের জন্য, main.cpp ফাইলের শীর্ষে একটি wgpu::RenderPipeline ভেরিয়েবল ঘোষণা করুন এবং InitGraphics() -এ সাহায্যকারী ফাংশন CreateRenderPipeline() কল করুন।

wgpu::RenderPipeline pipeline;
…

const char shaderCode[] = R"(
    @vertex fn vertexMain(@builtin(vertex_index) i : u32) ->
      @builtin(position) vec4f {
        const pos = array(vec2f(0, 1), vec2f(-1, -1), vec2f(1, -1));
        return vec4f(pos[i], 0, 1);
    }
    @fragment fn fragmentMain() -> @location(0) vec4f {
        return vec4f(1, 0, 0, 1);
    }
)";

void CreateRenderPipeline() {
  wgpu::ShaderModuleWGSLDescriptor wgslDesc{};
  wgslDesc.code = shaderCode;

  wgpu::ShaderModuleDescriptor shaderModuleDescriptor{
      .nextInChain = &wgslDesc};
  wgpu::ShaderModule shaderModule =
      device.CreateShaderModule(&shaderModuleDescriptor);

  wgpu::ColorTargetState colorTargetState{
      .format = wgpu::TextureFormat::BGRA8Unorm};

  wgpu::FragmentState fragmentState{.module = shaderModule,
                                    .targetCount = 1,
                                    .targets = &colorTargetState};

  wgpu::RenderPipelineDescriptor descriptor{
      .vertex = {.module = shaderModule},
      .fragment = &fragmentState};
  pipeline = device.CreateRenderPipeline(&descriptor);
}

void InitGraphics(wgpu::Surface surface) {
  …
  CreateRenderPipeline();
}

অবশেষে, প্রতিটি ফ্রেম নামক Render() ফাংশনে GPU-তে রেন্ডারিং কমান্ড পাঠান।

void Render() {
  wgpu::RenderPassColorAttachment attachment{
      .view = swapChain.GetCurrentTextureView(),
      .loadOp = wgpu::LoadOp::Clear,
      .storeOp = wgpu::StoreOp::Store};

  wgpu::RenderPassDescriptor renderpass{.colorAttachmentCount = 1,
                                        .colorAttachments = &attachment};

  wgpu::CommandEncoder encoder = device.CreateCommandEncoder();
  wgpu::RenderPassEncoder pass = encoder.BeginRenderPass(&renderpass);
  pass.SetPipeline(pipeline);
  pass.Draw(3);
  pass.End();
  wgpu::CommandBuffer commands = encoder.Finish();
  device.GetQueue().Submit(1, &commands);
}

CMake এর সাথে অ্যাপটিকে পুনর্নির্মাণ করা এবং এটিকে এখন চালানোর ফলে একটি উইন্ডোতে দীর্ঘ প্রতীক্ষিত লাল ত্রিভুজ দেখা যায়! একটি বিরতি নিন - আপনি এটি প্রাপ্য.

ডেস্কটপের উইন্ডোতে একটি লাল ত্রিভুজ।

WebAssembly কম্পাইল

ব্রাউজার উইন্ডোতে এই লাল ত্রিভুজটি আঁকতে আপনার বিদ্যমান কোডবেস সামঞ্জস্য করার জন্য প্রয়োজনীয় ন্যূনতম পরিবর্তনগুলি এখন দেখে নেওয়া যাক। আবার, অ্যাপটি Emscripten- এর বিপরীতে তৈরি করা হয়েছে, C/C++ প্রোগ্রামগুলিকে WebAssembly-এ কম্পাইল করার একটি টুল, যেটিতে JavaScript API-এর উপরে webgpu.h বাস্তবায়নের বাইন্ডিং রয়েছে।

CMake সেটিংস আপডেট করুন

Emscripten ইনস্টল হয়ে গেলে, CMakeLists.txt বিল্ড ফাইলটি নিম্নরূপ আপডেট করুন। হাইলাইট করা কোডটিই আপনাকে পরিবর্তন করতে হবে।

• set_target_properties স্বয়ংক্রিয়ভাবে লক্ষ্য ফাইলে "html" ফাইল এক্সটেনশন যোগ করতে ব্যবহৃত হয়। অন্য কথায়, আপনি একটি "app.html" ফাইল তৈরি করবেন।
• Emscripten-এ WebGPU সমর্থন সক্ষম করতে USE_WEBGPU অ্যাপ লিঙ্ক বিকল্পের প্রয়োজন। এটি ছাড়া, আপনার main.cpp ফাইল webgpu/webgpu_cpp.h ফাইল অ্যাক্সেস করতে পারবে না।
• USE_GLFW অ্যাপ লিঙ্ক বিকল্পটি এখানেও প্রয়োজন যাতে আপনি আপনার GLFW কোড পুনরায় ব্যবহার করতে পারেন।

cmake_minimum_required(VERSION 3.13) # CMake version check
project(app)                         # Create project "app"
set(CMAKE_CXX_STANDARD 20)           # Enable C++20 standard

add_executable(app "main.cpp")

if(EMSCRIPTEN)
  set_target_properties(app PROPERTIES SUFFIX ".html")
  target_link_options(app PRIVATE "-sUSE_WEBGPU=1" "-sUSE_GLFW=3")
else()
  set(DAWN_FETCH_DEPENDENCIES ON)
  add_subdirectory("dawn" EXCLUDE_FROM_ALL)
  target_link_libraries(app PRIVATE webgpu_cpp webgpu_dawn webgpu_glfw)
endif()

কোড আপডেট করুন

এমস্ক্রিপ্টেনে, একটি wgpu::surface তৈরি করার জন্য একটি HTML ক্যানভাস উপাদান প্রয়োজন। এর জন্য, instance.CreateSurface() কল করুন এবং Emscripten দ্বারা উত্পন্ন HTML পৃষ্ঠায় উপযুক্ত HTML ক্যানভাস উপাদানের সাথে মেলে #canvas নির্বাচককে নির্দিষ্ট করুন।

কিছুক্ষণ লুপ ব্যবহার করার পরিবর্তে, ব্রাউজার এবং মনিটরের সাথে সঠিকভাবে Render() ফাংশনটি সঠিক মসৃণ হারে কল করা হয়েছে তা নিশ্চিত করতে emscripten_set_main_loop(Render) কল করুন।

#include <GLFW/glfw3.h>
#include <webgpu/webgpu_cpp.h>
#include <iostream>
#if defined(__EMSCRIPTEN__)
#include <emscripten/emscripten.h>
#else
#include <webgpu/webgpu_glfw.h>
#endif

void Start() {
  if (!glfwInit()) {
    return;
  }

  glfwWindowHint(GLFW_CLIENT_API, GLFW_NO_API);
  GLFWwindow* window =
      glfwCreateWindow(kWidth, kHeight, "WebGPU window", nullptr, nullptr);

#if defined(__EMSCRIPTEN__)
  wgpu::SurfaceDescriptorFromCanvasHTMLSelector canvasDesc{};
  canvasDesc.selector = "#canvas";

  wgpu::SurfaceDescriptor surfaceDesc{.nextInChain = &canvasDesc};
  wgpu::Surface surface = instance.CreateSurface(&surfaceDesc);
#else
  wgpu::Surface surface =
      wgpu::glfw::CreateSurfaceForWindow(instance, window);
#endif

  InitGraphics(surface);

#if defined(__EMSCRIPTEN__)
  emscripten_set_main_loop(Render, 0, false);
#else
  while (!glfwWindowShouldClose(window)) {
    glfwPollEvents();
    Render();
    swapChain.Present();
    instance.ProcessEvents();
  }
#endif
}

Emscripten দিয়ে অ্যাপটি তৈরি করুন

Emscripten-এর সাহায্যে অ্যাপটি তৈরি করার জন্য প্রয়োজন একমাত্র পরিবর্তন হল যাদুকর emcmake শেল স্ক্রিপ্টের সাথে cmake কমান্ডগুলিকে প্রিপেন্ড করা। এইবার, একটি build-web সাব ফোল্ডারে অ্যাপটি তৈরি করুন এবং একটি HTTP সার্ভার শুরু করুন। অবশেষে, আপনার ব্রাউজার খুলুন এবং build-web/app.html যান।

# Build the app with Emscripten.
$ emcmake cmake -B build-web && cmake --build build-web

# Start a HTTP server.
$ npx http-server

ব্রাউজার উইন্ডোতে একটি লাল ত্রিভুজ।

এরপর কি

আপনি ভবিষ্যতে কি আশা করতে পারেন তা এখানে:

• webgpu.h এবং webgpu_cpp.h API-এর স্থিতিশীলতার উন্নতি।
• অ্যান্ড্রয়েড এবং আইওএসের জন্য ডন প্রাথমিক সমর্থন।

ইতিমধ্যে, পরামর্শ এবং প্রশ্ন সহ Emscripten এবং Dawn সমস্যাগুলির জন্য WebGPU সমস্যাগুলি ফাইল করুন৷

সম্পদ

এই অ্যাপের সোর্স কোড অন্বেষণ করতে নির্দ্বিধায়.

আপনি যদি WebGPU-এর সাহায্যে স্ক্র্যাচ থেকে C++-এ নেটিভ 3D অ্যাপ্লিকেশান তৈরি করতে চান, তাহলে C++ ডকুমেন্টেশন এবং ডন নেটিভ ওয়েবজিপিইউ উদাহরণগুলির জন্য WebGPU জানুন দেখুন।

আপনি যদি মরিচায় আগ্রহী হন তবে আপনি WebGPU এর উপর ভিত্তি করে wgpu গ্রাফিক্স লাইব্রেরিটিও অন্বেষণ করতে পারেন। তাদের হ্যালো-ত্রিভুজ ডেমো দেখুন।

স্বীকৃতি

এই নিবন্ধটি Corentin Wallez , Kai Ninomia , এবং Rachel Andrew দ্বারা পর্যালোচনা করা হয়েছে।

আনস্প্ল্যাশে মার্ক-অলিভিয়ার জোডোইনের ছবি।