联系我们

注明来意哦
24733500@qq.com
bgxiong666@gmail.com
微信/抖音:T24733500
B站/公众号:天途影像

项目代码量统计报告

根据统计结果,比格熊数字导演工作站 (bgxiong-ai-story) 项目的整体代码量如下:

📊 总体概况

指标数值
总目录数
7,372 个
总文件数(排除依赖)
2,264 个
核心业务代码总行数(Rust + TypeScript/TSX,排除依赖)
~23.4 万行

🔧 后端代码(Rust)

模块文件数代码行数
src-tauri/src/(Tauri 桌面应用核心)
364 个
~78,922 行
src/(Rust CLI/核心库)
24 个
~1,842 行
Rust 后端合计
388 个
~80,764 行

💻 前端代码(TypeScript/React)

模块文件数代码行数
ui/src/(React + TypeScript 前端)
719 个
~133,846 行
前端合计
719 个
~133,846 行

📁 其他文件类型

类型文件数行数
Markdown 文档
495 个
~154,566 行
JSON 配置
3,971 个
~74,331 行
TOML 配置
1,017 个
~13,997 行
CSS/SCSS
3 个
~979 行
YAML
15 个
~115 行

🏗️ 项目架构特点

  1. 前后端分离:前端使用 React + TypeScript(~13.4万行),后端使用 Rust + Tauri(~8.1万行)
  2. 代码比例:前端约占 57%,后端约占 43%
  3. 文档丰富:Markdown 文档约 15.5 万行,说明项目文档完善
  4. 配置繁多:大量 JSON/TOML 配置文件,支持多 AI 服务商配置

这是一个中大型桌面应用项目,采用 Tauri 2 框架构建,具备完整的 AI 故事创作功能(包括角色管理、剧集/场次/分镜管线、文生图/图生图/视频生成等)。

V3 设置全量迁移计划(不兼容、不兜底)

> 创建时间:2026-05-06
> 背景:设置模块已从 V2 重构为 V3,但大量页面仍访问旧 V2 `.items` 结构导致运行时 TypeError。

## V3 架构核心概念

| 旧 V2 概念 | 新 V3 概念 |
|---|---|
| `textProviders.items[]` (AiProviderProfile) | `capabilityBindings[]` (CapabilityBinding) + `credentials[]` (ProviderCredential) |
| `AiProviderProfile.id` (即 `profileId`) | `CapabilityBinding.id` (即新的 `profileId`) |
| `profile.providerKind` | `binding.providerKind` |
| `profile.baseUrl/apiKey/accessKeyId/secretAccessKey` | `credential.baseUrl/apiKey/accessKeyId/secretAccessKey` |
| `profile.name` | `credential.name` (或 `binding.id` 兜底) |
| `profileHasImageEndpointCreds(profile)` | V3 版:按 `binding.providerKind` + `credential` 做校验 |
| `effectiveImageReferenceCaps(profile)` | V3 版:接收 `providerKind` + `binding.extra` 做校验 |
| React dep `[appSettings.textProviders.items]` | `[appSettings]` |

## V3 核心数据结构

```typescript
interface AppSettingsV3 {
  settingsVersion: 3;
  credentials: ProviderCredential[];       // 服务商凭证主档
  capabilityBindings: CapabilityBinding[];  // 能力绑定(含 providerKind)
  defaults: CategoryDefaultsV3;             // 各类默认绑定id
}

interface CapabilityBinding {
  id: string;
  capability: "text" | "speech" | "image" | "imageToImage" | "video" | "keyframe";
  providerKind: string;
  credentialId: string;
  models: string;
  extra?: Record<string, unknown>;
}

interface ProviderCredential {
  id: string;
  name: string;
  vendor: string;
  authMode: "apiKey" | "aksk" | "none";
  baseUrl: string;
  apiKey: string;
  accessKeyId: string;
  secretAccessKey: string;
  extra?: Record<string, unknown>;
}
```

## 第一步:appSettings.ts 新增 V3 工具函数

### 1.1 已添加

- `resolveProviderKindFromBinding(s, bindingId)` — 从绑定 ID 解析 providerKind
- `resolveCredentialFromBinding(s, bindingId)` — 从绑定 ID 查找凭证

### 1.2 需新增

```typescript
/** V3 版:检查某绑定是否具备图像端点凭证(替代 profileHasImageEndpointCreds) */
function bindingHasImageEndpointCreds(s: AppSettingsV3, bindingId: string): boolean;

/** V3 版:检查某绑定是否具备图生图凭证(替代 profileHasImageToImageCreds) */
function bindingHasImageToImageCreds(s: AppSettingsV3, bindingId: string): boolean;

/** V3 版:查找某能力桶下所有 ComfyUI 绑定 ID 集合 */
function findComfyBindingIds(s: AppSettingsV3, capability: "image" | "imageToImage"): Set<string>;

/** V3 版:从 Comfy 绑定 + 工作流列表构造 ImageModelPick[] */
function buildComfyWorkflowPicksFromBindings(
  s: AppSettingsV3,
  workflows: ComfyWorkflow[],
  profileIds: Set<string>,
): ImageModelPick[];
```

## 第二步:imageReferenceCaps.ts 改造

### 新增 V3 版函数

```typescript
/**
 * V3 版:查询有效垫图能力(含 extra 覆盖)
 * 替代 effectiveImageReferenceCaps(p: AiProviderProfile)
 */
export function effectiveImageReferenceCapsV3(
  providerKind: string,
  extra?: Record<string, unknown>,
): ImageReferenceCaps;
```

同时保留旧版签名(`@deprecated`)以维持 `sceneImageDisplay.ts` 等文件的向后兼容过渡。

## 第三步:逐文件替换(分类处理)

### 分类 A:简单 providerKind 解析(14 个文件)

**旧代码模式:**
```typescript
const profile = appSettings.textProviders.items.find(x => x.id === pick.profileId);
const pk = profile?.providerKind;
```

**替换为:**
```typescript
const pk = resolveProviderKindFromBinding(appSettings, pick.profileId);
```

**依赖数组:** `[x, appSettings.textProviders.items]``[x, appSettings]`

**涉及文件:**

| # | 文件 | 行号 | 能力类型 |
|---|------|------|---------|
| 1 | `ui/src/components/story-tab/StoryTab.tsx` | 134 | text |
| 2 | `ui/src/components/scene-tab/SceneImageGenerateModal.tsx` | 80 | text |
| 3 | `ui/src/components/storyboard/modals/StoryboardGenerateShotsModal.tsx` | 50 | text |
| 4 | `ui/src/features/character-tab/modals/ActorPortraitGenerateModal.tsx` | 69 | text |
| 5 | `ui/src/features/character-tab/modals/ActorSaveExtractModal.tsx` | 35 | text |
| 6 | `ui/src/features/role-tab/modals/GenerateRolePortraitModal.tsx` | 114 | text |
| 7 | `ui/src/features/role-tab/modals/RolePortraitModelPickerModal.tsx` | 117 | text |
| 8 | `ui/src/features/role-tab/modals/GeneratePromptModal.tsx` | 130 | text |
| 9 | `ui/src/components/scene-tab/modals/AutoGenerateScenesModal.tsx` | 138 | text |
| 10 | `ui/src/components/chapter-tab/modals/StoryRolesUpsertModal.tsx` | 163 | text |
| 11 | `ui/src/components/chapter-tab/modals/OptimizeChapterPromptModal.tsx` | 103 | text |
| 12 | `ui/src/components/chapter-tab/modals/ChapterBatchAllChaptersScenesModal.tsx` | 208 | text |
| 13 | `ui/src/features/role-tab/hooks/useRoleBatchOps.ts` | 99, 201, 328 | text ×2, image |
| 14 | `ui/src/features/role-tab/hooks/useRoleBatchAiModals.ts` | 80, 269, 299 | text ×2, image |
| 15 | `ui/src/features/role-tab/ai/useRolePortraitAiPicks.ts` | 142, 154, 172 | text, image, i2i |

### 分类 B:ComfyUI 工作流相关(4 个文件)

**旧代码模式:**
```typescript
const comfyProfileIds = new Set(
  appSettings.imageProviders.items
    .filter(p => p.providerKind === IMAGE_KIND_COMFYUI && profileHasImageEndpointCreds(p))
    .map(p => p.id)
);
for (const p of appSettings.imageProviders.items) {
  if (!comfyProfileIds.has(p.id)) continue;
  const profileName = p.name;
  ...
}
```

**替换为:**
```typescript
const comfyProfileIds = findComfyBindingIds(appSettings, "image");
const comfyBindings = appSettings.capabilityBindings.filter(
  b => b.providerKind === IMAGE_KIND_COMFYUI && bindingHasImageEndpointCreds(appSettings, b.id)
);
for (const b of comfyBindings) {
  const cred = findCredentialById(appSettings, b.credentialId);
  const profileName = cred?.name ?? b.id;
  ...
}
```

**涉及文件:**

| # | 文件 | 替换内容 |
|---|------|---------|
| 1 | `ui/src/hooks/useComfyWorkflowImagePicks.ts` | 全量重写:comfyProfileIdSet → V3 版本 |
| 2 | `ui/src/hooks/useImageT2iModelSurface.ts` | comfyProfileIds 计算 → V3 |
| 3 | `ui/src/hooks/useImageI2iModelSurface.ts` | comfyProfileIds 计算 → V3 |
| 4 | `ui/src/components/storyboard/hooks/useStoryboardModelPicks.ts` | comfyProfileIds + 工作流循环 → V3 |

### 分类 C:垫图能力查询(3 个文件)

**旧代码模式:**
```typescript
const profile = appSettings.imageProviders.items.find(i => i.id === pick.profileId);
if (profile && effectiveImageReferenceCaps(profile).supportsReferenceImages) return pick;
```

**替换为:**
```typescript
const binding = findBindingById(appSettings, pick.profileId);
if (binding && effectiveImageReferenceCapsV3(binding.providerKind, binding.extra).supportsReferenceImages) return pick;
```

**涉及文件:**

| # | 文件 | 行号 |
|---|------|------|
| 1 | `ui/src/domain/sceneImageDisplay.ts` | 9-18 (firstImageToImagePickSupportingPads) |
| 2 | `ui/src/features/character-tab/CharacterTabScreen.tsx` | 237 |
| 3 | `ui/src/components/scene-tab/SceneTabMainLegacyImpl.tsx` | 282, 292 |

### 分类 D:useShotWorkbenchCapabilities 专用

**涉及文件:** `ui/src/components/storyboard/modals/shot-workbench/hooks/useShotWorkbenchCapabilities.ts`

删除本地 `resolveProviderKind` 辅助函数,改用 `resolveProviderKindFromBinding`

## 第四步:废弃函数清理

标记以下函数为 `@deprecated`(保留空壳仅供编译通过):
- `profileHasImageEndpointCreds` → 替代为 `bindingHasImageEndpointCreds`
- `profileHasImageToImageCreds` → 替代为 `bindingHasImageToImageCreds`

## 执行顺序

1.`appSettings.ts` 添加 `resolveProviderKindFromBinding` / `resolveCredentialFromBinding`
2. `appSettings.ts` 添加 V3 凭证检查函数 + Comfy 辅助函数
3. `imageReferenceCaps.ts` 添加 `effectiveImageReferenceCapsV3`
4. **分类 A** 文件批量替换(14 文件)
5. **分类 B** 文件重写 ComfyUI 逻辑(4 文件)
6. **分类 C** 文件替换垫图查询(3 文件)
7. **分类 D** 文件替换(1 文件)
8. 全量 ReadLints 检查

## 影响范围统计

| 类别 | 文件数 | 替换点数 |
|------|--------|---------|
| 分类 A(providerKind 解析) | 15 | ~24 |
| 分类 B(ComfyUI) | 4 | ~12 |
| 分类 C(垫图能力) | 3 | ~5 |
| 分类 D(workbench) | 1 | ~6 |
| 基础设施(appSettings + caps) | 2 | ~8 |
| **总计** | **~25** | **~55** |

故事板 graph:全部场次与选集共用同一套持久化(无 __all__ 兜底)

目标(已确认)
  • 「全部场次 + 点场次」「选集 + 点同一场次」读写同一 storyboard_graph_state 键:(project_id, episode_id=剧集节点 id, chapter_id=场次节点 id)

  • 不需要兜底、不考虑历史兼容:可删除/收紧依赖 __all__ / STORYBOARD_SCOPE_ALL 的故事板前端路径;遗留库中仅 __all__ 键下的 graph 行可视为可丢弃(不迁移)。

  • 以项目最优解落地:单一解析函数 + 全链路同一 episodeId,避免双轨。

核心结论

推荐实现(最优、改动面收敛)

1. 单一「故事板剧集作用域」解析(前端)

新增小工具(例如 ui/src/domain/storyboardEpisodeScope.ts)或内联 useMemo

// 语义:显式选集 > App 传入的 chapter > 当前场次所属剧集
resolvedStoryboardEpisodeId =
  (activeChapterId?.trim() ||
    chapter?.id?.trim() ||
    activeScene?.chapter_id?.trim() ||
    "");
  • StoryboardTabsceneGraphEpisodeId 改为上述 resolvedStoryboardEpisodeId不再 || STORYBOARD_SCOPE_ALL)。

  • 无场次:不加载 graph(现有逻辑已处理)。

  • 有场次但 resolved 为空:视为数据损坏/孤儿场次 — 不兜底:toast 固定文案(如「场次未关联剧集,无法加载故事板画布」),loadStoryboardGraph / save 不调用;与「不要兼容」一致。

2. 与 graph 键一致的所有调用点(前端)

以下必须使用同一 resolvedStoryboardEpisodeId(从 StoryboardTab 下传或从 App 用相同公式计算,避免分叉):

位置

调整

[useStoryboardSceneGraph](d:/00Dev/bgxiong-ai-story/ui/src/components/storyboard/hooks/useStoryboardSceneGraph.ts)

load/save、cache scope、pendingepisodeId 均用解析结果;sceneGraphCacheScopeKey 中去掉对 STORYBOARD_SCOPE_ALL 的回退拼接(空 episode 时不生成 key 或与「无 scene」一致)

[useChapterSceneBoardGenerate](d:/00Dev/bgxiong-ai-story/ui/src/components/storyboard/hooks/useChapterSceneBoardGenerate.ts)

episodeScopeId / 刷新 graph 的 episodeId 与上一致

[useStoryboardCanvasActions](d:/00Dev/bgxiong-ai-story/ui/src/components/storyboard/hooks/useStoryboardCanvasActions.ts)

cleanupStoryboardGraphAfterSegmentDeleteepisodeScopeId 一致

StoryboardTabcompileClipFrameworkFromStoryboard

episodeId 参数一致

SceneI2iPadSelector chapterId

与垫图/场次上下文一致:传 resolvedStoryboardEpisodeId(若该组件语义为「剧集 id」)

App.tsx refreshStoryboardShots

loadOrderedStoryboardNodesUnderScene 第三参改为 activeChapter?.id ?? activeScene?.chapter_id ?? STORYBOARD_SCOPE_ALL 中的前两项优先;最优:抽共享 resolveEpisodeScopeForStoryboard(activeChapter, activeScene) 与 Tab 同式,删除STORYBOARD_SCOPE_ALL 的默认 — 无解析结果则传空并由 loadOrdered 短路或让 loadOrdered 要求必填

3. [sceneStoryboardChildNodes.ts](d:/00Dev/bgxiong-ai-story/ui/src/domain/sceneStoryboardChildNodes.ts)

  • 删除 episodeId 默认值 STORYBOARD_SCOPE_ALL;改为调用方必传 已解析 的剧集 id。

  • episodeId 为空:直接返回 []throw(二选一;推荐返回 [] + 上层 toast,避免未处理异常)。

4. 常量与类型清理

  • [storyboardGraph.ts](d:/00Dev/bgxiong-ai-story/ui/src/domain/storyboardGraph.ts)STORYBOARD_SCOPE_ALL 若仅故事板 graph 使用,可删除并全量替换;若 片段画布等仍用 __all__(见 [types.ts](d:/00Dev/bgxiong-ai-story/ui/src/components/segment-canvas/types.ts)App Clips),则保留常量故事板模块禁止再引用

  • [useStoryboardSceneGraph](d:/00Dev/bgxiong-ai-story/ui/src/components/storyboard/hooks/useStoryboardSceneGraph.ts):移除仅用于 __all__ 回退的 import/拼接。

5. 后端(可选收紧,与「无兜底」对齐)

  • [storyboard_graph::normalize_scope_id](d:/00Dev/bgxiong-ai-story/src-tauri/src/storyboard_graph.rs):对 load_storyboard_graph_state / upsert_storyboard_graph_state 的入口,若 trim 为空则 Err 而非写入/读取 __all__(需同步改 [commands/storyboard.rs](d:/00Dev/bgxiong-ai-story/src-tauri/src/commands/storyboard.rs) 三处 normalize_scope_id)。

  • 风险:仅当保证前端永远传非空剧集 id 时安全;否则 Tauri 命令会报错(符合「严格」)。

  • 文档注释:chapter_scene_board_pipeline.rs 1388 行附近 更新为「episode_scope_id 必须为剧集节点 id,与前端一致」。

6. 数据(不兼容策略)

  • 不编写迁移合并 __all__ → 真实剧集:旧行自然废弃。

  • 可选(本地开发):手动删 storyboard_graph_stateepisode_id='__all__' 的行;作为代码交付必选项。

验证

  • 选集 A → 选场次 S → 改画布 → 切「全部场次」→ 再点 S:布局与节点与选集时一致

  • 从未选集路径进入:仅点 S(activeScene.chapter_id 有值):同上。

  • 清除场次或孤儿场次:resolved 为空时行为符合预期(不静默读 __all__)。

实施任务清单

  1. 引入 resolvedStoryboardEpisodeId 解析并接入 StoryboardTab + 所有子 hook / API 参数。

  2. 更新 App.refreshStoryboardShotssceneStoryboardChildNodes(去默认 __all__)。

  3. 删除故事板路径上对 STORYBOARD_SCOPE_ALL 的依赖;保留或收缩常量定义。

  4. (可选)后端 normalize_scope_id 对空串改为 Err + cargo check

  5. 手动回归两条路径 + npm run build / 相关 ReadLints

项目故事板生成逻辑

##不要把故事板看作一张图,要看作一个数据库对象。每一个面板(Panel)应包含以下字段:
镜头ID: (如 Scene 1, Shot A)
景别 (Shot Size): 特写、中景、全景(影响相机焦距逻辑)。
角度 (Angle): 平拍、仰拍、俯拍、主观视角。
运动 (Movement): 推、拉、摇、移、跟。
内容描述 (Action): 画面里发生了什么。
对白 (Dialogue): 关联的剧本行。

##三层逻辑架构设计
#第一层:剧本解析层 (Parsing Layer)
逻辑: 自动将剧本中的“动作行”拆解为可能的镜头。
设计: 利用 LLM 识别剧本中的关键词。例如识别到“大熊愤怒地拍桌子”,工具应自动建议一个“中景/仰拍”的镜头。
工具功能: 一键生镜。
#第二层:空间映射层 (Spatial Mapping)
逻辑: 确定角色与相机的相对位置。
设计: 引入**“平面示意图(Floor Plan)”**逻辑。用户在 2D 平面上放置相机和人(类似小地图),系统自动计算出 3D 视角下的透视关系。
工具功能: 相机位移参数化。
#第三层:视觉生成层 (Visual Generation)
逻辑: 将结构化数据转化为图像。
设计: 结合 Stable Diffusion 或类似模型。
关键点: 必须支持角色一致性(Character Consistency)和场景一致性。
控制: 使用 ControlNet(深度图/骨架图)来精准控制角色的动作,而不是盲目生成。

##给 AI 提示词生成的“逻辑链”
如果你要写一个后端逻辑来生成这些绘图 Prompt,逻辑应该是:
[风格定义] + [镜头参数] + [主体动作] + [光影氛围] + [构图约束]
例子: 电影感故事板, 诺兰风格, [中景, 仰拍], 男主角在雨中奔跑, [强烈的侧逆光, 蓝调], 遵循三分法构图

##工具功能模块建议
模块设计逻辑价值镜头连续性检查检查相邻镜头的“轴线”是否跳轴(180度法则)。避免低级导演错误。
资产库联动允许用户上传自己的摄影机参数(如你常用的 Canon/Sony 传感器尺寸)。渲染出的透视与实拍一致。
自动测算时长根据对白字数和动作描述,预估该镜头在成片中的秒数。
自动生成初步的“动态分镜(Animatic)”。
导出集成直接导出为 EDL/XML 导入 DaVinci Resolve。真正打通后期流程。

##设计目标
不要做一个单纯的“绘图软件”,要做一个**“剧本到画面的逻辑编译器”**。
用户输入剧本,你输出镜头清单和对应的 AI 生成图
最后能结合提示词单独作为独立镜头的参考图使用
故事板 (Storyboard) —— 镜头组层(等同于“场次”)
逻辑建议: 故事板 = 场次的具体表现。
设计: 每一个故事板对象应该对应一个具体的场次(如:场景01-花果山山顶-日)。
内容: 它是镜头的集合。你在这个场次下,根据剧本逻辑拆解出 10 个镜头。

有改名字需求的朋友可以...

到官网去改 https://www.bgxiong.com/user/profile
后期我会把这修改资料加入到客户端
再等等...

在尝试找到把SRT转TEXT+的途径

达芬奇API的某些限制,
让现阶段做动态字幕有点困难!

比格熊v1.2.9马上发布 新功能已调色完毕

### 🆕 新功能
**音效卡片拖拽添加**
- SFX 模块和 Mine 模块均支持拖拽音效卡片到时间轴
- 鼠标按下:抓取手型 + 绿色边框 + 音效名称变绿
- 拖拽出插件窗口外释放:自动添加到达芬奇时间轴
- 使用 Pointer Events (`setPointerCapture`) 技术,支持鼠标移出窗口仍能拖拽
- 拖拽预览标签跟随鼠标,拖出窗口时变亮绿色提示
**搜索框自动聚焦**
- 进入音效模块时,搜索框自动获取焦点,可直接输入搜索
### 🔧 技术改进
**Pointer Events 实现**
- 替换传统的 mouse 事件为 pointer 事件
- `pointerdown` + `setPointerCapture` 捕获指针
- `pointermove``pointerup` 处理拖拽和释放
- 解决鼠标移出 Electron 窗口后事件丢失的问题
**拖拽状态管理**
- 统一的 `dragState` 全局状态管理
- `cleanupDragState()` 统一清理样式和状态
- 支持 `pointerId` 追踪和释放
### 🎨 样式优化
- 波形图自适应卡片宽度
- 卡片内边距优化(padding: 6px 5px)
- 波形图边距统一(margin: 2px 2px 0 0)
### 📝 文件变更
**修改文件**
- `renderer.js` - SFX 模块拖拽功能、搜索框聚焦
- `modules/mine/renderer.js` - Mine 模块拖拽功能
- `css/styles.css` - 波形图和卡片样式

置顶 【激活码】20260325新鲜热乎的尝鲜

我这分批放出激活码是为了缓解服务器压力
这是尝鲜测试用激活码不具备长期有效期
J28D-VBZW-44YE-REGJ                             Y8L3-XKU2-U5F4-K6BN
TQ3R-WQVM-6ZTQ-NGG9                         R59Y-JNDL-22S5-QTMT
8LK9-RTTW-2SDM-RSY3                            VLQD-CXVC-69FB-AFJS
83HZ-25DF-562V-Y3DD                              7Q8J-9KRR-5HMD-7BL3
ENMG-GLJM-BU77-7B3J                           SVAQ-PR6P-QH58-HMHT
FAEP-CWME-GEPQ-9RX7

基于 Rust + WebGPU 的技术栈是目前高性能跨平台开发(Native + Web)的最前沿方案。

基于 Rust + WebGPU 的技术栈是目前高性能跨平台开发(Native + Web)的最前沿方案。对于追求性能和系统稳定性的开发者来说,这套组合几乎是“终极形态”。

以下是这套技术栈的核心构成及入门路径:


1. 核心架构:wgpu 生态

在 Rust 社区中,wgpu 是 WebGPU 规范的旗舰级实现。它不仅能让代码运行在浏览器中,还能直接调用 Windows (Direct3D 12)、macOS (Metal) 和 Linux (Vulkan) 的原生驱动。

  • wgpu-rs (核心库): 提供安全的 Rust 绑定。

  • WGSL (WebGPU Shading Language): 官方指定的着色器语言,语法类似 Rust,易于上手,且避开了 GLSL 的历史包袱。

  • naga (着色器翻译器): 负责将 WGSL 翻译为底层 API 能理解的指令。

2. 为什么选择 Rust + WebGPU?

这套方案之所以强大,是因为它解决了两个痛点:内存安全跨平台统一性

3. 入门技术栈建议

如果你准备从零开始构建一个高性能工具(例如 AI 图像处理或视频滤镜引擎),可以参考以下配置:

  • UI 层: eguiiced。这两个库在 Rust 生态中非常流行,且都完美支持 wgpu 后端,适合快速构建跨平台工具界面。

  • 窗口管理: winit。这是 Rust 处理窗口、输入事件的事实标准。

  • 数学运算: nalgebraglam。后者专门为图形学优化,性能极佳。

  • Web 部署: wasm-bindgen。将你的 Rust 逻辑打包成 WebAssembly。

4. 关键应用场景:AI 推理与视频处理

对于本地 AI 推理,你可以利用 WebGPU 的计算着色器 (Compute Shader) 直接对张量进行并行运算。

  • 模型转换: 将模型权重的二进制数据映射到 GPU 的 Storage Buffer

  • 并行计算: 在 WGSL 中编写计算内核(Kernel),实现类似矩阵乘法 (GEMM) 的操作。

  • 零拷贝: 借助 Rust 的高效内存布局,减少 CPU 与 GPU 之间的数据交换延迟。


快速开始建议

  1. 环境配置: 确保 Rust 环境已更新,安装 cargo

  2. 克隆 Demo: 到 GitHub 搜索 gfx-rs/wgpu 仓库,查看其 examples 文件夹。里面有从简单的三角形渲染到复杂的计算着色器应用。

  3. 学习 WGSL: 如果你熟悉 Rust,你会发现 WGSL 的语法非常亲切。

小贴士: 由于你可能处理大量资源或追求极高性能,建议在开发时开启 wgpu 的验证层(Validation Layers),它能帮你捕捉到 90% 以上的非法显存访问错误。