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/强制独显/低延迟
编程猫 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 切换 |
手机使用
- 用支持油猴的手机浏览器（Kiwi / Firefox / X浏览器 / Alook）
- 安装 Tampermonkey 或暴力猴
- 新建脚本，粘贴
userscript/codemao-canvas2webgl.user.js内容 - 打开编程猫任意作品 → 自动 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);}());