Fractals/shadertoy

Shadertoy

GLSL ES
The parts of GLSL ES that are relevant for Shadertoy : Preprocessor: # #define #undef #if #ifdef #ifndef #else #elif #endif #error #pragma #extension #version #line Operators: + - ! * / % << >> < > <= >= == != && || Comments: // /* */ Types: void bool int float vec2 vec3 vec4 bvec2 bvec3 bvec4 ivec2 ivec3 ivec4 mat2 mat3 mat4 sampler2D Function Parameter Qualifiers: [none], in, out, inout Global Variable Qualifiers: const Vector Components: .xyzw .rgba .stpq Flow Control: if else for return break continue Output: vec4 gl_FragColor Input: vec4 gl_FragCoord

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

vec2, vec3, vec4			2D, 3D and 4D floating point vector ivec2, ivec3, ivec4			2D, 3D and 4D integer vector bvec2, bvec3, bvec4			2D, 3D and 4D boolean vectors \\ matrix types: mat2, mat3, mat4			2x2, 3x3, 4x4 floating point matrix \\ sampler1D, sampler2D, sampler3D		1D, 2D and 3D texture samplerCube				Cube Map texture sampler1Dshadow, sampler2Dshadow	1D and 2D depth-component texture

Built-in Functions
type radians (type degrees) type degrees (type radians) type sin (type angle) type cos (type angle) type tan (type angle) type asin (type x) type acos (type x) type atan (type y, type x) type atan (type y_over_x) type pow (type x, type y) type exp (type x) type log (type x) type exp2 (type x) type log2 (type x) type sqrt (type x) type inversesqrt (type x) type abs (type x) type sign (type x) type floor (type x) type ceil (type x) type fract (type x) type mod (type x, float y) type mod (type x, type y) type min (type x, type y) type min (type x, float y) type max (type x, type y) type max (type x, float y) type clamp (type x, type minV, type maxV) type clamp (type x, float minV, float maxV) type mix (type x, type y, type a) type mix (type x, type y, float a) type step (type edge, type x) type step (float edge, type x) type smoothstep (type a, type b, type x) type smoothstep (float a, float b, type x) mat matrixCompMult (mat x, mat y) float length (type x) float distance (type p0, type p1) float dot (type x, type y) vec3 cross (vec3 x, vec3 y) type normalize (type x) type faceforward (type N, type I, type Nref) type reflect (type I, type N) type refract (type I, type N,float eta) bvec lessThan(vec x, vec y) bvec lessThan(ivec x, ivec y) bvec lessThanEqual(vec x, vec y) bvec lessThanEqual(ivec x, ivec y) bvec greaterThan(vec x, vec y) bvec greaterThan(ivec x, ivec y) bvec greaterThanEqual(vec x, vec y) bvec greaterThanEqual(ivec x, ivec y) bvec equal(vec x, vec y) bvec equal(ivec x, ivec y) bvec equal(bvec x, bvec y) bvec notEqual(vec x, vec y) bvec notEqual(ivec x, ivec y) bvec notEqual(bvec x, bvec y) bool any(bvec x) bool all(bvec x) bvec not(bvec x) vec4 texture2D(sampler2D sampler, vec2 coord ) vec4 texture2D(sampler2D sampler, vec2 coord, float bias) vec4 textureCube(samplerCube sampler, vec3 coord) vec4 texture2DProj(sampler2D sampler, vec3 coord ) vec4 texture2DProj(sampler2D sampler, vec3 coord, float bias) vec4 texture2DProj(sampler2D sampler, vec4 coord) vec4 texture2DProj(sampler2D sampler, vec4 coord, float bias) type dFdx( type x ), dFdy( type x ) type fwidth( type p )

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:

void mainImage( out vec4 fragColor, in vec2 fragCoord );

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 ) :

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 :

// Converting (x,y) to range [0,1] float x = gl_FragCoord.x / iResolution.x; // float y = gl_FragCoord.y / iResolution.y;

"Now our x and y is in range 0..1 and we don’t care anymore about (screen) resolution, width or length."

Aspect ratio

x *= iResolution.x / iResolution.y;

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=

Gradient
horizontal red gradient

vertical green gradient

Circle
Circle using pixel coordinate :

Circle using world coordinate and center/radius plane description:

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

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

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=

|