0
\$\begingroup\$

I'm re-writing my Unity game in Raylib and are trying to recreate a path/road-shader I made with Shader Graph.

The first picture is how it looks in Unity, with faded/blurred edges. The path is a 2D spline-mesh created as you can see in the second picture. The third image is a spline-mesh created the same way in Raylib.

Does anyone have an idea how to get faded edges with GLSL-code?

enter image description here

The Shader Graph looks like this:

enter image description here

I'm new to GLSL and have been at this for days. I would really appreciate any help!

Edit:

I also tried to manually convert the shader. Here is an example where I tried to convert the Shader Graph.

Vert:

in vec3 vertexPosition;
in vec2 vertexTexCoord;

uniform mat4 mvp;
uniform mat4 matModel;

out vec2 fragTexCoord;
out vec3 fragPosition;

void main() {
      fragTexCoord = vertexTexCoord;
      fragPosition = vertexPosition;

      gl_Position = mvp * vec4(vertexPosition,1.0);
}

Frag:

in vec2 fragTexCoord;
in vec3 fragPosition;

uniform sampler2D texture0;

uniform float width;
uniform float blur;

void main() 
{
      vec4 texColor = texture2D(texture0, fragPosition.xy);
      vec2 halfVec = vec2(0.5, 0.5);
      float dist = distance(fragTexCoord, halfVec);
      
      float smoothstep1 = smoothstep(width,blur,dist);

      gl_FragColor = vec4(texColor.xyz, smoothstep1);

}

The result is this:

enter image description here

Or this, depending on width- and blur-parameters

enter image description here

Edit 2:

I translated the Shader Graph-code node by node and the result was basically what I already wrote i GLSL. The part I can't figure out is this Shader Graph-generated code.

(I simplified it from 5 to 2 lines and shortened the variable names)

UnityTexture2D unityTex =  UnityBuildTexture2DStructNoScale(_Texture2D);
float4 texColor = SAMPLE_TEXTURE2D(unityTex.tex,UnityBuildSamplerStateStruct(SamplerState_Linear_Repeat).samplerstate, unityTex.GetTransformedUV((IN.WorldSpacePosition.xy) / _Size)); 

Does anyone know what GetTransformedUV does? I cant find any information on UnityTexture2D by googling.

\$\endgroup\$
6
  • \$\begingroup\$ How have you tried converting this to glsl so far? Note that you can select the shader graph in Unity and select "View Generated Shader" to see the hlsl code for any graph, which is usually reasonably straightforward to convert to glsl. \$\endgroup\$
    – DMGregory
    Nov 2, 2023 at 23:27
  • \$\begingroup\$ Yes, I tried that. It generated a file 1500 lines long of what seems to be HLSL. Maybe a setting I'm missing somewhere? \$\endgroup\$ Nov 2, 2023 at 23:42
  • \$\begingroup\$ That sounds like what it's meant to do. HLSL commands mostly have direct equivalents in GLSL, so finding the relevant chunk and translating it line for line shouldn't be too bad. Especially if you make an unlit version first to minimize the lighting boilerplate it generates. Most of the lines you'll get from a lit graph are permutations for each different lighting/rendering scenario. \$\endgroup\$
    – DMGregory
    Nov 3, 2023 at 0:05
  • \$\begingroup\$ Thank you, I will try that. \$\endgroup\$ Nov 3, 2023 at 0:10
  • \$\begingroup\$ I notice your graph picks out just the x component of the UV texture coordinates to apply the fading effect, while your glsl code is computing a 2D distance (a radial falloff on both x and y). Why did you choose to change this? \$\endgroup\$
    – DMGregory
    Nov 3, 2023 at 10:39

1 Answer 1

0
\$\begingroup\$

I finally made it work with a kind of hack.

Because its 2D and unlit I don't need to use normals. So I saved the center of the spline in the normals of the mesh. Then I can fade the edges based on the distance between the center and each vertex.

I get the same result as the Shader Graph in Unity.

enter image description here

I guess It's possible to store the data and pass it to the shader some other way, but I couldn't think of any.

\$\endgroup\$
3
  • \$\begingroup\$ This would normally be the job of the UV texture coordinates. u=0 for the vertices on the left, u=1 for the right, then the middle of the spline is u=0.5. You can use abs(uv.x - 0.5) as your distance from center, just like in the shader graph. \$\endgroup\$
    – DMGregory
    Nov 4, 2023 at 18:55
  • \$\begingroup\$ Wont that get the distance from the middle of the texture? I tried it but it didn't work. \$\endgroup\$ Nov 4, 2023 at 19:41
  • \$\begingroup\$ In Unity, the (primary) UVs are assigned relative to the ribbon, with x running across the ribbon and y running down its length. It sounds like you've assigned your UVs to the ribbon based on its position in worldspace, instead of using a separate varying for that coordinate pair. You can easily have both: one used for looking up into the stone texture (world space) and one used for calculating the fade (local to the ribbon segment). \$\endgroup\$
    – DMGregory
    Nov 4, 2023 at 20:43

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .