C# WebAssembly 結合 WebGL 可以讓你在瀏覽器中運行 C# 代碼，并通過 WebGL 進行圖形渲染。以下是一個簡單的步驟指南，幫助你實現這一目標：

1. 設置開發環境

• 安裝 .NET SDK：確保你已經安裝了最新版本的 .NET SDK。
• 安裝 Visual Studio：如果你使用的是 Visual Studio，確保它已經安裝并更新到最新版本。

2. 創建 C# WebAssembly 項目

1. 打開 Visual Studio。
2. 選擇 Create a new project。
3. 在左側模板中選擇 WebAssembly App (.NET)。
4. 命名你的項目，例如 CSharpWebGLApp。
5. 點擊 Create。

3. 添加 WebGL 支持

1. 在 Program.cs 文件中，修改代碼以使用 WebGL。以下是一個簡單的示例：

using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.DependencyInjection;
using WebAssembly;

namespace CSharpWebGLApp
{
    public class Program
    {
        public static void Main(string[] args)
        {
            var builder = WebAssemblyHostBuilder.CreateDefault(args);
            builder.RootComponents.Add<App>("app");

            // 添加 WebGL 支持
            builder.Services.AddScoped(sp => new WebGLRenderingContext(sp.GetRequiredService<IJSRuntime>()));

            builder.Build().Run();
        }
    }
}

2. 創建一個 App.razor 文件，用于渲染 WebGL 內容：

@page "/webgl"

@if (context is WebGLRenderingContext webgl)
{
    <canvas ref="canvas"></canvas>
}

@code {
    private WebGLRenderingContext? context;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender && context != null)
        {
            // 初始化 WebGL 上下文
            await context.InitializeAsync();

            // 在這里添加 WebGL 渲染代碼
        }
    }
}

4. 編寫 WebGL 渲染代碼

1. 在 wwwroot 文件夾中創建一個 WebGL 文件夾，并在其中創建一個 Shader.cs 文件，用于編寫頂點著色器和片段著色器。

using WebAssembly;

namespace CSharpWebGLApp.WebGL
{
    public class Shader
    {
        public static void CompileShader(WebGLRenderingContext context, string type, string source)
        {
            var shader = context.CreateShader(type);
            context.ShaderSource(shader, source);
            context.CompileShader(shader);

            if (!context.GetShaderParameter(shader, WebGLRenderingContext.COMPILE_STATUS))
            {
                throw new Exception(context.GetShaderInfoLog(shader));
            }

            return shader;
        }
    }
}

2. 在 App.razor 文件中引用 Shader.cs 并編寫 WebGL 渲染邏輯：

@page "/webgl"

@if (context is WebGLRenderingContext webgl)
{
    <canvas ref="canvas"></canvas>
}

@code {
    private WebGLRenderingContext? context;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender && context != null)
        {
            // 初始化 WebGL 上下文
            await context.InitializeAsync();

            // 創建和編譯著色器
            var vertexShader = Shader.CompileShader(context, WebGLRenderingContext.VERTEX_SHADER, @"
                attribute vec4 a_position;
                void main() {
                    gl_Position = a_position;
                }
            ");

            var fragmentShader = Shader.CompileShader(context, WebGLRenderingContext.FRAGMENT_SHADER, @"
                void main() {
                    gl_FragColor = vec4(1, 0, 0, 1);
                }
            ");

            // 創建和鏈接程序
            var program = context.CreateProgram();
            context.AttachShader(program, vertexShader);
            context.AttachShader(program, fragmentShader);
            context.LinkProgram(program);

            // 使用程序
            context.UseProgram(program);

            // 設置頂點數據
            var positionBuffer = context.CreateBuffer();
            context.BindBuffer(WebGLRenderingContext.ARRAY_BUFFER, positionBuffer);
            var positions = new float[] { -1, -1, 1, -1, 1, 1, -1, 1 };
            context.BufferData(WebGLRenderingContext.ARRAY_BUFFER, positions.Length * 4, positions, WebGLRenderingContext.STATIC_DRAW);

            // 設置頂點屬性指針
            var positionAttributeLocation = context.GetAttribLocation(program, "a_position");
            context.EnableVertexAttribArray(positionAttributeLocation);
            context.VertexAttribPointer(positionAttributeLocation, 2, WebGLRenderingContext.FLOAT, false, 0, 0);

            // 清除顏色緩沖區并繪制
            context.ClearColor(0, 0, 0, 1);
            context.Clear(WebGLRenderingContext.COLOR_BUFFER_BIT);
            context.DrawArrays(WebGLRenderingContext.TRIANGLE_STRIP, 0, 4);
        }
    }
}

5. 運行項目

1. 按 F5 運行項目。
2. 打開瀏覽器并訪問 http://localhost:5001/webgl。
3. 你應該能看到一個紅色的方塊在頁面上渲染。

通過以上步驟，你已經成功地將 C# WebAssembly 與 WebGL 結合在一起，并在瀏覽器中渲染了一個簡單的圖形。你可以根據需要進一步擴展和優化你的 WebGL 渲染代碼。