This project began as a fun little investigation in implicit surfaces and signed distance functions, inspired by projects found on ShaderToy. It is implemented in WebGL and GLSL. The frog is constructed implicitly within the GLSL fragment shader by combining a variety of techniques, including signed distance primitives and metaballs. Signed distance functions for implicit geometry (spheres, rounded cubes, capsules) were taken from Inigo Quilez’s page on the subject.
A demo can be found here. Requires WebGL2 to work.
Rendering
The frog is rendered in real time by raytracing the implicit scene within the fragment shader and projecting it onto a screen size quad. For shadows, I relied on the penumbra method described by IQ. This method raymarches from intersections to light sources and determines the amount of occlusion based on whether the ray is interrupted by some other geometry in the scene. If some point on the ray is within a threshold of some geometry in the scene, we contribute a slight amount of penumbra based on that threshold. The shader also features subtle specular raytraced reflections.
Art Directable Features
The physical attributes (body size, head size, etc.) of the frog can be modified using various parameters. The frog’s textures are generated using 3D Perlin noise and are also parameterizable. With relatively few parameters we can achieve a whole variety of unique patterns for various species of frog:
White's Tree Frog
Amazon Milk Frog
Blue Poison Dart Frog
Tomato Frog
Red Eyed Tree Frog
Random Frog Generation
The tool also supports randomization. Below is a gallery of a few randomly generated frog species:
