今天给大伙儿唠唠WebGL开发那些坑，都是我亲自用脑门儿撞出来的经验。本来寻思着不就是搞点3D效果嘛结果好家伙，掉坑里就没爬出来过几回。后来硬是折腾出几个土法子才算摸到点门道。

掉坑第一步：画面黑得比锅底还干净

刚上手那会儿，照着教程吭哧吭哧写了堆代码，满心欢喜按F5刷新，嚯！浏览器比我家灶膛还黑。你猜怎么着？我坐那儿对着屏幕干瞪眼半小时，烟都抽完半包才反应过来：着色器这玩意儿编译失败它压根不出声儿！ 只能苦哈哈地扒拉浏览器控制台，在一堆乱七八糟的信息里翻着色器报错日志。现在学乖了，每次跑代码前先把这行塞进去：

*(shader);

*(program);

就跟查煤气表似的，不看读数准出事。

掉坑第二步：3D模型变剪纸片儿

有回我搞了个特别酷炫的机甲模型，结果在网页里活脱脱变成了纸片人儿。面儿都叠在一块打架！折腾大半天发现是深度测试忘开了。赶紧在init()里加了句 *(*_TEST); 好嘛模型立马从二次元穿越回三次元了。这玩意儿就跟忘开手电钻开关似的，使多大劲儿都白搭。

掉坑第三步：显卡风扇鬼哭狼嚎

做粒子特效那会儿美滋滋，满屏小火花哗的。结果没半分钟显卡风扇嗷嗷叫，笔记本烫得能煎鸡蛋。内存跟开闸泄洪似的往外漏！拿Chrome的性能分析器一瞧，好家伙，每次渲染都偷偷摸摸创建新缓冲对象。后来学精了，把缓冲对象初始化全挪到循环外边，该复用的绝不瞎创建。显卡这玩意儿，跟老黄牛似的，得省着点使。

掉坑第四步：画面抽风似地狂闪

好不容易把场景搭起来，灯光材质都调好了。结果画面跟抽风似的狂闪，眼都快闪瞎了。原来清理画布和缓冲区的顺序整岔劈了。必须得先把颜色缓冲清干净了：*(*_BUFFER_BIT *_BUFFER_BIT); 就跟粉刷墙似的，你得先把旧墙皮铲干净再上新漆？

掉坑第五步：旋转模型像闹鬼

这个坑最邪门儿！给模型加旋转动画时，明明就转个30度，它非要给你翻720度大回旋。原来是矩阵乘反了！ 数学老师棺材板都要压不住了：modelMatrix = projectionMatrix viewMatrix modelMatrix; 这么个套娃顺序不能乱，比俄罗斯套娃还讲究。刚开始我死活不信邪，硬杠了两天，发现调个顺序比吃感冒药还灵。

折腾这么多回算是明白了，WebGL这玩意儿就跟家里老房子装修似的，看着挺美，干起来全是暗坑。现在我的代码开头永远挂着这几条保命符，比庙里求的护身符还好使。要是您正在坑里扑腾，试试这几招土法子，指不定就爬出来了。