MATERIAL ENVIRONMENT MODEL PROJECTION NAVIGATION STORAGE

Lighting

Diffuse Color

Ambient Color Intensity

Specular Color

Specular Exponent

Specular Mix

The surface normal is calculated by sampling the distance to the surface from nearby positions. Where the normal delta is the distance to these nearby positions. For smooth, round surfaces use a large value. For sharp edges a small value.

Surface Normal Delta

Shadow

For every pixel on screen, an additional ray is traced to the light source. If the light source is obscured, this means this pixel is in the shadow.

Shadow Ray Steps

Shadow Minimum Distance Multiplier

Reflections

A reflection is a ray that bounces off the surface and continues being traced. The angle of reflection requires a surface normal.

Reflections

The intensity is a % of the reflective property of the material. 0% would be a mat surface without reflection. 100% Would be a perfect mirror.

Intensity

Ambient Occlusion

Ambient occlusion is a soft of shadow maybe best explained by this picture. Note the corners receive less light compared to objects in the open.
This kind of shadowing used to be extremely slow and were baked into the textures. In the raytracing world ambient occlusion is very cheap when using Distance Estimation. Based on the surface normal, 4 samples are taken, each further from the surface.

Ambient Occlusion Distance

Ambient Occlusion Mix

Fog

Distance fog is a color that is blended in depending on the Z depth of the found object under that pixel. Two configurable fog colors are used to make it more interesting based on the absolute ray direction in the world.

Fog Color Top

Fog Color Bottom

Fog Distance

Glow

Glow is optionalal and depicts the amount of steps taken to reach a surface in the end. For rays passing near a surface this glow will be stronger. The adjustable glow color is blended in with the result color.

Glow Color

Glow Percentage

Ground

An infinite ground plance can be added. It may need some tweaking, but can look good with correctly positioned camera and shadows.

Ground

Ground Level

Parameters

The website of iquilezles gave a lot of insight into distance estimation functions.

Model

A nice website from 2008 The Mystery of the REAL, 3D Mandelbrot Fractal.

Fractal Depth

Fractal Tetrafolded Offset

Fractal Bailout

Fractal Power

Sphere Smaller

Circle

Volume

Distance Estimation Function

Tiling

Tiling is done with a modulo in the tracing function. This infinitely repeats the mathematical description of the model.

Tiling

Spacing

Sphere Tracing

The basic idea explained by Syntopia.

Ray Steps

Minimum Distance

Projection

View

Projection Method

Screen Width

Screen Height

Effects

Pixelate

Clip Offset

Move Forward

Turn

Pitch

Roll

Rotation Animation

Clipboard

The current configuration (material, envrioment, ...etc) can be copied to the clipboard. This is a piece of text that you can email or store as a text file, whichever you prefer. If you copy that text, it can be used to reloaded your configuration. Even on another machine.
Store whole configuration to clipboard:
Reload new configuration from clipboard:
Reset the current configuration: (you will loose all changes, but it will save you if you messed up)

Tec used

>

Browser

It looks like WebGL is just as fast/good as OpenGL, but I had to use Javascript instead of C++. Very helpful for me was the OpenGL cheat sheet. I loaded the shaders source files using JS into WebGL.

Engine

The shaders are re-compiled when settings are changed, because these variables are compiled into the shaders. This helped performance a lot.

Normals

A surface normal is a unit-vector that represents the surface direction at that location. Every point on the screen has a surface normal, unless no surface was found. This normal is needed for lighting, reflection and determining the ambient occlusion. The XYZ values are rendered as RGB values.

Spline Animation

CSS today is not suited for animating my custom variables, so a simple JS spline was added to make smooth transitions between values.

Refresh Rate

Using the JS call window.requestAnimationFrame() it was possible to make maximum use of the GPU time for smooth animation. On 4K TVs and slower processors the refresh rate below 30 FPS was shocking. By prioritizing a smooth refresh rate of 30 FPS minimum, the buffer was downsized using the pixelation option. A smart algo calculated the optimal refresh rate and adjusts the pixelation on the go.

3D model

- File format export data: - PNG (8K) - Triangles (maybe with indices) * Maybe reformat before publishing. All vertices to uncompressed binary file - Rendering - vertex buffer from uncompressed binary file - texture UV - normals?