fractals

Mandelbulb fractal 3D in pure Javascript based on GPU.JS

Run Mandelbulb!

Calc Ray

Input parameters (left-handed coordinate system):

• - camera (eye) position at point
• - target point where camera looks
• - camera vertical normalized vector which idicates where is up and were is down (not shown on picture, usually equal [0,1,0]).
• - field of view (slacar value, for human eye )
• - number of pixels on screen width
• - number of pixels screen in height

IDEA: lets find position of center of each pixel which allows us to easily find ray which starts at and go thought that pixel. To do it we find first and find others by move on vievports plane.

ASSUMPTION: which simplify calculations but not change the result (because is normalized and viewport size is determined by and )

PRECALCULATIONS: First we calculate normalized vectors from picutre (which are parallel to viewport plane and give as direction for shifting)

notice: , then we calculate viewport size divided by 2 and including aspect ratio

and then we calculate shifting vectors on viewport direction and viewport left upper pixel

CALCULATIONS: notice that and ray so normalized ray is

Ray marching (calc ray color)

https://www.youtube.com/watch?v=Cp5WWtMoeKg