Map a texture onto a hyperbolic triangle

Question

I want to map a texture in the form of a lower right euclidean triangle to a hyperbolic triangle on the Poincare Disk, which looks like this:

Here's the texture (the top left triangle of the texture is transparent and unused). You might recognise this as part of Escher's Circle Limit I:

And this is what my polygon looks like (it's centred at the origin, which means that two edges are straight lines, however in general all three edges will be curves as in the first picture):

The centre of the polygon is the incentre of the euclidean triangle formed by its vertices and I'm UV mapping the texture using it's incentre, dividing it into the same number of faces as the polygon has and mapping each face onto the corresponding polygon face. However the the result looks like this:

If anybody thinks this is solvable using UV mapping I'd be happy to provide some example code, however I'm beginning to think this might not be possible and I'll have to write my own shader functions.

I also asked this question over on computergraphics.stackexchange and received an answer there http://computergraphics.stackexchange.com/questions/2117/map-a-texture-onto-a-hyperbolic-triangle — Lewy Blue, Mar 04 '16 at 17:17
This is neat. Any chance you could provide a more detailed example of how you accomplished this? — WacławJasper, Mar 08 '16 at 03:16
You are welcome to look through the code here https://github.com/looeee/hyperbolic-tiling/tree/master/es2015. In terms of drawing the polygons, most code is in the elements.js Polygon class which passes a mesh to the polygon() method in threejs.js for drawing. I'm keeping a working snapshot live at eschersketch.com as well. — Lewy Blue, Mar 10 '16 at 11:00

score 0 · Answer 1 · answered Mar 02 '16 at 19:00

UV mapping is a method of mapping a texture onto an OpenGL polygon. The texture is always sampled in Euclidean space using xy coordinates in the range of (0, 1).

To overlay your texture onto a triangle on a Poincare disc, keep hold of the Euclidean coordiantes in your vertices, and use these to sample the texture.

The following code is valid for OpenGL 3.0 ES.

Vertex shader:

#version 300 es

//these should go from 0.0 to 1.0
in vec2 euclideanCoords;
in vec2 hyperbolicCoords;

out vec2 uv;

void main() {
   //set z = 0.0 and w = 1.0
   gl_Position = vec4(hyperbolicCoords, 0.0, 1.0);

   uv = euclideanCoords;
}

Fragment shader:

#version 300 es

uniform sampler2D escherImage;

in vec2 uv;
out vec4 colour;

void main() {
   colour = texture(escherImage, uv);
}

Map a texture onto a hyperbolic triangle

1 Answers1