Help Converting Shader Builder Code

[MackeyK24]

Hi guys... without going into a really long and drawn out explanation of of my terrain shader problems.

 This really smart shader guy @NasimiAsl has the 'snippet of code' in ShaderBuilder format. This code lets him tile in a texture atlas WITHOUT using the glsl fract()

function. Now it still gets seams like using the fract function BUT apparently these seams are fixable (and apparently fract is UNFIXABLE ).

 

Take a look at his playground: http://www.babylonjs-playground.com/#1ODVTX#21 

and the ShaderBuilder code:

var atlasMap = function(SB,path, x,y,w,h,W,H,tx,ty){
            
            return SB.InLine('\
            float left = '+BABYLONX.Shader.Print(x)+';\
            float top = '+BABYLONX.Shader.Print(y)+';\
            float width ='+BABYLONX.Shader.Print(w)+';\
            float height ='+BABYLONX.Shader.Print(h)+';\
            float WIDTH ='+BABYLONX.Shader.Print(W)+';\
            float HEIGHT = '+BABYLONX.Shader.Print(H)+';\
\
            float uv_w =  width / WIDTH;\
            float uv_h =  height / HEIGHT;\
            float uv_x =  left / WIDTH;\
            float uv_y =  1.-  top  / HEIGHT -uv_h;\
\
           float tile_x = '+BABYLONX.Shader.Print(tx)+';\
            float tile_y = '+BABYLONX.Shader.Print(ty)+';\
\
            vec2 newUvAtlas = vec2( mod( vuv.x*tile_x  , uv_w ) +uv_x  , mod(vuv.y*tile_y    ,uv_h)+uv_y  );\
            vec2 edgeUvAtlas_x = vec2( mod( vuv.x*tile_x +0.5*uv_w , uv_w ) +uv_x  , mod(vuv.y*tile_y -0.0*uv_h  ,uv_h)+uv_y  );\
            vec2 edgeUvAtlas_y = vec2( mod( vuv.x*tile_x -0.0*uv_w , uv_w ) +uv_x  , mod(vuv.y*tile_y -0.5*uv_h  ,uv_h)+uv_y  );\
             vec2 edgeUvAtlas_xy = vec2( mod( vuv.x*tile_x -0.5*uv_w , uv_w ) +uv_x  , mod(vuv.y*tile_y -0.5*uv_h  ,uv_h)+uv_y  );')
              // make edge map
             .Map({ path: path ,  uv:'vec2(edgeUvAtlas_x)'  })
            .Reference(1) // keep edge  map in result_1 var
              .Map({ path: path ,  uv:'vec2(edgeUvAtlas_y)'  })
            .Reference(2) // keep edge  map in result_2 var
             .Map({ path: path ,  uv:'vec2(edgeUvAtlas_xy)'  })
            .Reference(3) // keep edge  map in result_2 var
            .Map({ path: path ,  uv:'vec2(newUvAtlas )'  })
           
           // FIND A EDGES
           .InLine('vec2 edge = vec2(  pow( 2.*abs((newUvAtlas.x-uv_x)/uv_w -0.5), 3.),  pow( 2.*abs((newUvAtlas.y-uv_y)/uv_h -0.5), 3.) ) ;')
          .Reference(4,' result = vec4(  edge.x ,edge.y,  max(edge.x,edge.y)  ,1.);')
            .Pink(4,' result =  result_1   ; ',{ rangeStep:-0.48,rangePower:0.48})
             .Cyan(4,' result =  result_2 ; ',{ rangeStep:-0.48,rangePower:0.48})
             .White(4,' result =  result_3  ; ',{ rangeStep:-0.48,rangePower:0.48}) ;
            
        
        };

 

What i need is good old fashion glsl code that basically calculating the uv coords for tiling into the texture atlas. The above code (WHICH IS ABSOLUTELY BRILLIANT ) make NO sense to me because of all the extra ShaderBuilder stuff (Like what does Pink Cyan And Whte have to do with anything??).

Anyways... i am not really trying to use ShaderBuilder (I have my own use of shaders via unity that i use good ole glsl)...

 

BUT WHAT I NEED is the math being used to calculate out the texture atlas uv in a way i can use (and even tell what the heck is going on) 

This is what i got so far from the snippet above:

 

// Normalized Values
			vec2 vuv = vTerrainUV;
            float uv_w =  atlasRect1.w;
            float uv_h =  atlasRect1.z;
            float uv_x =  atlasRect1.x;
            float uv_y =  atlasRect1.y;
           	float tile_x = atlasInfo1.x;
            float tile_y = atlasInfo1.y;
			vec2 newUvAtlas = vec2(mod(vuv.x * tile_x , uv_w) + uv_x, mod(vuv.y * tile_y, uv_h) + uv_y);
            
			vec2 edgeUvAtlas_x = vec2(mod(vuv.x * tile_x + 0.5 * uv_w, uv_w) + uv_x, mod(vuv.y * tile_y - 0.0 * uv_h, uv_h) + uv_y);
            vec2 edgeUvAtlas_y = vec2(mod(vuv.x * tile_x - 0.0 * uv_w, uv_w) + uv_x, mod(vuv.y * tile_y - 0.5 * uv_h, uv_h) + uv_y);
            vec2 edgeUvAtlas_xy = vec2(mod(vuv.x * tile_x - 0.5 * uv_w, uv_w) + uv_x, mod(vuv.y * tile_y - 0.5 * uv_h, uv_h) + uv_y);

			atlas1UV = newUvAtlas;
			splatColor = texture2D(albedoSampler, atlas1UV + uvOffset) * baseColor1.r;

 

This is working so far... Just like @NasimiAsl first version (#20) and is showing the edge seams... But the version listed above SOMEHOW uses these new 

edgeUvAtlas variable to do ... I DONT KNOW WHAT... I can't see how the heck these values ever get used in the actual texture2D call... As a matter of fact i am completely lost defining the last 'vec2 edgeUvAtlas_xy = vec2(...)' statement.

But whatever he is doing there... i need to do that in a regular looking fragment shader main() function to calculate my final uv and use in the texture2D call:

atlas1UV = newUvAtlas;
splatColor = texture2D(albedoSampler, atlas1UV + uvOffset) * baseColor1.r;

As you can see i am just using the first calculated value of atlas1UV = newUvAtlas

But using all that .Map and .Reference and .Pink (wtf) ... i can't tell how to actually get and used the final end result as my 'atlas1UV' for the texture2D call

I hope someone out there understand what I'm trying to say ... It probably a 3 second fix (but I'm not smart enough to crack @NasimiAsl excellent implementation of texture atlas tiling)

Again... Any help would be awesome

 

[NasimiAsl]

keep it here i answer that after 2 days  

[MackeyK24]

4 hours ago, NasimiAsl said:

keep it here i answer that after 2 days  

OK... 

Thanks again @NasimiAsl ... I really appreciate it