This project is a basic sample application that demonstrates how to use the WebGPU API for Android within a Jetpack Compose application. It renders a simple, static red triangle on a blue background.
The purpose of this sample is to provide a clear and minimal example of the setup required to get WebGPU rendering on a surface in an Android app using modern development practices with Kotlin and Jetpack Compose.
The application consists of three main components:
-
MainActivity.kt: The main entry point for the application. It sets up the Jetpack Compose content. -
WebGpuSurface.kt: This file contains a Composable function that usesAndroidExternalSurface. This surface is provided to the WebGPU renderer. The rendering logic is launched in a coroutine when the surface is created. -
WebGpuRenderer.kt: This is the core of the sample. It handles all the WebGPU API interactions:- Initialization: Creates a WebGPU instance, adapter, and device for a given Android
Surface. - Pipeline Setup: Compiles WGSL (WebGPU Shading Language) shader code and creates a
GPURenderPipeline. The shaders in this sample draw a hardcoded triangle. - Rendering: The
render()function executes the commands to draw a single frame. This includes creating a command encoder, starting a render pass, setting the pipeline, drawing the vertices, and submitting the commands to the device queue.
- Initialization: Creates a WebGPU instance, adapter, and device for a given Android
app/src/main/java/com/google/webgpu/webgpusample/MainActivity.kt: The main activity that hosts the Compose UI.WebGpuSurface.kt: The Jetpack Compose component that provides the rendering surface.WebGpuRenderer.kt: The class that encapsulates all WebGPU rendering logic.
- Open the project in Android Studio.
- Ensure you have a WebGPU-compatible device or emulator selected.
- Build and run the application.
- An Android device or emulator with WebGPU support.
- Android Studio.
The application displays a single red triangle centered on a blue background.