Channels ▼
RSS

Design

Rendering High-Quality Images On-the-Fly



The images of rocks, clouds, marble and other textures that serve as background images and details for 3D video games are often hand painted and thus costly to generate. A technique by game programmer Alex Goldberg now offers video game developers the possibility of high-quality, yet lightweight, images for 3D video games that are generated on-the-fly and are free of stretch marks, flickering, and other artifacts.

"It should be pretty easy for video game developers to integrate our research into new games. As a game developer myself, I know first hand that stretched out and flickering backgrounds and details are no longer acceptable in 3D video games," says Alex Goldberg, the computer science undergraduate who did much of the work. University of California, San Diego computer science professor Matthias Zwicker and MIT's Frdo Durand also contributed to the research project.

"People are looking for ways to get rid of these distortions, preferably without having to pay artists to generate background and detail images by hand. We have come up with a way to do this, and we are planning to provide code for download soon," explains Goldberg, who works for video game studio PixelActive.

The technique, which is described in Anisotropic Noise, Goldberg's 2008 SIGGRAPH paper, marks an important improvement over Perlin noise, an established technique in which small computer programs create many layers of noise that are piled on top of each other. The layers are then manipulated -- like layers of paint on a canvas -- to develop detailed and realistic textures such as rock, soil, cloud, water and marble that serve as background images and details for 3D video games.

"The existing methods for using computer generated noise to make images for backgrounds and details for 3D video games are fast, but the images that you get don't look very good. Our work gives you the full computational benefit of noise but without many of the tradeoffs such as distortion and flickering," says Goldberg.

The new approach also eliminates the need to store the textures as huge images that take up valuable memory. "The graphics generated from the procedural approach that we explored in this project are very small. Illustrating video games with small images is going to be increasingly important in the future as more and more games are downloadable," says Zwicker.

Both the stretch marks and the flickering in 3D video game backgrounds often stem from the same technical issue: choosing what color to make individual pixels. "When one pixel covers a large area in a 3D video game landscapewhat color should that pixel be? It can only be one color, but the area it covers may contain many different colors," Zwicker goes on to say.

Color averaging is one solution. For example, if a pixel covers a patch of tiny black bumps on a piece of armor on a soldier far in the distance, and if these armor bumps are partially lit up with white light, then averaging the colors and turning the pixel gray is often in order. But before you can average colors, you have to determine the exact region of the scene that needs to be squeezed into one particular pixel. A simple solution is to slide circular areas of scenes into circle shaped pixels. But when you are trying to map areas of 3D scenes back to 2D pixels, circular areas of background images are not the best option even though the pixels are circles themselves, according to the computer graphics researchers.

In Anisotropic Noise, the computer scientists mapped elliptical areas of background images back to circular pixels and found that their technique yielded higher quality background images with less stretching and other distortions. The reason elliptical shapes are a better fit for circular pixels in backgrounds for 3D video games goes back to basic geometry: when a cone that extends from a circular pixel intersects with the background of a 3D video game scene, the region of the cone that hits the background is an ellipse rather than a circle.


Related Reading


More Insights






Currently we allow the following HTML tags in comments:

Single tags

These tags can be used alone and don't need an ending tag.

<br> Defines a single line break

<hr> Defines a horizontal line

Matching tags

These require an ending tag - e.g. <i>italic text</i>

<a> Defines an anchor

<b> Defines bold text

<big> Defines big text

<blockquote> Defines a long quotation

<caption> Defines a table caption

<cite> Defines a citation

<code> Defines computer code text

<em> Defines emphasized text

<fieldset> Defines a border around elements in a form

<h1> This is heading 1

<h2> This is heading 2

<h3> This is heading 3

<h4> This is heading 4

<h5> This is heading 5

<h6> This is heading 6

<i> Defines italic text

<p> Defines a paragraph

<pre> Defines preformatted text

<q> Defines a short quotation

<samp> Defines sample computer code text

<small> Defines small text

<span> Defines a section in a document

<s> Defines strikethrough text

<strike> Defines strikethrough text

<strong> Defines strong text

<sub> Defines subscripted text

<sup> Defines superscripted text

<u> Defines underlined text

Dr. Dobb's encourages readers to engage in spirited, healthy debate, including taking us to task. However, Dr. Dobb's moderates all comments posted to our site, and reserves the right to modify or remove any content that it determines to be derogatory, offensive, inflammatory, vulgar, irrelevant/off-topic, racist or obvious marketing or spam. Dr. Dobb's further reserves the right to disable the profile of any commenter participating in said activities.

 
Disqus Tips To upload an avatar photo, first complete your Disqus profile. | View the list of supported HTML tags you can use to style comments. | Please read our commenting policy.
 

Video