webgl 图像处理 加速计算
2021-09-17 23:17
676 查看
webgl 图像处理
webgl 不仅仅可以用来进行图形可视化, 它还能进行图像处理
图像处理1---数据传输
webgl 进行图形处理的第一步: 传输数据到 GPU
下图为传输点数据到 GPU 并进行相应渲染的结果
数据传输过程
- 创建 canvas 元素, 用来承接 GPU 生成的数据
- 获取 context, program 用于操作数据和使用相应 API
- 初始化着色器, 将写的着色器编译进 program 总
- 发送数据, 将顶点数据, uv 数据, 等等数据, 均可以通过 sendData 方法将数据传输到 glsl 中的变量上 创建缓冲区
- 绑定缓冲区
- 向缓冲区中添加数据
- 将数据与 glsl 中的变量绑定
- 传输数据
- 所有传输数据的流程与此基本类似
下一阶段
当前阶段实现了将基本数据传输给 GPU
下一步是将 图像数据 传输到 GPU, GPU 接收到图像信息后获取每个像素点的颜色值, 通过卷积重置像素, 初步实现 webgl 的图形处理功能
代码实现
// 两种着色器 const VSHADER_SOURCE = ` attribute vec4 a_Position; attribute vec2 uv; varying vec2 vUv; void main(){ // 进行插值计算 vUv = uv; gl_Position = a_Position; } `; const FSHADER_SOURCE = ` // 片元着色器中一定要声明精度 precision mediump float; varying vec2 vUv; void main(){ gl_FragColor = vec4(vUv.x, vUv.y, 0.6, 1.0); } `; init(); function init() { const canvas = document.createElement("canvas"); canvas.width = 200; canvas.height = 200; document.body.appendChild(canvas); // 获取 gl 环境 const gl = canvas.getContext("webgl"); if (!gl) { console.log("Fail to init content"); return; } // webgl 程序 const programe = gl.createProgram(); // 初始化着色器 initShader(gl, VSHADER_SOURCE, FSHADER_SOURCE, programe); // 发送数据 sendData("a_Position", 2, [-1, 1, -1, -1, 1, -1, 1, 1], gl, programe); sendData("uv", 2, [0, 1, 0, 0, 1, 0, 1, 1], gl, programe); // 刷新颜色 gl.clearColor(0.0, 0.0, 0.0, 1.0); // 清除 gl.clear(gl.COLOR_BUFFER_BIT); // 画图形 gl.drawArrays(gl.TRIANGLE_FAN, 0, 4); } // 初始化着色器 function initShader(gl, VSHADER_SOURCE, FSHADER_SOURCE, programe) { // 创建 shader const vertexShader = gl.createShader(gl.VERTEX_SHADER); // 绑定资源 gl.shaderSource(vertexShader, VSHADER_SOURCE); // 编译着色器 gl.compileShader(vertexShader); const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER, FSHADER_SOURCE); gl.shaderSource(fragmentShader, FSHADER_SOURCE); gl.compileShader(fragmentShader); // 常规流程 gl.attachShader(programe, 56c vertexShader); gl.attachShader(programe, fragmentShader); gl.linkProgram(programe); gl.useProgram(programe); } // 发送数据到 GPU function sendData(name, size, arr, gl, programe) { // 获取地址空间 const variate = gl.getAttribLocation(programe, name); if (variate < 0) { console.log(`Failed to get the location of ${name}`); return; } const variates = new Float32Array(arr); // 1. 创建缓存区 const buffer = gl.createBuffer(); if (!buffer) { console.log("Failed to create buffer"); } // 2. 绑定缓存区 gl.bindBuffer(gl.ARRAY_BUFFER, buffer); // 3. 向缓冲区中添加数据 gl.bufferData(gl.ARRAY_BUFFER, variates, gl.STATIC_DRAW); // 4. 将缓冲区与 glsl 中变量绑定 gl.vertexAttribPointer(variate, size, gl.FLOAT, false, 0, 0); // 5. 开始传输 gl.enableVertexAttribArray(variate); }
相关文章推荐
- 图像处理加速程序小技巧
- 【图像处理】利用种子填充法对二值图像进行连通域标记-计算目标中心位置方法2
- 【图像处理】暴力计算二维DFT MATLAB
- 【图像处理】计算Haar特征个数
- GPU 加速下的图像处理
- javacpp-opencv图像处理3:使用opencv原生方法遍历摄像头设备及调用(增加实时帧率计算方法)
- Atitit 图像处理 深刻理解梯度原理计算.v1 qc8
- ZBar大图像处理加速
- 图像处理之计算二值连通区域的质心
- [占坑] 图像处理中计算积分图使用类似dp的方法而不用树状数组的原因
- NDK使用多线程技术加速图像处理
- 图像实时处理常用时间间隔计算方法(微秒级)
- 【图像处理】基于opencv3.0使用StereoBM计算视差
- 图像处理帧速计算
- 【图像处理】轮廓二阶矩计算目标中心-计算目标中心位置方法3
- 图像处理速度计算
- iOS Video Toolbox:GPGPU加速YUV图像处理
- 用最简单的方式在C#中使用多线程加速耗时的图像处理算法的执行(多核机器)。
- 图像处理学习笔记之直方图的计算与绘制
- Atitit 图像处理 深刻理解梯度原理计算.v1 qc8