1
-
2
1
Anti-grain geometry
3
2
===============================================================================
4
3
@@ -8,7 +7,7 @@ Anti-grain geometry
8
7
:class: toc chapter-06
9
8
10
9
11
- .. image :: data /mcseem.jpg
10
+ .. image :: images/chapter-06 /mcseem.jpg
12
11
:class: right
13
12
:width: 20%
14
13
@@ -29,7 +28,7 @@ do the job and we'll need to take care of pretty much everything.
29
28
Antialiasing
30
29
-------------------------------------------------------------------------------
31
30
32
- .. figure :: data /circle-aa-none.png
31
+ .. figure :: images/chapter-06 /circle-aa-none.png
33
32
:figwidth: 50%
34
33
:figclass: right
35
34
@@ -68,7 +67,7 @@ approximate shape for small sizes as well.
68
67
Sample based methods
69
68
++++++++++++++++++++
70
69
71
- .. figure :: data /circle-aa-multisample.png
70
+ .. figure :: images/chapter-06 /circle-aa-multisample.png
72
71
:figwidth: 45%
73
72
:figclass: right
74
73
@@ -111,7 +110,7 @@ methods. If they are great for real-time rendering such as video games (and
111
110
some of them are really good), they are hardly sufficient for any scientific
112
111
visualization as illustrated on the figure below.
113
112
114
- .. figure :: data /ssaa-sdf.png
113
+ .. figure :: images/chapter-06 /ssaa-sdf.png
115
114
:figwidth: 100%
116
115
117
116
Figure
@@ -120,10 +119,10 @@ visualization as illustrated on the figure below.
120
119
patterns. The more samples , the better the output but even using 64
121
120
samples, the rendering quality does not match the SDF rendering, especially
122
121
if you consider triangle sharp vertices. Supersampled triangles have been
123
- rendered using a dedicated shader (see `<code/triangle-ssaa.py >`_) and the
122
+ rendered using a dedicated shader (see `<code/chapter-06/ triangle-ssaa.py >`_) and the
124
123
SDF triangle has been rendered using a fake signed-distance triangle
125
124
function (see below) and a stroke anti-alias function (see
126
- `<code/triangle-sdf.py >`_)
125
+ `<code/chapter-06/ triangle-sdf.py >`_)
127
126
128
127
129
128
.. _CSAA : http://www.anandtech.com/show/2116/9
@@ -152,7 +151,7 @@ explaining `antialiasing modes`_ or this nice `overview of MSAA`_
152
151
Coverage methods
153
152
++++++++++++++++
154
153
155
- .. figure :: data /circle-aa-exact.png
154
+ .. figure :: images/chapter-06 /circle-aa-exact.png
156
155
:figwidth: 50%
157
156
:figclass: right
158
157
@@ -175,7 +174,7 @@ the `Anti-grain geometry
175
174
<http://www.antigrain.com/doc/introduction/introduction.agdoc.html> `_ library
176
175
that constitutes the quality standard we aim at.
177
176
178
- .. figure :: data /coverage.png
177
+ .. figure :: images/chapter-06 /coverage.png
179
178
:figwidth: 40%
180
179
:figclass: right
181
180
@@ -246,15 +245,15 @@ origin is given by:
246
245
d(x,y) = sqrt(x*x+y*y) - r
247
246
248
247
249
- .. figure :: data /circle-sdf-distances.png
248
+ .. figure :: images/chapter-06 /circle-sdf-distances.png
250
249
:figwidth: 30%
251
250
:figclass: right
252
251
253
252
Figure
254
253
255
254
Signed distance to a circle. Inside is red, outside is blue, border is white.
256
255
257
- See `<code/circle-sdf-distances.py >`_
256
+ See `<code/chapter-06/ circle-sdf-distances.py >`_
258
257
259
258
260
259
As an exercise, you can check that `d(x,y) ` is null if `(x,y) ` is on the
@@ -317,8 +316,8 @@ of my knowledge):
317
316
available from within glumpy.
318
317
319
318
However, we don't want to copy this code in all the example. We can instead
320
- write a `palette.glsl <code/palette.glsl >`_ shader and include it in each of
321
- the example.
319
+ write a `palette.glsl <code/chapter-06/ palette.glsl >`_ shader and include it in
320
+ each of the example.
322
321
323
322
324
323
@@ -329,7 +328,7 @@ Circle
329
328
330
329
Distance to a circle is the easiest to compute.
331
330
332
- .. figure :: data /SDF-circle.mp4
331
+ .. figure :: movies/chapter-06 /SDF-circle.mp4
333
332
:loop:
334
333
:autoplay:
335
334
:controls:
@@ -338,7 +337,7 @@ Distance to a circle is the easiest to compute.
338
337
339
338
Figure
340
339
341
- `SDF-circle.py <code/SDF-circle.py >`_
340
+ `SDF-circle.py <code/chapter-06/ SDF-circle.py >`_
342
341
343
342
344
343
.. code :: glsl
@@ -357,7 +356,7 @@ The distance from a point P to a plane (line in 2d) is the distance from P to
357
356
the projection of P onto the place.
358
357
359
358
360
- .. figure :: data /SDF-plane.mp4
359
+ .. figure :: movies/chapter-06 /SDF-plane.mp4
361
360
:loop:
362
361
:autoplay:
363
362
:controls:
@@ -366,7 +365,7 @@ the projection of P onto the place.
366
365
367
366
Figure
368
367
369
- `SDF-plane.py <code/SDF-plane.py >`_
368
+ `SDF-plane.py <code/chapter-06/ SDF-plane.py >`_
370
369
371
370
372
371
.. code :: glsl
@@ -386,7 +385,7 @@ True Box
386
385
When computing distance to a box, one has to take care of the distance to the
387
386
vertices defining the box.
388
387
389
- .. figure :: data /SDF-box.mp4
388
+ .. figure :: movies/chapter-06 /SDF-box.mp4
390
389
:loop:
391
390
:autoplay:
392
391
:controls:
@@ -395,7 +394,7 @@ vertices defining the box.
395
394
396
395
Figure
397
396
398
- `SDF-box.py <code/SDF-box.py >`_
397
+ `SDF-box.py <code/chapter-06/ SDF-box.py >`_
399
398
400
399
401
400
@@ -422,7 +421,7 @@ Rounded Box
422
421
423
422
Figure
424
423
425
- `SDF-round-box.py <code/SDF-round-box.py >`_
424
+ `SDF-round-box.py <code/chapter-06/ SDF-round-box.py >`_
426
425
427
426
428
427
Distance to a round can be immediately derived from the distance to a box by
@@ -441,7 +440,7 @@ subtracting the corner radius.
441
440
Fake Box
442
441
~~~~~~~~
443
442
444
- .. figure :: data /SDF-fake-box.mp4
443
+ .. figure :: movies/chapter-06 /SDF-fake-box.mp4
445
444
:loop:
446
445
:autoplay:
447
446
:controls:
@@ -450,7 +449,7 @@ Fake Box
450
449
451
450
Figure
452
451
453
- `SDF-fake-box.py <code/SDF-fake-box.py >`_
452
+ `SDF-fake-box.py <code/chapter-06/ SDF-fake-box.py >`_
454
453
455
454
456
455
A faster way to compute a SDF box is to consider it to be delimited by lines
@@ -468,7 +467,7 @@ box vertices.
468
467
True triangle
469
468
~~~~~~~~~~~~~
470
469
471
- .. figure :: data /SDF-triangle.mp4
470
+ .. figure :: movies/chapter-06 /SDF-triangle.mp4
472
471
:loop:
473
472
:autoplay:
474
473
:controls:
@@ -477,7 +476,7 @@ True triangle
477
476
478
477
Figure
479
478
480
- `SDF-triangle.py <code/SDF-triangle.py >`_
479
+ `SDF-triangle.py <code/chapter-06/ SDF-triangle.py >`_
481
480
482
481
Computing the distance to a triangle is not totally straightfoward because a
483
482
triangle is made of three line segments, meaning we have to take into account
@@ -514,7 +513,7 @@ vertices.
514
513
Round triangle
515
514
~~~~~~~~~~~~~~
516
515
517
- .. figure :: data /SDF-round-triangle.mp4
516
+ .. figure :: movies/chapter-06 /SDF-round-triangle.mp4
518
517
:loop:
519
518
:autoplay:
520
519
:controls:
@@ -523,7 +522,7 @@ Round triangle
523
522
524
523
Figure
525
524
526
- `SDF-round-triangle.py <code/SDF-round-triangle.py >`_
525
+ `SDF-round-triangle.py <code/chapter-06/ SDF-round-triangle.py >`_
527
526
528
527
Round triangle is very easy to obtain from the triangle above. We just
529
528
substract the radius of the corner such that the border of the triangle is on
@@ -542,7 +541,7 @@ the oustide part of the SDF triangle.
542
541
Fake triangle
543
542
~~~~~~~~~~~~~
544
543
545
- .. figure :: data /SDF-fake-triangle.mp4
544
+ .. figure :: movies/chapter-06 /SDF-fake-triangle.mp4
546
545
:loop:
547
546
:autoplay:
548
547
:controls:
@@ -551,7 +550,7 @@ Fake triangle
551
550
552
551
Figure
553
552
554
- `SDF-fake-triangle.py <code/SDF-fake-triangle.py >`_
553
+ `SDF-fake-triangle.py <code/chapter-06/ SDF-fake-triangle.py >`_
555
554
556
555
What I call a fake SDF triangle is a triangle made of lines instead of line
557
556
segments. If you look at the corner (outside part), you will notice the
@@ -582,7 +581,7 @@ markers because it is faster to compute than the regular SDF triangle.
582
581
True ellipse
583
582
~~~~~~~~~~~~
584
583
585
- .. figure :: data /SDF-ellipse.mp4
584
+ .. figure :: movies/chapter-06 /SDF-ellipse.mp4
586
585
:loop:
587
586
:autoplay:
588
587
:controls:
@@ -591,7 +590,7 @@ True ellipse
591
590
592
591
Figure
593
592
594
- `SDF-ellipse.py <code/SDF-ellipse.py >`_
593
+ `SDF-ellipse.py <code/chapter-06/ SDF-ellipse.py >`_
595
594
596
595
Computing the distance from an arbitrary point to an ellipse is surprinsingly
597
596
difficult if you compare it to the distance to a circle. If you want to read
@@ -649,7 +648,7 @@ problem for us. We will re-use his formula.
649
648
Fake (but fast) ellipse
650
649
~~~~~~~~~~~~~~~~~~~~~~~
651
650
652
- .. figure :: data /SDF-fake-ellipse.mp4
651
+ .. figure :: movies/chapter-06 /SDF-fake-ellipse.mp4
653
652
:loop:
654
653
:autoplay:
655
654
:controls:
@@ -658,7 +657,7 @@ Fake (but fast) ellipse
658
657
659
658
Figure
660
659
661
- `SDF-fake-ellipse.py <code/SDF-fake-ellipse.py >`_
660
+ `SDF-fake-ellipse.py <code/chapter-06/ SDF-fake-ellipse.py >`_
662
661
663
662
Íñigo Quílez also provided a very fast apprximation of the ellipse
664
663
distance. Some artifacts can be clearly seen but we'll see later that if our ellipse is not too thick, this approximation will do the job.
@@ -692,7 +691,7 @@ grey you might ask? Well, it is directly correlated with the distance to the
692
691
border. But first, let's have a look at the figure below that show the
693
692
different situations:
694
693
695
- .. figure :: data /circle-aa.png
694
+ .. figure :: images/chapter-06 /circle-aa.png
696
695
697
696
Figure
698
697
@@ -709,7 +708,7 @@ If it is larger, the shape will appear blurry, and it it is too narrow, the
709
708
shape will have hard egdes. The degenerated case being a null area that results
710
709
in no antialias at all.
711
710
712
- .. figure :: data /antialias-function.png
711
+ .. figure :: images/chapter-06 /antialias-function.png
713
712
714
713
Figure
715
714
0 commit comments