Orx Learning

User Tools

Site Tools

Trace:
en:tutorials:shaders:getting_started_with_shaders

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Next revision		Previous revision
en:tutorials:shaders:getting_started_with_shaders [2020/08/05 04:20 (5 years ago)] – created sausageen:tutorials:shaders:getting_started_with_shaders [2020/08/31 05:37 (5 years ago)] (current) – ↷ Links adapted because of a move operation sausage
Line 4: Line 4:
 This guide is designed to help you to get some simple shaders quickly working in Orx in order to build confidence using them. I will touch on a few key concepts but I recommend afterwards using a guide like [[https://thebookofshaders.com|The Book Of Shaders]] to understand fragment shaders in more detail. This guide is designed to help you to get some simple shaders quickly working in Orx in order to build confidence using them. I will touch on a few key concepts but I recommend afterwards using a guide like [[https://thebookofshaders.com|The Book Of Shaders]] to understand fragment shaders in more detail.
  
-Let's start as usual by creating a default project using the [[en:tutorials:creating_your_own_project|init tool]].+Let's start as usual by creating a default project using the [[en:tutorials:projects:creating_your_own_project|init tool]].
  
 ===== Setup ===== ===== Setup =====
Line 54: Line 54:
 Run this and you will find the logo is replaced by a gradient texture from red to yellow. Run this and you will find the logo is replaced by a gradient texture from red to yellow.
  
-{{ :en:tutorials:shaders:shader-basic-01.png?nolink |[]}}+{{ tutorials:shaders:shader-basic-01.png?nolink |[]}}
  
 Nice and simple, using only two lines of shader code. Nice and simple, using only two lines of shader code.
Line 86: Line 86:
 Run this and you will see the right hand side of the texture fading out, and the blue background starting to show through. Run this and you will see the right hand side of the texture fading out, and the blue background starting to show through.
  
-{{ :en:tutorials:shaders:shader-basic-02.png?nolink |[]}}+{{ tutorials:shaders:shader-basic-02.png?nolink |[]}}
  
 So far, we have made the shader repaint every pixel and nothing of the original underlying texture has been preserved. What if we could blend or mix our colours with the original ''logo.png'' texture? So far, we have made the shader repaint every pixel and nothing of the original underlying texture has been preserved. What if we could blend or mix our colours with the original ''logo.png'' texture?
Line 110: Line 110:
 This time, we're using the ''texture2D'' function to return the texture pixel under our current coordinates. This function returns a vec4 type with four values: ''rgba''. We'll just use the ''a'' (alpha) value from the texture pixel and plug that into the ''gl_FragColor''. This is effectively using colours from one source and alpha from another source together. This time, we're using the ''texture2D'' function to return the texture pixel under our current coordinates. This function returns a vec4 type with four values: ''rgba''. We'll just use the ''a'' (alpha) value from the texture pixel and plug that into the ''gl_FragColor''. This is effectively using colours from one source and alpha from another source together.
  
-{{ :en:tutorials:shaders:shader-basic-03.png?nolink |[]}}+{{ tutorials:shaders:shader-basic-03.png?nolink |[]}}
  
 That's pretty cool right? That's pretty cool right?
Line 130: Line 130:
 </code> </code>
  
-{{ :en:tutorials:shaders:shader-basic-04.png?nolink |[]}}+{{ tutorials:shaders:shader-basic-04.png?nolink |[]}}
  
 Really effective! Really effective!
Line 136: Line 136:
 That will do for the moment. Hopefully that gets you pretty keen for shaders and what simple colour effects are possible. That will do for the moment. Hopefully that gets you pretty keen for shaders and what simple colour effects are possible.
  
-In the next article, I'll cover the use of ''gl_FragCoord''. You will see this in many GLSL examples out on the web. So far, we have covered the use of ''gl_TexCoord'', and I'll show you why these two are used in very different ways.+In the [[en:tutorials:shaders:shaders_in_screen_space|next article]], I'll cover the use of ''gl_FragCoord''. You will see this in many GLSL examples out on the web. So far, we have covered the use of ''gl_TexCoord'', and I'll show you why these two are used in very different ways.
  
  
en/tutorials/shaders/getting_started_with_shaders.1596626401.txt.gz · Last modified: 2020/08/05 04:20 (5 years ago) by sausage

Page Tools

Except where otherwise noted, content on this wiki is licensed under the following license: CC0 1.0 Universal
CC0 1.0 Universal Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki