webgl 不仅仅可以用来进行图形可视化, 它还能进行图像处理
之前已经进行了点和 uv 数据的传输
webgl 进行图形处理的第二步: 传输图片到 GPU
下图为传输图片并进行相应渲染的结果
对图像进行模糊处理, 并转换为数组输出
加载图片
由于加载图片是异步方法, 因此很多内容都需要写在加载图片的回调函数内
在回调函数中进行传输图片操作
传输图片到 GPU
之前传输数据的步骤
创建缓存区
绑定缓冲区
向缓存区中写入内容
绑定 shader 中的变量
开始传输数据
现在传输图像的步骤, 类似
创建材质 Texture ( 对应前面第 1 步 )
y 轴反转, 这是由于浏览器 y 轴向下, 需要矫正
激活纹理单元 ( 简单理解为与纹理绑定的 内容, 一个纹理绑定一个纹理单元 )
绑定 texture ( 对应前面第 2 步)
配置图片信息, 两种, 一种是缩放相关参数, 用来将图片的宽高置为 2 的幂次方, 一种是图片内容 ( 对应前面第 3 步)
传输图片 ( 对应前面第 4,5 步)
查询当前像素的上下左右的颜色值并进行平均
当前节点的 uv 为 vUv, 是一个二维向量, 范围从 0-1
由于图片设置为 200 * 200, 因此可以将 vUv 转换为具体的像素点位置, floor(vUv * 200.0)/200.0
计算周边点的位置及像素值
例如该像素左边点位置为, floor(vUv * 200.0 + vec2(-1.0, 0.0)) / 200.0
像素值为, texture2D(u_Texture, floor(vUv * 200.0 + vec2(-1.0, 0.0)) / 200.0)
输出图像到数组中
最后去得到一个 arrayBuffer 数组
当前阶段对图片进行像素颗粒的控制, 利用这个思路能实现大部分对图片的操作
下个阶段是输入一个数组, 在 GPU 中对数组进行计算, 最后得到相应的数值, 加速计算, 充分利用 GPU 并行计算的能力
希望读者在看完后能提出意见, 点个赞, 鼓励一下, 我们一起进步. 加油 !!