You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: content/learning-paths/smartphones-and-mobile/android_webgpu_dawn/1-webgpu-fundamentals.md
+38-22Lines changed: 38 additions & 22 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -8,45 +8,61 @@ layout: learningpathall
8
8
9
9
## What is WebGPU?
10
10
11
-
WebGPU is the successor to [WebGL](https://www.khronos.org/webgl/wiki/), a well adopted modern API standard for interfacing with GPUs. WebGPU provides better compatibility with modern GPUs, support for general-purpose GPU computations, faster operations, and access to more advanced GPU features. It is designed to provide a _unifed access_ to GPUs, agnostic to GPU vendors and Operating System the application runs on. WebGPU is essentially a Render Hardware Interface built on top of various backends APIs like Vulkan, DirectX, Metal depending on OS/platform. This duplicated development effort is made once by the web browsers and made available to us through the webgpu.h header they provide.
11
+
WebGPU is the successor to [WebGL](https://www.khronos.org/webgl/wiki/), a well adopted modern API standard for interfacing with GPUs. WebGPU provides better compatibility with modern GPUs, support for general-purpose GPU computations, faster operations, and access to more advanced GPU features. It is designed to provide a _unified access_ to GPUs, agnostic to GPU vendors and operating systems.
12
12
13
-
![WebGPU High Level View](images/webgpu_highlevel.png"WebGPU High Level View")
13
+
WebGPU is a Render Hardware Interface built on top of various backends APIs like Vulkan, DirectX, and Metal (depending on the operating system).
14
14
15
-
## Why WebGPU?
15
+
WebGPU is available through web browsers using the webgpu.h header file.
16
16
17
-
WebGPU has been designed taking into learnings from older standards like WebGL, OpenGL etc. and is the only graphics API that benefits from
17
+
The high level view of WebGPU is shown below:
18
18
19
-
* A Reasonable level of abstraction
19
+
![WebGPU high level view #center](images/webgpu_highlevel.png"WebGPU High Level View")
20
+
21
+
## What are the benefits of WebGPU?
22
+
23
+
WebGPU takes into account learnings from older standards like WebGL and OpenGL and provides the following benefits:
24
+
25
+
* A reasonable level of abstraction
20
26
* Good performance
21
27
* Cross-platform
22
-
* Backed by W3C Standards group
28
+
* Backed by W3C standards group
23
29
* Future-proof design
24
30
25
-
WebGPU is a standard and not a true API, so the implementation can be adopted and developed as an interface between native applications developed in any programming language and GPUs. Moreover the requirements in terms of performance for web pages is actually the same as for native application.
31
+
WebGPU is a standard and not a true API, so the implementation can be adopted and developed as an interface between native applications developed in any programming language.
32
+
33
+
The performance requirements for web pages is actually the same as for native application.
26
34
27
35
{{% notice Note %}}
28
-
When designing an API for the Web, the two key constraints are portability and privacy. We benefit here from the effort developed for portability, and fortunately the limitations of the API due to privacy considerations can be disabled when using WebGPU as a native API
36
+
When designing an API for the Web, the two key constraints are portability and privacy.
37
+
38
+
The limitations of the API due to privacy considerations can be disabled when using WebGPU as a native API.
29
39
{{% /notice %}}
30
40
31
-
## Why C++?
41
+
## What are the benefits of using C++ for WebGPU?
32
42
33
-
The initial target for WebGPU was JavaScript and most of the initial implementation was done in JavaScript and the `webgpu.h` header file is written in C. In this learning path, we choose C++ rather than JavaScript or C because:
43
+
The initial target for WebGPU was JavaScript. The initial `webgpu.h` header file is written in C.
34
44
35
-
* C++ is still the primary language used for high performance graphics application (video games, render engines, modeling tools, etc.).
45
+
This Learning Path uses C++ rather than JavaScript or C because of the following benefits:
46
+
47
+
* C++ is still the primary language used for high performance graphics applications, such as video games, render engines, and modeling tools.
36
48
* The level of abstraction and control of C++ is well suited for interacting with graphics APIs in general.
37
-
* Graphics programming is a very good occasion to really learn C++.
49
+
* Graphics programming is a good way to learn more C++.
50
+
51
+
## Dawn: the Google WebGPU implementation
52
+
53
+
Since WebGPU is a standard and not an implementation, there are different implementations.
38
54
39
-
## Dawn, Google's WebGPU implementation
55
+
[Dawn](https://github.com/google/dawn) is an open-source and cross-platform implementation of the WebGPU standard.
56
+
57
+
It implements the WebGPU functionality specified in `webgpu.h`. Dawn is meant to be integrated as part of a larger system like Chromium or a native Android Application.
40
58
41
-
Since WebGPU is a standard and not implementation, there are different implementations. For this learning path we are using [Dawn](https://github.com/google/dawn), an open-source and cross-platform implementation of the WebGPU standard. It implements the WebGPU functionality specified in `webgpu.h`. Dawn is meant to be integrated as part of a larger systems like WebGPU in Chromium or in an native Android Application.
42
59
Dawn provides several WebGPU building blocks:
43
60
44
-
* WebGPU C/C++ headers that applications and other building blocks use.
45
-
* The `webgpu.h` version that Dawn implements.
46
-
* A C++ wrapper for the `webgpu.h`.
47
-
*A "native" implementation of WebGPU using platforms' GPU APIs: D3D12, Metal, Vulkan and OpenGL. See [per API support](https://github.com/google/dawn/blob/main/docs/support.md) for more details.
48
-
* A client-server implementation of WebGPU for applications that are in a sandbox without access to native drivers
49
-
* Tint is a compiler for the WebGPU Shader Language (WGSL) that can be used in standalone to convert shaders from and to WGSL.
61
+
* WebGPU C/C++ headers that applications and other building blocks use, including a header file and C++ wrapper.
62
+
* A "native" implementation of WebGPU using appropriate APIs: D3D12, Metal, Vulkan and OpenGL.
63
+
* A client-server implementation of WebGPU for applications that are in a sandbox without access to native drivers.
64
+
*Tint, a compiler for the WebGPU Shader Language (WGSL), that can be used to convert shaders to and from WGSL.
65
+
66
+
Because it is written in C++, Dawn provides better error messages and logging. Because it is open-source, it is easier to inspect stack traces when applications crash.
50
67
51
-
Dawn provides better error messages and logging, since it is written in C++ we can build it from source and thus inspect more deeply the stack trace in case of crash.
52
-
Dawn is usually ahead of `wgpu-native` another WebGPU implementation with regards to implementation of new functionalities/changes in the standard.
68
+
Dawn is usually ahead of `wgpu-native`, another WebGPU implementation, when it comes to new functionalities and standards changes.
Profiling an application, to make sure it is performant is an important step in the Android application development cycle. The default profiler in the Android Studio is great to profile CPU related metrics, but does not provide details when it comes to GPUs. Arm has developed a comprehensive profiling software, Streamline, to profile both CPU and GPU. Streamline is an application profiler that can capture data from multiple sources, including:
45
+
Click OK to install and update the selected components.
46
+
47
+
## Install Arm Performance Studio
48
+
49
+
Profiling is an important step in the Android application development cycle.
50
+
51
+
The default profiler in the Android Studio is great to profile CPU related metrics, but does not provide GPU details.
52
+
53
+
Arm Performance Studio is a comprehensive profiling tool to profile both CPU and GPU.
54
+
55
+
One of the components of Performance Studio is Streamline. Streamline captures data from multiple sources, including:
40
56
41
57
* Program Counter (PC) samples from running application threads.
42
-
* Samples from the hardware Performance Monitoring Unit (PMU) counters in the Arm CPU, Arm® Mali™ GPUs, and Arm Immortalis™ GPUs.
58
+
* Samples from the hardware Performance Monitoring Unit (PMU) counters in Arm CPUs, Arm Mali GPUs, and Arm Immortalis GPUs.
43
59
* Thread scheduling information from the Linux kernel.
44
60
* Software-generated annotations and counters from running applications.
45
61
46
-
You can download and install latest version of [Streamline](https://developer.arm.com/Tools%20and%20Software/Streamline%20Performance%20Analyzer) for your Operating System
62
+
Install Arm Performance Studio using the [install guide](/install-guides/ams/).
47
63
48
64
{{% notice Tip %}}
49
-
If you wan to learn more about streamline, you can refer to the ["Getting Started with Streamline"](https://developer.arm.com/documentation/101816/0903/Getting-started-with-Streamline)
65
+
If you want to learn more about Arm Performance Studio and Streamline before continuing, refer to ["Get started with Arm Performance Studio for mobile"](https://learn.arm.com/learning-paths/smartphones-and-mobile/ams/ams/)
50
66
{{% /notice %}}
67
+
68
+
Android Studio and Arm Performance Studio are now installed and you are ready to create a WebGPU Android application.
After successful [Android Studio](./2-env-setup.md#install-android-studio-and-android-ndk) installation, open Android studio and create a new C++ game activity
11
+
You can start by creating a new Android Studio project.
12
12
13
-
![New Game Activity](./images/android_studio_new_game_activity.png"Figure 1. New C++ Game Activity")
13
+
Open Android studio, click `New Project` and select `Game Activity (C++)` as shown below:
14
14
15
-
GameActivity is a Jetpack library designed to assist Android games in processing app cycle commands, input events, and text input in the application's C/C++ code. GameActivity is a direct descendant of NativeActivity and shares a similar architecture:
15
+
![New Game Activity #center](./images/android_studio_new_game_activity.png"New C++ Game Activity")
16
16
17
-
![Game Activity Architecture](./images/GameActivityArchitecture.png"Figure 2. Game Activity Architecture")
17
+
Select `Next` to continue.
18
+
19
+
Finish the new project creation by accepting all defaults until the project is created.
20
+
21
+
## About the Game Activity
22
+
23
+
GameActivity is a Jetpack library designed to assist Android games in processing app cycle commands, input events, and text input in the application's C/C++ code.
24
+
25
+
GameActivity is a direct descendant of NativeActivity and shares a similar architecture:
With GameActivity, you can focus on your core game development and avoid spending excessive time dealing with the Java Native Interface (JNI) code.
30
+
20
31
GameActivity performs the following functions:
21
32
22
-
*Interacting with Android framework through the Java-side component.
23
-
*Passing app cycle commands, input events, and input text to the native side.
24
-
* Renders into a SurfaceView, making it much easier for games to interact with other UI components.
33
+
*Interacts with the Android framework through the Java-side component.
34
+
*Passes app cycle commands, input events, and input text to the native side.
35
+
* Renders into a SurfaceView, making it easier for games to interact with other UI components.
25
36
26
37
{{% notice Tip %}}
27
-
You can find more information about Android Game Activity and its capabilities [here](https://developer.android.com/games/agdk/game-activity).
38
+
You can find more information about Android Game Activity and its capabilities in the [Game Activity documentation](https://developer.android.com/games/agdk/game-activity).
28
39
{{% /notice %}}
29
40
30
-
## Upgrade application to include Dawn
41
+
## Upgrade the application to include Dawn
42
+
43
+
The Android Game Activity framework uses OpenGLES3 for graphics.
44
+
45
+
You can remove this dependency and replace it with WebGPU.
46
+
47
+
Start by including the [webgpu.hpp](https://github.com/varunchariArm/Android_DawnWebGPU/blob/main/app/src/main/cpp/webgpu/include/webgpu/webgpu.hpp) header file in the project:
48
+
49
+
1. In Android Studio, navigate to the project view and find the `app` --> `cpp` folder.
50
+
51
+
Open terminal in Android Studio. You should be in the MyApplication directory.
31
52
32
-
The Android stock Game Activity framework uses OpenGLES3 for graphic purposes. We want to remove this dependency and replace it with WebGPU. We start by including the [webgpu.hpp](https://github.com/varunchariArm/Android_DawnWebGPU/blob/main/app/src/main/cpp/webgpu/include/webgpu/webgpu.hpp)header file in the project:
53
+
2. Create a new directory and download the WebGPUheader file from GitHub
33
54
34
-
* Go to **project view** --> **app** --> **cpp**
35
-
* Create a new directory **webgpu** --> **include** --> **webgpu**
55
+
Run the commands below to download the `webgpu.hpp` header file:
36
56
37
-
Next copy the remaining files in the [webgpu](https://github.com/varunchariArm/Android_DawnWebGPU/tree/main/app/src/main/cpp/webgpu) directory to corresponding directory in your project.
38
-
You can notice in the [FetchDawn.cmake](https://github.com/varunchariArm/Android_DawnWebGPU/blob/main/app/src/main/cpp/webgpu/FetchDawn.cmake) we are utilizing a stable `chromium/6536` branch of Dawn repository. We are downloading this branch and setting a few CMake options in the file for Dawn build.
3. Next copy the remaining files in the [webgpu](https://github.com/varunchariArm/Android_DawnWebGPU/tree/main/app/src/main/cpp/webgpu) directory to corresponding directory in your project.
Notice the [FetchDawn.cmake](https://github.com/varunchariArm/Android_DawnWebGPU/blob/main/app/src/main/cpp/webgpu/FetchDawn.cmake) uses a stable `chromium/6536` branch of Dawn repository.
39
74
40
75
{{% notice Note %}}
41
76
WebGPU is constantly evolving standard and hence its implementation, Dawn is also under active development. For sake of stability, we have chosen a stable branch for our development. Updating to latest or different branch may cause breakage.
@@ -47,9 +82,17 @@ To add Dawn to our application, we have 2 options:
47
82
* Download the source as a dependency and build it as part of the project build
48
83
49
84
We are choosing the second option, since it provides more debug flexibility.
85
+
50
86
The [webgpu/webgpu.cmake](https://github.com/varunchariArm/Android_DawnWebGPU/blob/main/app/src/main/cpp/webgpu/webgpu.cmake) and [CMakeLists.txt](https://github.com/varunchariArm/Android_DawnWebGPU/blob/main/app/src/main/cpp/CMakeLists.txt) file facilitates downloading and building WebGPU with Dawn implementation and integrating Dawn into our main project
51
87
52
-
We are also setting a few more Dawn build options
88
+
Run the build:
89
+
90
+
```console
91
+
cmake .
92
+
make -C _deps/dawn-build
93
+
```
94
+
95
+
This section doesn't seen needed, just information:
53
96
54
97
```bash
55
98
#Set Dawn build options
@@ -60,7 +103,9 @@ option(DAWN_USE_X11 "" OFF)
60
103
option(ENABLE_PCH "" OFF)
61
104
```
62
105
63
-
Finally make sure you include the built `webgpu` library into your project by
106
+
4. Add WebGPU to the project.
107
+
108
+
Edit the file `CMakeLists.txt` to remove the WebGL and add `webgpu` libraries.
64
109
65
110
```bash
66
111
# Configure libraries CMake uses to link your target library.
Now we have setup our project to download Dawn source code, build it and include it in our project. The `webgpu.hpp` header file acts like an interface, exposing all WebGPU functions and variables to our main Application.
123
+
The project is now ready to build.
124
+
125
+
The `webgpu.hpp` header file acts like an interface, exposing all WebGPU functions and variables to the main Application.
0 commit comments