These use raycasting to render fractals, with a camera which moves slowly through the scene. Using a very low number of raycasting steps yields some interesting effects. Using a moderate number of steps produces something that looks like blurry fog.
Colour Rendering 29 January 2014
Adding colour
A simple method of colouring the fractal is to use the surface normal to select a colour, with XYZ of the normal mapping onto RGB.
Source 2 files
- index.html HTML · 961 lines
- webgl_fragment_framework.js JavaScript · 344 lines
Outline Rendering 29 January 2014
Edge detection using the z-buffer
This shows the effect of edge detection by rendering the fractal completely in white.
Source 2 files
- index.html HTML · 828 lines
- webgl_fragment_framework.js JavaScript · 344 lines
Interesting Effect 1 29 January 2014
Created by using a small number of raycasting steps
Source 2 files
- index.html HTML · 974 lines
- webgl_fragment_framework.js JavaScript · 344 lines
Interesting Effect 2 29 January 2014
Created by using a very small number of raycasting steps
Source 2 files
- index.html HTML · 974 lines
- webgl_fragment_framework.js JavaScript · 344 lines
Interesting Effect 3 29 January 2014
Another variation on low raycasting steps
Source 2 files
- index.html HTML · 978 lines
- webgl_fragment_framework.js JavaScript · 344 lines
Outlines & Colours 29 January 2014
Full colour fractal with lighting and toon shading
This example uses screen-space lighting (based on z-buffer derivatives) and edge detection for a cartoon rendering effect.
Source 2 files
- index.html HTML · 961 lines
- webgl_fragment_framework.js JavaScript · 344 lines