Colourpicker – WebGL

admin/ October 20, 2015/ Javascript, WebGL, Work/ 0 comments

Colourpicker tool using WebGL

A colourpicker tool built with WebGL using custom Vertex and Fragment shaders to put the load on the GPU.

This experiment uses custom shader technology for colouring and protruding the vertices on the plane that matches(by colour tolerance) the colour picked from the canvas in the bottom left that displays the uploaded image or the default placeholder image.


Without picking a color, the uploaded image (or the default placeholder image) will display in a grayscale version inside the scene. Once you click anywhere on the uploaded image viewer (bottom left of the screen) the scene will update the plane geometry by protruding and colouring the plane geometry with the colour selected. The sensitivity of the colour matching can be set by sliding the tolerance scale up or down.

The amount of protrusion is calculated by adding the R+G+B values of the vertice at play. Thus, a white vertex will be the highest and a darker almost black vertex will almost not ptrotrude at all.


Leave a Comment

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>