Skip to content

Commit 88afa6d

Browse files
committed
Added Compute Boids demo
1 parent 5b19498 commit 88afa6d

18 files changed

+1233
-9
lines changed

BlazorWASMWebGPUComputeDemo.sln

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,8 @@ VisualStudioVersion = 17.14.36414.22
55
MinimumVisualStudioVersion = 10.0.40219.1
66
Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "BlazorWASMWebGPUComputeDemo", "BlazorWASMWebGPUComputeDemo\BlazorWASMWebGPUComputeDemo.csproj", "{D757DC99-EB3F-41CD-A261-F6A3946D92A5}"
77
EndProject
8+
Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "SpawnDev.Fractals", "..\..\SpawnDev.Fractals\SpawnDev.Fractals\SpawnDev.Fractals.csproj", "{5C8913B7-76A8-4909-AFA3-175FE131F756}"
9+
EndProject
810
Global
911
GlobalSection(SolutionConfigurationPlatforms) = preSolution
1012
Debug|Any CPU = Debug|Any CPU
@@ -15,6 +17,10 @@ Global
1517
{D757DC99-EB3F-41CD-A261-F6A3946D92A5}.Debug|Any CPU.Build.0 = Debug|Any CPU
1618
{D757DC99-EB3F-41CD-A261-F6A3946D92A5}.Release|Any CPU.ActiveCfg = Release|Any CPU
1719
{D757DC99-EB3F-41CD-A261-F6A3946D92A5}.Release|Any CPU.Build.0 = Release|Any CPU
20+
{5C8913B7-76A8-4909-AFA3-175FE131F756}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
21+
{5C8913B7-76A8-4909-AFA3-175FE131F756}.Debug|Any CPU.Build.0 = Debug|Any CPU
22+
{5C8913B7-76A8-4909-AFA3-175FE131F756}.Release|Any CPU.ActiveCfg = Release|Any CPU
23+
{5C8913B7-76A8-4909-AFA3-175FE131F756}.Release|Any CPU.Build.0 = Release|Any CPU
1824
EndGlobalSection
1925
GlobalSection(SolutionProperties) = preSolution
2026
HideSolutionNode = FALSE

BlazorWASMWebGPUComputeDemo/BlazorWASMWebGPUComputeDemo.csproj

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,13 @@
1010
<ItemGroup>
1111
<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="8.0.19" />
1212
<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="8.0.19" PrivateAssets="all" />
13-
<PackageReference Include="SpawnDev.BlazorJS" Version="2.26.0" />
14-
13+
<PackageReference Include="SpawnDev.BlazorJS" Version="2.29.0-preview.10" />
14+
<PackageReference Include="SpawnDev.BlazorJS.WebWorkers" Version="2.19.0" />
15+
</ItemGroup>
16+
17+
<ItemGroup>
18+
<None Include="wwwroot\shaders\sprite.wgsl" />
19+
<None Include="wwwroot\shaders\updateSprites.wgsl" />
1520
</ItemGroup>
1621

1722
</Project>
Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
namespace BlazorWASMWebGPUComputeDemo.Fractals
2+
{
3+
/// <summary>
4+
/// Class for defining the presets.
5+
/// </summary>
6+
public class MandelbrotPlace
7+
{
8+
private readonly string _name;
9+
private readonly double _centerX;
10+
private readonly double _centerY;
11+
private double _scaling;
12+
private readonly ushort _iterations;
13+
private readonly ushort _antiAliasing;
14+
private readonly ushort _colorRed;
15+
private readonly ushort _colorGreen;
16+
private readonly ushort _colorBlue;
17+
18+
public MandelbrotPlace(string name, double centerX, double centerY, double scaling, ushort iterations, ushort antiAliasing, ushort colorRed, ushort colorGreen, ushort colorBlue)
19+
{
20+
_name = name;
21+
_centerX = centerX;
22+
_centerY = centerY;
23+
_scaling = scaling;
24+
_iterations = iterations;
25+
_antiAliasing = antiAliasing;
26+
_colorRed = colorRed;
27+
_colorGreen = colorGreen;
28+
_colorBlue = colorBlue;
29+
}
30+
31+
public string Name { get { return _name; } }
32+
public double CenterX { get { return _centerX; } }
33+
public double CenterY { get { return _centerY; } }
34+
public double Scaling { get { return _scaling; } set { _scaling = value; } }
35+
public ushort Iterations { get { return _iterations; } }
36+
public ushort AntiAliasing { get { return _antiAliasing; } }
37+
public ushort ColorRed { get { return _colorRed; } }
38+
public ushort ColorGreen { get { return _colorGreen; } }
39+
public ushort ColorBlue { get { return _colorBlue; } }
40+
}
41+
}

BlazorWASMWebGPUComputeDemo/Layout/NavMenu.razor

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,11 @@
1111
<nav class="flex-column">
1212
<div class="nav-item px-3">
1313
<NavLink class="nav-link" href="" Match="NavLinkMatch.All">
14+
<span class="bi bi-house-door-fill-nav-menu" aria-hidden="true"></span> Compute Boids
15+
</NavLink>
16+
</div>
17+
<div class="nav-item px-3">
18+
<NavLink class="nav-link" href="Tutorial01" Match="NavLinkMatch.All">
1419
<span class="bi bi-house-door-fill-nav-menu" aria-hidden="true"></span> Compute 1
1520
</NavLink>
1621
</div>
Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
namespace BlazorWASMWebGPUComputeDemo
2+
{
3+
public static class NumberArrayExtensions
4+
{
5+
public static long ByteLength(this byte[] bytes) => bytes.Length;
6+
public static long ByteLength(this ushort[] data) => data.Length * 2;
7+
public static long ByteLength(this uint[] data) => data.Length * 4;
8+
public static long ByteLength(this ulong[] data) => data.Length * 8;
9+
public static long ByteLength(this sbyte[] bytes) => bytes.Length;
10+
public static long ByteLength(this short[] data) => data.Length * 2;
11+
public static long ByteLength(this int[] data) => data.Length * 4;
12+
public static long ByteLength(this long[] data) => data.Length * 8;
13+
public static long ByteLength(this Half[] data) => data.Length * 2;
14+
public static long ByteLength(this float[] data) => data.Length * 4;
15+
public static long ByteLength(this double[] data) => data.Length * 8;
16+
}
17+
}
Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
@page "/"
2+
3+
<PageTitle>WebGPU Compute Boids</PageTitle>
4+
5+
<h1>WebGPU Compute Boids</h1>
6+
7+
<div style="padding: 1rem;">
8+
<p>This demo is based off the WebGPU sample linked below.</p>
9+
<a href="https://github.com/webgpu/webgpu-samples/tree/main/sample/computeBoids">Compute Boids</a>
10+
<p>
11+
A GPU compute particle simulation that mimics
12+
the flocking behavior of birds. A compute shader updates
13+
two ping-pong buffers which store particle data. The data
14+
is used to draw instanced particles.
15+
</p>
16+
</div>
17+
<div style="padding: 1rem;">
18+
<canvas @ref=canvasRef style="width: 500px; height: 500px;" />
19+
</div>
20+
<div style="padding: 1rem;">
21+
<pre>
22+
@_log
23+
</pre>
24+
</div>
25+

0 commit comments

Comments
 (0)