Flutter WebGPU互操作插件webgpu_interop的使用

webgpu_interop

Dart js_interop用于Web应用程序。该库直接由WebIDL生成，并使用web_generator、最新SDK和补丁。

Roadmap

• ✅ 它工作了
• ✅ 更新IDL的脚本
• ✅ 计算示例
• ✅ 立方体示例

Getting started

安装Dart SDK、具有Dart智能感知和代码检查功能的编辑器，这样更容易采用示例。

Usage

创建一个新的Web项目，安装包并激活webdev：

dart create -t web quickstart
dart pub add webgpu_interop
dart pub global activate webdev

启动开发服务器：

webdev serve web:3000 --debug --auto restart

将任何WebGPU示例改编为Dart。如果webdev出现问题，请尝试停用它或删除.dart_tool文件夹。

Contributing and testing

在仓库中运行示例并添加新的示例：

dart pub global activate webdev
webdev serve example:3000 --release --auto restart

更改绑定或使用新的WebIDL更新：

cd generator
./gen.sh

License

这是一个商业友好的许可协议，但你需要发布修改内容。你可以简单地fork这个仓库，将其作为子模块添加到你的项目中，并在那里推送你的更改。

示例代码

为了帮助你更好地理解如何使用webgpu_interop插件，以下是一个简单的示例代码。此示例展示了如何使用WebGPU绘制一个简单的三角形。

import 'package:flutter/material.dart';
import 'package:webgpu_interop/webgpu_interop.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('WebGPU Interop Example')),
        body: Center(child: WebGPUDemo()),
      ),
    );
  }
}

class WebGPUDemo extends StatefulWidget {
  [@override](/user/override)
  _WebGPUDemoState createState() => _WebGPUDemoState();
}

class _WebGPUDemoState extends State<WebGPUDemo> {
  late WGPURenderPipeline pipeline;

  [@override](/user/override)
  void initState() {
    super.initState();
    initWebGPU();
  }

  Future<void> initWebGPU() async {
    // 创建设备
    var adapter = await navigator.gpu.requestAdapter();
    var device = await adapter.requestDevice();

    // 创建渲染管线
    pipeline = device.createRenderPipeline({
      vertexStage: {
        module: device.createShaderModule(code: VERTEX_SHADER),
        entryPoint: 'main',
      },
      fragmentStage: {
        module: device.createShaderModule(code: FRAGMENT_SHADER),
        entryPoint: 'main',
      },
      layout: 'auto',
      primitiveTopology: 'triangle-list',
      colorStates: [
        {
          format: 'bgra8unorm',
        },
      ],
    });

    setState(() {});
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Container();
  }
}

// Vertex shader code
const String VERTEX_SHADER = r'''
[[stage(vertex)]]
fn main([[builtin(vertex_index)]] VertexIndex : u32) -> [[builtin(position)]] vec4<f32> {
  var pos = array<vec2<f32>, 3>(
    vec2<f32>(-0.5, -0.5),
    vec2<f32>(0.5, -0.5),
    vec2<f32>(0.0, 0.5)
  );
  return vec4<f32>(pos[VertexIndex], 0.0, 1.0);
}
''';

// Fragment shader code
const String FRAGMENT_SHADER = r'''
[[stage(fragment)]]
fn main() -> [[location(0)]] vec4<f32> {
  return vec4<f32>(1.0, 0.0, 0.0, 1.0);
}
''';