Webgl 练习记录 log 贴图滤镜

LEMOSSR

已于 2022-09-02 17:02:51 修改

阅读量1.8k

点赞数

分类专栏： webgl 文章标签：贴图 webgl 滤镜

于 2022-07-19 11:20:10 首次发布

本文链接：https://blog.youkuaiyun.com/fruiva/article/details/125767547

版权

本文记录了作者在WebGL中实现logger和应用滤镜的实践过程，包括float数值打印的挑战、纹理坐标填充问题、图像滤镜前后的像素信息读取、texImage2D方法参数解析，以及在select样式覆盖中遇到的挑战。文章强调了commit的重要性，并分享了在实现大面积模糊滤镜时的尝试和思考。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

因为 shader 里面的变量没有打印方法，所以我做了一个logger。

在这里插入图片描述

要打印一个值，但是没有迭代，没有动态循环，也没有动态数组。这个过程比较漫长，因为我改了好几种写法，逐一发现了以上特性是不支持的。

算法完成之后发现了 float 失精的问题：千万级别的数只剩下整数位是准确的，小数部分已经没有了；更小级别的数大约支持到小数点后3~5位。

在字体的渲染方面，试了一下数字打印的最小规格是 5*3 的点阵，基本上是活字印刷；

另：这里使用了正负形减少了绘制的判断次数，思路来源于：https://www.cnblogs.com/freeblues/p/5724833.html。

然后想尝试这个logger在通用场景中的使用方式，所以继续做了第五章的颜色与纹理的内容。

第一次按照示例代码尝试，我的贴图黑屏了：
在这里插入图片描述
打印发现texture2D读进来的 rgb 通道都是0，只有 a 通道默认是1.

一下午又一上午过去了，么得进展。

最后查资料发现 需要指定纹理坐标在ST方向的填充方法：

gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D,

Webgl 练习记录 log 贴图 滤镜