I'm Morgan McGuire (@CasualEffects). I've been working on computer graphics and games for 20 years at great places including NVIDIA, University of Waterloo, Williams College, Brown University, Roblox, Unity, and Activision.

See my home page for a full index of my blog posts, books, research, and projects.

Friday, January 20, 2012

The Graphics Codex 1.1 Update Feature List

The Graphics Codex version 1.1 went live on the App Store Jan. 31, 2012.  This post lists the features.  I prioritize features for each update based on the poll on the web page, so vote there for what you want to see next.


New in version 1.1:
  • Searchable index
  • Fast startup time
    • About 1s for the first load on iPad 2 and iPhone 4; may be slower on iPad 1 and iPhone 3
    • Instantaneous load when switching apps
  • Smooth scrolling
  • Type annotations for all equations and new button for showing and hiding them
  • Reorganized all matrix topics under a single heading
  • New diagrams
    • Refraction/Snell's law
    • Ray-Triangle intersection
  • New topics
    • Unprojecting from a depth buffer
    • Arithmetic mean
    • Geometric mean
    • Expected value
    • Variance
    • Area of a 3D triangle
    • 4 matrix determinant
    • n matrix determinant
    • C++ method pointer syntax
    • Greek alphabet (+XML, HTML, Unicode, LaTeX, ASCII codes)
    • Shadow map pseudocode, with PCF
  • Mathematical corrections
    • Fixed minus signs and added supersampling offsets to projection matrices
    • Fixed the vector diagram for triangle solid angle
  • Many small refinements to existing topics






Thursday, January 19, 2012

The Graphics Codex is now on Sale




Real-Time Rendering, Third Edition:$64
Physically Based Rendering, Second Edition:$52
Fundamentals of Computer Graphics:$81
Not carrying your graphics books home...Priceless

The Graphics Codex is an essential mobile reference for 3D computer graphics. The value may be priceless, but the cost is only $2.99 in the App Store during January, 2012.



http://itunes.apple.com/us/app/the-graphics-codex/id494971103?mt=8

Saturday, January 7, 2012

New Website Design

It was time to replace my original placeholder design of the Casual Effects website, as the release of The Graphics Codex nears.  The original design is below on the left and the new look is on the right:



The original took 30 minutes when I needed something to reserve space on the newly registered domain. The redesign took me about three hours.  About one hour was figuring out what I wanted, another half an hour was implementing it, and the rest was largely using CSS to hack the style of the embedded Twitter and Blogger feeds, which are produced by third-party JavaScript and CGI scripts, and tune the whitespace and colors.

Tools
I'm trained and primarily skilled as a scientist, programmer, and engineer--not a graphic designer.  I know many principles of graphic design but don't have particular skill there and don't know how to use any web design software.  So I try to stick to simple designs and create my web pages by coding directly in Emacs using HTML5, CSS, JavaScript, and XSL.

To extract the feed from Twitter, I used their embedding widget.  To extract the feed from Blogger, I used code by FeedWind.  Each can be somewhat customized; I then used custom CSS to hack the rest.  The Chrome browser's "Inspect this element" command was essential for debugging during this step.

Layout
I wanted my website to list currently active projects and current twitter and blogger posts.  This site is for my independent ("hobby?") projects, so it should also accurately portray the one-man show and indie aspects.  So, to design the website, I looked at the sites from some (much bigger!) indie game teams that I admire, including:


All mostly follow the "WordPress" look of a fixed-width center column with a side-bar for a twitter feed.  I like the way that Unknown Worlds and Mark ten Bosch list their projects with a big image and short description, so I mimicked that.  Unlike most sites, I didn't want the blog front-and-center, so I pushed it down to the bottom and left it as headlines, not the actual blog (i.e., this page!)

Title
I didn't have any new ideas for the title, so I kept the original Casual Effects stylized text.  The carbon-fiber background was too busy to keep behind all of the new text, so I pushed that to the far background and used plain white.  The drop-shadow on the title was too extreme against white and other sites all have a clear separation of title area and body, so I put a solid gray banner behind the title.

Color
When you're not a master of color, I believe that it is best to limit your palette. In this case I chose to simply vary the value of the already primarily monochrome scheme and add a single accent color.

I kept the yellow/gold from the title as the accent color and used it for hyperlinks.  I then used the gray from the title for headers so that they wouldn't fight for emphasis with the body text.  I likewise made the headers all lower-case to echo the formatting of the title and again de-emphasize them.  I hope all of the lower-case comes off as embodying the "casual" from the title, without being over-stylized.

The gray in the headers is slightly darker than the title bar--the larger expanse makes the title bar seem darker, so I had to compensate.  The link gold is darker than the titlebar yellow to make it more readable.

Note that the Endlyss logo is intentionally gray and monochrome and the image for The Graphics Codex is primarily monochrome because it is just a picture of an iPad and iPhone.  I'd be happy to have more color here if future projects merit it, but it was convenient that these are neutral and will slide into any theme.

Fonts
I find sans-serif fonts hard to read.  They were originally designed for titles and for small text on low-resolution displays.  The latter made them associated with computers and "high-tech", so they are (over) used on the web.  I use serif fonts (preferably Georgia, to not look exactly like everyone else's Times New Roman) for body text and sans serif (the old Helvetica standby) for titles.  I usually justify text, but these paragraphs are short enough that they look better with a ragged right.

I added a lot of white space between elements to keep the design clean without borders and rounded the corners of the center box.  The round corners echo the lower-case titles and stand out a little from the default square that you see on most websites.

Shadows
The title and main box have ambient-occlusion style drop shadows.  They are primarily to separate the objects and create depth and contrast without appearing as a concrete visual element.  I modeled them on the default drop shadow parameters on OS X.




Wednesday, January 4, 2012

Translucency in OBJ / MTL Files

This post describes some reverse engineering work on the handling of translucency in MTL material files used with legacy OBJ 3D model files.

Motivation
Endlyss is a hybrid 3D modeling game inspired by Minecraft's creative mode.  I like architecture and designing buildings.  I really enjoy the building aspect of Minecraft (compared to using something like 3DS Max, or even SketchUp, which I find too hard to use to create buildings).  However, I'm frustrated by the voxel limitations of MC.  So I decided to make my own modeling game targeted at casual users but with power tools that would satisfy a 3D modeling artist.  Endlyss is that game.

In order to bring data in and out of Endlyss I wrote support for both Minecraft and OBJ import and OBJ export.  OBJ files specify the material name for each mesh, but the materials themselves are described separately in MTL files.  Those are documented extensively online, e.g.,

http://www.fileformat.info/format/material/
http://paulbourke.net/dataformats/mtl/

However, the documentation is not all consistent, and in some cases does not match what I observe when importing files into 3DS Max (version 14.0, 2011).  Compatibility with Max is the primary reason to have OBJ support, so that trumps the documentation.

Why use the legacy OBJ format instead of a full-featured file format with clear documentation?  For example, COLLADA or FBX. Like many in the graphics community, I appreciate the features in the newer formats but find them hard to work with in practice.  I prefer to use simpler, more widely-supported formats, and OBJ is something of the lowest common denominator for 3D models.

Transmission vs. Partial Coverage

You can read a discussion of the difference between transmission and partial coverage in the appendix of this paper: http://graphics.cs.williams.edu/papers/CSSM/.  The basic idea is that partial coverage means "this surface has holes in it" and transmission means a combination of "light travels at a different speed through the medium on the other side of this surface" and "as it passes through that material, some, but not all light is absorbed."  You can see some of the differences in the photograph below.

Thin red cloth has 50% partial coverage, so it reflects
50% of "red" light.  A red gel has 50% transmission, so it
 reflects almost no light but transmits 50% of the "red" light.

In general, partial coverage is useful for representing cutouts (1 = solid, 0 = hole), and holes and edges below the resolution of the texture map (with fractional values). For example, the edges of leaves that cross through texels, and a window screen for keeping bugs out.  Transmission creates refraction and "colors" the light that passes through it.

You also should see a diminished specular highlight on a surface with partial coverage (since that surface is partly not covered by the material!), but should see full-strength specular highlights on a transmissive surface--although you should set your constants to ensure energy conservation. 

Do we really need both transmissive and partial coverage constants?  Well, it is possible to represent frequency-invariant (i.e., uncolored), non-refractive transmission using partial coverage.  It is possible to represent partial coverage for materials with no specular reflection (which are themselves impossible, since anything that transmits must reflect due to Fresnel effects) using transmission and no refraction.  But those are pretty severe and confusing limitations for a physically-based renderer, so I prefer to keep the concepts separate.


MTL Files
Wavefront MTL files contain a series of blocks that look something like this for specifying materials:

newmtl default
  Ns 10.0000
  Ni 1.5000
  d 1.0000
  illum 2
  Ka 1 1 1
  Kd 1 1 1
  Ks 0.0 0.0 0.0
  Ke 0 0 0
  map_Kd default.png
  map_d alpha.png

I won't describe those in detail (see http://www.fileformat.info/format/material/), but essentially:

  •  "illum" specifies the kind of BSDF by number
  •  "K" values are RGB parameters
  •  "map" values are texture map parameters that trump the associated "k"
  • "N" values are scalar parameters
There are several parameters in these blocks that affect the transmission of light and partial coverage of a surface.  Based on my experiments with 3DS Max, these are:
  • "d" specifies a scalar transmission value, where 1 = no transmission and 0 = 100% transmission.  This must be transmission and not partial coverage because if d=0, then you can see specular highlights.
  • "map_d" is a grayscale image that specifies a varying "d" value across a surface.
  • "Tf" is an RGB value, but 3DS Max 2012 averages across the three channels to produce a scalar transmission coefficient.  Specifically, 3DS Max transmits (1.0 - Tf) of the light, which is the opposite of what the above reverse-engineered documentation says.  For example, 'Tf=1 1 1" transmits no light and "Tf=0 0 0" transmits all background light.
  • The alpha channel of the "map_Kd" texture is ignored.
Here's a sample of one test that I ran to determine that "d" is transmission and not partial coverage:

The map_Kd texture map is in RGBA8 PNG format.  The white square in the map_Kd has A=0, which you can see is ignored in the render on the far right.  The specular highlight on the d=0 part of the map in the right image shows that this is a transmissive coefficient and not partial coverage.

"d" and "Tf" interact in nonobvious ways, as shown below (there is no map_Kd on these).



Finally, I've heard that some packages recognize map_d textures with an alpha channel and use that instead of the intensity, so that you can use "map_d file / map_Kd file" to get alpha cutouts.  3DS Max does not:




Transmission Holds Out Reflection
In 3DS Max, the reflected light is automatically reduced by the transmissive coefficient (this is analogous to partial coverage with a convention of NOT using premultiplied alpha).  The experiment that I used to determine this is below.  In it, the two cubes are rendered from directly above.



Conclusions: Alpha
Unfortunately, from these experiments, it appears that there is no way to do an "alpha cutout" in OBJ format that will be rendered correctly as partial coverage in 3DS Max.  The lack of this is troubling; the best that one can do to fake it is apparently to:
  1. Ks = 0 0 0 
  2. Specify a grayscale map_d, where 0 = hole and 1 = solid
  3. Do not premultiply coverage by map_Kd
I'll continue to support partial coverage in the alpha channel of map_Kd in my own software.  This is backwards compatible to 3DS Max but won't render the cutout there.

I intend to support colored transmission with "Tf" and "map_Tf", and will accept that 3DS Max and other programs may ignore the color (but will at least maintain the average transmission).


Tuesday, January 3, 2012

The Graphics Codex


The Graphics Codex is an app for 3D graphics students, engineers, teachers, and artists. It provides consistent, correct, and easy-to-understand definitions for technical material. Unlike a book, it is always with you. Unlike a PDF, it conforms to the orientation and screen size of your mobile device uses the full power of iOS.

The Graphics Codex collects my notes from teaching computer graphics at Brown University and Williams College and developing commercial games with Iron Lore Entertainment and the Vicarious Visions studio of Activision | Blizzard.

I will release the app with about 100 entries as soon as it is approved by Apple, and then add more content each month as a free update. I use The Graphics Codex every day while working on computer graphics and hope that it will help others now as well!