History: I See Dead Kittehs.. part 2 - JaJDoo Shader Guide - Basics

Source of version: 6 (current)

!:::Move over there, and don’t be yellow:::
!:::or:::
!:::Basic texture control:::

{maketoc}

!!The easiest things

After we learned how to use textures, let’s play with that topic for a while and see how we control different attributes of the final rendered result.

!!Controlling and understanding color 
!!!Negative
Probably the easiest thing to perform is creating a negative. Valid COLOR semantic values run from 0 (black) to 1 (white). Above 1 the picture will look hazy, and below 0 it will simply be complete darkness.

So, on this basis, we can conclude that 0.6 will be the opposite of 0.4. Therefore, in order to create a negative, we simply have to ‘1 – value’ the color vector.

You can also control specific values of the color (RGBA) by accessing them directly. (They are indexed as (x, y, z, w) or (r, g, b, a))

Examples
{CODE(wrap="1", colors="c++")}// creating negative of texture
finColor = 1 - tex2D(MeshTextureSampler, texco);

//setting red channel of the texture
finColor.x = 1;{CODE}

Negative…
{IMG(src="display1820")}{IMG} 

!!!Grayscale
Another simple operation is converting the picture to gray. We can use the dot function to help up. If you don’t know what the dot product means, ignore this for now; it will be explained when we discuss normals. 
{CODE(wrap="1", colors="c++")}	
finColor = tex2D(MeshTextureSampler, texco);
finColor = dot(finColor, float3(0.33, 0.33, 0.33));
{CODE}
{IMG(src="display1821")}{IMG} 

!!!Black and white
A nice trick is turning your texture to black and white using the grayscale we created (or simply using the original color)

In order to achieve this, we will have to use an ‘if’ statement. If the color vector value is >= 0.5, than we return white. Below this value will be black.
{CODE(wrap="1", colors="c++")}
float a = finColor;
if( a >=0.5 ) 	finColor = float4(1,1,1,1);
else		finColor = float4(0,0,0,0);
{CODE}
{IMG(src="display1817")}{IMG} 

With this method you can also make other types of effects, such as a primitive ‘oil painting’ by using smaller intervals and setting each color channel separately. This is also used in toon shaders; the reason this looks somewhat like an oil painting is the picture’s small imperfections.
{IMG(src="display1818")}{IMG} {IMG(src="display1819")}{IMG} 

Let’s see what you can do … try to get this result.
Hint: that’s the ‘oil painting’ thing I talked about (if you’re not good with using your logic organ)

!!Controlling texture coordinates
!!!Blur
Texture coordinates (of 2d type) have two channels u and v (or x and y, depends who you ask)
We can manipulate them in order to achieve some goals.

One of the simplest things to perform is a simple blur. A blur means to add the color of adjacent locations on the texture to the current point (I know you know what blur means as a word, I was speaking technically)

We can do that as follows:

{CODE(wrap="1", colors="c++")} 	
finColor = tex2D(MeshTextureSampler, texco);
finColor += tex2D(MeshTextureSampler, texco+0.01);
finColor += tex2D(MeshTextureSampler, texco-0.01);
{CODE}

Here, we added two values to the final color, upper left and lower right. The result is a diagonal blur. (Since arithmetical operations performed on a vector without specifying specific member will affect all its members)

Why 0.01? Because it’s a noticeable difference. Feel free to pick a different value.

You will also notice that the result is also very bright. This is because we add color value to all the channels without division. This means that while the color will be added, so does the sum of intensity. Think of it as making an average of the colors.

In order to fix this, you will have to divide the final values with the amount of additions they received. (Here we need to divide by three, since we had two operations plus the original color)
{CODE(wrap="1", colors="c++")}finColor /= 3;{CODE}
{REMARKSBOX(type="tip",title="Feeling smart?")}Go ahead and try to create a vertical or horizontal blur (or both)
Or even vertical + horizontal + diagonal!
Torture has endless possibilities!{REMARKSBOX} 

Un-tempered texture, prepare to be tempered.
{IMG(src="display1823", width="300", height="300")}{IMG}
   
One diagonal blur (top left to bottom right) and both diagonals blur.
{IMG(src="display1826", width="300", height="300")}{IMG}{IMG(src="display1822", width="300", height="300")}{IMG}

Vertical (left) and horizontal (right) blur; I has it.
{IMG(src="display1824", width="300", height="300")}{IMG}{IMG(src="display1827", width="300", height="300")}{IMG}

All directions blur (vertical + horizontal + diagonal). I has it too.
{IMG(src="display1825", width="300", height="300")}{IMG}

!!!Flipping, rotating etc…
You can also easily ‘flip’ the orientation of your texture by changing the targeted uv when calling tex2D. 
The following:
{CODE(wrap="1", colors="c++")}finColor = tex2D(MeshTextureSampler, 1 - texco);{CODE}
…Will rotate it by 180 degrees.

While this:
{CODE(wrap="1", colors="c++")}	texco.x = 1 - texco.x;
	finColor = tex2D(MeshTextureSampler, texco);{CODE}
…will flip the X, making a mirrored image of the original.
{IMG(src="display1828", width="300", height="300")}{IMG}{IMG(src="display1829", width="300", height="300")}{IMG} 

Keep experimenting. You’ll never know what you can come up with until you tortured the image in every possible way.
History: I See Dead Kittehs.. part 2 - JaJDoo Shader Guide - Basics

Source of version: 6 (current)

Search by Tags

Latest Changes

Search

Online Users
