Search Unity

  1. Megacity Metro Demo now available. Download now.
    Dismiss Notice
  2. Unity support for visionOS is now available. Learn more in our blog post.
    Dismiss Notice

Shader Graph on mesh. How to make a semi transparent grid?

Discussion in 'Editor & General Support' started by TR33, Nov 26, 2018.

  1. TR33

    TR33

    Joined:
    Dec 27, 2016
    Posts:
    16
    Hi guys,
    I'm working on procedual mesh and playing around with the new shader graph. However I'm running into a problem I can't fix. For the shader graph to pick up the vertex color I have to acually set the color of the mesh. But that seems not to be overwritten by the shadergraph and the transparent part of the grid. So basically I end up with a correcly colored grid AND a colored mesh.
    Is there a way to set the color of the mesh but don't display it / Let shadergraph overwrite the whole mesh instead of just painting the grid texture on top?

    Files are attached. The look I was going for (if the explanation wasn't that good) is something like this:
    https://www.shutterstock.com/en/image-vector/wireframe-petspective-multicolored-landscape-linear-cyberspace-749875822
     

    Attached Files:

    Last edited: Nov 26, 2018
  2. NUKKschocke

    NUKKschocke

    Joined:
    Oct 17, 2018
    Posts:
    34
    My first guess would be to set the material to transparent and use an invert (Flip node) of the adjusted grid texture for the alpha channel of the master output node.
    However, I haven't worked with Vertex Color in shader graph yet so I might be overlooking something.
     
    TR33 likes this.
  3. TR33

    TR33

    Joined:
    Dec 27, 2016
    Posts:
    16
    I played a bit with the nodes and noticed that i had to switch to "transparent" on the master node (as NUKK said) and that only black parts of the sprite are turned into transparent parts.
    After applying these changes I still get some unwanted behaviour (when the gradient changes color, I get contour lines) but I can live with that.
     
  4. NUKKschocke

    NUKKschocke

    Joined:
    Oct 17, 2018
    Posts:
    34
    Yeh. Tweaking the line between opaque and transparent can involve some clunky math. Or tweaking the grid texture maybe.
    What gradient do you mean?
     
  5. TR33

    TR33

    Joined:
    Dec 27, 2016
    Posts:
    16
    The gradient that determins the vertex color depending on the relative heigth of the vertex. First Pic is with the gradient mode = blend, second pic with gradient mode = fixed. As you can see the color of the lines which are not the grid (contour lines != grid texture) switch after the mode switch. So these lines somehow get generated with the change in color of the gradient.
    Pic 3 is the used gradient.
     

    Attached Files:

  6. NUKKschocke

    NUKKschocke

    Joined:
    Oct 17, 2018
    Posts:
    34
    Those not-grid-lines were already displayed in your first picture. If I understand correctly, they aren't generated, they are just colored differently depending on the blend mode used.
    As far as I can see, you are indeed applying the gradient colors to the lines based on their height and as long as you feed the vertex color into the albedo, the vertices are gonna show up on the mesh.

    I'm at a bit of a loss here because I can't fully grasp what you're trying to achieve. Am I correct to assume that you're trying to
    - paint a grid on a mesh
    - make everything but the grid lines transparent
    - color the grid according to the height of the mesh vertex
    - pick the color of the grid from a gradient
     
    TR33 likes this.
  7. TR33

    TR33

    Joined:
    Dec 27, 2016
    Posts:
    16
    You are 100% correct.
    My thought on these non grid lines was that they are on the edge to the next color of the gradient. Thus these lines change color when going from blend to fixed. Also its not a repetative pattern, but depending on the heigth of the mesh if these lines show up or not. In squares with all 4 points having the same color these lines dont show up. In squares where there is indeed a color change, these lines show up.
    Ok i changes the gradient to black -> white but these lines appear in the same spot. So it's not the gradient but the texture.... But why?
     
  8. NUKKschocke

    NUKKschocke

    Joined:
    Oct 17, 2018
    Posts:
    34
    My first guess would be that you're applying the grid texture to the mesh using its UVs. As the mesh seems to be generated these UVs are probably not mapped correctly.
    There is actually a triplanar mapping node in the shader graph. You could use that to map the grid from the Y-axis only.
    I am not sure if the node uses world or object space, so you might have to do some math with the object node.

    ShaderGraph Triplanar-Node
    ShaderGraph Object-Node (incidentally, @Unity when are we getting object rotation in the object node? xD)
     
    TR33 likes this.
  9. TR33

    TR33

    Joined:
    Dec 27, 2016
    Posts:
    16
    Thanks man. The hint with uvs was worth gold. Ofcourse I need to set the uvs. The solution was actually pretty easy. Just set the uvs in script. Changes to the shader took me longer but here its super easy too. Just feed the texture into a "Sample Texture 2D" and the RGB_out into the alpha of the master node. Done.
     
  10. paulindrome

    paulindrome

    Joined:
    Mar 10, 2018
    Posts:
    36
    Same guy here, not-at-work-profile.
    Glad you got it figured out. The point with feeding the grid RGB directly into the alpha channel kinda eluded me for some reason. If you wanna be REALLY technical, you could use the different channels of your grid texture. Then you can use them individually to store specific information you might like to use.

    F.e. if you ever want all the grid POINTS to be more noticeable or start flashing, you could animate a factor that makes a dot in the texture's red channel fade in or out, while keeping the blue channel for the grid itself:
    grid-with-point.png
    (Just a quick rubbish idea for funsies. You can separate the channels using a ShaderGraph Split-Node.)

    Btw. I'm curious how you set the UVs in script on a generated mesh.
     
  11. TR33

    TR33

    Joined:
    Dec 27, 2016
    Posts:
    16
    Code (CSharp):
    1. public class MeshGenerator : MonoBehaviour {
    2.  
    3.     Mesh mesh;
    4.  
    5.     Vector3[] vertices;
    6.     int[] triangles;
    7.     Color[] colors;
    8.     Vector2[] uvs;
    9.  
    10.     public int xSize = 20;
    11.     public int zSize = 20;
    12.  
    13.     public Gradient gradient;
    14.  
    15.     private float minMeshHeight;
    16.     private float maxMeshHeight;
    17.  
    18.     private void Start()
    19.     {
    20.         mesh = new Mesh();
    21.         GetComponent<MeshFilter>().mesh = mesh;  
    22.     }
    23.  
    24.     private void FixedUpdate()
    25.     {
    26.         CreateShape();
    27.         UpdateMesh();
    28.     }
    29.  
    30.     private void CreateShape()
    31.     {
    32.         vertices = new Vector3[(xSize + 1) * (zSize + 1)];
    33.  
    34.         for (int i = 0, z = 0; z <= zSize; z++)
    35.         {
    36.             for (int x = 0; x <= xSize; x++)
    37.             {
    38.                 float y = Mathf.PerlinNoise(x * .3f, z * .3f) * 4f;
    39.                 vertices[i] = new Vector3(x, y, z);
    40.  
    41.                 if (y > maxMeshHeight)
    42.                 {
    43.                     maxMeshHeight = y;
    44.                 }
    45.                 if (y < minMeshHeight)
    46.                 {
    47.                     minMeshHeight = y;
    48.                 }
    49.  
    50.                 i++;
    51.             }
    52.         }
    53.  
    54.         //Manipulate vertices here
    55.  
    56.         triangles = new int[xSize * zSize * 6];
    57.  
    58.         int vert = 0;
    59.         int tris = 0;
    60.  
    61.         for (int z = 0; z < zSize; z++)
    62.         {
    63.             for (int x = 0; x < xSize; x++)
    64.             {
    65.                 triangles[tris + 0] = vert + 0;
    66.                 triangles[tris + 1] = vert + xSize + 1;
    67.                 triangles[tris + 2] = vert + 1;
    68.                 triangles[tris + 3] = vert + 1;
    69.                 triangles[tris + 4] = vert + xSize + 1;
    70.                 triangles[tris + 5] = vert + xSize + 2;
    71.  
    72.                 vert++;
    73.                 tris += 6;
    74.             }
    75.             vert++;
    76.         }
    77.  
    78.         uvs = new Vector2[vertices.Length];
    79.         colors = new Color[vertices.Length];
    80.  
    81.         for (int i = 0, z = 0; z <= zSize; z++)
    82.         {
    83.             for (int x = 0; x <= xSize; x++)
    84.             {
    85.                 uvs[i] = new Vector2(x, z);
    86.                 float height = Mathf.InverseLerp(minMeshHeight, maxMeshHeight, vertices[i].y);
    87.                 colors[i] = gradient.Evaluate(height);
    88.                 i++;
    89.             }
    90.         }
    91.     }
    92.  
    93.     private void UpdateMesh()
    94.     {
    95.         mesh.Clear();
    96.  
    97.         mesh.vertices = vertices;
    98.         mesh.triangles = triangles;
    99.         mesh.colors = colors;
    100.         mesh.uv = uvs;
    101.  
    102.         mesh.RecalculateNormals();
    103.     }
    104.  
    105.     private void OnDrawGizmos()
    106.     {
    107.         if (vertices == null)
    108.             return;
    109.  
    110.         for (int i = 0; i < vertices.Length; i++)
    111.         {
    112.             Gizmos.DrawSphere(vertices[i], .1f);
    113.         }
    114.     }
    115.  
    116. }
    Have fun with it. :)
    I guess you could also feed all vertices of an existing mesh into your vertices array.
    Stole that from Brackeys btw. ;)