Lesson 6 — Image filter

An image is just arrays of numbers: one value per pixel per colour channel. A filter is a kernel that reads those channels and writes new ones — one thread per pixel. Here you will write a grayscale filter: collapse the red, green and blue channels into a single brightness value using the standard luminance weights 0.299·R + 0.587·G + 0.114·B.

Your task

The kernel reads buffers r, g, b (each one value per pixel, in 0..1) and writes the brightness into gray. Replace the (* TODO *) with the weighted sum, then click Run on my GPU. The original and the filtered image appear side by side.

Kernel source fun (r : float32 vector) (g : float32 vector) (b : float32 vector) (gray : float32 vector) -> let i = global_thread_id in gray.(i) <- (* TODO *)

Fill in the TODO and click "Run on my GPU".

Hint

(0.299 *. r.(i)) +. (0.587 *. g.(i)) +. (0.114 *. b.(i)). Once it works, try other filters: invert is 1.0 -. r.(i) (per channel), or boost a channel by multiplying it.

A small 200×200 image keeps this instant. Your uploaded photo is resized to 200×200 and processed entirely in your browser on your GPU — nothing is uploaded anywhere. Larger images cost proportionally more.