Skip to content

Commit 9028efe

Browse files
FileEXFileEX
committed
Update shaders.mdx
1 parent 1a3c6c6 commit 9028efe

File tree

1 file changed

+129
-130
lines changed

1 file changed

+129
-130
lines changed

‎web/src/content/docs/articles/shaders.mdx‎

Lines changed: 129 additions & 130 deletions
Original file line numberDiff line numberDiff line change
@@ -415,135 +415,6 @@ technique simple
415415
}
416416
```
417417

418-
## Shader examples
419-
420-
<div style="display: flex; flex-direction: column; gap: 0.5rem; border: 1px solid var(--sl-color-gray-5); padding: 10px;">
421-
### Roadshine
422-
<div style="display: flex; flex-direction: row; gap: 1rem;">
423-
<Image src={getAssetImagePath("Shaders/roadshine.jpg")} alt="Roadshine" />
424-
This resource creates a light reflection effect on the ground (looks best when moving).<br/>
425-
<a href="https://nightly.mtasa.com/files/shaders/shader_roadshine3.zip">Download</a>
426-
</div>
427-
428-
### UV Scroll
429-
<div style="display: flex; flex-direction: row; gap: 1rem;">
430-
<Image src={getAssetImagePath("Shaders/uvscroll.jpg")} alt="UV scroll" />
431-
This resource scrolls a texture from left to right. It doesn't use vertex or pixels shaders, so it should work on all hardware.<br/>
432-
<a href="https://nightly.mtasa.com/files/shaders/shader_uv_scroll.zip">Download</a>
433-
</div>
434-
435-
### UV scripted
436-
<div style="display: flex; flex-direction: row; gap: 1rem;">
437-
<Image src={getAssetImagePath("Shaders/uvscripted.jpg")} alt="UV scripted" />
438-
This resource controls a texture's UVs using Lua. It shows that anything is possible if you can imagine it.<br/>
439-
<a href="https://nightly.mtasa.com/files/shaders/shader_uv_scripted.zip">Download</a>
440-
</div>
441-
442-
### Car paint
443-
<div style="display: flex; flex-direction: row; gap: 1rem;">
444-
<Image src={getAssetImagePath("Shaders/carpaint.jpg")} alt="Car paint" />
445-
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.<br/>
446-
<a href="https://nightly.mtasa.com/files/shaders/shader_car_paint.zip">Download</a>
447-
</div>
448-
449-
### Water
450-
<div style="display: flex; flex-direction: row; gap: 1rem;">
451-
<Image src={getAssetImagePath("Shaders/water.jpg")} alt="Water shader" />
452-
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.<br/>
453-
<a href="https://nightly.mtasa.com/files/shaders/shader_water.zip">Download</a>
454-
</div>
455-
456-
### Bloom
457-
<div style="display: flex; flex-direction: row; gap: 1rem;">
458-
<Image src={getAssetImagePath("Shaders/bloom.jpg")} alt="Bloom" />
459-
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.<br/>
460-
<a href="https://nightly.mtasa.com/files/shaders/shader_bloom.zip">Download</a>
461-
</div>
462-
463-
### Block world
464-
<div style="display: flex; flex-direction: row; gap: 1rem;">
465-
<Image src={getAssetImagePath("Shaders/blockworld.jpg")} alt="Block world" />
466-
This resource makes the textures look all blocky. It also changes colors when the 'k' key is pressed.<br/>
467-
<a href="https://nightly.mtasa.com/files/shaders/shader_block_world.zip">Download</a>
468-
</div>
469-
470-
### Texture names
471-
<div style="display: flex; flex-direction: row; gap: 1rem;">
472-
<Image src={getAssetImagePath("Shaders/texnames.jpg")} alt="Texture names" />
473-
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 <a href="/reference/engineApplyShaderToWorldTexture">engineApplyShaderToWorldTexture</a>.<br/><br/>
474-
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.<br/>
475-
<a href="https://nightly.mtasa.com/files/shaders/shader_tex_names.zip">Download</a>
476-
</div>
477-
478-
### Skid marks
479-
<div style="display: flex; flex-direction: row; gap: 1rem;">
480-
<Image src={getAssetImagePath("Shaders/skidmarks.jpg")} alt="Skid marks" />
481-
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/>
482-
<a href="https://nightly.mtasa.com/files/shaders/shader_skidmarks.zip">Download</a>
483-
</div>
484-
485-
### HDR contrast
486-
<div style="display: flex; flex-direction: row; gap: 1rem;">
487-
<Image src={getAssetImagePath("Shaders/hdr.jpg")} alt="HDR" />
488-
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/>
489-
<a href="https://nightly.mtasa.com/files/shaders/shader_contrast.zip">Download</a>
490-
</div>
491-
492-
### Tessellation
493-
<div style="display: flex; flex-direction: row; gap: 1rem;">
494-
<Image src={getAssetImagePath("Shaders/tesselation.jpg")} alt="Tesselation" />
495-
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.<br/>
496-
The example has a GUI (press numpad-8) so you can fiddle with the settings.<br/>
497-
<a href="https://nightly.mtasa.com/files/shaders/shader_flag.zip">Download</a>
498-
</div>
499-
500-
### Radial blur
501-
<div style="display: flex; flex-direction: row; gap: 1rem;">
502-
<Image src={getAssetImagePath("Shaders/radialblur.jpg")} alt="Radial blur" />
503-
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.<br/>
504-
<a href="https://nightly.mtasa.com/files/shaders/shader_radial_blur.zip">Download</a>
505-
</div>
506-
507-
### Detail
508-
<div style="display: flex; flex-direction: row; gap: 1rem;">
509-
<Image src={getAssetImagePath("Shaders/detail.jpg")} alt="Details" />
510-
Applies a few monochrome detail textures, at various scales, to (parts of) the world.<br/>
511-
<a href="https://nightly.mtasa.com/files/shaders/shader_detail.zip">Download</a>
512-
</div>
513-
514-
### Ped morph
515-
<div style="display: flex; flex-direction: row; gap: 1rem;">
516-
<Image src={getAssetImagePath("Shaders/pedmorph.jpg")} alt="Ped morph" />
517-
This resource uses a vertex shader to modify the geometry of a ped model as it is rendered.<br/><br/>
518-
When the resource has started, use the 'k' and 'l' keys to change morph size.<br/>
519-
<a href="https://nightly.mtasa.com/files/shaders/shader_ped_morph.zip">Download</a>
520-
</div>
521-
522-
### Ped shell
523-
<div style="display: flex; flex-direction: row; gap: 1rem;">
524-
<Image src={getAssetImagePath("Shaders/pedshell.jpg")} alt="Ped shell" />
525-
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/>
526-
When the resource has started, use the 'm' key to see the shell effect.<br/>
527-
<a href="https://nightly.mtasa.com/files/shaders/shader_ped_shell.zip">Download</a>
528-
</div>
529-
530-
### Hud mask
531-
<div style="display: flex; flex-direction: row; gap: 1rem;">
532-
<Image src={getAssetImagePath("Shaders/hud_mask.jpg")} alt="HUD mask" />
533-
This resource shows how to draw a hud texture with a shape mask.<br/>
534-
<a href="https://nightly.mtasa.com/files/shaders/shader_hud_mask.zip">Download</a>
535-
</div>
536-
537-
### Circle
538-
<div style="display: flex; flex-direction: row; gap: 1rem;">
539-
<Image src={getAssetImagePath("Shaders/circle.jpg")} alt="dxDrawCircle" />
540-
This resource exports a 'dxDrawCircle' function for use in your own scripts.<br/><br/>
541-
Example resource calling dxDrawCircle function from shader_circle: <a href="https://nightly.mtasa.com/files/shaders/circle_example.zip">circle_example.zip</a><br/>
542-
<a href="https://nightly.mtasa.com/files/shaders/shader_circle.zip">Download</a>
543-
</div>
544-
</div>
545-
546-
<br/>
547418
## MTA Shader Semantics
548419
HLSL fields are **case-insensitive**
549420

@@ -816,4 +687,132 @@ int Color0;
816687
int Color1;
817688
int TexCoord0;
818689
int TexCoord1;
819-
```
690+
```
691+
692+
## Shader examples
693+
694+
<div style="display: flex; flex-direction: column; gap: 0.5rem; border: 1px solid var(--sl-color-gray-5); padding: 10px;">
695+
### Roadshine
696+
<div style="display: flex; flex-direction: row; gap: 1rem;">
697+
<Image src={getAssetImagePath("Shaders/roadshine.jpg")} alt="Roadshine" />
698+
This resource creates a light reflection effect on the ground (looks best when moving).<br/>
699+
<a href="https://nightly.mtasa.com/files/shaders/shader_roadshine3.zip">Download</a>
700+
</div>
701+
702+
### UV Scroll
703+
<div style="display: flex; flex-direction: row; gap: 1rem;">
704+
<Image src={getAssetImagePath("Shaders/uvscroll.jpg")} alt="UV scroll" />
705+
This resource scrolls a texture from left to right. It doesn't use vertex or pixels shaders, so it should work on all hardware.<br/>
706+
<a href="https://nightly.mtasa.com/files/shaders/shader_uv_scroll.zip">Download</a>
707+
</div>
708+
709+
### UV scripted
710+
<div style="display: flex; flex-direction: row; gap: 1rem;">
711+
<Image src={getAssetImagePath("Shaders/uvscripted.jpg")} alt="UV scripted" />
712+
This resource controls a texture's UVs using Lua. It shows that anything is possible if you can imagine it.<br/>
713+
<a href="https://nightly.mtasa.com/files/shaders/shader_uv_scripted.zip">Download</a>
714+
</div>
715+
716+
### Car paint
717+
<div style="display: flex; flex-direction: row; gap: 1rem;">
718+
<Image src={getAssetImagePath("Shaders/carpaint.jpg")} alt="Car paint" />
719+
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.<br/>
720+
<a href="https://nightly.mtasa.com/files/shaders/shader_car_paint.zip">Download</a>
721+
</div>
722+
723+
### Water
724+
<div style="display: flex; flex-direction: row; gap: 1rem;">
725+
<Image src={getAssetImagePath("Shaders/water.jpg")} alt="Water shader" />
726+
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.<br/>
727+
<a href="https://nightly.mtasa.com/files/shaders/shader_water.zip">Download</a>
728+
</div>
729+
730+
### Bloom
731+
<div style="display: flex; flex-direction: row; gap: 1rem;">
732+
<Image src={getAssetImagePath("Shaders/bloom.jpg")} alt="Bloom" />
733+
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.<br/>
734+
<a href="https://nightly.mtasa.com/files/shaders/shader_bloom.zip">Download</a>
735+
</div>
736+
737+
### Block world
738+
<div style="display: flex; flex-direction: row; gap: 1rem;">
739+
<Image src={getAssetImagePath("Shaders/blockworld.jpg")} alt="Block world" />
740+
This resource makes the textures look all blocky. It also changes colors when the 'k' key is pressed.<br/>
741+
<a href="https://nightly.mtasa.com/files/shaders/shader_block_world.zip">Download</a>
742+
</div>
743+
744+
### Texture names
745+
<div style="display: flex; flex-direction: row; gap: 1rem;">
746+
<Image src={getAssetImagePath("Shaders/texnames.jpg")} alt="Texture names" />
747+
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 <a href="/reference/engineApplyShaderToWorldTexture">engineApplyShaderToWorldTexture</a>.<br/><br/>
748+
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.<br/>
749+
<a href="https://nightly.mtasa.com/files/shaders/shader_tex_names.zip">Download</a>
750+
</div>
751+
752+
### Skid marks
753+
<div style="display: flex; flex-direction: row; gap: 1rem;">
754+
<Image src={getAssetImagePath("Shaders/skidmarks.jpg")} alt="Skid marks" />
755+
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/>
756+
<a href="https://nightly.mtasa.com/files/shaders/shader_skidmarks.zip">Download</a>
757+
</div>
758+
759+
### HDR contrast
760+
<div style="display: flex; flex-direction: row; gap: 1rem;">
761+
<Image src={getAssetImagePath("Shaders/hdr.jpg")} alt="HDR" />
762+
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/>
763+
<a href="https://nightly.mtasa.com/files/shaders/shader_contrast.zip">Download</a>
764+
</div>
765+
766+
### Tessellation
767+
<div style="display: flex; flex-direction: row; gap: 1rem;">
768+
<Image src={getAssetImagePath("Shaders/tesselation.jpg")} alt="Tesselation" />
769+
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.<br/>
770+
The example has a GUI (press numpad-8) so you can fiddle with the settings.<br/>
771+
<a href="https://nightly.mtasa.com/files/shaders/shader_flag.zip">Download</a>
772+
</div>
773+
774+
### Radial blur
775+
<div style="display: flex; flex-direction: row; gap: 1rem;">
776+
<Image src={getAssetImagePath("Shaders/radialblur.jpg")} alt="Radial blur" />
777+
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.<br/>
778+
<a href="https://nightly.mtasa.com/files/shaders/shader_radial_blur.zip">Download</a>
779+
</div>
780+
781+
### Detail
782+
<div style="display: flex; flex-direction: row; gap: 1rem;">
783+
<Image src={getAssetImagePath("Shaders/detail.jpg")} alt="Details" />
784+
Applies a few monochrome detail textures, at various scales, to (parts of) the world.<br/>
785+
<a href="https://nightly.mtasa.com/files/shaders/shader_detail.zip">Download</a>
786+
</div>
787+
788+
### Ped morph
789+
<div style="display: flex; flex-direction: row; gap: 1rem;">
790+
<Image src={getAssetImagePath("Shaders/pedmorph.jpg")} alt="Ped morph" />
791+
This resource uses a vertex shader to modify the geometry of a ped model as it is rendered.<br/><br/>
792+
When the resource has started, use the 'k' and 'l' keys to change morph size.<br/>
793+
<a href="https://nightly.mtasa.com/files/shaders/shader_ped_morph.zip">Download</a>
794+
</div>
795+
796+
### Ped shell
797+
<div style="display: flex; flex-direction: row; gap: 1rem;">
798+
<Image src={getAssetImagePath("Shaders/pedshell.jpg")} alt="Ped shell" />
799+
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/>
800+
When the resource has started, use the 'm' key to see the shell effect.<br/>
801+
<a href="https://nightly.mtasa.com/files/shaders/shader_ped_shell.zip">Download</a>
802+
</div>
803+
804+
### Hud mask
805+
<div style="display: flex; flex-direction: row; gap: 1rem;">
806+
<Image src={getAssetImagePath("Shaders/hud_mask.jpg")} alt="HUD mask" />
807+
This resource shows how to draw a hud texture with a shape mask.<br/>
808+
<a href="https://nightly.mtasa.com/files/shaders/shader_hud_mask.zip">Download</a>
809+
</div>
810+
811+
### Circle
812+
<div style="display: flex; flex-direction: row; gap: 1rem;">
813+
<Image src={getAssetImagePath("Shaders/circle.jpg")} alt="dxDrawCircle" />
814+
This resource exports a 'dxDrawCircle' function for use in your own scripts.<br/><br/>
815+
Example resource calling dxDrawCircle function from shader_circle: <a href="https://nightly.mtasa.com/files/shaders/circle_example.zip">circle_example.zip</a><br/>
816+
<a href="https://nightly.mtasa.com/files/shaders/shader_circle.zip">Download</a>
817+
</div>
818+
</div>

0 commit comments

Comments
 (0)