feat: Canvas 2D → WebGL 实时转译器 v2.0

核心思路: 拦截 getContext('2d'),返回 Canvas2DProxy 代理
所有 Canvas 2D API 内部转译为 WebGL GPU 渲染

转译覆盖:
- fillRect/strokeRect/clearRect → 纯色四边形
- drawImage → 纹理采样四边形
- fillText/strokeText → 离屏Canvas→纹理→四边形
- fill/stroke (路径) → ear-clipping三角化/粗线四边形
- arc/ellipse/bezierCurveTo → 细分折线
- save/restore/translate/rotate/scale → 变换矩阵栈
- getImageData/putImageData → gl.readPixels/texImage2D
- globalAlpha/globalCompositeOperation → alpha/blendFunc

性能优化:
- 批量渲染: 4096四边形/批次,单次drawArrays
- 纹理缓存: WeakMap + 8纹理槽
- 关闭antialias/强制独显/低延迟
This commit is contained in:
codemao-webgl-engine committed 2026-05-02 21:33:29 +08:00
commit b0b62f6a1e
2 files changed
+1053

No files matched your search

+49
View File
@@ -0,0 +1,49 @@
# 编程猫 Canvas→WebGL 转译加速器
## 原理
编程猫作品用 Canvas 2D 渲染(CPU),本脚本拦截 `getContext('2d')`,返回一个兼容代理对象,**所有 Canvas 2D 操作内部转译为 WebGL(GPU)执行**。
```
原作品代码 → canvas.getContext('2d') → 被拦截
↓
返回 Canvas2DProxy(兼容所有2D API)
↓
fillRect / drawImage / fill / stroke...
↓
内部全部转为 WebGL 绘制
↓
GPU 硬件渲染 🚀
```
## 转译对照
| Canvas 2D API | WebGL 转译方式 |
|---------------|---------------|
| `fillRect(x,y,w,h)` | 纯色四边形,直接顶点绘制 |
| `drawImage(img,...)` | 纹理采样四边形 |
| `fillText(text,x,y)` | 离屏Canvas渲染→纹理上传→四边形 |
| `fill()` (路径) | ear-clipping 三角化→三角形绘制 |
| `stroke()` (路径) | 粗线四边形近似 |
| `arc()` / `ellipse()` | 细分三角形扇 |
| `bezierCurveTo()` | 细分折线 |
| `save()` / `restore()` | WebGL 变换矩阵栈 |
| `clearRect()` | destination-out 混合 |
| `getImageData()` | gl.readPixels |
| `globalAlpha` | 顶点颜色 alpha 通道 |
| `globalCompositeOperation` | gl.blendFunc 切换 |
## 手机使用
1. 用支持油猴的手机浏览器(Kiwi / Firefox / X浏览器 / Alook)
2. 安装 Tampermonkey 或暴力猴
3. 新建脚本,粘贴 `userscript/codemao-canvas2webgl.user.js` 内容
4. 打开编程猫任意作品 → 自动 GPU 加速
## 书签脚本(最简单)
复制这段代码,保存为书签,在编程猫作品页面点击:
```
javascript:void(function(){var s=document.createElement('script');s.src='https://gitee.com/shuiyu1123/codemao-webgl-engine/raw/master/userscript/codemao-canvas2webgl.user.js';document.head.prepend(s);}());
```
File diff suppressed because it is too large. Load diff