One way to achieve the effect in the picture is to project the circle texture on to the stairs.
To do this you want to do something like the following:
-Setup a camera that looks down on the character, orthogonal to the ground plane.
-When drawing the ground, calculate the projective texture coordinates to sample the circle texture using the camera's view and projection matrices.
-Combine the color of the texture with the color of the ground.
Here's how you would generate projective texture coordinates to sample the circle texture:
| float4x4 WorldViewProj; |
| float4x4 DecalCameraViewProj; |
| |
| texture DecalHighlightTexture; |
| |
| sampler Sampler = sampler_state |
| { |
| Texture = <DecalHighlightTexture>; |
| }; |
| |
| struct OutputVS |
| { |
| float4 posH : POSITION0; |
| float4 projTexCoords : TEXCOORD0; |
| }; |
| |
| OutputVS VS(float3 posL : POSITION0) |
| { |
| OutputVS OUT = (OutputVS)0; |
| |
| OUT.posH = mul(float4(posL, 1.0f), WorldViewProj); |
| |
| //now, project the point with the camera used to capture the object |
| //and pass this to the pixel shader |
| OUT.projTexCoords = mul(float4(posL, 1.0f), DecalCameraViewProj); |
| |
| return OUT; |
| } |
| |
| float4 PS(float4 projTexCoords : TEXCOORD0) : COLOR0 |
| { |
| //calcuate the projection texture coordinates |
| |
| //perform the perspective divide |
| projTexCoords.xy /= projTexCoords.w; |
| |
| //now scale and offset the texture coordinates to [0, 1] |
| projTexCoords.x = .5f * projTexCoords.x + .5f; |
| projTexCoords.y = -.5f * projTexCoords.y + .5f; |
| |
| //now use these texture coordinates to sample the texture of the object |
| float4 decal = tex2D(Sampler, projTexCoords); |
| |
| //... do shading as usual for your ground and add the highlight// |
| //e.g. FinalColor = groundColor + decal |
| } |
To animate the decal texture, you could simply use a sprite sheet and just supply the shader with the current frame in the animation.