{"id":116,"date":"2014-11-26T09:04:44","date_gmt":"2014-11-26T14:04:44","guid":{"rendered":"https:\/\/blogs.mathworks.com\/graphics\/?p=116"},"modified":"2017-09-03T17:45:45","modified_gmt":"2017-09-03T21:45:45","slug":"pretriangulation","status":"publish","type":"post","link":"https:\/\/blogs.mathworks.com\/graphics\/2014\/11\/26\/pretriangulation\/","title":{"rendered":"Pretriangulation"},"content":{"rendered":"

Pretriangulation<\/h3>

An interesting question went by on MATLAB Answers the other day<\/a>. I've simplified it a bit here, but it looked something like this:<\/p>

rng(0)\r\ncla\r\nnfaces = 5000;\r\nnsides = 6;\r\nnframes = 35;\r\n\r\nang = 0:(nsides-1) * pi * 2 \/ nsides;\r\nx = repmat(cos(ang)',[1 nfaces]);\r\ny = repmat(sin(ang)',[1 nfaces]);\r\nz = repmat([1:nfaces],[nsides 1]);\r\nc = rand(1,nfaces);\r\nxoff = repmat(randn(1,nfaces),[nsides, 1]);\r\nyoff = repmat(randn(1,nfaces),[nsides, 1]);\r\nh = patch(x+xoff,y+yoff,z,c);\r\nh.FaceColor = 'flat'<\/span>;\r\nh.EdgeColor = 'none'<\/span>;\r\naxis equal<\/span>\r\nxlim manual<\/span>\r\nylim manual<\/span>\r\n<\/pre>\"\" 
That creates a patch object which draws a bunch of filled hexagons. Now we want to move them around. I'm going to use these random rotation angles to spin them around the origin at various speeds.<\/p>
angstep = rand(1,nfaces);\r\nca = cos(angstep);\r\nsa = sin(angstep);\r\nca = repmat(ca,[nsides 1]);\r\nsa = repmat(sa,[nsides 1]);\r\nca = ca(:);\r\nsa = sa(:);\r\n<\/pre>
We can do that by modifying the Vertices property.<\/p>
tic\r\nfor<\/span> i=1:nframes\r\n    x = h.Vertices(:,1);\r\n    y = h.Vertices(:,2);\r\n    h.Vertices(:,1) =  ca.*x + sa.*y;\r\n    h.Vertices(:,2) = -sa.*x + ca.*y;\r\n    drawnow;\r\nend<\/span>\r\ndisp([num2str(nframes\/toc) ' frames per second'<\/span>])\r\n<\/pre>
3.3139 frames per second\r\n<\/pre>\"\" 
That's really slow, isn't it? What can we do to improve this?<\/p>
There are a number of approaches we could take to speed this up. One which comes to mind is to use hgtransform like we did a couple of weeks ago<\/a>. We could try that, but it actually might not be as useful here because each of those hexagons is so much simpler than the blobs we were drawing in that example. Sending the graphics card a 4x4 transform matrix instead of one of those blobs was a big win, but sending a 4x4 instead of a little hexagon wouldn't be as big a win.<\/p>
So lets look at a different technique. This technique is one we call \"pretriangulation\". The basic idea here is that a big part of the problem is that the patch object has hexagons, but the graphics card only knows how to draw triangles. Every time we change the Vertices, the patch object is converting the hexagons into triangles. This step is known as polygon triangulation. Good name, huh? Triangulation is actually one of the most interesting corners of computer graphics and compuational geometry<\/a>. We'll be visiting it many times in future blog posts.<\/p>
First we need to get an idea about how hard triangulation is. It doesn't seem like splitting a hexagon into triangles is a hard problem.<\/p>
fig2 = figure;\r\nang = (0:5) * pi * 2 \/ 6;\r\nx = cos(ang');\r\ny = sin(ang');\r\np = patch('Vertices'<\/span>,[x, y, zeros(size(ang'))],'Faces'<\/span>,[1:6]);\r\np.FaceColor = 'yellow'<\/span>;\r\naxis equal<\/span>\r\n\r\nr = 7\/8;\r\nfor<\/span> i=1:6\r\n    text(r*cos(ang(i)),r*sin(ang(i)),['Pt_'<\/span> num2str(i)],'HorizontalAlignment'<\/span>,'center'<\/span>);\r\nend<\/span>\r\n<\/pre>\"\" 
We can just slice it like so:<\/p>
line(x([1 3 5 1]),y([1 3 5 1]),'Color'<\/span>,'black'<\/span>);\r\n<\/pre>\"\" 
But patch needs to worry about lots of different types of polygons. It can tell that we're dealing with hexagons because of the size of the Faces property, but hexagons come in a lot of different shapes. Let's take a quick look at some.<\/p>
cla\r\nfor<\/span> r=1:3\r\n    for<\/span> c=1:5\r\n        p = patch('Vertices'<\/span>,[3*c+randn(6,1),3*r+randn(6,1),zeros(6,1)],'Faces'<\/span>,1:6);\r\n        p.FaceColor = rand(1,3);\r\n    end<\/span>\r\nend<\/span>\r\naxis tight<\/span>\r\n<\/pre>\"\" 
Hmm, maybe it's not as simple as it seems. It turns out that writing a really robust triangulator is pretty challenging, and it's very hard to write a robust one which is also very fast. This means that if we care about performance, we probably want to avoid triangulation whenever we can.<\/p>
It turns out that in our example above we actually only need to triangulate once. That's because because that rotation we're doing is what's called an affine transformation<\/a>. That means that the shape of the objects being transformed doesn't change. And that means that the triangulation can be reused.<\/p>
The problem is that the patch object can't really figure that out. It just knows that the Vertices property has changed. Figuring out whether the old triangulation would still work turns out to be almost as expensive as just redoing the triangulation.<\/p>
But in this case the triangulation is actually simple enough that we can do it ourselves. We can just follow the diagram above to turn each hexagon into four triangles. That will conver the 5,000 by 6 Faces array which represents 5,000 hexagons  into a 20,000 by 3 array which represents 20,000 triangles. When we give patch a Faces array with 3 columns, it will know that it can send them straight over to the graphics card without doing any triangulation.<\/p>
close(fig2);\r\n\r\nf = h.Faces;\r\nf2 = zeros(4*nfaces,3);\r\n\r\n% First the big triangle in the center<\/span>\r\nf2(1:4:end,1:3) = f(:,[1,3,5]);\r\n\r\n% Then the three little triangles around the perimeter<\/span>\r\nf2(2:4:end,1:3) = f(:,[1,2,3]);\r\nf2(3:4:end,1:3) = f(:,[3,4,5]);\r\nf2(4:4:end,1:3) = f(:,[5,6,1]);\r\n\r\nh.Faces = f2;\r\n\r\n% Expand the colors by 4 too<\/span>\r\nc = h.FaceVertexCData;\r\nc2 = repmat(c',[4 1]);\r\nc2 = c2(:);\r\nh.FaceVertexCData = c2;\r\n<\/pre>\"\" 
So let's try moving these pretriangulated hexagons around the same way we did before.<\/p>
tic\r\nfor<\/span> i=1:nframes\r\n    x = h.Vertices(:,1);\r\n    y = h.Vertices(:,2);\r\n    h.Vertices(:,1) =  ca.*x + sa.*y;\r\n    h.Vertices(:,2) = -sa.*x + ca.*y;\r\n    drawnow;\r\nend<\/span>\r\ndisp([num2str(nframes\/toc) ' frames per second'<\/span>])\r\n<\/pre>
34.1455 frames per second\r\n<\/pre>\"\" 
That's about 10 times as fast, which is pretty good. And it gets us over that 24 frames per second barrier that we want to cross for smooth animations.<\/p>
But this approach does have some limitations. If we had been doing something to the hexagons which changed their shapes, then we couldn't reuse the original triangulation. And we were lucky that the triangulation was so simple in this case. For more complex polygons it can get pretty tricky. We can use the triangulator which patch uses, but it's kind of tricky to use. It'd be really neat if we could just ask patch to do the pretriangulation for us, wouldn't it? Also, if we hadn't turned the edges off then we would be seeing the interior edges between the triangles.<\/p>
But even with those limitations, you may find cases where this is a useful technique to have in your MATLAB graphics bag of tricks.<\/p>