To first learn the Three.js API and shader code,
we adapted the Blinn-Phong shader from project 4 in WebGL. Since we are using the
work of Luft and Deussen
as our base for writing a watercolor shader, we need to apply effects
like edge darkening and gaussian blur to several flat intensity images defining the edges of our models
based on the wet-on-wet or wet-on-dry painting technique.
The shader must also have some transparency via the alpha channel, as most watercolor pigments are transparent.
We implemented a basic blur by applying a Gaussian filter kernel to the base image. The Gaussian filter kernel is a
2D convolution kernel. However, since the 2D Gaussian is separable into it's x and y components, we optimize this step by
applying a 1D Gaussian convolution in each direction using shaders. This blur pass is used to remove details in the image.
After this blur pass, we applied a step function to extract a hard-edged shape from the blurred images. We will later reapply
this Gaussian filter to cause a smooth transition from the borders to the center of the rendered image to create an "edge
darkening" effect.
The watercolor effect defined by Luft and Deussen uses a paper texture to emulate the effects of "pigment granulation,"
the property of how pigments settle on paper because of its uneven texture. They define this as a function of the alpha channel,
where the alpha at (u, v) is dependent upon the texture map at (u, v).
To implement this, in the fragment shader we sampled from a paper texture to get its RGB value for a certain fragment
and then multiplied it with the color of the model. This gives us the effect of a solid wash of watercolor on paper. To get the
modulated alpha values, we scaled the paper texture's RGB values to form a greyscale float value. To account for the fact
that in reality, a dark region in the paper should result in more collected pigment and therefore
a higher alpha value (when normally a dark region maps to a lower alpha value), we inverted the calculated alpha
value before inputting it into the output RGBA value.
Preliminary Results
Shown below are outputs of our WebGL canvases, showing a basic Blinn-Phong shader, a toon shader, a transparent paper texture shader,
and gaussian blur.
Overall, we would say our progess is mostly on-track along our original schedule, but now we have a more direct idea of where
to explore next to complete our implementation of a watercolor shader.
4/28 - 5/2
Implement segmentation to create intensity images to handle multiple models in a scene
Add in edge darkening, apply the blur render pass on top with smaller alpha
Layer base color and shadow colors
Look for more complex models to apply the shader to
