webgl 图像处理 加速计算
2021/9/18 6:11:28
本文主要是介绍webgl 图像处理 加速计算,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
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, 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); }
这篇关于webgl 图像处理 加速计算的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-05-20测试人员都是画画大神,让我看看谁还不会用代码图?
- 2024-05-20年薪百万的程序员都在用的摸鱼方式……
- 2024-05-19永别了,微服务架构!
- 2024-05-15鸿蒙生态设备数量超8亿台
- 2024-05-13TiDB + ES:转转业财系统亿级数据存储优化实践
- 2024-05-09“2024鸿蒙零基础快速实战-仿抖音App开发(ArkTS版)”实战课程已上线
- 2024-05-09聊聊如何通过arthas-tunnel-server来远程管理所有需要arthas监控的应用
- 2024-05-09log4j2这么配就对了
- 2024-05-09nginx修改Content-Type
- 2024-05-09Redis多数据源,看这篇就够了