Search Unity

Question Creating a simple three color pattern on top of a triangle

Discussion in 'Shader Graph' started by chasethomas, Apr 4, 2021.

  1. chasethomas

    chasethomas

    Joined:
    Oct 16, 2015
    Posts:
    17
    Hello!

    I'm trying to create an equally divided three color pattern on top of a triangle-shaped mesh, like so:
    upload_2021-4-3_20-47-36.png

    So far, I've been able to apply a color to just the top of the mesh using dot product

    upload_2021-4-3_20-47-21.png

    Result:
    upload_2021-4-3_20-48-53.png

    Any tips on how to achieve this effect on top would be appreciated!
     
  2. Olmi

    Olmi

    Joined:
    Nov 29, 2012
    Posts:
    1,553
    Hi,

    I think you could use some polar math here, something like in my example below.
    It might contain some mistakes as I cooked it up pretty quick, but for an equilateral triangle this should work:

    So basically you would just create polar coordinates, and then scale and quantize the values so that you get the desired range of numbers. In this case it would be a shape divided to three parts.

    You need to zoom in to see the details.I commented the image so that it would explain this visually.

    20210404_triangle_shape.png
     
  3. chasethomas

    chasethomas

    Joined:
    Oct 16, 2015
    Posts:
    17
    First off, I really appreciate your response- that is so much more complex than I had expected :D.

    It seems to work well on Unity primitives, but sadly for my unwrapped tile object it's a bit off:

    upload_2021-4-4_19-35-17.png

    If I feed just the one-minus'd UVs into the color, I get this:
    upload_2021-4-4_19-35-52.png

    In Blender, here's my unwrapped tile mesh:
    upload_2021-4-4_19-36-22.png

    My basic knowledge of shader graph makes me think this should be done with triplanar projection (vs. mapping to the UVs), but I'm not exactly sure of the best approach. Any thoughts? I'll keep tinkering in the meantime.
     
  4. Olmi

    Olmi

    Joined:
    Nov 29, 2012
    Posts:
    1,553
    Coordinates have to of course match, in my example I just made the assumption that the triangle would fill the UV space etc.

    Another way could be to use object space coordinates. Then you would not need to worry about UVs. Here's an example:

    Basically you just need to feed in the object space coordinates and then offset the origin. This type of solution would allow you to rotate the objects freely etc. I brought in an equilateral triangle I made in Blender (it does not have UVs.)

    20210405_triangle_shape_objectspace1.png

    This is how the shader looks like on a few different objects I imported from Blender.
    20210405_triangle_shape_objectspace2.png

    So the texture will follow the model when it translates and rotates in the world.
     
    Last edited: Apr 5, 2021
  5. chasethomas

    chasethomas

    Joined:
    Oct 16, 2015
    Posts:
    17
    This is great! So helpful- you've got a new follower on Twitter :)