WebGPU 技术了解一下

到 2026 年,WebGPU 已经正式告别了“试验田”阶段,成为了 Web 高性能计算和图形渲染的绝对标准

如果说 WebGL 是在浏览器里“画图”,那么 WebGPU 则是在浏览器里“直接操控 GPU”。

以下是 WebGPU 当前发展的关键维度:

1. 核心生态:从“尝鲜”转向“默认”

WebGPU 1.0 在 2023 年发布后,经历了两年的高速迭代。

  • 引擎全面转向: Three.jsBabylon.js 等主流 Web 图形引擎已经将 WebGPU 作为首选后端。相比 WebGL,WebGPU 在处理复杂场景(如数万个独立对象的渲染)时,CPU 开销降低了约 80%。

  • 原生级性能: 借助 WebAssembly (Wasm) 和 WebGPU 的深度集成,现在的 Web 应用可以实现接近原生桌面软件的图形表现。这使得云端视频剪辑、高级调色工具和复杂的 3D 设计软件(如 Web 版 CAD)在性能上几乎没有短板。

2. AI 浪潮下的“杀手锏”:计算着色器 (Compute Shaders)

WebGPU 与 WebGL 最大的区别在于其强大的通用计算能力

  • 端侧 AI (On-device AI): 这是 WebGPU 发展最迅猛的领域。由于其提供了对现代 GPU 特性(如共享内存、原子操作)的访问,诸如 WebLLMTransformers.js 等项目可以让大语言模型(LLM)和 Stable Diffusion 直接在用户的本地 GPU 上运行,无需上传数据到服务器。

  • 视频处理加速: 对于视频后期从业者而言,WebGPU 允许在浏览器内进行实时的 4K 视频滤镜处理、AI 降噪和自动抠图,其效率是传统 JavaScript 或 WebGL 无法比拟的。

3. 浏览器与硬件兼容性

  • 多端统一: 截至 2026 年,Chrome、Edge、Safari 和 Firefox 的稳定版均已全面支持 WebGPU。它在底层完美映射了系统的原生 API(如 Windows 的 Direct3D 12、macOS 的 Metal、Linux 的 Vulkan)。

  • 移动端爆发: 随着高性能移动芯片的普及,手机端的 WebGPU 支持也已趋于成熟,网页端手游的品质已经开始向主机级画质靠拢。

4. 技术特性演进

  • FP16 与精度优化: 现在的 WebGPU 已经广泛支持 半精度浮点数 (FP16),这对 AI 推理至关重要,能在减少显存占用的同时提升一倍的运算速度。

  • 子组操作 (Subgroups): 这一高级特性的加入,使得开发者可以更精细地控制 GPU 线程间的通信,进一步压榨硬件性能。


总结:对开发者的影响

对于开发者(尤其是熟悉 RustC++ 这种底层语言的人)来说,WebGPU 极大地拓宽了 Web 的边界。你不再受限于简单的网页交互,而是可以直接开发高性能的跨平台桌面应用(通过 Electron 加速)或高性能的 Web AI 工具。

我的问题以及GEMINI给我的答案

win10和mac兼容系比较好的客户端架构有哪些,最好能基于web视图技术,因为对CSS和HTML结构比较熟悉,但是也需要一些其他的高级语言处理逻辑,操作文件,加载本地大模型之类的,你有什么比较成熟稳定的技术方案吗?

既然你对 HTML/CSS 非常熟悉,同时又有处理复杂逻辑、文件系统操作以及加载本地大模型 (LLM) 这种高负载需求,目前的跨平台客户端架构主要集中在以下三个“黄金方案”上。

针对你的需求,我按照性能、成熟度技术栈匹配度进行了排序:


1. Tauri (首选推荐:极致性能与轻量化)

Tauri 是目前增长最快、最受开发者青睐的方案。它将 UI 交给系统原生的 WebView(Win10 用 Edge/WebView2,Mac 用 WebKit),而后台逻辑则交给 Rust

  • 为什么适合你:

    • Web 前端: 你可以用任何喜欢的 Web 框架(React, Vue, 或纯 HTML/CSS)构建 UI。

    • 本地大模型: Rust 是目前处理本地 AI 推理最理想的语言之一。你可以直接调用 llama-cpp-rscandle 等 Rust 库,效率远高于 Node.js。

    • 安全性与体积: 它的安装包极小(通常只有几 MB),且由于 Rust 的特性,内存安全管理非常出色。

  • 挑战: 你需要学习一点 Rust 语法来编写后端逻辑(操作文件、调用模型)。

2. Electron (最成熟:生态之王)

Electron 是 VS Code、Discord 和 Slack 的底层架构。它将 Chromium 浏览器和 Node.js 打包在一起。

  • 为什么适合你:

    • 上手难度最低: 前端 UI 和后端逻辑(Node.js)全部使用 JavaScript/TypeScript。

    • 生态极其丰富: 对于加载大模型,你可以直接使用 node-llama-cpp 或者 onnxruntime-node 等成熟的 NPM 包。

    • 文件操作: Node.js 的 fs 模块处理本地文件非常简单直观。

  • 挑战: 资源占用大(内存怪兽)。由于它自带了一个完整的 Chromium,加载本地大模型时,GPU/内存压力会比 Tauri 大得多。

3. Wails (平衡之选:Go 语言后端)

如果觉得 Rust 太难,又觉得 Electron 太重,Wails 是一个绝佳的中间地带。它使用 Go 语言作为后端。

  • 为什么适合你:

    • Go 语言逻辑: Go 的语法比 Rust 简单得多,且处理并发和系统 API(文件操作)非常高效。

    • 轻量: 和 Tauri 一样,它使用系统原生的 WebView,不打包 Chromium。

    • 模型支持: 通过 Go 的 CGO 调用 llama.cpp 的 C++ 接口非常成熟。

  • 挑战: 在三者中,Wails 的社区插件生态相对较小。


技术方案对比表


针对“加载本地大模型”的深度建议

无论你选择哪种架构,加载大模型(如 Llama 3 或 Qwen)通常有两条路径:

  1. 侧边进程 (Sidecar) 模式: 不要在 Electron/Tauri 的主进程里直接运行推理。可以打包一个编译好的 llama.cpp 二进制文件作为“侧边服务”,你的 Web 视图通过本地端口(如 localhost:11434)与其通信。这是目前最稳定、解耦最好的方式。

  2. WebGPU (未来趋势): 如果你希望完全在 Web 视图内处理,可以关注 WebLLM 项目。它利用 WebGPU 接口,让 HTML 页面直接调用显卡进行推理,不需要编写复杂的后端 C++/Rust 代码,直接在 JS 里写逻辑。

如果你希望现在就开始一个稳定且高性能的项目,我建议: 先尝试 Tauri。虽然 Rust 有学习成本,但它处理文件和本地模型的能力是目前跨平台方案的天花板。

您是否需要我为您整理一份基于 Tauri 运行本地 LLM 的基础项目结构示例?

### 使用帮助 ###

##我们先简单的做个基本使用说明
** 基础介绍
- 安装成功后从达芬奇顶部工具栏【工作区】->【流程整合】->【比格熊】打开
- 快捷键 ESC 快速隐藏和显示已经打开的界面

** 音效模块
- 【播放】鼠标滑动到波形图上 音效自动循环播放
- 【播放】单击波形图 快速定位音效的位置 可实现快进效果
- 【下载】单击音效名称 自动下载加入音效到当前软件激活的时间线
- 【下载】文件不会被重复下载 本地缓存有的文件会优先使用本地缓存
- 【下载】双击波形图  自动下载加入音效到当前软件激活的时间线
-【时间线】当前时间线当前播放头下如果轨道为空,则自动插入到空轨道
-【时间线】如果轨道不为空,自动创建BGX_开头的空轨道,然后加入音效
-【时间线】如果当前播放头轨道为空,但空白长度不足以容纳加入音效时,自动创建空轨道

**我的模块
1. 所有已下载过的音效都可以在这里找到
2.音效卡片名称的右侧图标 依次是 [加入音效到时间线]  [给音效评级]  [置顶]  [删除]
3.右侧上方可以打开音效缓存目录 删除缓存不会影响到下载记录
4.如果本地缓存被清除 加入时间线是会自动从云端重新下载
5.Ctrl(windows)或者Command(Mac) ➕ 左右方向键 可以实现上一页下一页快速跳转
6.【特别提醒】删除本地缓存那么使用这些音效的项目也将失去连接,音效文件是物理删除!

**字幕模块
1.语音识别 只有在达芬奇最新的20以上的版本才能拉起软件内部的AI语音转字幕的功能(受客户端版本限制)
2.只有字幕列表有修改时保存字幕才能点击
3.保存字幕会产生缓存文件 会在时间线新增一条修改后的字幕轨道
4.保存替换规则 注册用户可以保存到本地 VIP用户可以保存到本地以及云端,VIP用户换了电脑登录规则依然有效!
5.规则修改后要手动点击保存
6.字幕替换规则为本地优先,本地没有规则会自动加载云端规则
7.字幕操作时,时间轴播放头会自动跳转到对应的位置
8.拖动播放头后打开字幕模块时 字幕加载的中间位置正好是播放头当前的位置

**阅读模块
1.帮助手册 会随着版本更新而修改
2.其他分类是更新日志和一些可靠的资源分享

**重启和刷新
1.目前没有特别的说明 只是为了开发调试保留的快捷按钮,软件成熟后可能会移除!


### 安装文档 ###

解压缩安装包
你会在当前目录下看到 bgxiong_for_mac 和 bgxiong_for_windows 两个文件夹
请根据自己的系统拷贝对应的文件夹

*** MAC APP Store上购买的达芬奇无法安装工作流插件 这是来自苹果系统的特殊照顾 与插件无关 ***

WINDOWS用户把它整个的复制到 (如果没有可以手动创建 "Workflow Integration Plugins" 目录 )
C:\ProgramData\Blackmagic Design\DaVinci Resolve\Support\Workflow Integration Plugins

MAC用户把它整个的拷贝到 (如果没有可以手动创建 "Workflow Integration Plugins" 目录 )
/Library/Application Support/Blackmagic Design/DaVinci Resolve/Support/Workflow Integration Plugins

====================================

!!!安装后工作流是灰的,无法打开,或者找不到目录的同学们可以先打开达芬奇!!!
!!!在顶部工具栏找到【帮助】再找到【文档】然后点击【开发人员】!!!
!!!这样你就进入了开发人员目录接着【回退一级】目录就能快速定位程序的安装目录了!!!
!!!如果没有【Workflow Integration Plugins】目录那就手动创建一个!!!
!!!【bgxiong_根据你的系统选择】的程序目录整个复制过来就行了!!!
!!!要复制目录不要复制里面的文件!!!
!!!最终路径应该是 *************
**********/DaVinci Resolve/Support/Workflow Integration Plugins/bgxiong_win
或者
**********/DaVinci Resolve/Support/Workflow Integration Plugins/bgxiong_mac

====================================

直接去到达芬奇顶部工具栏
找到 工作区 -> 流程整合 -> 比格熊

如果无法启动尝试以下操作
1. 关闭达芬奇
2. 重新复制插件文件夹到上述目录
3. 重新打开达芬奇

====================================

云端更新记录0324

### 状态
- 创建时间: 2026-03-23
- 完成时间: 2026-03-23
- 数据库脚本: `update-mysql/update0323-user-sfx-behavior.sql`
---
## 2026-03-24 客户端下载历史功能修复
### 问题描述
客户端下载音效后,历史记录列表显示异常,部分功能返回错误。
### 修复内容
#### 1. 下载历史列表查询条件不一致
**问题**: `findUserDownloadHistory``download_count > 0` 条件,但 `countUserDownloadHistory` 没有,导致 list 和 total 数量不匹配。
**修复**: 移除 `download_count > 0` 条件,两边统一只过滤 `deleted = 0`
#### 2. downloadJSON 未记录下载历史
**问题**: `ClientSfxController.downloadJSON()` 获取下载链接时未调用 `behaviorLogService.recordBehavior()`
**修复**:
- 恢复 `BehaviorLogService` 注入(之前被注释)
- 在返回下载链接前调用 `recordBehavior()` 记录下载行为
#### 3. downloadProxy 未从 URL 参数获取 token
**问题**: `downloadjson` 返回的 URL 没有带 token,客户端请求时无法识别用户。
**修复**:
- URL 添加 token 参数: `&token=xxx`
- `downloadProxy` 支持 `tokenParam` 参数
#### 4. PageViewInterceptor 无法识别客户端用户
**问题**: 拦截器只从 Spring Security 上下文获取用户,客户端 API 使用自定义 token 解析,导致 `user=null`
**修复**: `getCurrentUserId()` 增加从请求头/参数解析 token 的逻辑。
#### 5. upsertUserSfxBehavior 未重置 deleted 字段
**问题**: 用户删除历史后重新下载同一音效,`ON DUPLICATE KEY UPDATE` 未重置 `deleted=0`,导致记录仍然不显示。
**修复**: UPDATE 语句添加 `deleted = 0`
#### 6. Map.of() 不支持 null 值
**问题**: 取消置顶时 `pinnedTime=null``Map.of("pinned", pinned, "pinnedTime", null)` 抛出 NPE,返回 500。
**修复**: 改用 `HashMap` 代替 `Map.of()`
---
### 修改文件
| 文件 | 修改内容 |
|------|----------|
| `UserBehaviorMapper.java` | 移除 download_count 条件,UPDATE 添加 deleted=0 |
| `ClientSfxController.java` | 恢复 BehaviorLogService 注入,添加记录调用,URL 带 token |
| `ClientUserResourceController.java` | Map.of() 改 HashMap |
| `PageViewInterceptor.java` | 增加 token 解析逻辑 |
---
### 状态
- 修复时间: 2026-03-24

## 最近更新 新版本即将发布 ###

## 最近更新
### 2026-03-23: Mine 模块(我的下载)正式发布
**功能概述**:用户下载记录管理模块,支持音效试听、批量操作、本地文件管理
**核心功能**
1. 下载记录列表展示(分页、两列布局)
2. 音频波形图试听播放(鼠标悬停自动播放、点击跳转进度)
3. 置顶/取消置顶下载记录
4. 1-5星评分功能
5. 删除记录(同时删除本地缓存文件)
6. 批量操作:全选、反选、批量删除、清空所有
7. 打开本地缓存目录
8. 添加到 DaVinci Resolve 媒体池
**新增文件**
- `modules/mine/index.html` - 容器结构
- `modules/mine/renderer.js` - 核心逻辑(约1100行)
- `modules/mine/styles.css` - 样式文件
**修改文件**
- `main.js` - 新增 `shell:openFolder``shell:deleteLocalFile` IPC handler
- `preload.js` - 暴露 `window.shellAPI.openFolder()``window.shellAPI.deleteLocalFile()`
- `config.json` - 新增 4 个接口端点配置
- `index.html` - 侧边栏"我的"菜单项指向 mine 模块
- `network_client.js` - 添加调试日志、支持 code: 200 成功状态
**API 接口**(云端 ClientUserResourceController):
- `GET /user/downloads` - 下载记录列表(page, size 参数)
- `POST /user/downloads/pin` - 置顶/取消置顶(sfxId, pinned 参数)
- `POST /user/downloads/delete` - 删除记录(sfxId 参数)
- `POST /user/downloads/rate` - 评分(sfxId, rating 参数)
**关键实现**
- 波形图绘制:使用 Canvas API,支持进度显示
- 播放控制:HTML5 Audio API,支持悬停播放、点击跳转
- 多选功能:使用 Set 存储选中状态,支持点击名称切换选中
- 批量删除:遍历选中项,先删除本地文件再删除后端记录
- 清空所有:分页遍历删除,避免内存溢出
- 失效记录标记:后端返回 `isValid: false` 标记已删除的音效
**UI 布局**
- 顶部工具栏:左侧统计信息,右侧操作按钮
- 两列卡片布局:名称、波形图、评分、操作按钮
- 底部分页:居中显示
- Toast 提示:替代 alert 弹窗
### 2025-03-14: v1.2.4 版本发布 - 代码清理
**变更内容**
1. 移除 Rough Cut(粗剪)模块 - 整个 `modules/rough_cut/` 目录
2. 清理 10000+ 行废弃代码

把整个库的音效名称用AI清洗了一遍

现在的名称应该既有主题又不啰嗦
这样的搜索命中率会高一些
花了3天时间

搜索短暂不可访问

如果你遇到搜索短暂不可访问,不用急。
这可能是在批量添加音效内容,稍微等等就会恢复!

正在更新音效管理后台

不断更新云端后台系统是为了更高效的补充和管理音效数据...
功能好用资源不足
也是花架子

每天跟AI对话的内容比跟真人的还多

这正常嘛???