Tag Archives: shaders

Unity 3D – Shaders scripts – part 001.

This is the first tutorial in a series of shaders tutorials in Unity 3D.
Open your Unity 3D project and using right click mouse add a Unlit shader to your project, see the image:

Rename your shader file and open this shader with right click mouse.
You will see the content of the default shader into your Visual Studio IDE.
Let’s see my shader example named NewUnlitShader :

When you write your first shader then you need to know some rules:

  • take a look at this link to see the most common variables and HLSL type and rules;
  • example: vec2 types with float2;
  • example: mat2 with float2x2;
  • example: vec3(1)  is float3(1,1,1);
  • example: mainImage(out vec4 fragColor, in vec2 fragCoord) is float4 mainImage(float2 fragCoord : SV_POSITION) : SV_Target;
  • example:
  • Shader “Unlit/NewUnlitShader” – the shader will add into your material from : Unlit – NewUnlitShader;
  • you can change the name NewUnlitShader , but you need to change the name of the file shader;
  • the body of shader start with word CGPROGRAM and end with word ENDCG;
  • Shader Level of Detail (LOD) is a number (see doc);
  • the Properties word is used for: inputs like a texture (see and _MainTex (“Texture”, 2D) = “white” {} );
  • the SubShader word is used to start define your settings for shader and the content of shader;
  • the words like: #pragma, #include , struct  are reserved words and is used to set and make the body of shader;
  • any shader come with : vertex shader body and fragment shader body;

One simple example of settings for vertex and fragment body shader but also you can have pixel shader body:

The next step is to add this to your shader:

Now, about vertex shader this can manipulate the attributes of vertices.
The fragment shader is the same as pixel shader.
The fragment/pixel shader is part of the rasterization steps.
You can see in my first example I used fragment shader not pixel shader:  #pragma fragment frag
The result is this function :

This is first part of this tutorials about shaders and you will need to learn all of this and make connections with my examples.

Posted in All, Programming, Unity 3D. Tagged with , , , , .

Make your shadres online with SpiderGL – MeShader interface.

SpiderGL is a JavaScript 3D Graphics library which relies on WebGL for realtime rendering.

You can test it online using your browser using this website.

The website allow you to write shaders and also rendering the output.

About the web interface then has some windows to write your code and set the viewer.

See the next image:

meshade website

All steps show you how to use this web interface.

You need to load the 3D object using the Load button with this mesh: data/gargoyle1k.obj.

The website come with default example from shaders source code ( see step 2 and 3).

The steps 4 will apply the shaders and show on log windows if you got errors.

The step 5 will save your shaders.

Now about shaders source code.

If you want to use shader you need to have two source code: vertex shader source code and fragment shader source code.

The website interface come with two windows for each source code.

All two windowes need to have this source code in the top of each windows source code:

This tell shaders rendering about the data used by vertex and fragment shader.

This can be already declare in some engine scripting.

For example if you use Unity 3D engine then you can redefine VERTEX_P and FRAGMENT_P at the top of your shader file.

… where VERTEX_P and FRAGMENT_P it’s vertex and fragment shaders source code.

About Vertex Shader Source is the source code can be used to:

… is a set of attributes and functions performed by vertices and is responsible for running the vertex shaders.

About Fragment Shader Source is the source code can be used to:

… all the interpolated values computed in vertex shaders is used to code all effects that the application requires.

Also the fragment shader has no access to the frame buffer.

What do you know about shaders source code ?

Has one part of declarations like any programming language.

Also come with main function to run the shader.

The declarations is also like any language with variable , constants:

Uniforms are values which do not change during a rendering.

Attributes are only available in vertex shader and they are input values which change every vertex.

Varyings are used for passing data from a vertex shader to a fragment shader.

const this variables can be declared as const are compile-time constants and are not visible outside the shader that declares them.

If you know C language then the language syntax is C-like.

The default example from website :

The vertex shader

The fragment shader

Simple example I created using this website to show the normals.

Change this source code line from fragment shader:

The result rendering is:


You can see the object is fill with colors with x,y and z colors.

I will come with new tutorials about shaders.

Posted in 3D, All, OpenGL. Tagged with , , , .