theli
11-30-2009, 09:54 AM
How to make Simple Texture "Animations"
A guide by theli.
Last note: after looking through this 'guide' i realized it is pretty crappy and confusing ... but i'm already got to bored writing it for today :D
In this guide, I'm going to explain the process of creating some trivial texture animations. I will be explaining the process with Warchamp7's Chameleon Magmus. (http://forums.heroesofnewerth.com/showthread.php?t=36474)
The goal we'll have in this 'guide' is to make Magmus' lava color (which takes TeamColor in Warchamp7's modification) fade from one color to another with time.
Getting Started
Our goal can be achieved in several ways, but each way assumes using shaders (http://en.wikipedia.org/wiki/Shaders).
"In the field of computer graphics, a shader is a set of software instructions, which is used primarily to calculate rendering effects on graphics hardware with a high degree of flexibility".
So, basically, shader is a script which can manipulate model's vertices and textures' colors and is executed on GPU.
There are several languages for writing shaders. HoN uses HLSL (http://en.wikipedia.org/wiki/HLSL) for its Direct3D (Windows) renderer and GLSL (http://en.wikipedia.org/wiki/GLSL) for its OpenGL (Linux and Mac) renderer.
As i already said - there are several ways to achieve our goal. We will use the simplest - lookup texture.
The Files
We will need to modify material file, alpha map texture (so we know where to apply our fading color), and a gradient lookup texture
Textures
For an alpha map and diffuse we will just take Warchamp7's textures, and for color lookup texture we'll create a single pixel height pictures with colors fading from one player's color to another:
http://img225.imageshack.us/img225/1706/gradientn.png
Material
Variable Parameters
We need our 'color picker' move along our lookup texture. To do this we will define a variable parameter. Take a look at heroes/magmar/material.material, at parameters section:
<parameters vDiffuseColor="1.0000 1.0000 1.0000" fSpecularLevel="1.0000" fGlossiness="56" fOpacity="1.0000" fReflect="1.0000"/>This section define parameters which then are passed to shader program. We need a parameter which changes with time. so lets define it:
<parameters vDiffuseColor="1.0000 1.0000 1.0000" fSpecularLevel="1.0000" fGlossiness="56" fOpacity="1.0000" fReflect="1.0000">
<vec2 name="vBGOffset" value="0 0" valuespeed="0.1 0" /> </parameters>Here, vec2 is a type of parameter - i our case this is a struct of two float values - we will use it as a x,y coordinate in our lookup texture, name is a name with which we can access this variable, value is a starting value and valuespeed is amount by which value will change each frame (if you need it to decrease specify with '-' sign). We have two values in valuespeed attribute since our variable consists of two floats.
Samplers
Sampler is a way to access our textures in a shader program. Samplers are defined for each of rendering phases, in such way:
<sampler name="gradient" texture="gradient.tga" repeat_u="true" repeat_v="true" scale_u="1.0000" scale_v="1.0000" fps="15" mipmaps="true" fullquality="false" nocompress="false" filtering="true" border="false" />
I will not explain each of the attribute, a curious modder will figure it by himself :p . For now I will only say that we access them by name attribute and texture is for specifying a filename.
In such way we specify Warchamp7's Chameleon.tga as opacity sampler for shadow,depth and fade phases, the same Chameleon.tga as diffuse sampler for color phase and second pass of fade phase. We will call our own alpha map as gradientmask, lookup texture as gradient and specify them for color phase and second pass of fade phase. (look at included mod's material.material)
Shaders
Each phase (or phase's pass) definition specifies Vertex and Pixel shaders to use for a particular pass:
<phase name="color" vs="mesh_color_unit" ps="mesh_color_unit_team_lightmap_gradient" ...
VS is for Vertex Shader (vertices manipulation) and PS is for Pixel Shader (color manipulation). Here we changed default PS shader "mesh_color_unit_team_lightmap" to our own "mesh_color_unit_team_lightmap_gradient"
Shaders
You can find game's shaders in core/shaders unpacked (Windows) or packed into resources0.s2z (Linux and Mac users).
Unfortunately, windows version does not allow shaders to be packed into resources* file.. so this 'mod' will have it unpacked..
ps_2_0, ps_3_0, vs_2_0, vs_3_0 contain HLSL (windows) shaders for different (2.0, 3.0) profiles
vs_glsl and ps_glsl contain GLSL (Linux/Mac) shaders.
We will base out shader on originally specified shader, so just go to core/shaders/ps_2_0 and copy "mesh_color_unit_team_lightmap.ps" to "mesh_color_unit_team_lightmap_gradient.ps" on which we will be working.
First we need to specify our global variables so that we can have access to our new samplers and color offset variable, add this to file in some plave before the main procedure "PS_OUTPUT PS( VS_OUTPUT In )" start:
float2 vBGOffset;
sampler gradient;
sampler gradientmap;
(float2 is how vec2 is called in HLSL)
next, we need to use that :)
find this string:
cDiffuseColor.rgb *= lerp(float3(1.0, 1.0, 1.0), vTeamColor, tex2D(team, In.Texcoord0).a);and after it add this:
float4 GradientColor = tex2D(gradient, vBGOffset);
cDiffuseColor.rgb *= lerp(float3(1.0, 1.0, 1.0), GradientColor, tex2D(gradientmap, In.Texcoord0).a);Here, in a first string we pick our color from 'gradient' sampler using our variable coordinates specified in material file. Next we get alpha from our alphamap (gradientmap sampler), and mix it with diffuse color. 'lerp' is built-in linear interpolation function.
Thats it :eek: , now we have this crappy magmus with lava color changing over time:
http://img153.imageshack.us/img153/6141/cropped.gif
Here (http://omploader.org/vMnZ6Ng/TrulyChameleonMagmus.zip) you can download this rather crappy mod :o , just unpack it to your 'game' directory
(it contains resources1999.s2z and core/shaders/ps_2_0/mesh_color_unit_team_lightmap_gradient.ps )
upd: linux/mac version, single s2z resourcesCHameleonFadingMagmus.s2z (http://omploader.org/vMncweQ/resourcesCHameleonFadingMagmus.s2z)
PS: andromeda's skin is done the same way
A guide by theli.
Last note: after looking through this 'guide' i realized it is pretty crappy and confusing ... but i'm already got to bored writing it for today :D
In this guide, I'm going to explain the process of creating some trivial texture animations. I will be explaining the process with Warchamp7's Chameleon Magmus. (http://forums.heroesofnewerth.com/showthread.php?t=36474)
The goal we'll have in this 'guide' is to make Magmus' lava color (which takes TeamColor in Warchamp7's modification) fade from one color to another with time.
Getting Started
Our goal can be achieved in several ways, but each way assumes using shaders (http://en.wikipedia.org/wiki/Shaders).
"In the field of computer graphics, a shader is a set of software instructions, which is used primarily to calculate rendering effects on graphics hardware with a high degree of flexibility".
So, basically, shader is a script which can manipulate model's vertices and textures' colors and is executed on GPU.
There are several languages for writing shaders. HoN uses HLSL (http://en.wikipedia.org/wiki/HLSL) for its Direct3D (Windows) renderer and GLSL (http://en.wikipedia.org/wiki/GLSL) for its OpenGL (Linux and Mac) renderer.
As i already said - there are several ways to achieve our goal. We will use the simplest - lookup texture.
The Files
We will need to modify material file, alpha map texture (so we know where to apply our fading color), and a gradient lookup texture
Textures
For an alpha map and diffuse we will just take Warchamp7's textures, and for color lookup texture we'll create a single pixel height pictures with colors fading from one player's color to another:
http://img225.imageshack.us/img225/1706/gradientn.png
Material
Variable Parameters
We need our 'color picker' move along our lookup texture. To do this we will define a variable parameter. Take a look at heroes/magmar/material.material, at parameters section:
<parameters vDiffuseColor="1.0000 1.0000 1.0000" fSpecularLevel="1.0000" fGlossiness="56" fOpacity="1.0000" fReflect="1.0000"/>This section define parameters which then are passed to shader program. We need a parameter which changes with time. so lets define it:
<parameters vDiffuseColor="1.0000 1.0000 1.0000" fSpecularLevel="1.0000" fGlossiness="56" fOpacity="1.0000" fReflect="1.0000">
<vec2 name="vBGOffset" value="0 0" valuespeed="0.1 0" /> </parameters>Here, vec2 is a type of parameter - i our case this is a struct of two float values - we will use it as a x,y coordinate in our lookup texture, name is a name with which we can access this variable, value is a starting value and valuespeed is amount by which value will change each frame (if you need it to decrease specify with '-' sign). We have two values in valuespeed attribute since our variable consists of two floats.
Samplers
Sampler is a way to access our textures in a shader program. Samplers are defined for each of rendering phases, in such way:
<sampler name="gradient" texture="gradient.tga" repeat_u="true" repeat_v="true" scale_u="1.0000" scale_v="1.0000" fps="15" mipmaps="true" fullquality="false" nocompress="false" filtering="true" border="false" />
I will not explain each of the attribute, a curious modder will figure it by himself :p . For now I will only say that we access them by name attribute and texture is for specifying a filename.
In such way we specify Warchamp7's Chameleon.tga as opacity sampler for shadow,depth and fade phases, the same Chameleon.tga as diffuse sampler for color phase and second pass of fade phase. We will call our own alpha map as gradientmask, lookup texture as gradient and specify them for color phase and second pass of fade phase. (look at included mod's material.material)
Shaders
Each phase (or phase's pass) definition specifies Vertex and Pixel shaders to use for a particular pass:
<phase name="color" vs="mesh_color_unit" ps="mesh_color_unit_team_lightmap_gradient" ...
VS is for Vertex Shader (vertices manipulation) and PS is for Pixel Shader (color manipulation). Here we changed default PS shader "mesh_color_unit_team_lightmap" to our own "mesh_color_unit_team_lightmap_gradient"
Shaders
You can find game's shaders in core/shaders unpacked (Windows) or packed into resources0.s2z (Linux and Mac users).
Unfortunately, windows version does not allow shaders to be packed into resources* file.. so this 'mod' will have it unpacked..
ps_2_0, ps_3_0, vs_2_0, vs_3_0 contain HLSL (windows) shaders for different (2.0, 3.0) profiles
vs_glsl and ps_glsl contain GLSL (Linux/Mac) shaders.
We will base out shader on originally specified shader, so just go to core/shaders/ps_2_0 and copy "mesh_color_unit_team_lightmap.ps" to "mesh_color_unit_team_lightmap_gradient.ps" on which we will be working.
First we need to specify our global variables so that we can have access to our new samplers and color offset variable, add this to file in some plave before the main procedure "PS_OUTPUT PS( VS_OUTPUT In )" start:
float2 vBGOffset;
sampler gradient;
sampler gradientmap;
(float2 is how vec2 is called in HLSL)
next, we need to use that :)
find this string:
cDiffuseColor.rgb *= lerp(float3(1.0, 1.0, 1.0), vTeamColor, tex2D(team, In.Texcoord0).a);and after it add this:
float4 GradientColor = tex2D(gradient, vBGOffset);
cDiffuseColor.rgb *= lerp(float3(1.0, 1.0, 1.0), GradientColor, tex2D(gradientmap, In.Texcoord0).a);Here, in a first string we pick our color from 'gradient' sampler using our variable coordinates specified in material file. Next we get alpha from our alphamap (gradientmap sampler), and mix it with diffuse color. 'lerp' is built-in linear interpolation function.
Thats it :eek: , now we have this crappy magmus with lava color changing over time:
http://img153.imageshack.us/img153/6141/cropped.gif
Here (http://omploader.org/vMnZ6Ng/TrulyChameleonMagmus.zip) you can download this rather crappy mod :o , just unpack it to your 'game' directory
(it contains resources1999.s2z and core/shaders/ps_2_0/mesh_color_unit_team_lightmap_gradient.ps )
upd: linux/mac version, single s2z resourcesCHameleonFadingMagmus.s2z (http://omploader.org/vMncweQ/resourcesCHameleonFadingMagmus.s2z)
PS: andromeda's skin is done the same way