{"id":50,"date":"2016-08-14T05:49:33","date_gmt":"2016-08-14T05:49:33","guid":{"rendered":"http:\/\/betelge.wordpress.com\/?p=50"},"modified":"2016-08-14T05:49:33","modified_gmt":"2016-08-14T05:49:33","slug":"high-precision-floats-in-opengl-es-shaders","status":"publish","type":"post","link":"https:\/\/www.betelge.com\/blog\/2016\/08\/14\/high-precision-floats-in-opengl-es-shaders\/","title":{"rendered":"High precision floats in OpenGL ES shaders"},"content":{"rendered":"

In the previous post<\/a>\u00a0I tried emulating higher precision by using two\u00a010-bit precision floats, but couldn’t get it working.<\/p>\n

\"2014-9-5_mandelbrot3\"<\/a> \"2014-9-5_mandelbrot4\"<\/a><\/p>\n

As you can see in the lower part of the screenshots,\u00a0the precision\u00a0did increase but not by much. The upper part of the image remains blocky since the shader runs out of memory on my device and only updates part of the image. That’s because I revved up the number of iterations to 1024, but the final app should have that ability so this is another problem that needs to be solved. I also changed the color of the generated image to make the difference more apparent.<\/p>\n

Generating a geometry that has one vertex per pixel<\/h2>\n

Let’s do the calculations in the vertex shader instead of the fragment shader. OpenGL ES guarantees high precision floats in vertex shaders but not in fragment shaders, so generating the fractal there should greatly increase the resolution. Vertex shaders are executed once per\u00a0polygon vertex and not per screen pixel, so we need to create a geometry that contains exactly one vertex per pixel of the screen and fill the screen with it.<\/p>\n

public class Geometry {\n    private ShortBuffer indices;\n    private FloatBuffer buffer;\n    ...\n}\n\nprivate Geometry generatePixelGeometry(int w, int h) {\n    ShortBuffer indices = ShortBuffer.allocate(w*h);\n    FloatBuffer buffer = FloatBuffer.allocate(3*w*h);\n\n    for(int i = 0; i < h; i++) {\n        for(int j = 0; j < w; j++) {\n            buffer.put(-1 + (2*j + 1)\/(float)w);\n            buffer.put(-1 + (2*i + 1)\/(float)h);\n            buffer.put(0);\n\n            indices.put((short)(i*w+j));\n        }\n    }\n    buffer.flip();\n    indices.flip();\n\n    return new Geometry(indices, buffer);\n}<\/pre>\n
This will generate a geometry that contains one vertex in the middle of every pixel on a\u00a0screen of resolution w<\/code> x h<\/code>.\u00a0OpenGL ES 2 uses short<\/code> indexing and\u00a0doesn’t support int<\/code> indexing for vertices. That’s why we use a ShortBuffer for the indices buffer. This also means that we have to split up our Geometry into smaller pieces. The max value for a short<\/code> is\u00a032767.\u00a0The best option is to generate one single geometry that\u00a0has fewer vertices than that and\u00a0reuse it several times across the screen using multiple draw calls. Either way we have to make sure that the final scene has one vertex in every pixel of the screen.<\/p>\n
The vertex shader<\/h2>\n
attribute vec3 position;\n\nuniform mat4 modelViewMatrix;\nuniform float MAX_ITER;\nuniform vec2 scale;\nuniform vec2 offset;\n\nvarying vec4 rgba;\n\nvec4 color(float value, float radius, float max);\n\nvec2 iter(vec2 z, vec2 c)\n{\n        \/\/ Complex number equivalent of z*z + c\n\treturn vec2(z.x*z.x - z.y*z.y, 2.0*z.x*z.y) + c;\n}\n\nvoid main(void)\n{\n\tvec4 posit = modelViewMatrix * vec4(position, 1.);\n\t\n\tvec2 c = 2.*(scale*posit.xy + offset);\n\t\n\tvec2 z = vec2(0.);\n\t\t\n\tint i;\n\tint max = int(MAX_ITER);\n\tfloat radius = 0.;\n\tfor( i=0; i<max; i++ ) { \tradius = z.x*z.x + z.y*z.y; \t\tif( radius > 16.) break;\n\t\tz = iter(z,c);\n\t}\n\t\n\tfloat value = (i == max ? 0.0 : float(i));\n\t\n\trgba = color(value, radius, MAX_ITER);\n\t\n\tgl_Position = posit;\n}<\/pre>\n
The vertex shader has to take the modelViewMatrix<\/code> into account since we are splitting the geometry into multiple pieces and placing it at different positions in a scene. This had to be done because a single big geometry would be too big for short<\/code>.<\/p>\n
The fragment shader<\/h2>\n
precision mediump float;\n\nvarying vec4 rgba;\n\nvoid main()\n{\n\tgl_FragColor = rgba;\n}<\/pre>\n
The fragment shader is as simple as it can be. It just receives the rgba<\/code> vector from the vertex shader and draws it to the frame buffer.<\/p>\n
Results<\/h2>\n
\"2014-9-5_mandelbrot3\"<\/a>\"2014-9-5_mandelbrot5\"<\/a><\/p>\n
That’s much better!<\/p>\n
The\u00a0fractal\u00a0renders slightly slower than with the lower precision shader but still really quickly and does 1024 iterations without\u00a0running out of memory . Let’s see how much we can zoom in now.<\/p>\n
\"2014-9-5_mandelbrot6\"<\/a> \"2014-9-5_mandelbrot7\"<\/a><\/p>\n
The pixels start filling out the screen at a scale of 0.0002, a zoom level of 5000x. Switching to the vertex mode instead shows an amazing difference. On my device highp floats in the vertex shader are normal 32-bit floats and have a precision of 23 bits, while the mediump 16-bit floats in the fragment shader only have a 10-bit precision. That means that the precision is more then doubled. Every pixel in fragment mode becomes in vertex mode bigger than the entire shader was in fragment mode. In fact pixels became apparent first on a scale of 2*10^(-6). See the results for your self in the google play: GPU Mandelbrot<\/a>.<\/p>\n
In the next post I’ll give double emulation one more try.<\/p>\n","protected":false},"excerpt":{"rendered":"
In the previous post\u00a0I tried emulating higher precision by using two\u00a010-bit precision floats, but couldn’t get it working. As you can see in the lower part of the screenshots,\u00a0the precision\u00a0did increase but not by much. The upper part of the … 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-50","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/www.betelge.com\/blog\/wp-json\/wp\/v2\/posts\/50","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=50"}],"version-history":[{"count":0,"href":"https:\/\/www.betelge.com\/blog\/wp-json\/wp\/v2\/posts\/50\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.betelge.com\/blog\/wp-json\/wp\/v2\/media?parent=50"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.betelge.com\/blog\/wp-json\/wp\/v2\/categories?post=50"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.betelge.com\/blog\/wp-json\/wp\/v2\/tags?post=50"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}