webgpu: feng3d引擎的WebGPU渲染器,可以让用户无需直接接触WebGPU的API,只需提供渲染所需数据,组织好数据结构便可使用WebGPU渲染,并且支持动态修改数据从而实现动态渲染。

代码拉取完成,页面将自动刷新

扫描微信二维码支付

取消

支付完成

richgiteeai

Watch

不关注关注所有动态仅关注版本发行动态关注但不提醒动态

1 Star 0 Fork 0

feng3d/webgpu

代码 Issues 0 Pull Requests 0 Wiki 统计流水线

服务

加入 Gitee

与超过 1400万开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)

免费加入

已有帐号? 立即登录

克隆/下载

HTTPS SSH SVN SVN+SSH 下载ZIP

提示

下载代码请复制以下命令到终端执行

为确保你提交的代码身份被 Gitee 正确识别,请执行以下命令完成配置

git config --global user.name userName 
git config --global user.email userEmail

初次使用 SSH 协议进行代码克隆、推送等操作时,需按下述提示完成 SSH 配置

1 生成 RSA 密钥

2 获取 RSA 公钥内容,并配置到 SSH公钥中

在 Gitee 上使用 SVN,请访问使用指南

使用 HTTPS 协议时,命令行会出现如下账号密码验证步骤。基于安全考虑,Gitee 建议配置并使用私人令牌替代登录密码进行克隆、推送等操作

Username for 'https://gitee.com': userName

Password for 'https://userName@gitee.com': # 私人令牌

新建文件新建 Diagram 文件

新建子模块

上传文件

分支 3

标签 4

贡献代码

同步代码

创建 Pull Request

了解更多

对比差异通过 Pull Request 同步

同步更新到分支

通过 Pull Request 同步

将会在向当前分支创建一个 Pull
Request,合入后将完成同步

feng fix: texture descriptor 缺失时创建 1x1 占位纹理 d9bcd44

1228 次提交

.github/workflows

.husky

.vscode

docs

examples

openspec

scripts

src

test

test_web

.cursorrules

.gitignore

.gitmodules

CLAUDE.md

LICENSE

README.md

eslint.config.js

package.json

tsconfig.json

typedoc.json

vite.config.js

vitest.config.ts

README

未知许可证

# @feng3d/webgpu

feng3d引擎的WebGPU渲染器,可以让用户无需直接接触WebGPU的API,只需提供渲染所需数据,组织好数据结构便可使用WebGPU渲染,并且支持动态修改数据从而实现动态渲染。

## 示例

[@feng3d/webgpu示例](https://feng3d.com/webgpu/)

这里完整实现了webgpu的[官方示例](https://github.com/webgpu/webgpu-samples)。

## 安装
```
npm install @feng3d/webgpu
```

## 如何使用
```typescript
import { Submit } from "@feng3d/render-api";
import { WebGPU } from "@feng3d/webgpu";

const init = async (canvas: HTMLCanvasElement) =>
{
 const devicePixelRatio = window.devicePixelRatio || 1;
 canvas.width = canvas.clientWidth * devicePixelRatio;
 canvas.height = canvas.clientHeight * devicePixelRatio;

const webgpu = await new WebGPU().init(); // 初始化WebGPU

const submit: Submit = { // 一次GPU提交
 commandEncoders: [ // 命令编码列表
 {
 passEncoders: [ // 通道编码列表
 { // 渲染通道
 descriptor: { // 渲染通道描述
 colorAttachments: [{ // 颜色附件
 view: { texture: { context: { canvasId: canvas.id } } }, // 绘制到canvas上
 clearValue: [0.0, 0.0, 0.0, 1.0], // 渲染前填充颜色
 }],
 },
 renderPassObjects: [{ // 渲染对象
 pipeline: { // 渲染管线
 vertex: { // 顶点着色器
 code: `
 @vertex
 fn main(
 @location(0) position: vec2<f32>,
 ) -> @builtin(position) vec4<f32> {
 return vec4<f32>(position, 0.0, 1.0);
 }
 ` },
 fragment: { // 片段着色器
 code: `
 @binding(0) @group(0) var<uniform> color : vec4<f32>;
 @fragment
 fn main() -> @location(0) vec4f {
 return color;
 }
 ` },
 },
 vertices: {
 position: { data: new Float32Array([0.0, 0.5, -0.5, -0.5, 0.5, -0.5]), format: "float32x2" }, // 顶点坐标数据
 },
 indices: new Uint16Array([0, 1, 2]), // 顶点索引数据
 bindingResources: { color: { value: [1, 0, 0, 1] } }, // Uniform 颜色值
 draw: { __type__: "DrawIndexed", indexCount: 3 }, // 绘制命令
 }]
 },
 ]
 }
 ],
 };

webgpu.submit(submit); // 提交GPU执行
};

let webgpuCanvas = document.getElementById("webgpu") as HTMLCanvasElement;
if (!webgpuCanvas)
{
 webgpuCanvas = document.createElement("canvas");
 webgpuCanvas.id = "webgpu";
 webgpuCanvas.style.width = "400px";
 webgpuCanvas.style.height = "300px";
 document.body.appendChild(webgpuCanvas);
}
init(webgpuCanvas);
```

[![在 StackBlitz 中打开](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/feng3d-labs/webgpu/tree/master/examples)

## 参考
1. https://github.com/webgpu/webgpu-samples
2. https://www.orillusion.com/zh/webgpu.html
3. https://www.orillusion.com/zh/wgsl.html
4. https://gpuweb.github.io/gpuweb/
5. https://gpuweb.github.io/gpuweb/wgsl/
6. https://github.com/Orillusion/orillusion/tree/main/src/gfx/graphics/webGpu
7. https://github.com/mrdoob/three.js/tree/dev/examples/jsm/renderers/webgpu
8. https://github.com/regl-project/regl
9. https://github.com/regl-project/regl/blob/master/example/basic.js
10. https://github.com/stackgpu/Simple-GPU
11. https://github.com/antvis/G/blob/next/packages/g-plugin-webgpu-device/src/platform/Program.ts
12. https://github.com/dtysky/webgpu-renderer
13. WGSL反射。 https://github.com/brendan-duncan/wgsl_reflect
14. https://github.com/greggman/webgpu-avoid-redundant-state-setting
 1. 避免调用WebGPU中的冗余状态。
15. https://github.com/greggman/webgpu-utils
 1. webgpu一些工具。
16. https://github.com/GEngine-js/GEngine

MIT 许可证版权所有 (c) 2026 feng 特此授予任何获得本软件及相关文档文件("软件")副本的人免费许可, 可以不受限制地处理本软件,包括但不限于使用、复制、修改、合并、发布、分发、再许可和/或销售本软件的副本,并允许向其提供本软件的人这样做,但须符合以下条件: 上述版权声明和本许可声明应包含在本软件的所有副本或主要部分中。本软件按"原样"提供,不提供任何明示或暗示的保证,包括但不限于对适销性、特定用途适用性和非侵权性的保证。在任何情况下,作者或版权持有人均不对因本软件或本软件的使用或其他交易而产生的任何索赔、损害或其他责任负责,无论是在合同诉讼、侵权诉讼还是其他诉讼中。