string

string
posts - 27, comments - 177, trackbacks - 0, articles - 0
  C++博客 :: 首页 :: 新随笔 :: 联系 :: 聚合  :: 管理

GPGPU编程快速入门

Posted on 2020-09-15 00:31 djx_zh 阅读(10035) 评论(0)  编辑 收藏 引用

GPGPU编程快速入门

以将图像反色处理为例。

确保chrome 支持WebGL2.0 Compute

在chrome地址栏输入 chrome://flags/#enable-webgl2-compute-context 点击"Enabled", 按提示重启chrome。

编写kernel

// 0. 函数名glsl_invert, 
//    src 为输入图像(HTMLCanvasElement 或 HTMLImageElement),
//    dst 为输出图像
function glsl_invert(src, dst){
    return `
        // 1. 取得 threadid 
        ivec2 pos = ivec2(thread.xy);
        // 2. 根据 threadid 从输入图像读入像素
       vec4 pixel = src[pos.y][pos.x]; 
       // 3. 将像素反色
       vec4 invert = vec4(1.0 - pixel.x, 1.0 - pixel.y, 1.0 - pixel.z, 1.0);
       // 4. 将反色像素存入dst
       dst[pos.y][pos.x] = invert;     
    `;
}

然后在javascript中执行kernel

//1. 生成一个WebCS实例, canvas将用于显示图像 
let webCS = new WebCS({canvas:$("#canvas2GPU")[0]}); 

//2. 从glsl_invert函数生成shader实例cs_texture2
let cs_texture2 = webCS.createShader(glsl_invert, { local_size:[8, 8, 1], params:{src:'texture', 'dst':'texture'}});

//3. 在GPU上执行cs_texture2
let texSrc = $('#image000')[0];
cs_texture2.setGroups(512/8, 512/8, 1).run(texSrc, null);

//4. 获得dst指向的texture对象 
let tex = cs_texture2.getTexture('dst');

//5. 将tex渲染到默认canvas
webCS.present(tex);

//6. 显示 canvas
$("#display1")[0].appendChild(webCS.canvas);


练习


只有注册用户登录后才能发表评论。
网站导航: 博客园   IT新闻   BlogJava   知识库   博问   管理