HDR Skybox Creation: Difference between revisions
m (Multipage removal) |
m (Setting bug notice hidetested=1 param on page where the bug might not need tested in param specified) |
||
(10 intermediate revisions by 6 users not shown) | |||
Line 3: | Line 3: | ||
[[File:Skybox ldr hdr.jpg|thumb|250px|HDR skyboxes (left) benefit from a wider range of brightness values.]] | [[File:Skybox ldr hdr.jpg|thumb|250px|HDR skyboxes (left) benefit from a wider range of brightness values.]] | ||
Unlike most textures in a game, a [[skybox]] typically represents a collection of very large and very bright objects. | {{Tutorial Skill Level|skill=2}} | ||
Unlike most textures in a game, a [[skybox]] typically represents a collection of very large and very bright objects. This makes the need for [[high dynamic range]] imaging far more pressing. | |||
[[VTF]] textures used for HDR skyboxes store their colors either lightly compressed in 16-bit [[Float|floating point]] (RGBA16161616f) or heavily compressed as 8-bit [[integer]] values (BGRA8888). In either case, they are created by [[Vtex (Source 1)|VTEX]] from uncompressed 32-bit floating point Portable Float Map (.pfm) files. | [[VTF]] textures used for HDR skyboxes store their colors either lightly compressed in 16-bit [[Float|floating point]] (RGBA16161616f) or heavily compressed as 8-bit [[integer]] values (BGRA8888). In either case, they are created by [[Vtex (Source 1)|VTEX]] from uncompressed 32-bit floating point Portable Float Map (.pfm) files. | ||
Line 16: | Line 18: | ||
#Obtain a common format HDR file, like .hdr or .exr (the most popular one). It could have any bit-depth you like: both 16 and 32 bit should work fine. | #Obtain a common format HDR file, like .hdr or .exr (the most popular one). It could have any bit-depth you like: both 16 and 32 bit should work fine. | ||
#Import it to Photoshop (Adobe srgb 1998 or REC709 should work fine) and make sure that the Photoshop file is set to 32/16 bit-depth (Image --> Mode --> 32 Bits/Channel OR 16 Bits/Channel). | #Import it to Photoshop (Adobe srgb 1998 or REC709 should work fine) and make sure that the Photoshop file is set to 32/16 bit-depth (Image --> Mode --> 32 Bits/Channel OR 16 Bits/Channel). | ||
#Go to File --> Save As or Press | #Go to File --> Save As...* or Press {{Key|Ctrl|Shift|S}} (or {{Key|Alt|Ctrl|S}}). | ||
#From the dropdown of available formats choose "Portable Bit Map", change the .pbm in the file name to .pfm and click "Save". You now have a proper .pfm file for further use with VTEX. | #From the dropdown of available formats choose "Portable Bit Map", change the .pbm in the file name to .pfm and click "Save" . You now have a proper .pfm file for further use with VTEX. | ||
{{Warning|There's a thing called "Endianess" or "Byte order", for VTEX to properly convert your 16/32 bit HDR files it has to be set to little endian, not big endian. (This doesn't seem to apply to 8 bit non-hdr files, like .png, .jpg, .tga and so on). | {{Warning|There's a thing called "Endianess" or "Byte order", for VTEX to properly convert your 16/32 bit HDR files it has to be set to little endian, not big endian. (This doesn't seem to apply to 8 bit non-hdr files, like .png, .jpg, .tga and so on). | ||
{{tip|To set the endianness when converting using ImageMagick, use the {{code|-endian LSB}} parameter.}}}} | {{tip|To set the endianness when converting using ImageMagick, use the {{code|-endian LSB}} parameter.}}}} | ||
{{Note|* - On newer version of {{Photoshop|3.1}} (since 2021), you need to click "Save a Copy..." instead. However you can change the "Save As..." behavior back to previous version of Photoshop by going to {{code|Preferences > File Handling >}} ''check'' "{{code|'''Enable legacy "Save As"'''}}".}} | |||
{{tip|[[File:Skybox half.jpg|thumb|240px|Half the size, all of the (actually visible) image]] Since the lower halves of skybox sides generally aren't seen, it's often wise to cut away that area. For this trick to work, you must compile the side VTFs with these extra commands: | {{tip|[[File:Skybox half.jpg|thumb|240px|Half the size, all of the (actually visible) image]] Since the lower halves of skybox sides generally aren't seen, it's often wise to cut away that area. For this trick to work, you must compile the side VTFs with these extra commands: | ||
Line 31: | Line 33: | ||
And add this command to the materials: | And add this command to the materials: | ||
<source lang= | <source lang=cpp> | ||
$basetexturetransform "center 0 0 scale 1 2 rotate 0 translate 0 0" | $basetexturetransform "center 0 0 scale 1 2 rotate 0 translate 0 0" | ||
</source> | </source> | ||
Line 58: | Line 60: | ||
=== Adding HDR Data === | === Adding HDR Data === | ||
The following will demonstrate the basic steps for painting a "sun" effect into the different exposures and saving the file as a [[PFM]]. We'll use https://vgl.ict.usc.edu/HDRShop HDR Shop] for this demonstration. | The following will demonstrate the basic steps for painting a "sun" effect into the different exposures and saving the file as a [[PFM]]. We'll use [https://vgl.ict.usc.edu/HDRShop HDR Shop] for this demonstration. | ||
{{warning|HDR Shop is free for non-commercial use, but commercial usage requires a pricey license. You will have to search the internet for the freeware version.}} | {{warning|HDR Shop is free for non-commercial use, but commercial usage requires a pricey license. You will have to search the internet for the freeware version.}} | ||
Line 125: | Line 127: | ||
Now you just need to '''create six VMTs named {{file|<nowiki><skyname>_hdr<face></nowiki>|vmt}}'''. These should read: | Now you just need to '''create six VMTs named {{file|<nowiki><skyname>_hdr<face></nowiki>|vmt}}'''. These should read: | ||
<source lang= | <source lang=cpp> | ||
Sky | Sky | ||
{ | { | ||
Line 138: | Line 140: | ||
} | } | ||
</source> | </source> | ||
{{bug|If an {{code|$hdrbasetexture}} or an {{code|$hdrcompressedtexture}} is not specified, the skybox will appear as missing texture with HDR enabled. If you don't have an HDR version of the skybox you can use the LDR version as a {{code|$hdrbasetexture}}.}} | {{bug|hidetested=1|If an {{code|$hdrbasetexture}} or an {{code|$hdrcompressedtexture}} is not specified, the skybox will appear as missing texture with HDR enabled. If you don't have an HDR version of the skybox you can use the LDR version as a {{code|$hdrbasetexture}}.}} | ||
=== Creating LDR Fallbacks === | === Creating LDR Fallbacks === | ||
{{tip|{{ | {{tip|{{l4d2|since}} LDR fallbacks aren't necessary for games that are normally HDR-only.}} | ||
You must also create standard dynamic range VTFs (LDR fallbacks) for users who do not play in HDR. Compile with these settings: | You must also create standard dynamic range VTFs (LDR fallbacks) for users who do not play in HDR. Compile with these settings: | ||
Line 162: | Line 164: | ||
{{note|Skybox selection is based on the VMT names, not the VTF names. Multiple faces of the same skybox can share a VTF, provided they have separate VMTs, and multiple skyboxes can use the same VTFs.}} | {{note|Skybox selection is based on the VMT names, not the VTF names. Multiple faces of the same skybox can share a VTF, provided they have separate VMTs, and multiple skyboxes can use the same VTFs.}} | ||
{{bug|Skyboxes may fail to load if placed in a subfolder of {{path|materials\skybox\}}; use a prefix if organization is necessary.}} | {{bug|hidetested=1|Skyboxes may fail to load if placed in a subfolder of {{path|materials\skybox\}}; use a prefix if organization is necessary.}} | ||
== See also == | == See also == |
Latest revision as of 07:12, 20 May 2025
Skill Level
This tutorial expects you to have this amount of knowledge within the topic to follow along smoothly. | |||||
---|---|---|---|---|---|
Novice | Familiar | Competent | Proficient | Expert |
Unlike most textures in a game, a skybox typically represents a collection of very large and very bright objects. This makes the need for high dynamic range imaging far more pressing.
VTF textures used for HDR skyboxes store their colors either lightly compressed in 16-bit floating point (RGBA16161616f) or heavily compressed as 8-bit integer values (BGRA8888). In either case, they are created by VTEX from uncompressed 32-bit floating point Portable Float Map (.pfm) files.

Compressed HDR VTFs can be decompressed to EXRs by no_vtf.
Creating PFMs
Creating Proper PFMs With Photoshop
Creating HDR PFMs is very easy, but the way of doing this is not stated anywhere:
- Obtain a common format HDR file, like .hdr or .exr (the most popular one). It could have any bit-depth you like: both 16 and 32 bit should work fine.
- Import it to Photoshop (Adobe srgb 1998 or REC709 should work fine) and make sure that the Photoshop file is set to 32/16 bit-depth (Image --> Mode --> 32 Bits/Channel OR 16 Bits/Channel).
- Go to File --> Save As...* or Press Ctrl+⇧ Shift+S (or Alt+Ctrl+S).
- From the dropdown of available formats choose "Portable Bit Map", change the .pbm in the file name to .pfm and click "Save" . You now have a proper .pfm file for further use with VTEX.




clamps 1
clampt 1
And add this command to the materials:
$basetexturetransform "center 0 0 scale 1 2 rotate 0 translate 0 0"
See #Creating the materials for details on how to use the commands.
Additionally, an unseen bottom skybox face can be made a single color and a small resolution, such as 4x4.
Skies at different exposures
Before creating a HDR skybox we need to know what the sky looks like at different exposures:
As you can see, the captured image changes as the exposure is altered. A single 8-bit image could never be used to create those effects: at 8-bit white is white, and the sun would only stand out if it was literally a different colour from the rest of the sky.
Create a Base Skybox
First you need to create a basic skybox cube, as you would for an LDR skybox. See Skybox (2D).
With your images ready, arrange them in one large file as seen below. This step is required only if you are using the splitskybox tool. If you aren't then you are quite free to handle each texture separately.
Save this assembled image as a TGA file. If you are prompted, do not use RLE compression and do place the origin at the bottom left.
Adding HDR Data
The following will demonstrate the basic steps for painting a "sun" effect into the different exposures and saving the file as a PFM. We'll use HDR Shop for this demonstration.

After it is installed, launch the application, and then open the above TGA you created above. When this window appears leave the default settings and Select OK'.
HDR Shop works by taking files created by other image editors for different exposures and merging them together at 32-bit floating point. To paint the "sun" into the skybox you must first choose an exposure to edit. The + and - keys are used to adjust the image exposure up and down. The lower right hand corner of the screen indicates the exposure level, +0.00 stops indicates the base exposure level that was imported into HDR Shop. Adjust the exposure level so it reads -3.00 stops Then, go to the menu: File -> Edit in Image Editor. The image-editing program you have associated with BMP format will automatically open up this file as a 24-bit HDRShopTEMP.bmp
. Now paint the sun into this file.
When finished save the image and return to HDR Shop.
After clicking OK in this dialog, the current exposure level will be updated with the image that was just painted with the image-editing program.
Try adjusting the exposure up and down in HDR Shop with the + and - keys and you'll see that the sun is now integrated into the other exposures. Continue editing the different exposures until the desired result is achieved. It will be a good idea to spend some time emulating the blown-out effects around the sun and the highlights on the clouds as seen in the photographic reference.
When finished go to the File menu and choose Save as… and Select Portable Floatmap (.PFM) Save this file into your materialsrc
content directory (e.g. steamapps\common\Day of Defeat Source\dod\materialsrc\skybox
).

sdk_sky_exampleup
Let's do this with sourcesdk_content\dod\materialsrc\skybox\sdk_sky_exampleup.tga
. Open it up and adjust the exposure to -3 stops, then edit the image externally. Now paint in a sun.
After returning to HDR Shop and OKing the dialogue, the current exposure level will be updated with the image that you just painted.
Try adjusting the exposure up and down and you'll see that the sun is now integrated into the other exposures as well. Continue editing the different exposures until the desired result is achieved. It will be a good idea to spend some time emulating the blown-out effects around the sun and the highlights on the clouds as seen in the photographic reference.
Split the Skybox
If you created your skyboxes in a single file as in the above image, you will need to use splitskybox.exe to split it into six. Just drag the PFM onto it.



Creating the Materials
At this stage you should have six files:
<skyname>_hdrft.pfm
<skyname>_hdrlf.pfm
<skyname>_hdrbk.pfm
<skyname>_hdrrt.pfm
<skyname>_hdrup.pfm
<skyname>_hdrdn.pfm
Make sure they are under your_mod\materialsrc\skybox\
. You now need to create six corresponding TXT files (e.g. <skyname>_hdrft.txt
) alongside them, in order to compile to VTF. Each must contain:
pfm 1 // tells vtex to load a a .pfm file instead of a .tga file
pfmscale 1 // brightness multiplier
nonice 1 // prevent seams appearing at low texture detail
skybox 1 // alternative to nonice, if NICE filtering is desired
nocompress 1 // optional; removing halves file size, but causes color banding under close inspection
Drag these text files onto VTEX and it will compile them (unfortunately VTFEdit doesn't import PFMs, nor properly handle other formats when HDR). The VTFs will appear in the corresponding materials subfolder (e.g., your_mod\materials\skybox\
).
Now you just need to create six VMTs named <skyname>_hdr<face>.vmt
. These should read:
Sky
{
// if you compiled with nocompress:
$hdrbasetexture "skybox/sdk_sky_example_hdrft"
// if you didn't:
$hdrcompressedtexture "skybox/sdk_sky_example_hdrft"
// LDR fallback
$basetexture "skybox/sdk_sky_exampleft"
}

Creating LDR Fallbacks


You must also create standard dynamic range VTFs (LDR fallbacks) for users who do not play in HDR. Compile with these settings:
nonice 1
dxt5 1 // or nocompress

These are ordinary textures, so you can use VTFEdit if you prefer. There is no need to create new materials for LDR users; they will load the _hdr ones.
Additional creation notes




Usage
In Hammer 4.x, go to Main Menu > Map > Map Properties > Skybox Texture Name and type the name of your skybox, relative to
materials\skybox\
and without any of the face suffixes. (e.g., mysky_hdr if the VMTs are materials\skybox\mysky_hdrXX.vmt
.)
If there is an underscore before the face names, then these must be included as well (ex: mysky_hdr_ if the VMTs are materials\skybox\mysky_hdr_XX.vmt
.)



materials\skybox\
; use a prefix if organization is necessary.See also
- HDR Lighting Basics - How to add basic HDR lighting effects.
- HDR Lighting Settings - Information on customizing HDR lighting settings.
- Sky (shader)
- Skybox (2D)
- Sky Writer - 3ds Max tool that renders your scene into PFM and compiles to VTF.
- Material
Environment articles: | |
---|---|
Skies and environment maps | ![]() |
Terrain and displacement mapping | Displacements • Creating Holes in Displacements • Digital Elevation Models • Creating custom terrain with Worldmachine |