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:
commit
b0b62f6a1e
2 files changed
+1053
No files matched your search
@@ -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
Reference in new issue
Block a user