Skip to content

CI: Deploy WebGPU demo #25

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
beicause merged 1 commit into from
Feb 11, 2026
Merged

CI: Deploy WebGPU demo #25

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 14 additions & 5 deletions .github/workflows/static.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,14 +63,23 @@ jobs:
with:
path: crates/basisu_sys/wasm/

- name: Build
- name: Build webgl2
run: RUSTFLAGS="-Ctarget-feature=+simd128" cargo b -p test_scene --target wasm32-unknown-unknown --profile web_release

- name: Wasm bindgen
run: wasm-bindgen --out-name wasm_example --out-dir web/target/ --target web target/wasm32-unknown-unknown/web_release/test_scene.wasm
- name: Wasm bindgen webgl2
run: wasm-bindgen --out-name test_scene --out-dir web/target/webgl2/ --target web target/wasm32-unknown-unknown/web_release/test_scene.wasm

- name: Optimize wasm
run: wasm-opt --enable-simd --enable-bulk-memory-opt --enable-nontrapping-float-to-int -Os ./web/target/wasm_example_bg.wasm -o ./web/target/wasm_example_bg.wasm
- name: Optimize wasm webgl2
run: wasm-opt --enable-simd --enable-bulk-memory-opt --enable-nontrapping-float-to-int -Os ./web/target/webgl2/test_scene_bg.wasm -o ./web/target/webgl2/test_scene_bg.wasm

- name: Build webgpu
run: RUSTFLAGS="-Ctarget-feature=+simd128" cargo b -p test_scene --features bevy/webgpu --target wasm32-unknown-unknown --profile web_release

- name: Wasm bindgen webgpu
run: wasm-bindgen --out-name test_scene --out-dir web/target/webgpu/ --target web target/wasm32-unknown-unknown/web_release/test_scene.wasm

- name: Optimize wasm webgpu
run: wasm-opt --enable-simd --enable-bulk-memory-opt --enable-nontrapping-float-to-int -Os ./web/target/webgpu/test_scene_bg.wasm -o ./web/target/webgpu/test_scene_bg.wasm

- name: Setup Pages
uses: actions/configure-pages@v5
Expand Down
16 changes: 14 additions & 2 deletions web/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
Expand Down Expand Up @@ -72,7 +73,7 @@
z-index: 2;
}
</style>
<title>Bevy BasisU Loader Wasm Example</title>
<title>Bevy BasisU Loader Example (WebGL2)</title>
</head>
<div class="game-container">
<div class="lds-dual-ring"></div>
Expand All @@ -81,7 +82,18 @@
</canvas>
</div>
<script type="module">
import init from "./target/wasm_example.js";
import init from "./target/webgl2/test_scene.js";
init();
</script>
<a
href="./webgpu.html"
style="
position: absolute;
top: 16px;
right: 3%;
z-index: 3;
font-size: 1.25rem;
"
>Go to WebGPU demo</a
>
</html>
99 changes: 99 additions & 0 deletions web/webgpu.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,99 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" href="favicon.ico" />
<style>
body {
background: linear-gradient(
135deg,
white 0%,
white 49%,
black 49%,
black 51%,
white 51%,
white 100%
)
repeat;
background-size: 20px 20px;

margin: 0;
display: flex;
justify-content: center;
align-items: center;
}
canvas {
background-color: transparent;
}
body,
html {
height: 100%;
}

.game-container {
width: 95%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}

.lds-dual-ring {
display: inline-block;
position: absolute;
left: 0;
right: 0;
margin: auto;
width: 80px;
height: 80px;
}

.lds-dual-ring:after {
content: " ";
display: block;
width: 64px;
height: 64px;
border-radius: 50%;
border: 6px solid #666666;
border-color: #666666 transparent #666666 transparent;
animation: lds-dual-ring 1.2s linear infinite;
}

@keyframes lds-dual-ring {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}

#bevy {
z-index: 2;
}
</style>
<title>Bevy BasisU Loader Example (WebGPU)</title>
</head>
<div class="game-container">
<div class="lds-dual-ring"></div>
<canvas id="bevy">
Javascript and support for canvas is required
</canvas>
</div>
<script type="module">
import init from "./target/webgpu/test_scene.js";
init();
</script>
<a
href="./index.html"
style="
position: absolute;
top: 16px;
right: 3%;
z-index: 3;
font-size: 1.25rem;
"
>Go to WebGL2 demo</a
>
</html>
Loading