{"id":7,"date":"2014-10-04T09:31:21","date_gmt":"2014-10-04T09:31:21","guid":{"rendered":"http:\/\/betelge.wordpress.com\/?p=4"},"modified":"2014-10-04T09:31:21","modified_gmt":"2014-10-04T09:31:21","slug":"generating-the-mandelbrot-set-in-an-opengl-es-shader","status":"publish","type":"post","link":"https:\/\/www.betelge.com\/blog\/2014\/10\/04\/generating-the-mandelbrot-set-in-an-opengl-es-shader\/","title":{"rendered":"Generating the Mandelbrot set in an OpenGL ES shader"},"content":{"rendered":"

\"2014-9-4_mandelbrot2\"<\/a><\/p>\n

Fractals are easy to parallelize and GPUs are\u00a0insanely fast at parallell tasks. Mobile devices are\u00a0not intended to be used this way so we can forget about OpenCL and other GPGPU techniques and we can expect to find\u00a0obscure vendor specific limitations and bugs. The final app can be found in Google Play, GPU Mandelbrot<\/a>.<\/p>\n

My long term goal is to generate entire interactive worlds on the GPU, but we have\u00a0to start with something simpler. The\u00a0Mandelbrot set is defined to be the set of complex numbers c<\/code>, for which the formula z = z^2 + c<\/code> will go towards zero when run over and over again.<\/p>\n

All the work here will be done by the fragment shader. The rest of the app will be as simple as possible. We draw a screen filling quad and color it with our shader. How to set this up in a minimal way will be covered in a future post.
\n<\/a>
\n<\/a><\/p>\n

The Vertex Shader<\/h2>\n
uniform vec2 offset;\nuniform vec2 scale;\nattribute vec3 position;\nvarying vec2 c;\n\nvoid main() {\n    c = scale*position.xy + offset;\n    gl_Position = vec4(position, 1.);\n}<\/pre>\n
Very simple. The fractal coordinates are passed on to the fragment shader as the variable c<\/code> and the vertex position is just converted to the 4-component representation that OpenGL requiers. No need for any matrices or other transforms. The offset and scale uniforms will allow us to pan and zoom the fractal. That’s all for the vertex shader.<\/p>\n
The Fragment Shader<\/h2>\n
Here\u00a0we immediately get reminded that we’re coding for a mobile device and not a desktop with a full fledged discreet GPU. The shader won’t compile unless it starts with the following line:<\/p>\n
precision mediump float;<\/pre>\n
That is a precision qualifier. OpenGL ES 2 doesn’t guarantee support for full single float precision in fragment shaders. No big deal. We set the precision of floats to mediump and forget about it. On most devices mediump means 16-bit. One of those bits is used for the sign and another 5 for the exponent, which leaves 10 bits of precision for the mentissa, the actual decimals of the float. A float usually has the form (-1)^sign*1.mentissa*2^exponent<\/code>.
\nQuerying OpenGL with the following code<\/p>\n
int range[2], precision;\nGLES20.glGetShaderPrecisionFormat(GL_FRAGMENT_SHADER, GL_MEDIUM_FLOAT, range, &precision);<\/pre>\n
tells me that my device has a mediump float precision of 10.
\nThe full fragment shader:<\/p>\n
precision mediump float;\n\n\/\/ The fractal coordinate in the complex plane\n\/\/ Passed down from the vertex shader\nvarying vec2 c;\n\n\/\/ The function that defines the Mandelbrot set\nfloat iteration(float z) {\n    return z*z + c;\n}\n\nvoid main() {\n    float z = 0.; \/\/ The decimal point makes the zero a float\n    int i;\n    int MAX_ITER = 40; \/\/ How many iterations to do\n    float ESCAPE_RADIUS = 16;\n    for(i = 0; i < MAX_ITER; i++) {\n        \/\/ If z gets outside of the escape radius\n        \/\/ we know it's not part of the set\n        if(z > ESCAPE_RADIUS) break;\n\n        \/\/ Do the math\n        z = iteration(z);\n    }\n\n    \/\/ If we do all the iterations and still remain inside\n    \/\/ the escape radius, we say that the point belongs\n    \/\/ to the set and color it 0.\n    \/\/\n    \/\/ If the point escapes we color it with a gradient\n    \/\/ depending on how many iterations it took it to\n    \/\/ escape.\n    float speed;\n    if(i == MAX_ITER)\n        speed = 0.;\n    else\n        speed = float(i)\/float(MAX_ITER);\n\n    \/\/ speed 0 -> blue\n    \/\/ slower speed -> more yellow\n    gl_FragColor = vec4(speed, speed, 0.5, 1.);\n}<\/pre>\n
That’s all we need in the shader for a zoomable fractal viewer.<\/p>\n
Some devices might fail to compile this fragment shader because of the dynamic for loop in it. They need to be able to unwrap loops and we have to use constants for the start and end points of the loop. How to get around this is left for a future post, but for now a workaround is to write the for loop like this:<\/p>\n
int i;\nfloat ESCAPE_RADIUS = 16;\nfor(int j = 0; j < 40; j++) {\n    if(z > ESCAPE_RADIUS) break;\n    z = iteration(z);\n    i++;\n}<\/pre>\n
It doesn’t look\u00a0like a big difference but it will be as the shader gets more complicated in future posts.<\/p>\n
Precision<\/h2>\n
Let’s see how far we can zoom!
\n\"2014-9-4_mandelbrot3\"<\/a><\/p>\n
That’s at 100x zoom level, a scale of just 0.01. Not even remotely\u00a0as good as I had hoped! The floats in our fragment shader just don’t have enough precision. That mediump<\/code> at the start of the shader turns out to be a problem.<\/p>\n
The next post in the series will be about emulating double precision in OpenGL ES shaders.<\/p>\n","protected":false},"excerpt":{"rendered":"
Fractals are easy to parallelize and GPUs are\u00a0insanely fast at parallell tasks. Mobile devices are\u00a0not intended to be used this way so we can forget about OpenCL and other GPGPU techniques and we can expect to find\u00a0obscure vendor specific limitations … Continue reading →<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-7","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/www.betelge.com\/blog\/wp-json\/wp\/v2\/posts\/7","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.betelge.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.betelge.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.betelge.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.betelge.com\/blog\/wp-json\/wp\/v2\/comments?post=7"}],"version-history":[{"count":0,"href":"https:\/\/www.betelge.com\/blog\/wp-json\/wp\/v2\/posts\/7\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.betelge.com\/blog\/wp-json\/wp\/v2\/media?parent=7"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.betelge.com\/blog\/wp-json\/wp\/v2\/categories?post=7"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.betelge.com\/blog\/wp-json\/wp\/v2\/tags?post=7"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}