A request for a simple example of using shaders

[Rorschachhamster]

What I may do, if there is a call for it, once I have studied further is prepare a shaders for dummies style document to cover the basics along with some worked examples.

This would be very fine thing to have... and thanks to all of the above, too!
(But I'll probably wait till I can read the for dummies text before I try my hand at that... )

[Paradox]

...What I may do, if there is a call for it, once I have studied further is prepare a shaders for dummies style document to cover the basics along with some worked examples...

Ring! Ring!.... Commander Shipbuilder sir, you have a call waiting. };]

I have been trying to make the "swirly lines" on my Farscape Leviathan change color or brighten as it's speed changes, but haven't been able to make heads or tails of this so far.

[Thargoid]

Have a look at the shader in Vortex OXP - the engine exhaust texture there brightens and dims as a function of the ships speed, so should be very much what you are looking for.

[Thargoid]

I'll have a go at explaining things too (the Vortex shader mentioned above). Below are the code snippets from shipdata.plist, the vertex shader and the fragment shaders. They are similar to Griff's ones previously explained, but are simplified so may be followable?

Shipdata.plist (the relevant shader bits anyway)

Code: Select all

		materials = { 
			"vortex_player.png" = { 
				diffuse_map = "vortex_player.png"; 
				emission_map = "vortex_playerEm.png"; 
				}; 
			};

		shaders = { 
            "vortex_player.png" = 
				{ 
                vertex_shader = "vortex_general.vertex"; 
                fragment_shader = "vortex_general.fragment"; 
                textures = 
						(
						"vortex_player.png", 
						"vortex_playerEm.png"
						);
				uniforms =
						{
						uColorMap = { type = texture; value = 0; };
						uEmissionMap = { type = texture; value = 1; };	
						speedFactor = { binding = "speedFactor"; clamped = true; };
						hull_heat_level = "hullHeatLevel";
						}; 	
				}; 
			};	

The materials bit is for non-shader machines, but I'll include it for completeness. It just means that without shaders the emission map (the engine glow) is applied at full brightness only, without any speed dependence.

Here we define the shaders used for the ship, and which texture on the model they relate to (vortex_player.png in this case, the ships texture file). We simply define the vertex and fragment shaders to be used (the two quoted below) and which textures are involved. The first texture (which will be texture 0) is the main texture (the color map) and the second one (which will be texture 1) is the emission map (used here for the speed dependent engine glow).

The uniforms are the items which the game engine passes to the shader. Here we link those two maps to uColorMap and uEmissionMap (note the value of 0 and 1 corresponding to their position in the textures array) plus we are also passing the ships speedFactor and hull heat level. Clamped just limits the output value to be between 0 and 1.


Vertex Shader

Code: Select all

// Information sent to fragment shader.
varying vec3			v_normal;		// Surface normal

void main()
{
    v_normal = normalize(gl_NormalMatrix * gl_Normal);
   
    gl_TexCoord[0] = gl_TextureMatrix[0] * gl_MultiTexCoord0;
    gl_Position = ftransform();
}

This is a variation on the shader Griff posted before, and does exactly the same job. It is a fairly standard one which just passes the information across to the fragment shader, defining in turn each point on the model texture that the fragment shader needs to act (see the quote I posted previously for some more details).

Fragment shader

Code: Select all

// Information from Oolite.
uniform sampler2D	uColorMap;			// Main texture
uniform sampler2D	uEmissionMap;		// Engine glows, speedFactor dependent
uniform float		hull_heat_level;	
uniform float		speedFactor;

// Information from vertex shader.
varying vec3        v_normal;

#define LIGHT(idx) { vec3 lightVector = normalize(gl_LightSource[idx].position.xyz); color += gl_FrontMaterial.diffuse * gl_LightSource[idx].diffuse * max(dot(v_normal, lightVector), 0.0); }

void main(void)
{
    // Calculate illumination.
    vec4 color = gl_FrontMaterial.ambient * gl_LightSource[0].ambient;
    LIGHT(1);
    
    // Load texture data
    vec2 texCoord = gl_TexCoord[0].st;
    vec4 colorMap = texture2D(uColorMap, texCoord);
    vec4 emissionMap = texture2D(uEmissionMap, texCoord);
	
	// Add the all over hull temperature glow.
   float hullHeat = max(hull_heat_level - 0.5, 0.0) * 2.0;  
   colorMap.r += hullHeat;
   color *= colorMap; 
	
    // Add the engine exhaust glow, controlled by speed factor
    color += (speedFactor * emissionMap);  
	
    gl_FragColor = vec4(color.rgb, 1.0);
}

At the top we define the variables used within the shader - those we passed from the shipdata.plist (see the code at the top of this post).

The "light" definition again just defines the illumination point. It's either "spotlight" mode for demoships illumination (with idx=0) or in-game illumination (idx=1). In this shader we'll use the latter.

The main chunk of the code takes the illumination at the point we're dealing with, and then reads the colour of the two maps (colorMap and emissionMap) at the co-ordinates we are currently dealing with (as sent by the vertex shader).

Next we modify the colorMap's red level based on the hull heat level (to make the ship glow red when hot). colorMap.r is just the red component of the colorMap (the colour of the texture at the point we're dealing with). We write this to "color", which is the cumulative colour which will be displayed at the end (what you'll see on the screen).

After that we deal with the engine glow, but adding a speed-weighted value of the emission map to the running "color" total. As that emission map is black everywhere but the engine area, it doesn't affect anywhere else but the engine ports. There it is a blue colour, so as the ship goes faster the engines glow more brightly blue.

Lastly we set gl_FragColor, which is the final colour of the ship at the co-ordinates on its surface. Here we set this to the red/green/blue components of "color", plus 1.0 for the alpha channel (the transparency - here we just fix that to 1.0).



Basically the vertex shader just raster-scans across the model texture, going from point to point. At each of those points the fragment shader is applied, so we build up the whole output texture which is what appears on the screen and in the game.[/color]

[Shipbuilder]

Thargoid's Vortex OXP was indeed what I studied and then used as a template to achieve the variable engine glow referred to in my earlier post.

@ Thargoid - Thanks for the detailed step by step explanation of how the shaders work in your Vortex OXP. I'm sure many current and future OXPers will find this information invaluable.

[Shipbuilder]

The materials bit is for non-shader machines, but I'll include it for completeness. It just means that without shaders the emission map (the engine glow) is applied at full brightness only, without any speed dependence.

If the Vortex had a variable engine glow and also permanent lights I assume that you would have to specify a separate shader to provide the ships lighting for machines using shaders (Because any lights defined on the nornal emission map would be ignored by a machine using shaders !).

If this is the case how would you amend the following code to include this ?

Code: Select all

materials = { 
         "vortex_player.png" = { 
            diffuse_map = "vortex_player.png"; 
            emission_map = "vortex_playerEm.png"; 
            }; 
         };

      shaders = { 
            "vortex_player.png" = 
            { 
                vertex_shader = "vortex_general.vertex"; 
                fragment_shader = "vortex_general.fragment"; 
                textures = 
                  (
                  "vortex_player.png", 
                  "vortex_playerEm.png"
                  );
            uniforms =
                  {
                  uColorMap = { type = texture; value = 0; };
                  uEmissionMap = { type = texture; value = 1; };   
                  speedFactor = { binding = "speedFactor"; clamped = true; };
                  hull_heat_level = "hullHeatLevel";
                  };    
            }; 
         };   

[Thargoid]

You should be able to just add it as an additional illumination map probably, which the shader would just take and add to the final gl_FragColor summation in the fragment shader. The map would be set up in much the same way that the current pair are, but would be set with the value of 2 (as the third map to be worked with).

There's a bit more detail on what's available in terms of map types here in the wiki.

[Shipbuilder]

I think that I’ll call it a night and look at this afresh in the morning as I now have no illumination either of the lights or the engines

I have added this code in to the shipdata.plist

Code: Select all

	materials = 
		{ 
			"Serpent_Thargoids_Bane_auv.png" = 
			{ 
			emission_map = "Serpent_Thargoids_Bane_glow.png";
			shininess = 10;
			}; 
		};

		shaders = { 
            "Serpent_Thargoids_Bane_auv.png" = 
				{ 
                vertex_shader = "Serpent_Thargoids_Bane.vertex"; 
                fragment_shader = "Serpent_Thargoids_Bane.fragment"; 
                textures = 
						(
						"Serpent_Thargoids_Bane_auv.png", 
						"Serpent_Thargoids_Bane_Engine_shader.png",
						"Serpent_Thargoids_Bane_glow.png"
						);
				uniforms =
						{
						uColorMap = { type = texture; value = 0; };
						uEmissionMap = { type = texture; value = 1; };
						uIlluminationMap = { type = texture; value = 2; };	
						speedFactor = { binding = "speedFactor"; clamped = true; };
						hull_heat_level = "hullHeatLevel";
						};
				}; 
			};

And this in to the Fragment shader file

Code: Select all

// Information from Oolite.
uniform sampler2D	uColorMap;			// Main texture
uniform sampler2D	uEmissionMap;		// Engine glows, speedFactor dependent
uniform sampler2D	uIlluminationMap;	// Lights
uniform float		hull_heat_level;	
uniform float		speedFactor;

// Information from vertex shader.
varying vec3        v_normal;

#define LIGHT(idx) { vec3 lightVector = normalize(gl_LightSource[idx].position.xyz); color += gl_FrontMaterial.diffuse * gl_LightSource[idx].diffuse * max(dot(v_normal, lightVector), 0.0); }

void main(void)
{
    // Calculate illumination.
    vec4 color = gl_FrontMaterial.ambient * gl_LightSource[0].ambient;
    LIGHT(1);
    
    // Load texture data
    vec2 texCoord = gl_TexCoord[0].st;
    vec4 colorMap = texture2D(uColorMap, texCoord);
    vec4 emissionMap = texture2D(uEmissionMap, texCoord);
    vec4 illuminationMap = texture2D(uIlluminationMap, texCoord);

	// Add the all over hull temperature glow.
   float hullHeat = max(hull_heat_level - 0.5, 0.0) * 2.0;  
   colorMap.r += hullHeat;
   color *= colorMap; 
	
    // Add the engine exhaust glow, controlled by speed factor
    color += (speedFactor * emissionMap);  
	
    gl_FragColor = vec4(color.rgb, 1.0);
}

[Thargoid]

You haven't applied the illumination map in the fragment shader.

Change color += (speedFactor * emissionMap); to color += ((speedFactor * emissionMap) + illuminationMap); and it should apply it as well.

Aside from that, check the latest.log for anything relevant as the shader scripting can be notoriously finicky about syntax and similar.

[Shipbuilder]

Thargoid you are an absolute star.

I couldn't resist turning the computer back on one last time and giving it a go. It worked straight away.

[Shipbuilder]

Is it possible to define say more than 1 illumination map ?

I am thinking of adding an additional glowing texture which will be related to the energy levels of a ship specifically a glowing metal damage effect theat will appear and become incresingly bright as a ship sustains more damage.

So for in the example above would I change the code in the shipdata.plist to

Code: Select all

	materials = 
		{ 
			"Serpent_Thargoids_Bane_auv.png" = 
			{ 
			emission_map = "Serpent_Thargoids_Bane_glow.png";
			shininess = 10;
			}; 
		};

		shaders = { 
            "Serpent_Thargoids_Bane_auv.png" = 
				{ 
                vertex_shader = "Serpent_Thargoids_Bane.vertex"; 
                fragment_shader = "Serpent_Thargoids_Bane.fragment"; 
                textures = 
						(
						"Serpent_Thargoids_Bane_auv.png", 
						"Serpent_Thargoids_Bane_Engine_shader.png",
						"Serpent_Thargoids_Bane_glow.png",
						"Serpent_Thargoids_Bane_damage_shader",
						);
				uniforms =
						{
						uColorMap = { type = texture; value = 0; };
						uEmissionMap = { type = texture; value = 1; };
						uIlluminationMap = { type = texture; value = 2; };
						speedFactor = { binding = "speedFactor"; clamped = true; }
						uIlluminationMap2 = { type = texture; value = 3; }
						energy = "energy";
						maxEnergy = "maxEnergy";	
						hull_heat_level = "hullHeatLevel";
						};
				}; 
			};

[Thargoid]

I think the maximum number of maps you can use is 5 per texture. But aside from that I don't know, as I've never tried it.

Why not give it a go and then you can educate everyone

[Svengali]

The number of texture units is hardware dependent and different for vertex and fragment shaders.

[Shipbuilder]

Hmm still no luck (Despite messing around with it on and off for most of the day.

I’ve been playing around with a test OXP and have both the variable engine glow and lights working but am struggling to get a 3rd shader which controls damage texture to work.

I think that I have set up the shipdata.plist correctly and I have made a simple texture for the damage effect and added that to the texture folder.

If anyone can spot an error in the following code for the fragment shader I would be very grateful. Alternatively if anyone wants to have a look at the OXP as a whole PM me.

Once I get this last item sorted my aim is to produce and release a new Elite style ship, perhaps a Viper Mk 3 or alternatively a player ship, which will incorporate what I have learnt. I am open to suggestions regarding the ship type, general appearance etc if anyone has a specific preference.

This I intend to use to put together a step by step guide including screenshots, explanations etc to assist others OXP writers. I will also provide downloadable versions of the oxp at different stages so that people can actually try their hand at reproducing what I have done using the same model, textures etc used in the guidance document.

Code: Select all

// Information from Oolite.
uniform sampler2D	uColorMap;		// Main texture
uniform sampler2D	uEmissionMap;		// Engine glow, speedFactor dependent
uniform sampler2D	uIlluminationMap;	// Lights
uniform float		speedFactor;
uniform sampler2D	uIlluminationMap2;	// Damage glow texture
uniform float     	energy;
uniform float       	maxEnergy;
uniform float		hull_heat_level;	// Hull glow, temperature dependent

		

// Information from vertex shader.
varying vec3        v_normal;

#define LIGHT(idx) { vec3 lightVector = normalize(gl_LightSource[idx].position.xyz); color += gl_FrontMaterial.diffuse * gl_LightSource[idx].diffuse * max(dot(v_normal, lightVector), 0.0); }


void main(void)
{
    // Calculate illumination.
    vec4 color = gl_FrontMaterial.ambient * gl_LightSource[0].ambient;
    LIGHT(1);
    
    // Load texture data
    vec2 texCoord = gl_TexCoord[0].st;
    vec4 colorMap = texture2D(uColorMap, texCoord);
    vec4 emissionMap = texture2D(uEmissionMap, texCoord);
    vec4 illuminationMap = texture2D(uIlluminationMap, texCoord);
    vec4 illuminationMap2 = texture2D(uIlluminationMap2, texCoord);

	// Add the all over hull temperature glow.
   float hullHeat = max(hull_heat_level - 0.5, 0.0) * 2.0;  
   colorMap.r += hullHeat;
   color *= colorMap; 

    // Merge the maps by damage weighting
    float damageLevel = 1.0 - (energy / maxEnergy);

    // Add the engine exhaust glow, controlled by speed factor the lights and merge the maps by damage weighting
    color += ((speedFactor * emissionMap) + illuminationMap + (damageLevel * illuminationMap2));  
	
    gl_FragColor = vec4(color.rgb, 1.0);
}

[Griff]

I've taken the effect you're after and mashed them into a shader based on the default Oolite shaders, hopefully these should work - I haven't tested them in oolite but they look like they're running OK in rendermonkey
Vertex shader

Code: Select all

attribute vec3         tangent;
// No vNormal, because normal is always 0,0,1 in tangent space.
varying vec3         vEyeVector;
varying vec2         vTexCoord;
varying vec3         vLight1Vector;

void main(void)
{
   // Build tangent basis
   vec3 n = normalize(gl_NormalMatrix * gl_Normal);
   vec3 t = normalize(gl_NormalMatrix * tangent);
   vec3 b = cross(n, t);
   
   mat3 TBN = mat3(t, b, n);
   
   vec3 eyeVector = -vec3(gl_ModelViewMatrix * gl_Vertex);
   vEyeVector = eyeVector * TBN;
   
   vec3 lightVector = gl_LightSource[1].position.xyz;
   vLight1Vector = lightVector * TBN;
   
   vTexCoord = gl_MultiTexCoord0.st;
   
   gl_Position = gl_ModelViewProjectionMatrix * gl_Vertex;
}

Fragment Shader

Code: Select all

// Uniforms from Oolite
uniform sampler2D   uColorMap;      // Main texture
uniform sampler2D   uEmissionMap;      // Engine glow, speedFactor dependent
uniform sampler2D   uIlluminationMap;   // Lights
uniform sampler2D   uIlluminationMap2;   // Damage glow texture

uniform float      speedFactor;
uniform float      energy;
uniform float      maxEnergy;
uniform float      hull_heat_level;   // Hull glow, temperature dependent

// Information from Vertex Shader
   varying vec2         vTexCoord;
   varying vec3         vEyeVector;   // These are all in tangent space
   varying vec3         vLight0Vector;
   varying vec3         vLight1Vector;

// Set surface 'glossiness', use a lower number for metal and higher numbers for wet looking/'plasticy' surfaces
   const float specularExponentLevel = 4.0;

// set the surface normal (we're not using a normal map for this example)
   const vec3 normal = vec3(0.0, 0.0, 1.0);
   
vec4 CalcDiffuseLight(in vec3 lightVector, in vec3 normal, in vec4 lightColor)
{
   float intensity = dot(normal, lightVector);
   intensity = max(intensity, 0.0);
   return lightColor * intensity;
}

vec4 CalcSpecularLight(in vec3 lightVector, in vec3 eyeVector, in float exponent, in vec3 normal, in vec4 lightColor, in float specularIntensityLevel)
{
   vec3 reflection = -reflect(lightVector, normal);
   float intensity = dot(reflection, eyeVector);
   intensity = pow(max(intensity, 0.0), exponent) * specularIntensityLevel;
   return lightColor * intensity;
}

// Colour ramp from black through reddish brown/dark orange to yellow-white - used for the hull temperature glow effect
 vec4 TemperatureGlow(float level) 
   { 
      vec4 result = vec4(0); 
    
       result.r = level; 
       result.g = level * level * level; 
       result.b = max(level - 0.7, 0.0) * 2.0;
       result.a = 1.0;
       return result;    
   }
     
void main(void)
{
// initialise the finalColor for the polygon fragment, texture map colors & lighting will be added into this as we progress through the shader
   vec4 finalColor = vec4(0);
   
// Get eye vector
   vec3 eyeVector = normalize(vEyeVector);

// Get the Texture Coordinates from the vertex shader
   vec2 texCoord = vTexCoord;

// Read in the texture maps
   vec4 ColorMap = texture2D(uColorMap, texCoord);                 // Main texture
   vec4 EmissionMap = texture2D(uEmissionMap, texCoord);           // Engine glow, speedFactor dependent
   vec4 IlluminationMap = texture2D(uIlluminationMap, texCoord);   // Lights
   vec4 IlluminationMap2 = texture2D(uIlluminationMap2, texCoord); // Damage glow texture

   float specularIntensityLevel = 1.0; 
   
// Get light vectors
   vec3 lightVector = normalize(vLight1Vector);
   
// Get ambient color
   vec4 ambientLight = gl_LightModel.ambient;

// Calculate diffuse light 
   vec4 diffuseLight = vec4(0);
   diffuseLight += CalcDiffuseLight(lightVector, normal, gl_LightSource[1].diffuse);
   
// Calculate specular light
   vec4 specularColor = vec4(0.4, 0.4, 0.4, 1.0); // set specular colour, in this case a dull grey the 4 values are Red Green Blue and Alpha
   vec4 specularLight = vec4(0.0); // initialise the specularLight colour value...
   // ... then using the specularLight function calculate its final value
   specularLight += CalcSpecularLight(lightVector, eyeVector, specularExponentLevel, normal, gl_LightSource[1].specular, specularIntensityLevel); 
   specularLight.a = 1.0; // set the alpha value of the specularlight to 1.0

// Calculate Ambient lighting
   vec4 ambientColor = gl_FrontMaterial.ambient;

// Start mixing the Textures & lighting calculations together
// First add in the ambient light value (ambient lighting falls onto the object from all directions with uniform intensity)
   finalColor = ambientColor * ambientLight;

// Next add in the texture and basic lighting (ie lighter/darker polygons depending on their orientation to the system sun)
   finalColor += ColorMap * diffuseLight; 

// Add in the specular highlights   
   finalColor += specularColor * specularLight;

// Start Adding in our Glow Effects...
// First add in the IlluminationMap - the 'lights' texture
   finalColor +=  IlluminationMap;
    
// next add in the EmissionMap - the 'engine glow' texture, use the sppedFactor level from Oolite to control this textures opacity
   finalColor += EmissionMap * speedFactor;

// next add in our Damage glowmap   
  // first Calculate Damage
        float damageLevel = 1.0 - (energy / maxEnergy);   
  // then use that as an opacity setting for mixing in the damage map texture   
        finalColor += IlluminationMap2 * damageLevel;

// Add the all over hull temperature glow. Full Shader mode only
   float hullHeat = max(hull_heat_level - 0.5, 0.0) * 2.0; 
   finalColor += TemperatureGlow(hullHeat);
   
   
   gl_FragColor = finalColor;
}