<?php
let div = document.createElement('div');
document.body.appendChild( div );
div.style['font-size'] = '20pt';
function log( s )
{
console.log( s );
let args = [...arguments].join(' ');
div.innerHTML += args + '<br><br>';
}
log('WebGPU Compute Example');
async function loadTexture(fileName = "https://webgpulab.xbdev.net/var/images/test512.png",
width=512, height=512) {
console.log('loading image:', fileName);
// Load image
const img = document.createElement("img");
img.src = fileName;
await img.decode();
const originalWidth = img.width;
const originalHeight = img.height;
const imageCanvas = document.createElement('canvas');
imageCanvas.width = width;
imageCanvas.height = height;
const imageCanvasContext = imageCanvas.getContext('2d');
// Draw the image onto the canvas, resizing it to the specified width and height
imageCanvasContext.drawImage(img, 0, 0, width, height);
const imageData = imageCanvasContext.getImageData(0, 0, width, height);
const textureData = imageData.data;
console.log('textureData.byteLength:', textureData.byteLength);
const basicTexture = device.createTexture({
size: [width, height, 1],
format: "rgba8unorm",
usage: GPUTextureUsage.COPY_DST | GPUTextureUsage.TEXTURE_BINDING
});
await device.queue.writeTexture(
{ texture: basicTexture },
textureData,
{ bytesPerRow: width * 4 },
[width, height, 1]
);
return { w: width, h: height, t: basicTexture };
}
if (!navigator.gpu) { log("WebGPU is not supported (or is it disabled? flags/settings)"); return; }
const adapter = await navigator.gpu.requestAdapter();
const device = await adapter.requestDevice();
const imgWidth = 512;
const imgHeight = imgWidth;
// ----------------------------------------------------------
const texture0 = await loadTexture( 'https://webgpulab.xbdev.net/var/images/test512.png', imgWidth );
//const texture1 = await loadTexture( 'https://webgpulab.xbdev.net/var/images/avatar.png', imgWidth);
// ----------------------------------------------------------
// Basic canvas which will be used to display the output from the compute shader
let canvasa = document.createElement('canvas');
document.body.appendChild( canvasa ); canvasa.height = canvasa.width = imgWidth;
const context = canvasa.getContext('webgpu');
const presentationFormat = navigator.gpu.getPreferredCanvasFormat();
console.log('presentationFormat:', presentationFormat );
context.configure({ device: device,
usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.COPY_SRC | GPUTextureUsage.COPY_DST,
format: "rgba8unorm" /*presentationFormat*/ });
let canvasTexture = context.getCurrentTexture();
// ----------------------------------------------------------
// Output texture - output from the compute shader written to this texture
// Copy this texutre to the 'canvas' - needs to be the same size as the output
// canvas size
const texture1 = device.createTexture({
size: [imgWidth, imgHeight, 1],
format: "rgba8unorm",
usage: GPUTextureUsage.COPY_DST | GPUTextureUsage.COPY_SRC | GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.STORAGE_BINDING
});
// ----------------------------------------------------------
const timerUniformBuffer = device.createBuffer({
size: 4,
usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST
});
const timestep = new Float32Array( [0.0] );
device.queue.writeBuffer(timerUniformBuffer, 0, timestep );
// ----------------------------------------------------------
const GCOMPUTE = GPUShaderStage.COMPUTE;
// Bind group layout and bind group
const bindGroupLayout = device.createBindGroupLayout({
entries: [ {binding: 0, visibility: GCOMPUTE, texture: { sampleType: "float" } },
{binding: 1, visibility: GCOMPUTE, buffer: { type: "uniform" } },
{binding: 2, visibility: GCOMPUTE, storageTexture: {format:"rgba8unorm", access:"write-only", viewDimension:"2d"} }
]
});
const bindGroup = device.createBindGroup({
layout: bindGroupLayout,
entries: [ { binding: 0, resource: texture0.t.createView() },
{ binding: 1, resource: { buffer: timerUniformBuffer } },
{ binding: 2, resource: texture1.createView() }
]
});
// Compute shader code
const computeShader = `
@group(0) @binding(0) var myTexture0: texture_2d<f32>; // input texture image
@group(0) @binding(1) var<uniform> mytimer : f32; // timer increments each frame
@group(0) @binding(2) var myTexture1: texture_storage_2d<rgba8unorm, write>; // output image
@compute @workgroup_size(8, 8)
fn main(@builtin(global_invocation_id) globalId : vec3<u32>,
@builtin(local_invocation_id) localId : vec3<u32>,
@builtin(workgroup_id) workgroupId : vec3<u32>,
@builtin(num_workgroups) workgroupSize : vec3<u32>
)
{
var imgWidth = f32( ${imgWidth} );
var imgHeight = f32( ${imgHeight} );
var coords = vec2<f32>(f32(globalId.x), f32(globalId.y));
var uv = coords / vec2<f32>(imgWidth, imgHeight); // normalize coordinates to 0.0 - 1.0 range
// Neighborhood size for oil painting effect
let radius: i32 = 4; // size of the neighborhood
let intensityLevels: i32 = 32; // number of intensity levels for quantization
var hist: array<vec4<f32>, 32> = array<vec4<f32>, 32>(
vec4<f32>(0.0), vec4<f32>(0.0), vec4<f32>(0.0), vec4<f32>(0.0),
vec4<f32>(0.0), vec4<f32>(0.0), vec4<f32>(0.0), vec4<f32>(0.0),
vec4<f32>(0.0), vec4<f32>(0.0), vec4<f32>(0.0), vec4<f32>(0.0),
vec4<f32>(0.0), vec4<f32>(0.0), vec4<f32>(0.0), vec4<f32>(0.0),
vec4<f32>(0.0), vec4<f32>(0.0), vec4<f32>(0.0), vec4<f32>(0.0),
vec4<f32>(0.0), vec4<f32>(0.0), vec4<f32>(0.0), vec4<f32>(0.0),
vec4<f32>(0.0), vec4<f32>(0.0), vec4<f32>(0.0), vec4<f32>(0.0),
vec4<f32>(0.0), vec4<f32>(0.0), vec4<f32>(0.0), vec4<f32>(0.0)
);
var intensityCount: array<u32, 32> = array<u32, 32>(0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0);
// Loop through the neighborhood
for (var i = -radius; i <= radius; i++) {
for (var j = -radius; j <= radius; j++) {
var sampleCoords = vec2<i32>(i32(globalId.x) + i, i32(globalId.y) + j);
if (sampleCoords.x >= 0 && sampleCoords.x < i32(imgWidth) && sampleCoords.y >= 0 && sampleCoords.y < i32(imgHeight) ) {
var sampleUv = vec2<f32>(f32(sampleCoords.x) / imgWidth, f32(sampleCoords.y) / imgHeight);
var sampleColor = textureLoad(myTexture0, sampleCoords, 0);
// Convert color to intensity
var intensity = dot(sampleColor.rgb, vec3<f32>(0.299, 0.587, 0.114));
var intensityIndex = i32(intensity * f32(intensityLevels - 1));
intensityIndex = clamp(intensityIndex, 0, intensityLevels - 1);
// Accumulate color in histogram
hist[intensityIndex] += sampleColor;
intensityCount[intensityIndex] += 1;
}
}
}
// Find the most frequent intensity
var maxIndex:u32 = 0;
var maxCount:u32 = 0;
for (var k = 0; k < intensityLevels; k++) {
if (intensityCount[k] > u32(maxCount) ) {
maxCount = intensityCount[k];
maxIndex = u32(k);
}
}
// Average the colors in the most frequent intensity
var finalColor = vec4<f32>(0.0);
if (maxCount > 0) {
finalColor = hist[maxIndex] / f32(maxCount);
}
// Store the result in the output texture
textureStore(myTexture1, vec2<i32>(globalId.xy), finalColor);
}
`;
// Pipeline setup
const computePipeline = device.createComputePipeline({
layout : device.createPipelineLayout({bindGroupLayouts: [bindGroupLayout]}),
compute: { module : device.createShaderModule({code:computeShader}),
entryPoint: "main" }
});
// Commands submission
const commandEncoder = device.createCommandEncoder();
const passEncoder = commandEncoder.beginComputePass();
passEncoder.setPipeline(computePipeline);
passEncoder.setBindGroup(0, bindGroup);
passEncoder.dispatchWorkgroups( imgWidth/8, imgWidth/8 );
await passEncoder.end();
canvasTexture = context.getCurrentTexture();
await
commandEncoder.copyTextureToTexture( { texture: texture1 },
{ texture: canvasTexture },
{ width:imgWidth, height:imgHeight, depthOrArrayLayers:1} );
// Submit GPU commands.
const gpuCommands = commandEncoder.finish();
await device.queue.submit([gpuCommands]);
timestep[0] = timestep[0] + 0.01;
device.queue.writeBuffer(timerUniformBuffer, 0, timestep );
frame();
Things to Try
• Try modifying the coefficients (modify the effect).
• Combine the oil effect with other image filtering techniques (sharpening/blurring/edge detection).
