Chapter 3. Tools of the Trade

Graphics programmers have access to a variety of excellent tools to assist in shader authoring, application development, debugging, and asset creation. Happily, many of these are free to use, so you can explore the subject without having to make a large investment. This chapter introduces some of the best tools currently on the market.

Visual Studio has been evolving since the mid-1990s, and ten major releases have been produced since its inception. The latest version, and what we use in this book, is Visual Studio 2013 (see Figure 3.1). Visual Studio comes in several for-fee editions, with different feature sets. However, Visual Studio Express 2013 for Windows Desktop is a free alternative that provides much of the functionality we’ll be using.

Figure 3.1 Visual Studio 2013.

The Windows SDK installation should add location macros for use in your C++ include and library paths—specifically, $(WindowsSDK_IncludePath) and $(WindowsSDK_LibraryPath_x86) for the header and library files, respectively. Be sure these paths are included within your project’s Additional Include/Library Directories settings (see Figure 3.2).

Figure 3.2 Visual Studio 2013 property pages for include and library paths.

The Effects 11 library is distributed in source code form, enabling users to customize its behavior. This also implies that you’ll have to build the library before you’ll be able to use it in your projects. A Visual Studio 2013 solution does exist for the library, with configurations for debug and release builds for Win32 and x64 platforms. The output of any of the stock configurations is a static library (Effect11.lib). Part III provides a full treatment of the library.

Table 3.1 Useful DirectXTK Components

As with the Effects 11 library, source code is provided for DirectXTK with a Visual Studio 2013 solution file. A link to the library is available on this book’s companion website. We cover using several DirectXTK modules in Part III.

First, note that writing shaders in HLSL is procedurally similar to writing any other software. Your shader code is stored in simple text files, and any text editor can modify it. Indeed, you might prefer to work outside of FX Composer entirely and write your shaders, for example, within Visual Studio. But using a purpose-built shader-authoring tool such as FX Composer offers a number of advantages, particularly with respect to the immediate visual feedback you receive as you modify your shaders. Furthermore, using a tool such as FX Composer enables you to concentrate on basic shader authoring before diving into the underlying graphics API (such as DirectX). But lest you be concerned about nonportable, tool-specific code, know that the shaders you’ll write using FX Composer will be directly usable by the rendering engine authored in Part III.

FX Composer is a free tool, and you can download it from NVIDIA’s Developer Zone (for the link, see the book’s website). As of this writing, the latest version of FX Composer is 2.5 (specifically, the filename is labeled as 2.53.0524.1905). Figure 3.3 shows the default FX Composer window layout after the creation of a new project.

Figure 3.3 NVIDIA FX Composer’s default window layout.

As you can see, the layout is similar to Visual Studio, with resizable, dockable panels. Many of these panels (including the Editor, Properties, and Output panels) are self-explanatory. We need to look at several others.

Figure 3.4 NVIDIA FX Composer’s Assets panel.

An error-free material (one whose underlying effect compiles correctly) is displayed in the Materials panel as a sphere with a representation of the shader’s rendered output. If the associated effect fails to compile, the sphere appears as a red wireframe (see Figure 3.5). The lower portion of the Materials panel displays any textures assigned to the material.

Figure 3.5 NVIDIA FX Composer’s Materials panel with two materials (broken material on right).

Figure 3.6 NVIDIA FX Composer’s Render panel. (3D Model by Nick Zuccarello, Florida Interactive Entertainment Academy.)

You control the camera presenting the 3D scene within the Render panel using the mouse and keyboard. If you’re familiar with Autodesk Maya (a popular 3D modeling package), the controls are similar. You can select objects in the scene with a left mouse click. With the default Orbit camera, pressing the F key selects a model as the camera’s focus point. Holding the Alt key while left-clicking and dragging the mouse rotates the camera around the object. You hold the Shift key while left-clicking and vertically dragging the mouse to zoom the camera in or out. Alternately, you can zoom the camera with the mouse wheel. To pan the camera, hold the Ctrl key while left-clicking and dragging the mouse.

Along with the camera, you can manipulate objects within the scene. This is accomplished through the mode keys Q, W, E, and R, or their associated toolbar buttons along the top of the Render panel. The Select Object mode (Q) selects an object with a left mouse-click but does not otherwise modify it. Translate Object mode (W) enables you to move the object within the scene. With an object selected in translate mode, axis-aligned control arrows appear at the center of the object. You can translate along a specific axis by dragging the corresponding arrow, or you can translate in free-move mode by dragging the plus icon at the intersection of the three arrows. Rotate Object (E) and Scale Object (R) modes behave in the same way as Translate Object mode.

The Render panel has additional features, including background color customization, a reference grid, trackball and flythrough cameras, and screen capture. I encourage you to experiment with the Render panel to familiarize yourself with these features.

Figure 3.7 NVIDIA FX Composer’s Textures panel. (Original Earth textures from Reto Stöckli, NASA Earth Observatory. Additional texturing by Nick Zuccarello, Florida Interactive Entertainment Academy.)

To launch the debugger, choose Debug, Graphics, Start Diagnostics from the Visual Studio main menu, or press Alt+F5. This launches your application and also opens a Visual Studio tab titled Graphics Experiment.vsglog. Press the Print Screen key to capture diagnostic information for a single frame from your running application. This adds the captured image to the log tab’s frame list, enabling you to capture multiple frames at various points in your application.

Debugging shaders isn’t quite the same as debugging a traditional application. Recall that your shader code executes on, for example, individual vertices and pixels. So you need to specify which pixel you want to debug (which also identifies the pixel’s corresponding primitive). To select a pixel, move your mouse over a captured frame. Notice that the cursor becomes a large red crosshair (see Figure 3.8). Choosing a pixel with the crosshair displays its history in the Graphics Pixel History panel. If you don’t see that panel in your display, choose Debug, Graphics, Pixel History from Visual Studio’s main menu.

Figure 3.8 The Visual Studio Graphics Debugger log with a pixel selected from a captured frame. (Texture by Emil Persson.)

With a pixel selected, you can view any draw calls associated with that pixel in the Graphics Pixel History panel. You can then expand one of those calls for a list of drawn primitives. After you expand a primitive, you see various stages of the graphics pipeline—ones that you’ve provided shaders to—and the output-merger stage. Notice the Play and Stop icons next to the vertex and pixel shader stages in Figure 3.9. Click the Play button next to a shader to begin debugging your shader code. The normal Visual Studio debugging panels (for example, Call Stack, Locals, and Watch windows) are enabled when debugging shaders. The specifics of shader debugging will become clear as we proceed with future chapters.

Figure 3.9 The start/stop shader debugging buttons within the Visual Studio Graphics Debugger.

2. Install NVIDIA FX Composer and experiment with the interface. In particular, explore the Render panel to become familiar with the camera controls. Add a sphere, teapot, torus, and plane to the Render panel, and modify them using the mode keys Q, W, E, and R (translate, rotate, and scale).