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);

去練習