-
Notifications
You must be signed in to change notification settings - Fork 2
/
anti-aliasing-in-games.html
321 lines (306 loc) · 17.9 KB
/
anti-aliasing-in-games.html
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
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="drpaneas" />
<meta name="copyright" content="drpaneas" />
<meta name="description" content="In this article we will discuss the anti-alising in games and some suggestions based on your monitors resolution
" />
<meta property="og:type" content="article" />
<meta name="twitter:card" content="summary">
<meta name="keywords" content="screen, graphics, antialising, Gaming, " />
<meta property="og:title" content="Anti-Aliasing in games "/>
<meta property="og:url" content="http://utappia.org/anti-aliasing-in-games.html" />
<meta property="og:description" content="In this article we will discuss the anti-alising in games and some suggestions based on your monitors resolution" />
<meta property="og:site_name" content="Utappia" />
<meta property="og:article:author" content="drpaneas" />
<meta property="og:article:published_time" content="2012-12-03T15:18:00+02:00" />
<meta name="twitter:title" content="Anti-Aliasing in games ">
<meta name="twitter:description" content="In this article we will discuss the anti-alising in games and some suggestions based on your monitors resolution">
<title>Anti-Aliasing in games · Utappia
</title>
<!-- <link rel="stylesheet" type="text/css" href="http://utappia.org/theme/css/bootstrap-combined.min.css" media="screen">-->
<!-- <link rel="stylesheet" type="text/css" href="http://utappia.org/theme/css/font-awesome.css" media="screen"> -->
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.1/css/font-awesome.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="http://utappia.org/theme/css/pygments.css" media="screen">
<link rel="stylesheet" type="text/css" href="http://utappia.org/theme/tipuesearch/tipuesearch.css" media="screen">
<link rel="stylesheet" type="text/css" href="http://utappia.org/theme/css/elegant.css" media="screen">
<link rel="stylesheet" type="text/css" href="http://utappia.org/theme/css/custom.css" media="screen">
<link href="http://utappia.org/feeds/all.rss.xml" type="application/atom+xml" rel="alternate" title="Utappia - Full Atom Feed" />
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-62475496-1', 'auto');
ga('send', 'pageview');
</script>
</head>
<body>
<div id="content-sans-footer">
<div class="navbar navbar-static-top">
<div class="navbar-inner">
<div class="container-fluid">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="http://utappia.org/"><span class=site-name>Utappia</span></a>
<div class="nav-collapse collapse">
<ul class="nav pull-right top-menu">
<li ><a href="http://utappia.org">Home</a></li>
<li ><a href="http://utappia.org/pages/downloads.html">Downloads</a></li>
<li ><a href="http://utappia.org/pages/feedback.html">Feedback</a></li>
<li ><a href="http://utappia.org/categories.html">Categories</a></li>
<li ><a href="http://utappia.org/tags.html">Tags</a></li>
<li ><a href="http://utappia.org/archives.html">Archives</a></li>
<li><form class="navbar-search" action="http://utappia.org/search.html" onsubmit="return validateForm(this.elements['q'].value);"> <input type="text" class="search-query" placeholder="Search" name="q" id="tipue_search_input"></form></li>
</ul>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row-fluid">
<div class="span1"></div>
<div class="span10">
<article>
<div class="row-fluid">
<header class="page-header span10 offset2">
<h1><a href="http://utappia.org/anti-aliasing-in-games.html"> Anti-Aliasing in games </a></h1>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- Front page -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-1644909386979397"
data-ad-slot="1718239665"
data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</header>
</div>
<div class="row-fluid">
<div class="span2 table-of-content">
<nav>
<h4>Contents</h4>
<div class="toc">
<ul>
<li><a href="#abstract">Abstract</a></li>
<li><a href="#introduction">Introduction</a></li>
<li><a href="#materials-and-methods">Materials and Methods</a><ul>
<li><a href="#lower-than-22-inches-monitors">lower than 22" inches monitors</a></li>
<li><a href="#24-or-26-inches-monitors">24" or 26" inches monitors</a></li>
<li><a href="#impact-in-game-performance">Impact in game performance</a></li>
<li><a href="#aliasing-vs-anti-aliasing">Aliasing vs Anti-Aliasing</a></li>
</ul>
</li>
<li><a href="#results-and-discussion">Results and Discussion</a></li>
</ul>
</div>
</nav>
</div>
<div class="span8 article-content">
<p><img alt="Anti-Aliasing in games" src="/images/aliased-vs-antialiased.gif" style="width: 500px; height: auto;" title="Anti-Aliasing in games"/></p>
<h1 id="abstract">Abstract</h1>
<p>First of all, Anti-aliasing is the opposite of Aliasing. By studying DSP (digital Signal Processing) you will find out that Aliasing is not a
desirable result, thus we use its opposite filter to avoid it. We don't want aliasing in games, because it makes the edges look sharp and rough.</p>
<h1 id="introduction">Introduction</h1>
<p>Anti-aliasing is a low-pass filter, known as blur (in Photoshop) and AA in games. When you apply a low-pass filter into a digital image, you
remove all the high frequencies. </p>
<p>For example, let's say you have a low pass filter, from -5 to 5 Hz and you apply that filter in a signal which
extends from -100 to 100 Hz. The new signal will contains only the frequencies that are in between -5 and 5 Hz area.</p>
<p>So, there is this one called Aliasing frequency, that after this value the signal goes bad. As I mentioned earlier, in games, there are many
sharp and rough edges.</p>
<h1 id="materials-and-methods">Materials and Methods</h1>
<h3 id="lower-than-22-inches-monitors">lower than 22" inches monitors</h3>
<p>Anti-aliasing is not noticeable in high resolutions on lower than 22" inches monitors. </p>
<p>In low resolutions, such as 800x600 or 1024x768 you can easily notice much better the aliasing effects because the pixels are big enough to
oberve the jaggers. However, when you use a higher resolution, such as 1920x1080, it's very difficult to observe the difference between the
two. As such, there is no point to enable Anti-Aniliasing Filtering in games with resolution @1920x1080, especially when you have performance
issues.</p>
<p><img alt="Anti-Aliasing in games" src="/images/aliasedA.jpg" style="width: 176px; height: auto;" title="Aliasing letter A"/></p>
<p>This "A" leter is suffering from aliasing. As you can see there are sharp edges, corners -- there is jaggering (zig-zag-zig-zag etc). This is a bad quality because the signal includes aliased frequencies (frequences beyond the Nyquist freq - aka Sampling Freq).</p>
<p>To fix this problem, we apply a low pass filter, that cuts (removes) all these bad aliased frequencies. In other words, we use an Anti-Aliasing filter, fooling the eye and making the overall image quality looking way better than before.</p>
<p>However if the resolution is too high, then you will hardly actually observe it. So when you play games like First Person Shooting, you don't have the time to notice such small glitches, especially if you play at high resolution (1920x1080). That's
has been told, if you ever experience low performance issues, you can
disable the Anti-Antiliasing and gain some FPS back.</p>
<h3 id="24-or-26-inches-monitors">24" or 26" inches monitors</h3>
<p>Anti-aliasing is noticeable in high resolutions and 24'' or 26'' inches monitor</p>
<p>The bigger the screen, the larger the pixels. So, it's quite possible for some of you who have been trained in spotting game glitches, to
identify aliased pixels even in high resolutions. That's when a 2x Anti-Aliasing technique is used.</p>
<h3 id="impact-in-game-performance">Impact in game performance</h3>
<p>Anti-Aliasing Filtering costs in game performance. When you enable Anti-Aliasing, your GPU has to reconstruct the signal
(the digital image) and apply the Low-Pass filter. The more times the GPU scans the image (2x, 4x, 8x, 16x) the slower your game gets. So, if
you want to apply Anti-Antiliasing filtering with 4x or 8x scans, make sure you have a fast enough GPU to perform the task, or you gonna have
major drop in performance (lower FPS).</p>
<h3 id="aliasing-vs-anti-aliasing">Aliasing vs Anti-Aliasing</h3>
<p><img alt="Anti-Aliasing in games" src="/images/Aliasing-vs-AA.gif" style="width: 450px; height: auto;" title="Aliasing vs Anti-Aliasing"/> </p>
<p>This image "Aliasing vs Anti-Aliasing in game difference" is taken from TomsHardware. They have an <a href="http://www.tomshardware.co.uk/anti-aliasing-nvidia-geforce-amd-radeon,review-32166.html">EXCELLENT article</a> about Anti-Aliasing and I strongly recommend you to read it.</p>
<h1 id="results-and-discussion">Results and Discussion</h1>
<p>Lets sum up what we have discussed</p>
<p><em>Anti-Aliasing offers</em></p>
<ul>
<li>Improved image quality</li>
<li>Smooths the edges</li>
<li>Eliminates jaggering</li>
</ul>
<p><em>Anti-Aliasing impacts</em></p>
<ul>
<li>Costs in performance</li>
<li>Not easily visible at higher resolutions</li>
<li>Some types of AA, may seriously drop your performance (like Super
Sampling Anti-Aliasing)</li>
</ul>
<section>
<p id="post-share-links">
Share on:
<a href="http://twitter.com/home?status=Anti-Aliasing%20in%20games%20http%3A//utappia.org/anti-aliasing-in-games.html" target="_blank" title="Share on Twitter">Twitter</a>
❄
<a href="http://www.facebook.com/sharer/sharer.php?s=100&p%5Burl%5D=http%3A//utappia.org/anti-aliasing-in-games.html" target="_blank" title="Share on Facebook">Facebook</a>
❄
<a href="https://plus.google.com/share?url=http%3A//utappia.org/anti-aliasing-in-games.html" target="_blank" title="Share on Google Plus">Google+</a>
❄
<a href="mailto:?subject=Anti-Aliasing%20in%20games&body=http%3A//utappia.org/anti-aliasing-in-games.html" target="_blank" title="Share via Email">Email</a>
</p>
</section>
<section>
<p id="comment-message">So what do you think? Did I miss something? Is any part unclear? Please leave your comments below </p>
<div class="accordion" id="accordion2">
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle disqus-comment-count" data-toggle="collapse" data-parent="#accordion2"
href="http://utappia.org/anti-aliasing-in-games.html#disqus_thread">
Comments
</a>
</div>
<div id="disqus_thread" class="accordion-body collapse">
<div class="accordion-inner">
<div class="comments">
<div id="disqus_thread"></div>
<script type="text/javascript">
var disqus_shortname = 'utappia';
var disqus_identifier = 'http://utappia.org/anti-aliasing-in-games.html';
var disqus_url = 'http://utappia.org/anti-aliasing-in-games.html';
(function() {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
})();
</script>
<noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
<a href="http://disqus.com" class="dsq-brlink">comments powered by <span class="logo-disqus">Disqus</span></a>
</div>
</div>
</div>
</div>
</div>
</section>
<hr/>
</div>
<section>
<div class="span2" style="float:right;font-size:0.9em;">
<h4>Published</h4>
<time pubdate="pubdate" datetime="2012-12-03T15:18:00+02:00">Dec 3, 2012</time>
<h4>Category</h4>
<a class="category-link" href="http://utappia.org/categories.html#gaming-ref">Gaming</a>
<h4>Tags</h4>
<ul class="list-of-tags tags-in-article">
<li><a href="http://utappia.org/tags.html#antialising-ref">antialising
<span>1</span>
</a></li>
<li><a href="http://utappia.org/tags.html#graphics-ref">graphics
<span>1</span>
</a></li>
<li><a href="http://utappia.org/tags.html#screen-ref">screen
<span>1</span>
</a></li>
</ul>
<h4>Contact</h4>
<a href="https://plus.google.com/+Salihemin" title="My Google-Plus Profile" class="sidebar-social-links" target="_blank">
<i class="fa fa-google-plus sidebar-social-links"></i></a>
<a href="https://twitter.com/cerebrux" title="My Twitter Profile" class="sidebar-social-links" target="_blank">
<i class="fa fa-twitter sidebar-social-links"></i></a>
<a href="https://github.com/cerebrux" title="My Github Profile" class="sidebar-social-links" target="_blank">
<i class="fa fa-github sidebar-social-links"></i></a>
<a href="https://www.linkedin.com/in/salihemin" title="My linkedin Profile" class="sidebar-social-links" target="_blank">
<i class="fa fa-linkedin sidebar-social-links"></i></a>
<!-- Begin MailChimp Signup Form -->
<div id="mc-embed-signup">
<form action="http://utappia.us10.list-manage.com/subscribe/post?u=43b8fcc4811e0e42e65177af1&id=5759f75729" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<h4>Get Notified</h4>
<input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="your email" required>
<div class="clear"><input type="submit" value="click to subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
</form>
</div>
<!--End mc_embed_signup-->
</div>
</section>
</div>
</article>
</div>
<div class="span1"></div>
</div>
</div>
<div id="push"></div>
</div>
<footer>
<div id="footer">
<ul class="footer-content">
<li class="elegant-license"><a rel="license" target="_blank" href="http://creativecommons.org/licenses/by-nc-sa/4.0/"><img alt="Creative Commons License" style="border-width:0" src="/images/cc4.png" /></a><br /><span xmlns:dct="http://purl.org/dc/terms/" href="http://purl.org/dc/dcmitype/Text" property="dct:title" rel="dct:type">Utappia.org website</span> by <span xmlns:cc="http://creativecommons.org/ns#" property="cc:attributionName"><a href="https://www.linkedin.com/in/salihemin" target="_blank">Salih Emin</a></span> is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/"target="_blank">Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License</a>.</li>
<li class="elegant-power">Powered by <a href="http://getpelican.com/" title="Pelican Home Page">Pelican</a>. Theme: <a href="http://oncrashreboot.com/pelican-elegant" title="Theme Elegant Home Page">Elegant</a> by <a href="http://oncrashreboot.com" title="Talha Mansoor Home Page">Talha Mansoor</a></li>
</ul>
</div>
</footer> <script src="http://code.jquery.com/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script>
function validateForm(query)
{
return (query.length > 0);
}
</script>
<script type="text/javascript">
var disqus_shortname = 'utappia';
(function () {
var s = document.createElement('script'); s.async = true;
s.type = 'text/javascript';
s.src = '//' + disqus_shortname + '.disqus.com/count.js';
(document.getElementsByTagName('HEAD')[0] || document.getElementsByTagName('BODY')[0]).appendChild(s);
}());
</script>
<script language="javascript" type="text/javascript">
function uncollapse() {
if (window.location.hash.match(/^#comment-\d+$/)) {
$('#disqus_thread').collapse('show');
}
}
</script>
<script type="text/javascript" language="JavaScript">
uncollapse();
window.onhashchange=function(){
if (window.location.hash.match(/^#comment-\d+$/))
window.location.reload(true);
}
</script>
<script>
$('#disqus_thread').on('shown', function () {
var link = document.getElementsByClassName('accordion-toggle');
var old_innerHTML = link[0].innerHTML;
$(link[0]).fadeOut(500, function() {
$(this).text('Click here to hide comments').fadeIn(500);
});
$('#disqus_thread').on('hidden', function () {
$(link[0]).fadeOut(500, function() {
$(this).text(old_innerHTML).fadeIn(500);
});
})
})
</script>
</body>
<!-- Theme: Elegant built for Pelican
License : http://oncrashreboot.com/pelican-elegant -->
</html>