First Pass: Skybox


Just wanted to share a quick visual update. I've been planning to add a nice skybox background to make the  overall scene a bit more interesting. In preparation for that, I updated the rendering to use a test cube map where each of the faces (there are 6 faces) is a different color. The left image shows the final result of using the test cube map and the right image shows the cubemap being  sampled during the reflection pass (you can read more about the reflection pass here). The colors for the cube map are:

Positive X = Red, Positive Y = Orange, Positive Z = Blue

Negative X = Yellow, Negative Y = Cyan, and Negative Z = Fuchsia

So as you might expect, the Orange from the Positive Y direction is reflected on the top of the puzzle board (left image) and the Orange can be seen in the reflection map (right image) because the camera is reflected across the plane representing the top of the game board.

You can do additional reading about cube maps in the wikipedia link above as well as within Real-Time Rendering: Third Edition Chapter 6, Section 6.2.4: Cube Maps. To properly render the skybox background requires rendering a textured box or sphere at the location of the camera such that the resulting rendered pixels will always be behind all other objects in the scene. Rendering behind all other objects in the scene can be accomplished by having your vertex shader calculate:

Position = (VertexPosition * WorldViewProjection).xyww; // Position has the SV_POSITION semantic in hlsl

TextureCoordinate = VertexPosition;

Above, xyww is assigned to Position instead of xyzw so that the depth value will always be 1.0f (furthest from the camera) -- because the depth value is calculated as (z / w). The TextureCoordinate is passed to the pixel shader to sample the cube map and retrieve the correct face's color. In writing this devlog, I found this blog provides a good description of the cube map process using OpenGL. That's all I have for now, but I'll hopefully have another update to post soon. Take care.

Get Peg Puzzle

Download NowName your own price

Leave a comment

Log in with itch.io to leave a comment.