Shader examples: Difference between revisions

From Multi Theft Auto: Wiki
Jump to navigation Jump to search
No edit summary
m (http > https)
 
(13 intermediate revisions by 2 users not shown)
Line 1: Line 1:
This page contains some example shader resources to try in 1.1. If you are looking to make your own, please be sure to read about the [[Shader|shader element]] as well.
This page contains some example shader resources to try. If you are looking to make your own, please be sure to read about the [[Shader|shader element]] as well.
<br>
<br>
__TOC__
__TOC__
Line 5: Line 5:
[[Image:RoadShineScreen.jpg|200px|thumb|left|Road shine]]
[[Image:RoadShineScreen.jpg|200px|thumb|left|Road shine]]
<table border=0><tr><td valign=top height=170>
<table border=0><tr><td valign=top height=170>
[http://nightly.mtasa.com/files/shaders/shader_roadshine.zip Download shader_roadshine.zip] &nbsp; ''Requires Shader Model 2 graphics card''
[https://nightly.mtasa.com/files/shaders/shader_roadshine.zip Download shader_roadshine.zip] &nbsp; ''Requires Shader Model 2 graphics card''
<br><br>
<br><br>
This resource creates a light reflection effect on the ground (looks best when moving).  
This resource creates a light reflection effect on the ground (looks best when moving).  
It uses a custom flag in the effect file to generate [http://en.wikipedia.org/wiki/Surface_normal surface normals] for the ground model:
It uses a custom flag in the effect file to generate [https://en.wikipedia.org/wiki/Surface_normal surface normals] for the ground model:
<syntaxhighlight lang="lua">
<syntaxhighlight lang="lua">
int CUSTOMFLAGS
int CUSTOMFLAGS
Line 20: Line 20:
[[Image:RoadShine2Screen.jpg|200px|thumb|left|Road shine 2]]
[[Image:RoadShine2Screen.jpg|200px|thumb|left|Road shine 2]]
<table border=0><tr><td valign=top height=170>
<table border=0><tr><td valign=top height=170>
[http://nightly.mtasa.com/files/shaders/shader_roadshine2.zip Download shader_roadshine2.zip] &nbsp; ''Requires Shader Model 2 graphics card''
[https://nightly.mtasa.com/files/shaders/shader_roadshine2.zip Download shader_roadshine2.zip] &nbsp; ''Requires Shader Model 2 graphics card''
<br><br>
<br><br>
Bit more complicated than the first Road shine, as it tracks the sun or moon to calculate the position of the highlight.
Bit more complicated than the first Road shine, as it tracks the sun or moon to calculate the position of the highlight.
Line 26: Line 26:
<br><br>
<br><br>
Best used with the play resource as the model it modifies is near the initial spawn point.
Best used with the play resource as the model it modifies is near the initial spawn point.
</td></tr></table>
==Road shine 3 (Deluxe edition)==
[[Image:RoadShine3Screen.jpg|200px|thumb|left|Road shine 3]]
<table border=0><tr><td valign=top height=170>
[https://nightly.mtasa.com/files/shaders/shader_roadshine3.zip Download shader_roadshine3.zip] &nbsp; ''Requires Shader Model 2 graphics card''
<br><br>
This resource shows how to:
* Stop a wild card match shader from being applied to certain world textures.
* Use isLineOfSightClear to stop an effect when something is not visible (The sun in this case).
* Use a shader maxDrawDistance setting to avoid GPU overload.
The final effect is a faster shader with less rendering issues than the previous two road shine examples.
<br><br>
</td></tr></table>
</td></tr></table>


Line 31: Line 45:
[[Image:UVScollScreen.jpg|200px|thumb|left|UV scroll]]
[[Image:UVScollScreen.jpg|200px|thumb|left|UV scroll]]
<table border=0><tr><td valign=top height=170>
<table border=0><tr><td valign=top height=170>
[http://nightly.mtasa.com/files/shaders/shader_uv_scroll.zip Download shader_uv_scroll.zip]
[https://nightly.mtasa.com/files/shaders/shader_uv_scroll.zip Download shader_uv_scroll.zip]
<br><br>
<br><br>
This resource scrolls a texture from left to right. It doesn't use vertex or pixels shaders, so it should work on all hardware.
This resource scrolls a texture from left to right. It doesn't use vertex or pixels shaders, so it should work on all hardware.
Line 39: Line 53:
[[Image:UVScriptedScreen.jpg|200px|thumb|left|UV scripted]]
[[Image:UVScriptedScreen.jpg|200px|thumb|left|UV scripted]]
<table border=0><tr><td valign=top height=170>
<table border=0><tr><td valign=top height=170>
[http://nightly.mtasa.com/files/shaders/shader_uv_scripted.zip Download shader_uv_scripted.zip]
[https://nightly.mtasa.com/files/shaders/shader_uv_scripted.zip Download shader_uv_scripted.zip]
<br><br>
<br><br>
This resource controls a texture's UVs using Lua. It shows that anything is possible if you can imagine it.
This resource controls a texture's UVs using Lua. It shows that anything is possible if you can imagine it.
</td></tr></table>
==Ped morph==
[[Image:PedMorphScreen.jpg|200px|thumb|left|Ped morph]]
<table border=0><tr><td valign=top height=170>
[http://nightly.mtasa.com/files/shaders/shader_ped_morph.zip Download shader_ped_morph.zip] &nbsp; ''Requires Shader Model 2 graphics card''
<br><br>
This resource uses a vertex shader to modify the geometry of a ped model as it is rendered.
<br><br>
When the resource has started, use the 'k' and 'l' keys to change morph size. If you change your player's skin, restart the resource to modify the new model.
'''**** UPDATE: Due to performance issues, applying shaders to peds has been disabled for 1.1 ****'''
</td></tr></table>
==Ped shell==
[[Image:PedShellScreen.jpg|200px|thumb|left|Ped shell]]
<table border=0><tr><td valign=top height=170>
[http://nightly.mtasa.com/files/shaders/shader_ped_shell.zip Download shader_ped_shell.zip] &nbsp; ''Requires Shader Model 2 graphics card''
<br><br>
This resource draws a translucent effect in a second render pass. The first pass is done by GTA, and the vertex shader is only applied in the second to add the effect 'on top' of the standard output.
<br><br>
When the resource has started, use the 'k' key to see the shell effect. If you change your player's skin, restart the resource to see the effect applied to the new model.
'''**** UPDATE: Due to performance issues, applying shaders to peds has been disabled for 1.1 ****'''
</td></tr></table>
</td></tr></table>


Line 73: Line 61:
[[Image:CarPaintScreen.jpg|200px|thumb|left|Car paint]]
[[Image:CarPaintScreen.jpg|200px|thumb|left|Car paint]]
<table border=0><tr><td valign=top height=170>
<table border=0><tr><td valign=top height=170>
[http://nightly.mtasa.com/files/shaders/shader_car_paint.zip Download shader_car_paint.zip] &nbsp; ''Requires Shader Model 2 graphics card''
[https://nightly.mtasa.com/files/shaders/shader_car_paint.zip Download shader_car_paint.zip] &nbsp; ''Requires Shader Model 2 graphics card''
<br><br>
<br><br>
This resource shows you how to apply a shader to the vehicle models. The shader itself is not that great, so don't get your hopes up.
This resource shows you how to apply a shader to the vehicle models. The shader itself is not that great, so don't get your hopes up.
Line 81: Line 69:
[[Image:WaterScreen.jpg|200px|thumb|left|Water]]
[[Image:WaterScreen.jpg|200px|thumb|left|Water]]
<table border=0><tr><td valign=top height=170>
<table border=0><tr><td valign=top height=170>
[http://nightly.mtasa.com/files/shaders/shader_water.zip Download shader_water.zip] &nbsp; ''Requires Shader Model 2 graphics card''
[https://nightly.mtasa.com/files/shaders/shader_water.zip Download shader_water.zip] &nbsp; ''Requires Shader Model 2 graphics card''
<br><br>
<br><br>
This resource applies a shader to the GTA world water. The Lua script shows how to use a timer to transfer the conventional water color setting to the shader.
This resource applies a shader to the GTA world water. The Lua script shows how to use a timer to transfer the conventional water color setting to the shader.
Line 89: Line 77:
[[Image:BloomScreen.jpg|200px|thumb|left|Bloom]]
[[Image:BloomScreen.jpg|200px|thumb|left|Bloom]]
<table border=0><tr><td valign=top height=170>
<table border=0><tr><td valign=top height=170>
[http://nightly.mtasa.com/files/shaders/shader_bloom.zip Download shader_bloom.zip] &nbsp; ''Requires Shader Model 2 graphics card''
[https://nightly.mtasa.com/files/shaders/shader_bloom.zip Download shader_bloom.zip] &nbsp; ''Requires Shader Model 2 graphics card''
<br><br>
<br><br>
This resource shows you how 'bounce' full screen effects using a render target pool. It also uses the new ''onClientHUDRender'' event to exclude the HUD from the effect.
This resource shows you how 'bounce' full screen effects using a render target pool. It uses the ''onClientHUDRender'' event to exclude the HUD from the effect.
</td></tr></table>
</td></tr></table>


Line 97: Line 85:
[[Image:BlockWorld.jpg|200px|thumb|left|Block world]]
[[Image:BlockWorld.jpg|200px|thumb|left|Block world]]
<table border=0><tr><td valign=top height=170>
<table border=0><tr><td valign=top height=170>
[http://nightly.mtasa.com/files/shaders/shader_block_world.zip Download shader_block_world.zip] &nbsp; ''Requires Shader Model 2 graphics card''
[https://nightly.mtasa.com/files/shaders/shader_block_world.zip Download shader_block_world.zip] &nbsp; ''Requires Shader Model 2 graphics card''
<br><br>
<br><br>
This resource makes the textures look all blocky. It also changes colors when the 'k' key is pressed.
This resource makes the textures look all blocky. It also changes colors when the 'k' key is pressed.
Line 105: Line 93:
[[Image:TexNames.jpg|200px|thumb|left|Texture names]]
[[Image:TexNames.jpg|200px|thumb|left|Texture names]]
<table border=0><tr><td valign=top height=170>
<table border=0><tr><td valign=top height=170>
[http://nightly.mtasa.com/files/shaders/shader_tex_names.zip Download shader_tex_names.zip]
[https://nightly.mtasa.com/files/shaders/shader_tex_names.zip Download shader_tex_names.zip]
<br><br>
<br><br>
This resource is only a tool, and doesn't do anything pretty. It shows a list of the current visible texture names, and highlights the selected texture. Ideal for finding a texture name to use with [[engineApplyShaderToWorldTexture]].
This resource is only a tool, and doesn't do anything pretty. It shows a list of the current visible texture names, and highlights the selected texture. Ideal for finding a texture name to use with [[engineApplyShaderToWorldTexture]].
Line 112: Line 100:
</td></tr></table>
</td></tr></table>


==Road shine 3 (Deluxe edition)==
==Skid marks==
[[Image:RoadShine3Screen.jpg|200px|thumb|left|Road shine 3]]
[[Image:SkidMarks.jpg|200px|thumb|left|Skid marks]]
<table border=0><tr><td valign=top height=170>
[https://nightly.mtasa.com/files/shaders/shader_skidmarks.zip Download shader_skidmarks.zip] &nbsp; ''Requires Shader Model 2 graphics card''
<br><br>
This resource shows you how to do multiple passes in a shader, and input different variables to the vertex shader for each pass.
Use the command '''/skidmarks 1-4''' to see the different effects. (You have skid a car to see it!)
<br><br>
</td></tr></table>
 
==HDR contrast==
[[Image:ShaderContrast.jpg|200px|thumb|left|HDR contrast]]
<table border=0><tr><td valign=top height=170>
[https://nightly.mtasa.com/files/shaders/shader_contrast.zip Download shader_contrast.zip] &nbsp; ''Requires Shader Model 2 graphics card''
<br><br>
This resource applies a 'High Dynamic Range' contrast effect. It uses a 1 pixel render target to sample the whole scene, and then uses that to brighten or darken the next frame.
So going into somewhere dark will automatically brighten the scene, and visa versa
<br><br>
</td></tr></table>
 
==Tessellation==
[[Image:shader_flag.jpg|200px|thumb|left|Tessellation action]]
<table border=0><tr><td valign=top height=170>
[https://nightly.mtasa.com/files/shaders/shader_flag.zip Download shader_flag.zip] &nbsp; ''Requires Shader Model 2 graphics card''
<br><br>
This resource shows how to use shader tessellation to animate the shape of a dxDrawImage and use shader transform to give it a 3rd dimension.
 
The example has a GUI (press numpad-8) so you can fiddle with the settings.
<br><br>
</td></tr></table>
 
==Radial blur==
[[Image:shader_radial_blur.jpg|200px|thumb|left|Radial blur]]
<table border=0><tr><td valign=top height=170>
[https://nightly.mtasa.com/files/shaders/shader_radial_blur.zip Download shader_radial_blur.zip] &nbsp; ''Requires Shader Model 2 graphics card''
<br><br>
This resource sort of looks a little bit like the GTAIV motion blur you get when you move the mouse quickly, or drive a fast car. The fast car effect is a bit more subtle than the screen shot would suggest, as it leaves the center of the screen nice and clear so you can see where you are going.
 
It also has the option of suspending the effect during times of low FPS. Check the two settings at the top of '''''c_radial_blur.lua'''''.
<br><br>
The file '''''c_switch.lua''''' contains information on how to toggle the effect from another resource using events.
<br><br>
</td></tr></table>
 
==Detail==
[[Image:shader_detail.jpg|200px|thumb|left|Detail]]
<table border=0><tr><td valign=top height=170>
[https://nightly.mtasa.com/files/shaders/shader_detail.zip Download shader_detail.zip] &nbsp; ''Requires Shader Model 2 graphics card''
<br><br>
Applies a few monochrome detail textures, at various scales, to (parts of) the world.
 
(Not finished and probably never will be.)
 
</td></tr></table>
 
==Ped morph==
[[Image:PedMorphScreen.jpg|200px|thumb|left|Ped morph]]
<table border=0><tr><td valign=top height=170>
[https://nightly.mtasa.com/files/shaders/shader_ped_morph.zip Download shader_ped_morph.zip] &nbsp; ''Requires Shader Model 2 graphics card''
<br><br>
This resource uses a vertex shader to modify the geometry of a ped model as it is rendered.
<br><br>
When the resource has started, use the 'k' and 'l' keys to change morph size.
 
</td></tr></table>
 
==Ped shell==
[[Image:PedShellScreen.jpg|200px|thumb|left|Ped shell]]
<table border=0><tr><td valign=top height=170>
<table border=0><tr><td valign=top height=170>
[http://nightly.mtasa.com/files/shaders/shader_roadshine3.zip Download shader_roadshine3.zip] <sup>''v0.1.3 updated 2011-10-09''</sup>&nbsp; ''Requires Shader Model 2 graphics card''
[https://nightly.mtasa.com/files/shaders/shader_ped_shell.zip Download shader_ped_shell.zip] &nbsp; ''Requires Shader Model 2 graphics card''
<br><br>
This resource draws a translucent effect as a shader layer. The first pass is done by GTA, and the vertex shader is only applied in the second to add the effect 'on top' of the standard output.
<br><br>
<br><br>
This resource shows how to:
When the resource has started, use the 'm' key to see the shell effect.
* Stop a wild card match shader from being applied to certain world textures.
 
* Use isLineOfSightClear to stop an effect when something is not visible (The sun in this case).
</td></tr></table>
* Use a shader maxDrawDistance setting to avoid GPU overload.


The final effect is a faster shader with less rendering issues than the previous two road shine examples.
==Hud mask==
[[Image:Shader_hud_mask.jpg|200px|thumb|left|Hud mask]]
<table border=0><tr><td valign=top height=170>
[https://nightly.mtasa.com/files/shaders/shader_hud_mask.zip Download shader_hud_mask.zip]
<br><br>
<br><br>
This resource shows how to draw a hud texture with a shape mask.
</td></tr></table>
</td></tr></table>


==Skid marks==
==dxDrawCircle==
[[Image:SkidMarks.jpg|200px|thumb|left|Skid marks]]
[[Image:dxDrawCircle.jpg|200px|thumb|left|dxDrawCircle]]
<table border=0><tr><td valign=top height=170>
<table border=0><tr><td valign=top height=170>
[http://nightly.mtasa.com/files/shaders/shader_skidmarks.zip Download shader_skidmarks.zip] &nbsp; ''Requires Shader Model 2 graphics card''
[https://nightly.mtasa.com/files/shaders/shader_circle.zip Download shader_circle.zip]
<br><br>
<br><br>
This resource shows you how to do multiple passes in a shader, and pass different variables to the vertex shader for each pass.
This resource exports a 'dxDrawCircle' function for use in your own scripts.
Use the command '''/skidmarks 1-4''' to see the different effects. (You have skid a car to see it!)
<br><br>
<br><br>
Example resource calling dxDrawCircle function from shader_circle: [https://nightly.mtasa.com/files/shaders/circle_example.zip circle_example.zip]
</td></tr></table>
</td></tr></table>

Latest revision as of 18:51, 25 March 2021

This page contains some example shader resources to try. If you are looking to make your own, please be sure to read about the shader element as well.

Road shine

Road shine

Download shader_roadshine.zip   Requires Shader Model 2 graphics card

This resource creates a light reflection effect on the ground (looks best when moving). It uses a custom flag in the effect file to generate surface normals for the ground model:

int CUSTOMFLAGS
<
    string createNormals = "yes";
>;

Surface normals are not usually present in the ground and building models, but are useful for creating lighting effects such as these.

Road shine 2

Road shine 2

Download shader_roadshine2.zip   Requires Shader Model 2 graphics card

Bit more complicated than the first Road shine, as it tracks the sun or moon to calculate the position of the highlight. The effect can be hard to see depending on the time of day.

Best used with the play resource as the model it modifies is near the initial spawn point.

Road shine 3 (Deluxe edition)

Road shine 3

Download shader_roadshine3.zip   Requires Shader Model 2 graphics card

This resource shows how to:

  • Stop a wild card match shader from being applied to certain world textures.
  • Use isLineOfSightClear to stop an effect when something is not visible (The sun in this case).
  • Use a shader maxDrawDistance setting to avoid GPU overload.

The final effect is a faster shader with less rendering issues than the previous two road shine examples.

UV scroll

UV scroll

Download shader_uv_scroll.zip

This resource scrolls a texture from left to right. It doesn't use vertex or pixels shaders, so it should work on all hardware.

UV scripted

UV scripted

Download shader_uv_scripted.zip

This resource controls a texture's UVs using Lua. It shows that anything is possible if you can imagine it.

Car paint

Car paint

Download shader_car_paint.zip   Requires Shader Model 2 graphics card

This resource shows you how to apply a shader to the vehicle models. The shader itself is not that great, so don't get your hopes up.

Water

Water

Download shader_water.zip   Requires Shader Model 2 graphics card

This resource applies a shader to the GTA world water. The Lua script shows how to use a timer to transfer the conventional water color setting to the shader.

Bloom

Bloom

Download shader_bloom.zip   Requires Shader Model 2 graphics card

This resource shows you how 'bounce' full screen effects using a render target pool. It uses the onClientHUDRender event to exclude the HUD from the effect.

Block world

Block world

Download shader_block_world.zip   Requires Shader Model 2 graphics card

This resource makes the textures look all blocky. It also changes colors when the 'k' key is pressed.

Texture names

Texture names

Download shader_tex_names.zip

This resource is only a tool, and doesn't do anything pretty. It shows a list of the current visible texture names, and highlights the selected texture. Ideal for finding a texture name to use with engineApplyShaderToWorldTexture.

num_8 shows/hides the texture list, num_7 and num_9 step through the list, and 'k' copies the current texture name to the clipboard.

Skid marks

Skid marks

Download shader_skidmarks.zip   Requires Shader Model 2 graphics card

This resource shows you how to do multiple passes in a shader, and input different variables to the vertex shader for each pass. Use the command /skidmarks 1-4 to see the different effects. (You have skid a car to see it!)

HDR contrast

HDR contrast

Download shader_contrast.zip   Requires Shader Model 2 graphics card

This resource applies a 'High Dynamic Range' contrast effect. It uses a 1 pixel render target to sample the whole scene, and then uses that to brighten or darken the next frame. So going into somewhere dark will automatically brighten the scene, and visa versa

Tessellation

Tessellation action

Download shader_flag.zip   Requires Shader Model 2 graphics card

This resource shows how to use shader tessellation to animate the shape of a dxDrawImage and use shader transform to give it a 3rd dimension.

The example has a GUI (press numpad-8) so you can fiddle with the settings.

Radial blur

Radial blur

Download shader_radial_blur.zip   Requires Shader Model 2 graphics card

This resource sort of looks a little bit like the GTAIV motion blur you get when you move the mouse quickly, or drive a fast car. The fast car effect is a bit more subtle than the screen shot would suggest, as it leaves the center of the screen nice and clear so you can see where you are going.

It also has the option of suspending the effect during times of low FPS. Check the two settings at the top of c_radial_blur.lua.

The file c_switch.lua contains information on how to toggle the effect from another resource using events.

Detail

Detail

Download shader_detail.zip   Requires Shader Model 2 graphics card

Applies a few monochrome detail textures, at various scales, to (parts of) the world.

(Not finished and probably never will be.)

Ped morph

Ped morph

Download shader_ped_morph.zip   Requires Shader Model 2 graphics card

This resource uses a vertex shader to modify the geometry of a ped model as it is rendered.

When the resource has started, use the 'k' and 'l' keys to change morph size.

Ped shell

Ped shell

Download shader_ped_shell.zip   Requires Shader Model 2 graphics card

This resource draws a translucent effect as a shader layer. The first pass is done by GTA, and the vertex shader is only applied in the second to add the effect 'on top' of the standard output.

When the resource has started, use the 'm' key to see the shell effect.

Hud mask

Hud mask

Download shader_hud_mask.zip

This resource shows how to draw a hud texture with a shape mask.

dxDrawCircle

dxDrawCircle

Download shader_circle.zip

This resource exports a 'dxDrawCircle' function for use in your own scripts.

Example resource calling dxDrawCircle function from shader_circle: circle_example.zip