Parallax mapping: Difference between revisions

From Valve Developer Community
Jump to navigation Jump to search
m (Redirected link.)
(Rewrote and clearified some stuff.)
Line 3: Line 3:
{{note|Parallax mapping is currently disabled in the Source Engine shaders. However, it is very easy to implement with custom code; hardly any coding experience is needed. For an installable implementation, see the [http://www.hl2world.com/bbs/1-vt46068.html Extended phong and parallax shader by MihailNajdenov].}}
{{note|Parallax mapping is currently disabled in the Source Engine shaders. However, it is very easy to implement with custom code; hardly any coding experience is needed. For an installable implementation, see the [http://www.hl2world.com/bbs/1-vt46068.html Extended phong and parallax shader by MihailNajdenov].}}


A '''parallax map''' (also known as a '''photonic map''', '''offset map''' or '''virtual displacement map''') will make your flat material look three-dimensional. Parallax maps compliment bump maps and normal maps. When you look at a parallax mapped material at an angle, the high points will obscure the low points behind them. This is only worthwhile for textures that have depth ranging at least a few centimeters, like deep-set bricks or stone. If you're not sure about using one, then don't bother.
'''Parallax mapping''' (also known as '''offset mapping''' or '''virtual displacement mapping''') is a shading technique that displaces the individual pixel height of a surface, so that when you look at it at an angle, the high points will obscure the low points behind them, making it look three-dimensional. The height data for each pixel comes from a [[heightmap]] texture, which needs to be created for each parallax mapped material.


==Creating a height map==
Parallax mapping is an enhancement of the [[bump mapping]] technique. It is only worthwhile for textures that have a depth of at least a few centimeters, like deep-set bricks or stone.


Regardless of the way you are going to render parallax maps, creating parallax mapped materials always starts with creating a height map.


Create a copy of your texture in grayscale. White corresponds to the pixels closest to you and black corresponds to pixels farthest from you. Save this as a TGA with <code>_height</code> at the end of the filename and convert it to a [[VTF]]. Put it in the same directory as your texture.


==Adding a parallax map with the built-in support for parallax maps==
==Creating a parallax mapped material==


Add these two lines to your [[VMT]]:
===Creating a heightmap===
 
Regardless of the way you are going to render them, creating parallax mapped materials always starts with [[heightmap|creating a heightmap]], and placing it in the same folder as the texture it belongs to.
 
 
===Adding a parallax map with the built-in support for parallax maps===
 
Add these two lines to your [[VMT|Valve Material (.vmt)]] file:


<code>"$parallaxmap" "''texture name''"</code><br/>
<code>"$parallaxmap" "''texture name''"</code><br/>
<code>"$parallaxmapscale" ''<scale value>''</code>
<code>"$parallaxmapscale" ''<scale value>''</code>


Fill in the path and name of your parallax map on the first line and a number between zero and one on the second line. This number affects how deep the texture will look. 0.05 is an appropriate value for bricks.
Fill in the path and name of your heightmap on the first line, and a number between 0 and 1 on the second line. This number affects how deep the texture will look. <code>0.05</code> is an appropriate value for bricks.


If the bricks in the example brick wall texture were really thick and stuck out from the plaster, a parallax map might be appropriate.  We would create a VTF as described above named <code>brickwall_height.vtf</code> and place it with the other texture files.


Example VMT:
Example VMT:
Line 37: Line 41:
</pre>
</pre>


==Adding a parallax map with the Parallax Occlusion Shader mod==


{{note|This mod is obsolete, and does not work properly with HDR. There is [http://www.hl2world.com/bbs/1-vt46068.html a reincarnation of the Parallax Occlusion Shader mod] by the same author but that only works with models. A brush version is in the works. In the mean time, Parallax Occlusion Shader still works with HDR off.}}
===Adding a parallax map with the Parallax Occlusion Shader mod===
 
{{note|This mod is obsolete, and does not work properly with [[HDR]]. There is [http://www.hl2world.com/bbs/1-vt46068.html a reincarnation of the Parallax Occlusion Shader mod] by the same author but that only works with models. A brush version is in the works. In the meantime, Parallax Occlusion Shader still works with HDR off.}}


First, in the VMT, add after the line
First, in the [[VMT|Valve Material (.vmt)]] file, after the line


<code>"LightmappedGeneric"</code>
<code>"LightmappedGeneric"</code>


this line:
add this line:


<code>//"MN_PrlxLightmappedGeneric"</code>
<code>//"MN_PrlxLightmappedGeneric"</code>
Line 51: Line 56:
When playing a map with your parallax mapped material, comment out the first line. When compiling a map with your parallax mapped material in Hammer, comment out the last line. This (according to the author of the mod) is a workaround to a glitch in Source SDK.
When playing a map with your parallax mapped material, comment out the first line. When compiling a map with your parallax mapped material in Hammer, comment out the last line. This (according to the author of the mod) is a workaround to a glitch in Source SDK.


Finally, add this line to your [[VMT]]:
Finally, add this line to your [[VMT]] file:


<code>"$heightmap" "''texture name''"</code>
<code>"$heightmap" "''texture name''"</code>
Line 78: Line 83:
</nowiki>
</nowiki>
</pre>
</pre>


==See also==
==See also==
Line 84: Line 90:
* [[Normal Map Creation]]
* [[Normal Map Creation]]
* [[Wikipedia:Parallax mapping]]
* [[Wikipedia:Parallax mapping]]


==External links==
==External links==


* [http://wraiyth.freesuperhost.com/development/tutorials/parallax.htm Enabling Parallax mapping in the code]
* [http://wraiyth.freesuperhost.com/development/tutorials/parallax.htm Enabling Parallax mapping in the code]
* [http://files.filefront.com/HL2_ParallaxOcclusionShader1_3_01zip/;5158111;;/fileinfo.html Parallax Occlusion Shader for Half-Life 2 download. NOTE: does not support HDR]
* [http://files.filefront.com/HL2_ParallaxOcclusionShader1_3_01zip/;5158111;;/fileinfo.html The ''Parallax Occlusion Shader'' mod for Half-Life 2 download. NOTE: Does not support HDR.]
* [http://www.hl2world.com/bbs/free-parallax-occlusion-shader-vt43769.html Topic for above mod at HL2world with newest releases. NOTE: does not support HDR]
* [http://www.hl2world.com/bbs/free-parallax-occlusion-shader-vt43769.html Topic for above mod at HL2world with newest releases. NOTE: Does not support HDR.]
* [http://www.hl2world.com/bbs/1-vt46068.html Extended version of the above. Supports HDR but works with models only.]
* [http://www.hl2world.com/bbs/1-vt46068.html Extended version of the above. Supports HDR but works with models only.]


[[Category:Material System]]
[[Category:Material System]]

Revision as of 18:46, 27 August 2007

Merge-arrow.png
It has been suggested that this article or section be moved to Parallax Map Creation. (Discuss)
Note.pngNote:Parallax mapping is currently disabled in the Source Engine shaders. However, it is very easy to implement with custom code; hardly any coding experience is needed. For an installable implementation, see the Extended phong and parallax shader by MihailNajdenov.

Parallax mapping (also known as offset mapping or virtual displacement mapping) is a shading technique that displaces the individual pixel height of a surface, so that when you look at it at an angle, the high points will obscure the low points behind them, making it look three-dimensional. The height data for each pixel comes from a heightmap texture, which needs to be created for each parallax mapped material.

Parallax mapping is an enhancement of the bump mapping technique. It is only worthwhile for textures that have a depth of at least a few centimeters, like deep-set bricks or stone.


Creating a parallax mapped material

Creating a heightmap

Regardless of the way you are going to render them, creating parallax mapped materials always starts with creating a heightmap, and placing it in the same folder as the texture it belongs to.


Adding a parallax map with the built-in support for parallax maps

Add these two lines to your Valve Material (.vmt) file:

"$parallaxmap" "texture name"
"$parallaxmapscale" <scale value>

Fill in the path and name of your heightmap on the first line, and a number between 0 and 1 on the second line. This number affects how deep the texture will look. 0.05 is an appropriate value for bricks.


Example VMT:


"LightmappedGeneric"
{
    "$basetexture"	"walls/brickwall"
    "$surfaceprop"	"brick"
    "$bumpmap"		"walls/brickwall_normal"
    "$parallaxmap"	"walls/brickwall_height"
    "$parallaxmapscale"	0.05
}


Adding a parallax map with the Parallax Occlusion Shader mod

Note.pngNote:This mod is obsolete, and does not work properly with HDR. There is a reincarnation of the Parallax Occlusion Shader mod by the same author but that only works with models. A brush version is in the works. In the meantime, Parallax Occlusion Shader still works with HDR off.

First, in the Valve Material (.vmt) file, after the line

"LightmappedGeneric"

add this line:

//"MN_PrlxLightmappedGeneric"

When playing a map with your parallax mapped material, comment out the first line. When compiling a map with your parallax mapped material in Hammer, comment out the last line. This (according to the author of the mod) is a workaround to a glitch in Source SDK.

Finally, add this line to your VMT file:

"$heightmap" "texture name"

Other parameters you may need:

"$heightscale", defines the "depth" of the effect, takes values 0.0—1.0, default=0.4
"$heightmapsample", default=16
"$envmap"
"$envmapcontrast"
"$envmaptint"
"$NORMALMAPALPHAENVMAPMASK"

Example VMT:


//"LightmappedGeneric"
"MN_PrlxLightmappedGeneric"
{
    "$basetexture"	"walls/brickwall"
    "$surfaceprop"	"brick"
    "$bumpmap"		"walls/brickwall_normal"
    "$heightmap"	"walls/brickwall_height"
}


See also


External links