1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
|
<html><head><title>Anti-Grain Geometry - Gamma Correction</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link rel="stylesheet" type="text/css"
href="gamma_correction_files/agg.css">
</head><body><a name="PAGE_GAMMA_CORRECTION"><b></b></a>
<table style="margin: 0px;" height="1px" width="640px" border="0"
cellpadding="0" cellspacing="0">
<tbody><tr>
<td bgcolor="#583927"></td>
</tr>
</tbody></table>
<table style="margin: 0px;" width="640px" border="0" cellpadding="0"
cellspacing="0">
<tbody><tr>
<td>
<table style="margin: 0px;" width="170px" border="0" cellpadding="0"
cellspacing="0">
<tbody><tr><td><a href="http://www.antigrain.com/index.html"
class="mpmenu">Home/</a></td></tr>
<tr><td><a href="http://www.antigrain.com/research/index.html"
class="mpmenu">Research/</a></td></tr>
<tr><td><a href="" class="mpmenu"></a></td></tr>
<tr><td><a href="" class="mpmenu"></a></td></tr>
<tr><td><a href="" class="mpmenu"></a></td></tr>
<tr><td><a href="" class="mpmenu"></a></td></tr>
</tbody></table>
</td>
<td width="1px" bgcolor="#583927"></td>
<td style="text-align: right;" valign="top" width="450px">
<table style="margin: 0px;" border="0" cellpadding="0" cellspacing="0">
<tbody><tr>
<td><img src="gamma_correction_files/agg_logo.gif" border="0"></td>
</tr>
<tr>
<td>
<table style="margin: 0px;" border="0" cellpadding="0" cellspacing="0">
<tbody><tr height="15px">
<td> <a class="topmenu"
href="http://www.antigrain.com/news/index.html">News</a> </td>
<td width="1px" bgcolor="#8e521d"></td>
<td> <a class="topmenu"
href="http://www.antigrain.com/doc/index.html">Docs</a> </td>
<td width="1px" bgcolor="#8e521d"></td>
<td> <a class="topmenu"
href="http://www.antigrain.com/download/index.html">Download</a> </td>
<td width="1px" bgcolor="#8e521d"></td>
<td> <a class="topmenu"
href="http://www.antigrain.com/maillist/index.html">Mailing List</a> </td>
<td width="1px" bgcolor="#8e521d"></td>
<td> <a class="topmenu"
href="http://www.antigrain.com/cvs/index.html">CVS</a> </td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
<table style="margin: 0px;" height="1px" width="640px" bgcolor="#583927"
border="0" cellpadding="0" cellspacing="0"><tbody><tr><td></td></tr></tbody></table>
<table width="640px"><tbody><tr><td style="text-align: justify;"><p>
</p></td></tr></tbody></table>
<table width="640px"><tbody><tr><td><h1>Gamma Correction<span
class="subtitle"><br>Using Gamma Correction in Anti-Aliasing</span></h1></td></tr></tbody></table>
<table width="640px"><tbody><tr><td style="text-align: justify;"><p><b><nobr>Anti-Aliasing</nobr></b>
technology is always difficult. The difficulty here
is not only in algorithms, but also because the visual quality of
the image depends on the displaying equipment. <b><nobr>Anti-Aliasing</nobr></b>
images look
differently on CRT monitors and on LCD ones. In general it's a
science (or maybe even art) called Color Management.
<b><nobr>Anti-Grain</nobr> Geometry</b> uses the approach of <b><nobr>Anti-Aliasing</nobr></b>
that potentially allows us to
obtain the best result. The rendering procedure calculates the
exact coverage values for every boundary pixel and as a result
one can have any number of <b><nobr>Anti-Aliasing</nobr></b> levels.
<b><nobr>Anti-Grain</nobr> Geometry</b> uses 256 levels which is quite
enough for any practical
purpose and much better than 5-level <b><nobr>Anti-Aliasing</nobr></b>
used in many applications,
for example, True-Type font renderers, almost all
<a href="http://www.adobe.com/"><img
src="gamma_correction_files/link.gif" border="0">Adobe</a> products and
so on.
I was absolutely sure that the rendering method I use gives
the best result. But when I tried to render the same image
with <b><nobr>Anti-Grain</nobr> Geometry</b> and <a
href="http://www.adobe.com/svg/"><img
src="gamma_correction_files/link.gif" border="0">Adobe SVG Viewer</a>
I found out that the Adobe SVG Viewer uses only 5 levels of <b><nobr>Anti-Aliasing</nobr></b>,
but the result sometimes looks better than in <b><nobr>Anti-Grain</nobr>
Geometry</b>.</p></td></tr></tbody></table>
<table width="640px"><tbody><tr><td style="text-align: justify;"><p><img
src="gamma_correction_files/gamma_lion1.jpg" title="" border="0"><!---->
<img src="gamma_correction_files/gamma_lion2.jpg"
title="" border="0"><!----></p></td></tr></tbody></table>
<table width="640px"><tbody><tr><td style="text-align: justify;"><p>The
left image is rendered with <b><nobr>Anti-Grain</nobr> Geometry</b>, the
right one with the
<a href="http://www.adobe.com/svg/"><img
src="gamma_correction_files/link.gif" border="0">Adobe SVG Viewer</a>.
</p></td></tr></tbody></table><table style="margin: 0px;" height="1px"
width="640px" bgcolor="#583927" border="0" cellpadding="0"
cellspacing="0"><tbody><tr><td></td></tr></tbody></table>
<table width="640px"><tbody><tr><td style="text-align: justify;"><p>The
lion's moustache look smoother when rendering with 5-level
Adobe SVG Viewer, al least on CRT monitors. But still, the enlarged
images show us the lack of the <b><nobr>Anti-Aliasing</nobr></b> levels
used in Adobe Viewer.</p></td></tr></tbody></table>
<table width="640px"><tbody><tr><td style="text-align: justify;"><p><img
src="gamma_correction_files/gamma_lion1e.jpg" title="" border="0"><!---->
<img src="gamma_correction_files/gamma_lion2e.jpg"
title="" border="0"><!----></p></td></tr></tbody></table>
<table style="margin: 0px;" height="1px" width="640px" bgcolor="#583927"
border="0" cellpadding="0" cellspacing="0"><tbody><tr><td></td></tr></tbody></table>
<table width="640px"><tbody><tr><td style="text-align: justify;"><p><img
src="gamma_correction_files/gamma.gif" title="" style="border-color:
rgb(255, 255, 255);" align="left" border="4"><!---->
Obviously, <b><nobr>Anti-Grain</nobr> Geometry</b> can render better,
but using a simple linear dependance
Pixel Coverage <span class="larger">→</span> Brightness is not the best
and should be corrected.
In color management it's called Gamma Correction. For gamma correction
I use a simple array of 256 values that give the desired value of
brightness
depending on the pixel coverage. If all the values in the array are
equal
to their index, i.e., 0,1,2,3,4,… it means that there's no gamma
correction.
The array can be calculated using any approach, but the simplest method
is to use a B-Spline curve with two reference points and four
coeffitiens
(kx1, ky1, kx2, ky2) that determine its shape. So, I created an
application
with a special gamma correction control that allows for calculation of
the
array of the gamma values.
It draws 6 very narrow ellipses, 6 circles and some other figures that
can be used as a visual test of the quality of <b><nobr>Anti-Aliasing</nobr></b>.
</p></td></tr></tbody></table><table style="margin: 0px;" height="1px"
width="640px" bgcolor="#583927" border="0" cellpadding="0"
cellspacing="0"><tbody><tr><td></td></tr></tbody></table>
<table width="640px"><tbody><tr><td><center><img
src="gamma_correction_files/gamma1.gif" title="Default Shape - No Gamma
Correction" border="0"><br><i>Default Shape - No Gamma Correction</i></center></td></tr></tbody></table>
<table style="margin: 0px;" height="1px" width="640px" bgcolor="#583927"
border="0" cellpadding="0" cellspacing="0"><tbody><tr><td></td></tr></tbody></table>
<table width="640px"><tbody><tr><td style="text-align: justify;"><p>The
control points can be moved inside their quadrants.
The following image looks much better at least on CRT monitors.</p></td></tr></tbody></table>
<table width="640px"><tbody><tr><td><center><img
src="gamma_correction_files/gamma2.gif" title="Gamma Correction for CRT
Monitors" border="0"><br><i>Gamma Correction for CRT Monitors</i></center></td></tr></tbody></table>
<table style="margin: 0px;" height="1px" width="640px" bgcolor="#583927"
border="0" cellpadding="0" cellspacing="0"><tbody><tr><td></td></tr></tbody></table>
<table width="640px"><tbody><tr><td style="text-align: justify;"><p>We
actually can obtain much better result of certain thickness and
brightness, but it cannot be used for general case. The shown above
example is a kind of an average case which is not the best for certain
parameters, but gives us rather a good average result on CRT monitors,
as well as on LCD ones. Below are the examples of other shapes of the
gamma curve.</p></td></tr></tbody></table>
<table width="640px"><tbody><tr><td><center><img
src="gamma_correction_files/gamma3.gif" title="Test Gamma 1" border="0"><br><i>Test
Gamma 1</i></center></td></tr></tbody></table>
<table width="640px"><tbody><tr><td><center><img
src="gamma_correction_files/gamma4.gif" title="Test Gamma 2" border="0"><br><i>Test
Gamma 2</i></center></td></tr></tbody></table>
<table width="640px"><tbody><tr><td><center><img
src="gamma_correction_files/gamma5.gif" title="Test Gamma 3" border="0"><br><i>Test
Gamma 3</i></center></td></tr></tbody></table>
<table style="margin: 0px;" height="1px" width="640px" bgcolor="#583927"
border="0" cellpadding="0" cellspacing="0"><tbody><tr><td></td></tr></tbody></table>
<table width="640px"><tbody><tr><td style="text-align: justify;"><p>Besides,
the gamma correction strongly depends on the content of the image.
The values that are good enough for rendering ellipses like shown above
may give a very bad result when rendering small text glyphs. The latest
require sharper forms, while large geometric figures look better with
very smooth edges.
</p></td></tr></tbody></table><table style="margin: 0px;" height="1px"
width="640px" bgcolor="#583927" border="0" cellpadding="0"
cellspacing="0"><tbody><tr><td></td></tr></tbody></table>
<table width="640px"><tbody><tr><td style="text-align: justify;"><p>Finally,
this is the result of rendering the same lion with gamma correction
for CRT monitors. Now it looks better than the one rendered with Adobe
SVG Viewer.</p></td></tr></tbody></table>
<table width="640px"><tbody><tr><td style="text-align: justify;"><p><img
src="gamma_correction_files/gamma_lion3.jpg" title="" border="0"><!---->
<img src="gamma_correction_files/gamma_lion3e.jpg"
title="" border="0"><!----></p></td></tr></tbody></table>
<table width="640px"><tbody><tr><td style="text-align: justify;"><p>You
can download the working application for Windows:
<a
href="http://www.antigrain.com/research/gamma_correction/gamma_ctrl.zip"><img
src="gamma_correction_files/download.gif" border="0">Gamma Control
(gamma_ctrl.zip)</a></p></td></tr></tbody></table>
<table width="640px"><tbody><tr><td style="text-align: justify;"><p>The
source code can be found in the <code>examples</code> directory of the
distribution package. Visit the <a
href="http://www.antigrain.com/download/index.html#PAGE_DOWNLOAD">Download</a>
page.</p></td></tr></tbody></table>
<table style="margin: 0px;" height="1px" width="640px" bgcolor="#583927"
border="0" cellpadding="0" cellspacing="0"><tbody><tr><td></td></tr></tbody></table>
<table width="640px" border="0" cellpadding="0" cellspacing="0">
<tbody><tr><td><center><span class="authors">
Copyright <span class="larger">©</span> 2002-2006
<a href="http://www.antigrain.com/mcseem/index.html"><b>Maxim Shemanarev</b></a>
</span></center></td></tr>
<tr><td><center><span class="authors">
Web Design and Programming
<a href="http://www.antigrain.com/mcseem/index.html"><b>Maxim Shemanarev</b></a>
</span></center></td></tr>
</tbody></table>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</body></html>
|
