codemao-webgl-engine
b0b62f6a1e
核心思路: 拦截 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/强制独显/低延迟
50 lines
2.0 KiB
Markdown
50 lines
2.0 KiB
Markdown
# 编程猫 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);}());
|
||
```
|