27. Medusa

The tentacles are created following a perlin noise function. The points created with this function are used with a TubeGeometry to create a tentacle. This version uses a modified three.js version to add a radius function, so it can be tapered.

The cap is done with a Lathe geometry, and the shape is created with a THREE.ConstantSpline.

All geometries are merged into one.

The shading is made in different parts. There's one pass that exports diffuse color in the red channel, eye-space depth in the green channel and rim lighting in the blue channel; all that goes to the base fbo. With a MeshStandardMaterial, the same scene is rendered with shadows to a shadow buffer. Both textures are then combined in a shader to create a blue-tinted image with different properties.

The same buffer is downscaled and processed with a poisson-disc-based blur, and another shader takes the combined and the blurred fbos, and blends them according to the pixels distance from the camera. It finally also adds some vignette. There's no need for FXAA in this one.

There's a discarded shader that took the diffuse map and blurred it into a diagonal effect to simulate dark underwater shadows, but it didn't look quite right.

Credits

Inspired by this image.

Coded using WebGL with three.js, THREE.ConstantSpline and Maf.js