Search Unity

  1. Welcome to the Unity Forums! Please take the time to read our Code of Conduct to familiarize yourself with the forum rules and how to post constructively.
  2. Dismiss Notice

Question Dot pattern as UI image

Discussion in 'Shader Graph' started by Finijumper, Sep 20, 2023.

  1. Finijumper

    Finijumper

    Joined:
    Jul 12, 2016
    Posts:
    75
    Hi,

    I am trying to create a similar pattern to this as a UI shader effect.
    upload_2023-9-20_20-56-33.png

    The main issue is that I think I need to get the rect scale inside the sader and I don't think Unity natively supports that.

    Is it possible to achieve this effect procedurally? I think there is some new UI shadergraph integradion with newer versions of Unity but not sure if what I want can still be achieved.
    @FredMoreau
     
  2. FredMoreau

    FredMoreau

    Unity Technologies

    Joined:
    May 27, 2019
    Posts:
    96
    Hi @Finijumper,

    It seems you're using the Dots pattern, which doesn't have UV input. But if you double click on that node, since it's a Subgraph, you can go and copy/paste its content.

    Screenshot 2023-09-26 at 3.03.26 PM.png

    You can then use a Position node, along with an Object node to get the bounds and do some math, depending if you want a constant screen density, or something that scale with the Canvas.

    Screenshot 2023-09-26 at 3.18.29 PM.png

    Screenshot 2023-09-26 at 3.24.13 PM.png

    Hope this helps.
     
    Finijumper likes this.
  3. Finijumper

    Finijumper

    Joined:
    Jul 12, 2016
    Posts:
    75
    Hi @FredMoreau , thanks for your reply.

    The image I shared is from Photoshop. Where can I get the Dots pattern in your screenshots?
     
  4. FredMoreau

    FredMoreau

    Unity Technologies

    Joined:
    May 27, 2019
    Posts:
    96
    It's part of ShaderGraph's "Procedural Patterns" Sample, that you can install from the Package Manager.
    Once installed, you'll find it under /Patterns/Simple/Dots.

    Screenshot 2023-09-27 at 11.10.42 AM.png
     
    Finijumper likes this.