file
Open
Close
view
full size
640x480
512x512
example
load practice
Add On
Practise
0
ms
<script src='http://zhenghuadai.github.io/js/webcs.js'></script>
WGSL:
Spec
function wgsl_invert(src, dst){ return ` var pos:vec2<u32> = vec2<u32>(thread.xy); // vec4 pixel = imageLoad(src, pos); or vec4 pixel = src[pos] var pixel:vec4<f32> = src[pos.y][pos.x]; var invert:vec4<f32> = vec4<f32>(1.0 - pixel.x, 1.0 - pixel.y, 1.0 - pixel.z, 1.0); // imageStore(dst, pos, invert); or dst[pos] = invert; dst[pos.y][pos.x] = invert; `; }
JavaScript:
async function mypractice(message){ //1. Create instance of WebCS from canvas let webCS = await WebCS.create({canvas:$("#canvas2GPU")[0]});//let webCS = await WebCS.create({width:512, height:512}); //2. Create shader object let cs_texture2 = webCS.createShader(wgsl_invert, { local_size:[8, 8, 1], params:{src:'texture', 'dst':'texture'}}); //3. dispatch the shader let texSrc = $('#image000')[0]; await (cs_texture2.setGroups(512/8, 512/8, 1)).run(texSrc, null); //4. get the texture of dst let tex = cs_texture2.getTexture('dst'); //5. draw the dst image to webCS.canvas webCS.present(tex); //6. show the canvas $("#display1")[0].appendChild(webCS.canvas); $(webCS.canvas).show(); }
Execute
