Unity 3D garden @unity3dgarden-blog - Tumblr Blog

Lighting

Now I want to include lighting into my shader.

The Cg Tutorial chapter 5 gives a good discussion on lighting in shaders:

http://developer.nvidia.com/node/88

However, the question is, how do I make it work in unity? I need a way of getting the positions and colours of the lights into my shaders.

I searched for "Unity Shaders Lights" and I got to this page:

http://unity3d.com/support/documentation/Components/SL-SurfaceShaders.html

Basically, Unity doesn't seem to let you directly access lights in a shader, rather it has a special, easier to use lighting system for shaders.

It sounds a lot better in many ways but I did kind of want to write my own lighting shader.

I may come back to that, but for now, I should try to use a surface shader.

This video goes through using a hierarchy of object in unity

#unity 3d garden #scripting #advanced scripting

This video goes into more depth about event driven programming in unity

#unity 3d garden #scripting #advanced scripting

I need to convert the code to work with z values as well. This is the result of the edit, I have converted everything to float4, which does simplify things, and then I do the same thing to the z value that I do to the x:

half4 frag (v2f i) : COLOR { float4 color; float4 position, useBrick; position = i.untransformedPos / _BrickSize; if (frac(position.y * 0.5) > 0.5) { position.x += 0.5; position.z += 0.5; } position = frac(position); useBrick = step(position, _BrickPct); color = lerp(_MortarColor, _BrickColor, useBrick.x * useBrick.y * useBrick.z); return half4(color); }

The result, after tweeking the properties to make it look nice, is shown above.

#unity #unity 3d garden #shaders

Moving towards the other wall reveals that the horizontals are present, but only on one side.

It must be because I am only checking the x and y positions of the bricks, I need to include the z.

#unity #unity 3d garden #shaders

Editing the properties makes it look better, but where are the horizontal lines?

#unity #unity 3d garden #shaders

I won't edit the vertex shader at all, it currently passes through a position, which is all I need (I will get rid of the LightIntensity parameter).

So I will turn to the fragment shader itself.

First up are the variables:

vec3 color; vec2 position, useBrick;

I convert the colour into a float4 and the vec2s into a float2:

float4 color; float2 position, useBrick;

The next bit sets the position variable:

position = MCposition / BrickSize;

MCposition is the position value coming in from the vertex shader, which in our Cg shader is i.pos:

position = i.pos / BrickSize;

The next bit is a set of calculations.

position = i.pos / BrickSize; if (fract(position.y * 0.5) > 0.5) position.x += 0.5; position = fract(position); useBrick = step(position, BrickPct); color = mix(MortarColor, BrickColor, useBrick.x * useBrick.y); color *= LightIntensity;

I'm not sure if all the build in functions from GLSL exist in Cg, but I will assume they do as the functionality is normally similar. It will throw an error if I'm wrong. For now I can leave it the same except for deleting the bit about LightIntensity. The last bit outputs the colour value

gl_FragColor = vec4 (color, 1.0);

I will just copy the color variable into the corresponding line from my old shader:

return half4(color);

So this is the end result"

Shader "BrickShader" { Properties { _BrickColor ("Brick Color", Color) = (1.0, 0.3, 0.2,1) _MortarColor ("Mortar Color", Color) = (0.85, 0.86, 0.84,1) _BrickSize ("Brick Size", Vector) = (0.30, 0.15, 0, 0) _BrickPct ("Brick Pct", Vector) = (0.90, 0.85, 0, 0) } SubShader { Pass { CGPROGRAM #pragma vertex vert #pragma fragment frag #include "UnityCG.cginc" float4 _BrickColor; float4 _MortarColor; float4 _BrickSize; float4 _BrickPct; struct v2f { float4 pos : SV_POSITION; }; v2f vert (appdata_base v) { v2f o; o.pos = mul (UNITY_MATRIX_MVP, v.vertex); return o; } half4 frag (v2f i) : COLOR { float4 color; float2 position, useBrick; position = i.pos / _BrickSize; if (fract(position.y * 0.5) > 0.5) position.x += 0.5; position = fract(position); useBrick = step(position, _BrickPct); color = mix(_MortarColor, _BrickColor, useBrick.x * useBrick.y); return half4(color); } ENDCG } } Fallback "VertexLit" }

When I first ran this it failed because I had forgotten to put in the underscores "_" before the variable names. The next time it has more fundamental problems. It said there was an implicit cast from float4 to float2 on this line:

position = i.pos / _BrickSize;

And it was completely right, of course, i.pos is a float4 while position is a float2. To get around this I select just the x and y components of i.pos, using a special shader notation:

position = i.pos.xy / _BrickSize.xy;

I also need to do the same further down:

useBrick = step(position, _BrickPct.xy);

Another error says "'fract' : no matching overloaded function found at line 14", which I guess means that the fract function doesn't exist in Cg. A quick look on Google shows that it is actually "frac".

There are similar issues for the other built in functions. This page is useful:

http://http.developer.nvidia.com/CgTutorial/cg_tutorial_appendix_e.html

mix also gives an error, the correct name is lerp (short for linear interpolation).

The last error is the following one which seems a bit more confusing:

Shader error in 'BrickShader': Program 'frag', variable/member "pos" has semantic "POSITION" which is not visible in this profile at line 40

It looks like it means that I can't access a position parameter in a fragment shader.

So I probably need to pass it as a non-position parameter. Looking back at the original vertex program I realised that MCposition was passed separately from the main position, and that is was, in fact the untransformed vertex position. I therefore added a new variable to the struct:

struct v2f { float4 pos : SV_POSITION; float4 untransformedPos; };

edited the vertex shader:

v2f vert (appdata_base v) { v2f o; o.pos = mul (UNITY_MATRIX_MVP, v.vertex); o.untransformedPos = v.vertex; return o; }

and changed the relevant line in the fragment shader:

position = i.untransformedPos.xy / _BrickSize.xy;

The result works and is shown above. It isn't exactly what I want it to look like but it's a start. The full code is here:

Shader "BrickShader" { Properties { _BrickColor ("Brick Color", Color) = (1.0, 0.3, 0.2,1) _MortarColor ("Mortar Color", Color) = (0.85, 0.86, 0.84,1) _BrickSize ("Brick Size", Vector) = (0.30, 0.15, 0, 0) _BrickPct ("Brick Pct", Vector) = (0.90, 0.85, 0, 0) } SubShader { Pass { CGPROGRAM #pragma vertex vert #pragma fragment frag #include "UnityCG.cginc" float4 _BrickColor; float4 _MortarColor; float4 _BrickSize; float4 _BrickPct; struct v2f { float4 pos : SV_POSITION; float4 untransformedPos; }; v2f vert (appdata_base v) { v2f o; o.pos = mul (UNITY_MATRIX_MVP, v.vertex); o.untransformedPos = v.vertex; return o; } half4 frag (v2f i) : COLOR { float4 color; float2 position, useBrick; position = i.untransformedPos.xy / _BrickSize.xy; if (frac(position.y * 0.5) > 0.5) position.x += 0.5; position = frac(position); useBrick = step(position, _BrickPct.xy); //useBrick = float2(0, 0); color = lerp(_MortarColor, _BrickColor, useBrick.x * useBrick.y); return half4(color); } ENDCG } } Fallback "VertexLit" }

#unity #unity 3d garden #shaders

That finally works, and I can edit the colour and size properties in the interfaces, as shown above.

However, they don't have any effect on the shader, there is more to do.

#unity #unity 3d garden #shaders

Translating the Brick shader 1

We have a nice shader in GLSL, but we need to turn it into Cg.

Let's start with the properties:

uniform vec3 BrickColor, MortarColor; uniform vec2 BrickSize; uniform vec2 BrickPct;

We need to create Unity properties for them so we can change them in the editor:

Properties { _BrickColor ("Brick Color", Color) = (1.0, 0.3, 0.2,1) _MortarColor ("Mortar Color", Color) = (0.85, 0.86, 0.84,1) _BrickSize ("Brick Size", 2D) = (0.30, 0.15) _BrickPct ("Brick Pct", 2D) = (0.90, 0.85) }

The two colour properties are of type Color as before.

I got the values from the application source code of the original brick shader.

For the type of the others, I looked on this page for the list of types, and 2D looked the most appropriate:

http://unity3d.com/support/documentation/Components/SL-Properties.html

I also need to create the variables within the Cg shader. The equivalents of vec3 and vec2 are float3 and float2 (but in fact I will use float4 for the colours to be consistent with how Unity colours work:

float4 _BrickColor; float4 _MortarColor; float2 _BrickSize; float2 _BrickPct;

This doesn't immediately work as I've deleted the _Color property that my shader used, but if I replace that with _BrickColor.

Even once I do that it doesn't work. I try deleting the 2D properties to see if that is the problem and it does work.

So the 2D properties are the problem. Looking more carefully it turns out that 2D doesn't mean 2D vector, it means a texture. Unity doesn't seem to support 2D vectors, only 4D ones, so I need to convert it.

Properties { _BrickColor ("Brick Color", Color) = (1.0, 0.3, 0.2,1) _MortarColor ("Mortar Color", Color) = (0.85, 0.86, 0.84,1) _BrickSize ("Brick Size", Vector) = (0.30, 0.15, 0, 0) _BrickPct ("Brick Pct", Vector) = (0.90, 0.85, 0, 0) }

I could have combined BrickSize and BrickPct into a single 4D vector but it is probably clearer for now not to do so. I also need to change the Cg variables:

float4 _BrickColor; float4 _MortarColor; float4 _BrickSize; float4 _BrickPct;

#unity #unity 3d garden #shaders

Brick Shader

I now want to create a shader that will draw a brick pattern.

Luckily this is a classic example from one of the most famous books. A bit less luckily it is from the GLSL book, not a Cg book, so we will need to translate.

I downloaded the example from here:

http://3dshaders.com/home/index.php?option=com_weblinks&catid=14&Itemid=34

The vertex shader doesn't do anything special (actually it does proper lighting but we won't bother with that yet). Here is the fragment shader that does most of the work (I've added the explanatory comments:

// // Fragment shader for procedural bricks // // Authors: Dave Baldwin, Steve Koren, Randi Rost // based on a shader by Darwyn Peachey // // Copyright (c) 2002-2004 3Dlabs Inc. Ltd. // // See 3Dlabs-License.txt for license information // // There are a bunch of properties that control the // shader // these two are the colour of the bricks and the // colour of the mortar between the bricks uniform vec3 BrickColor, MortarColor; // The size of the bricks, it is a 2D vector that includes // both width and height uniform vec2 BrickSize; // This property is the proportion of the // space that is taken up by the brick // (as opposed to the mortar) // again this is a 2d vector for proportions // in both x and y uniform vec2 BrickPct; // the position of the fragment (passed in from the vertex pipeline) varying vec2 MCposition; // the light intensity at the fragment. // In the original this came from the vertex shader, // but for now we won't use it. varying float LightIntensity; // the text of the fragment shader void main(void) { // variables // the color of the fragment vec3 color; // the position within the brick // and whether we should use the brick (if it is 0) // or mortar (if it is 1). vec2 position, useBrick; // get the fragment position as a proportion of brick size position = MCposition / BrickSize; // This bit makes sure that every other brick is offset // like in a real wall if (fract(position.y * 0.5) > 0.5) position.x += 0.5; // get only the fractional part of position // This is because we only care about where we are // within a brick, not which brick we are in position = fract(position); // This step function sets the useBrick to // 1 or 0 depending on whether position is // less than BrickPct, i.e. it works out // whether we are in the brick or in the mortar // (NB these are all vector operations acting // on both x and y simultaneously) useBrick = step(position, BrickPct); // This mixes the brick and mortar colours // In practice useBrick is either 1 or 0 so // the colours aren't mixed, we are just selecting // one or the other. color = mix(MortarColor, BrickColor, useBrick.x * useBrick.y); // multiply by the light intensity (we'll ignore this for now) color *= LightIntensity; // set the fragment colour to the calculated colour gl_FragColor = vec4 (color, 1.0); }

BTW this is not my code so I need to give the correct reference and copyright notice. This is the copyright licence for the code above: Copyright (C) 2002-2005 3Dlabs Inc. Ltd. All rights reserved. Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met: Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer. Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution. Neither the name of 3Dlabs Inc. Ltd. nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission. THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDERS OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

#unity #unity 3d garden #shaders

Per pixel colour

In the last shader I showed, the colour was defined per vertex. That was fine as there is only 1 colour.

If I want to change the colour over the surface of the wall it is less good as it means I don't have fine control over how the colour changes. It would be much better have control at a per pixel level.

To do that I need to change the colour in the fragment shader, not the vertex shader.

struct v2f { float4 pos : SV_POSITION; //float3 color : COLOR0; }; v2f vert (appdata_base v) { v2f o; o.pos = mul (UNITY_MATRIX_MVP, v.vertex); //o.color = _Color; return o; } half4 frag (v2f i) : COLOR { //return half4 (i.color, 1); return half4(_Color); }

I have included the old bits as comments so you can see what I changed. I got rid of the color variable in the structure as we aren't passing color from the vertex to the fragment shader. I also got rid of the line of code in the vertex shader that writes to the color variable. I then changed the line of code that sets the color in the fragment shader. I set it to directly use the _Color property rather than i.color.

#unity #unity 3d garden #shaders

The next step is to make the colour a property that I can edit in the editor.

I started by uncommenting the property section from my old shader so that I have the property _Color. I can then use _Color as a variable in my shader.

Shader "BrickShader" { Properties { _Color ("Main Color", Color) = (1,0.7,0.4,1) } SubShader { Pass { CGPROGRAM #pragma vertex vert #pragma fragment frag #include "UnityCG.cginc" struct v2f { float4 pos : SV_POSITION; float3 color : COLOR0; }; v2f vert (appdata_base v) { v2f o; o.pos = mul (UNITY_MATRIX_MVP, v.vertex); o.color = _Color; return o; } half4 frag (v2f i) : COLOR { return half4 (i.color, 1); } ENDCG } } Fallback "VertexLit" }

But it doesn't compile! I get an error: "_Color undeclared identifier" I needed to do one more thing. Even though _Color exists as a property I still need to declare it in Cg:

Shader "BrickShader" { Properties { _Color ("Main Color", Color) = (1,0.7,0.4,1) } SubShader { Pass { CGPROGRAM #pragma vertex vert #pragma fragment frag #include "UnityCG.cginc" float4 _Color; struct v2f { float4 pos : SV_POSITION; float3 color : COLOR0; }; v2f vert (appdata_base v) { v2f o; o.pos = mul (UNITY_MATRIX_MVP, v.vertex); o.color = _Color; return o; } half4 frag (v2f i) : COLOR { return half4 (i.color, 1); } ENDCG } } Fallback "VertexLit" }

That seems to work. I can now edit the value of the Main Color property, giving the result shown in the picture. (It took me a while to remember where to edit the property. Was it in the material? the Shader? the Object? Turns out you can do it either in the shader or in the object by clicking on the coloured circle)

#unity #unity 3d garden #shaders

I want to first simplify it right down and just apply a constant colour to the vertices.

I copied the colour from my old shader and assigned it to the colour output in the vertex shader:

v2f vert (appdata_base v) { v2f o; o.pos = mul (UNITY_MATRIX_MVP, v.vertex); o.color = {1,0.7,0.4,1}; return o; }

This failed to compile. I think the problem is that I used the {} notation to assign a constant vector to the colour. Maybe I should use the constructor notation like this:

v2f vert (appdata_base v) { v2f o; o.pos = mul (UNITY_MATRIX_MVP, v.vertex); o.color = float4(1,0.7,0.4,1); return o; }

That worked, and gave the image shown above. It isn't quite the colour that I wanted, but that's Okay because what I really want is for the colour to be something I can set as a property.

#unity #unity 3d garden #shaders

It now does something. The photo shows the result. It looks like it is doing what the shader should be doing: colouring vertices based on their normals.

But... that's not really what I want.

#unity #unity 3d garden #shaders

I can now start working on a Cg shader. I read the link above to get an idea of how they worked and then copied the first example into my existing shader (I left a commented version of the old shader in there in case I need bits of it}

Shader "BrickShader" { //Properties { // _Color ("Main Color", Color) = (1,0.7,0.4,1) //} //SubShader { // Pass { // Material { // Diffuse [_Color] // } // Lighting On // } //} SubShader { Pass { CGPROGRAM #pragma vertex vert #pragma fragment frag #include "UnityCG.cginc" struct v2f { float4 pos : SV_POSITION; float3 color : COLOR0; }; v2f vert (appdata_base v) { v2f o; o.pos = mul (UNITY_MATRIX_MVP, v.vertex); o.color = v.normal * 0.5 + 0.5; return o; } half4 frag (v2f i) : COLOR { return half4 (i.color, 1); } ENDCG } } //Fallback "VertexLit" }

When I did that at first it had no effect. What had gone wrong?

I was initially confused. I looked around and saw that there were 2 things called BrickShader in the Project view. I then remembered that there is both a Shader object and a Material object. What I had done was open the material object and click on "Open Compiled Shader", but editing the result seems not to change the shader. Maybe I have to edit the shader object itself. I opened that and clicked "edit" and tried changing that result.

#unity #unity 3d garden #shaders

I eventually decided to go with Cg.

All of the main books on Cg are available free online from nvidia (link above). This will make it easier for students to learn it.

Also I want to go through my own learning process, and there will be more of that if I use Cg rather than a language I already know.

The principles behind the two languages are the same but I will have to learn a new syntax.

#unity #unity 3d garden #shaders

Unity also supports GLSL, but there is less documentation.

A bit of dilema, which language should I use?

#unity #unity 3d garden #shaders

Trending Blogs

Recently Viewed Blogs

Unity 3D garden