# Fractals/shadertoy

Shadertoy

## GLSL ES

The parts of GLSL ES that are relevant for Shadertoy :

### Types

There are four main types:
* float
* int
* bool
* sampler

### Conversions

Converting Shadertoy shaders to :
* GLSL Sandbox code

# Shader description

"Shaders are programs that are executed in the GPU. A shader actually consists of two programs: the vertex shader and the fragment (or pixel) shader."
Shader is a " one program, to act on a single pixel, but then Shadertoy and WebGL run it (simultaneously) on every single pixel in the viewport ... thanks to the awesomeness of GPU acceleration"
types of Shadertoy shaders :
* Image shaders
* sound shaders
* VR shaders

## mainImage function

Image shaders implement the mainImage function in order to generate the procedural images by computing a color for each pixel.
This function is expected to be called once per pixel, and it is responsibility of the host application to provide the right inputs to it and get the output color from it and assign it to the screen pixel.
The prototype is:

## inputs
### uniforms

"Uniforms are for getting values from outside of the shader, into the shader.... Uniforms can be vectors, floats, float arrays, integers and integer arrays."
Shader can be feed with different types of per-frame static information by using the following uniform variables ( shadertoy specific inputs ) :
| type | name | description |
| uniform vec3 | iResolution | The viewport resolution. iResolution has width/height set as x and y respectively. z is pixel aspect ratio, usually 1.0 |
| uniform float | iGlobalTime | Current time in seconds |
| uniform float | iChannelTime[4] | Time for channel (if video or sound), in seconds |
| uniform vec3 | iChannelResolution0..3 | Input texture resolution for each channel |
| uniform vec4 | iMouse | xy = current pixel coords (if LMB is down). zw = click pixel |
| uniform sampler2D | iChannel{i} | Sampler for input textures i |
| uniform vec4 | iDate | Year, month, day, time in seconds in .xyzw |
| uniform float | iSampleRate | The sound sample rate (typically 44100) |

### Coordinate

Types :
* pixel
** x is from 0 to width
** y is from 0 to height
* normalized : from 0.0 to 1.0
* world : arbitrary ranges
Input variable of mainImage function is fragCoord ( = gl_FragCoord in GLSL )
It contains the current pixel position (coordinates) in pixels for which the shader needs to compute a color. We can access x and y values of it
The coordinates are in pixel units
The resolution is passed to the shader through the iResolution uniform (see above table).
To normalize the coordinate ( normalized device coordinates = NDC) do :
"Now our x and y is in range 0..1 and we don’t care anymore about (screen) resolution, width or length."
Aspect ratio

## outputs
### Color

"For image shaders, the regular gl_FragColor is used as output channel. It is not for now mandatory but recommended to leave the alpha channel to 1.0;"

# Examples
## color
### Solid
### Gradient

horizontal red gradient
vertical green gradient

## Circle

Circle using pixel coordinate :
Circle using world coordinate and center/radius plane description:

## Julia set
### LSM

Julia set :
* integer escape time and Level set Method for exterior
* solid color for interior ( red)

### orbit trap

Orbit trap , parabolic checkerboard

### dynamics

Dynamics for quadratic 1D polynomials fc(z)=z²+c

## Mandelbrot set
### Boolean escape time

Mandelbrot set set :
* boolean escape time method
** solid color for exterior background_color = vec3(1.0, 0.0, 035);
* solid color for interior mandel_color = vec3(0.0, 0.0, 0.0);
Plane description using :
* center/radius
* world coordinate

#### long version
### LSM

Mandelbrot set set :
* integer escape time method = level set method
** gradient for exterior
* solid color for interior vec3(0.0, 0.0, 0.0);
Plane description using :
* center/radius
* world coordinate
Result is here

### DEM

* https://www.shadertoy.com/view/MttXz8

### bof61

* Filled Mandelbrot created by Kramin in 2015-Dec-1

# References

* ↑ Shardertoy
* ↑ A Beginner's Guide to Coding Graphics Shaders by Omar Shehata15 Apr 2015
* ↑ NeHe : GLSL: An Introduction
* ↑ converting ShaderToy shaders
* ↑ Shader basic by Xor
* ↑ Shadertoy Primer for Non-Graphics Programmers by Michael Mara
* ↑ BLUR SHADERS #5 PART 2 by Xor
* ↑ Glsl Basics by Lukas Pukenis
* ↑ Shader Lesson by Matt DesLauriers edited this page on 12 Jul 2014