⏱️Overview

Short introduction to real-time computer graphics (in demos, visualizations, etc) with shaders.
Mainly gathering topics and lots of links to more informational websites and example shaders.
Ending with big section of my favourites (mainly on shadertoy).

🌎Websites

Where you can browse and edit shaders in web browser.

shadertoy my favourite, with tags, comments and lots of shaders and great looking demos
smoothstep also for building animations
glslsandbox somewhat lower quality, also need to switch to 1x every time, and seems to have spam and worse browsing

📚Tutorials

The main difference to rasterisation (covered here), is that there are no 3D models with vertices, own textures etc. These demo are done with pixel (called fragment in GL) shader for fullscreen rectangle. And anything that appears is computed by it. This means also all geometry has to be somehow described by equations and functions.

📖Tutorial websites

shadertoy tag tutorial and how to, e.g. keyboard movement
short post how-does-a-shadertoy-work
smoothstep tutorial

Shadertoy tutorial – 16 parts – very good, 2D and 3D, basics, camera, light, buffers etc
Long videos, tutorials playlist starts with basics and 2D, later e.g. ray marching

Shader Tutorials by Ronja – good, many topics

iquilezles – many tutorials and more – all articles

thebookofshaders book, not full
realtimerendering tutorial and lots of books

Ray Tracing (slower, higher quality) short tutorial, all tags

Ray Marching

How to Make 3D Fractals probably best video tutorial for raymarching and its effects

Ray Marching, and making 3D Worlds video with Math other good video with code and combining
ray marching signed distance functions, with light
raymarching from scratch part 1
raymarching from scratch part 2
Introduction to Raymarching

The Distance Estimator Compendium (DEC) many SDF functions for primitives and 3D fractals with screens

hg_sdf glsl library for building signed distance functions, with primitives and combining operations

3D primitives / shapes – SDF functions
2D SDF shape functions

🪄Tutorial shaders

🌊Fluid simulation

webgl-fluid-simulation with theory and equations

29a.ch 2012 webgl-fluid-simulation with web demo and computations flow

🔮Fractals

Fractal on wikipedia.

2D

Basic

Sierpiński triangle or gasket, basic fractal
Apollonian basic circle, (or sphere in 3D) recursive packing

Mandelbrot

The Mandelbrot Set Explained – long very good video, going from 1D to 2D (complex), and Mandelbrot to Julia connection
maths.town website with Mandelbrot explained

Very long zooming videos of Manderbrot (ultra deep) and other similar.
e.g. Density 2h zoom, Inifnite 2h zoom, Deepish 3h zoom, Edge of Infinity 2,5h
Mandelbrot set with blended gradients

3D

kleinian high quality, similar to apollonian
kaliset lines
more in favorites below ..

⛓️Other demo sites and programs

pouet huge, old webiste with various demos
mercury a demogroup
Syntopia – Generative Art, 3D Fractals, Creative Computing – blog with many posts, some math etc

Kalles Fraktaler 2+ – program for zooming in 2D fractals
Mandelbulber – 3D fractal program, has examples with screnshots
FragM application for exploring pixel based graphics on the GPU, derived from Fragmentarium. Videos from it.

Marble Marcher CE ball game on fractals

fractalforums

Shadertoy-renderer for making videos of shaders
twigl