- Home /
How can I achieve this kind of shading?
I've searched allot for this kind of shading, it colors every face with a different color:
http://imagine.inrialpes.fr/people/Francois.Faure/htmlCourses/WebGL/meshes/cube36.html
but the site didn't supply the source code!
What I want to do here is to use this kind of shading for mobile, not webGl.
Answer by Bunny83 · Jul 08, 2017 at 03:25 PM
There are several ways. Unity's default cube mesh has mapped each face to the whole texture, at least in the first UV channel. The second UV channel maps each face to a different portion of the texture. So you can use a custom shader that simply uses the second UV channel (UV1) instead of the first(UV0) or create your own mesh where you map the first channel the way you like.
In case you don't want to use any textures but simply assign a single color to each face, you can use a shader that uses vertex colors and use a mesh that has it's vertex colors set appropriately. I've recently posted 3 simple opaque shaders which use vertex colors.
A third way (without changing the mesh and using the default cube mesh) is to write a shader that chooses a vertex color based on the vertex normal direction.
Btw the site you have linked is not made with Unity. The source code can simply be read. Though it's just a usual WebGL project written in (web)JavaScript. Just have a look at source of the webside. In FireFox just press CTRL+U. The shader code (as GLSL shader) is right there as well as all the rendering and setup code. The actual cube mesh (with it's vertex colors) is defined in a seperate javascript file(cubePoints.js). Though this probably won't help you much if you want to do this in Unity.
Thank you for all the information you posted. But, excuse my knowledge in shader writing, especially for openGL and unity itself. I just copied your second shader in the post you referenced to, but It only gave me unlit cubes. How do I define the color for each face? or each triangle?...you can link to that in here.
BTW, I want to use that shader on mobile platforms.
You have to set the vertex colors of your mesh. You can assign a color to every vertex of a mesh. A cube has 24 vertices (4 vertices per side times 6 sides). If you want a solid color for one side you need to set all 4 vertex colors of one side to the same color, otherwise you would get a gradient between the vertices.
For some strange reason the vertices of the default cube are not sequencial grouped. Well, almost, just two vertex pairs are swapped. Here's an example how to set the vertex colors of Unity's default cube. However keep in $$anonymous$$d that in future versions of Unity the vertex order might be changed.
int[] faces = new int[]
{
0,1,2,3, // forward
4,5,8,9, // up
6,7,10,11, // back
12,13,14,15, // down
16,17,18,19, // left
20,21,22,23, // right
};
Color[] cols = new Color[]
{
Color.red, Color.green, Color.blue,
Color.yellow, Color.cyan, Color.magenta,
};
private void Start()
{
var mf = GetComponent<$$anonymous$$eshFilter>();
var mesh = mf.mesh;
var colors = new Color[mesh.vertexCount];
for(int i = 0; i < 6; i++)
{
var col = cols[i];
for(int n = 0; n < 4; n++)
{
colors[faces[i * 4 + n]] = col;
}
}
mesh.colors = colors;
}
The faces array just maps the indices into groups of 4. As you can see the second and third face have two vertices swapped. It assigns the colors defined in the "cols" array, one color for each face.
This screenshot also views the vertex indices of all vertices. I offset them along the vertex normal (since there are always 3 vertices at each corner)
Oh god! it worked! thank u so much, you're the best!