Texture Atlas Tiling At the Shader

[MackeyK24]

@NasimiAsl here is atlas screen shot... the file itself is 26 mb (testing with png)

[MackeyK24]

@NasimiAsl Using just the bottom left pink title... and using normalized 0.1 values ... I get this:

 

I get this little lines but NO SEAMS.

Now this is without any cropping or altering the images... just regular texture swatches... I was hoping this lines are because of not exact pattern matching and i need to create the 9 copies of texture in a grid and crop out the center... i think... I hope... If that does not work, i am all out of ideas on getting texture atlas titling to work.

I will try and create tillable images like you explained before... I will try tomorrow ... Thanks again for all your help bro

 

[NasimiAsl]

w8 for me 20 min

[MackeyK24]

@NasimiAsl OK...

 

Btw... This is with a SEAMLESS texture swatch... still get little lines and far away looks kinda funky... But much better than before... we getting there:

 

 

 

 

But all the lines at least match up... So the seamless texture works for the pattern matching

 

Note: This seamless texture was from a Unity Seamless texture pack... NOT by doing the 9 copy center image crop you explained before... But the end result should be the same... Right ???

 

[fenomas]

@NasimiAsl Hey, thanks and that looks very cool!

To clarify a little though, when I say "for real content" I mean stuff like, in real content one would need to have a generalized shader, and pass in UV offsets by setting parameters on a material or something, right? As opposed to hard-coding the offsets into the shader, in which case one would dynamically be creating new shaders very frequently.

Similarly, I imagine that to use this effect in real content, one would in general want to also need the standard material features - specularity and so forth. I guess this would be done by forking standard material and writing your code somewhere inside, to replace the standard texture lookup logic. Is that generally the idea?

[NasimiAsl]

i recommend you do that with 9 image

i make photoshop action for that Tiling for AtlasMap.atn

you can attach that for your Photoshop and after you choose your image and press Ctrl + Shift + F9  you have result

i make that one pic for your pic

(buttom left )

 

[NasimiAsl]

dear @fenomas

you can define any uniform in your ShaderMaterial and make it variable

http://www.babylonjs-playground.com/#Y0RQ2F#9

http://www.babylonjs-playground.com/#Y0RQ2F#10

 

[NasimiAsl]

18 minutes ago, fenomas said:

want to also need the standard material features

i work on new material library ( customMaterial )

in that you can write your shader under standardMaterial benefits but not complete 100% ( maybe 95% )

and in other way yes you can add it in standard material like function and use it 

[MackeyK24]

39 minutes ago, NasimiAsl said:

i recommend you do that with 9 image

i make photoshop action for that Tiling for AtlasMap.atn

you can attach that for your Photoshop and after you choose your image and press Ctrl + Shift + F9  you have result

i make that one pic for your pic

(buttom left )

 

 Even with already seamless texture, i should still do the 9 image crop ???

Would that get rid of the tiny little lines i still now?

 

[MackeyK24]

Yo @NasimiAsl Here is using your Photoshop 9 image crop action:

 

 

Far away shots still look a little funky... but the 9 image crop seems to help git rid of little lines:

 

[NasimiAsl]

can you make a pg with this geometry?

[fenomas]

2 hours ago, NasimiAsl said:

dear @fenomas

you can define any uniform in your ShaderMaterial and make it variable

http://www.babylonjs-playground.com/#Y0RQ2F#9

http://www.babylonjs-playground.com/#Y0RQ2F#10

Ah I see, cool!

Quick question - is it possible to access the vertex indices inside a shader?

For my use case, it would be ideal to have one geometry use several different tiles out of the texture atlas. So I suspect that the most straightforward way to do this would be, to set UV values and vertex ranges as parameters. For example, vertices (or triangles) 1-100 use one set of UV values, and vertices (or polys) 101-200 use a different set, etc.

Is something like that possible to do on the shader side?

[NasimiAsl]

yes and i love that stuff 

http://www.babylonjs-playground.com/#1V70NA#14

that is just plan

[fenomas]

Neat demo!

Note though, I don't mean access the vertex position values, I mean access the indexes - or some other data that distinguishes one polygon from another within the same mesh.

What I'd like to do is dynamically construct a mesh, and have different parts of it be textured with different tiles from a texture atlas.

In other words, something like this: http://www.babylonjs-playground.com/#E4RBTW#1  -- if you imagine that model is one single mesh,  and that the red and green textures are two different tiles coming from the same texture atlas, then that's what I'm going for.

But I assume that to do this dynamically, I need to somehow set a parameter that tells the shader which polygons use which texture. (Like you did here, except in the general case.)

Does that make sense? But I have no idea how this would be done in practice.

[NasimiAsl]

yes you can but need some special uv

i call that SPS in GPU side 

this is a lot complicated in shader stuff and i am new be in that for now

http://www.babylonjs-playground.com/#1QC9DP#80

all under one mesh and managed just by uv (generated by GeometryBuilder )

you can chose any of face you want just by simple condition in shader

http://www.babylonjs-playground.com/#1QC9DP#83

http://www.babylonjs-playground.com/#1QC9DP#90

[MackeyK24]

Yo @NasimiAsl It looking better each time... But i notice that far away looks kinda of funny... what could be... maybe because there is only 1 single MIPMAP level 0 and it has to use the same LD i guess for the whole terrain...i dunno... What do you think is far away issue...?And if is single mipmap problem, why does i work when i actually use separate texture and NOT texture atlas

[MackeyK24]

Yo @NasimiAsl Check it out... After running your '9 Image Copy And Crop' script on the stripes texture... Looks real nice up close PERFECT tiling... Just far away need to work ...

 

 

And up close image:

 

 

Dude.. and the Texture atlas is a JPEG... BUT the Splatmap that is a PNG... that can't be a jpeg need the pixel precision for the actual splatmap, but the splats them selfs can be jpegs...

 

That up close looks real good to me

 

[NasimiAsl]

@MackeyK24 if i try make that shader with cyos i never can do that . it is different between ShaderBuilder and   Shader

actually i cant explain this line in my code correctly

 if( ((result_4.x*1.-0.)>1.0 ? 0. : max(0.,(result_4.x*1.-0.))) > 0.5 + -0.48  && ((result_4.y*1.-0.)>1.0 ? 0. : max(0.,(result_4.y*1.-0.))) < 0.5 - -0.48  && ((result_4.z*1.-0.)>1.0 ? 0. : max(0.,(result_4.z*1.-0.))) > 0.5 + -0.48  ) { vec4 oldrs_6_ = vec4(result);float al_6_ = max(0.0,min(1.0,(((result_4.x*1.-0.)>1.0 ? 0. : max(0.,(result_4.x*1.-0.))) + ((result_4.z*1.-0.)>1.0 ? 0. : max(0.,(result_4.z*1.-0.))))/2.0 - (((result_4.y*1.-0.)>1.0 ? 0. : max(0.,(result_4.y*1.-0.))))/1.0+(0.48))); float  l_6_ =  1.0-al_6_;   result =  result_1   ;  result = result*al_6_ +  oldrs_6_ * l_6_;    } if( ((result_4.x*1.-0.)>1.0 ? 0. : max(0.,(result_4.x*1.-0.))) < 0.5 - -0.48  && ((result_4.y*1.-0.)>1.0 ? 0. : max(0.,(result_4.y*1.-0.))) > 0.5 + -0.48  && ((result_4.z*1.-0.)>1.0 ? 0. : max(0.,(result_4.z*1.-0.))) > 0.5 + -0.48  ) { vec4 oldrs_7_ = vec4(result);float al_7_ = max(0.0,min(1.0,(((result_4.y*1.-0.)>1.0 ? 0. : max(0.,(result_4.y*1.-0.))) + ((result_4.z*1.-0.)>1.0 ? 0. : max(0.,(result_4.z*1.-0.))))/2.0 - (((result_4.x*1.-0.)>1.0 ? 0. : max(0.,(result_4.x*1.-0.))))/1.0+(0.48))); float  l_7_ =  1.0-al_7_;   result =  result_2 ;  result = result*al_7_ +  oldrs_7_ * l_7_;    } if( ((result_4.x*1.-0.)>1.0 ? 0. : max(0.,(result_4.x*1.-0.))) > 0.5 + -0.48  && ((result_4.y*1.-0.)>1.0 ? 0. : max(0.,(result_4.y*1.-0.))) > 0.5 + -0.48  && ((result_4.z*1.-0.)>1.0 ? 0. : max(0.,(result_4.z*1.-0.))) > 0.5 + -0.48  ) { vec4 oldrs_8_ = vec4(result);float al_8_ = max(0.0,min(1.0,(((result_4.x*1.-0.)>1.0 ? 0. : max(0.,(result_4.x*1.-0.))) + ((result_4.y*1.-0.)>1.0 ? 0. : max(0.,(result_4.y*1.-0.))) + ((result_4.z*1.-0.)>1.0 ? 0. : max(0.,(result_4.z*1.-0.))))/3.0+(0.48))); float  l_8_ =  1.0-al_8_;   result =  result_3  ;  result = result*al_8_ +  oldrs_8_ * l_8_;    } 
 

but it is so clear in shaderBuilder  that replace  edge and this result is just for 

 .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}) ;

but here all people wanna understand the part one it is wired   

 

[MackeyK24]

@NasimiAsl Here is a shot with some 'artifacts' ... Do you think that is something we can address ???

If so, i will continue and make my own 9 image copy and crop function that can be ran inside unity editor... But if that is it... no way to fix artifacts ... then no need for me to take the time to create all that code in c#.

 

 

Can barley see on this image ... try to click actual size then should be able to really see artifacts on mountains to the upper right of image

 

[MackeyK24]

1 minute ago, NasimiAsl said:

@MackeyK24 if i try make that shader with cyos i never can do that . it is different between ShaderBuilder and   Shader

actually i cant explain this line in my code correctly

 if( ((result_4.x*1.-0.)>1.0 ? 0. : max(0.,(result_4.x*1.-0.))) > 0.5 + -0.48  && ((result_4.y*1.-0.)>1.0 ? 0. : max(0.,(result_4.y*1.-0.))) < 0.5 - -0.48  && ((result_4.z*1.-0.)>1.0 ? 0. : max(0.,(result_4.z*1.-0.))) > 0.5 + -0.48  ) { vec4 oldrs_6_ = vec4(result);float al_6_ = max(0.0,min(1.0,(((result_4.x*1.-0.)>1.0 ? 0. : max(0.,(result_4.x*1.-0.))) + ((result_4.z*1.-0.)>1.0 ? 0. : max(0.,(result_4.z*1.-0.))))/2.0 - (((result_4.y*1.-0.)>1.0 ? 0. : max(0.,(result_4.y*1.-0.))))/1.0+(0.48))); float  l_6_ =  1.0-al_6_;   result =  result_1   ;  result = result*al_6_ +  oldrs_6_ * l_6_;    } if( ((result_4.x*1.-0.)>1.0 ? 0. : max(0.,(result_4.x*1.-0.))) < 0.5 - -0.48  && ((result_4.y*1.-0.)>1.0 ? 0. : max(0.,(result_4.y*1.-0.))) > 0.5 + -0.48  && ((result_4.z*1.-0.)>1.0 ? 0. : max(0.,(result_4.z*1.-0.))) > 0.5 + -0.48  ) { vec4 oldrs_7_ = vec4(result);float al_7_ = max(0.0,min(1.0,(((result_4.y*1.-0.)>1.0 ? 0. : max(0.,(result_4.y*1.-0.))) + ((result_4.z*1.-0.)>1.0 ? 0. : max(0.,(result_4.z*1.-0.))))/2.0 - (((result_4.x*1.-0.)>1.0 ? 0. : max(0.,(result_4.x*1.-0.))))/1.0+(0.48))); float  l_7_ =  1.0-al_7_;   result =  result_2 ;  result = result*al_7_ +  oldrs_7_ * l_7_;    } if( ((result_4.x*1.-0.)>1.0 ? 0. : max(0.,(result_4.x*1.-0.))) > 0.5 + -0.48  && ((result_4.y*1.-0.)>1.0 ? 0. : max(0.,(result_4.y*1.-0.))) > 0.5 + -0.48  && ((result_4.z*1.-0.)>1.0 ? 0. : max(0.,(result_4.z*1.-0.))) > 0.5 + -0.48  ) { vec4 oldrs_8_ = vec4(result);float al_8_ = max(0.0,min(1.0,(((result_4.x*1.-0.)>1.0 ? 0. : max(0.,(result_4.x*1.-0.))) + ((result_4.y*1.-0.)>1.0 ? 0. : max(0.,(result_4.y*1.-0.))) + ((result_4.z*1.-0.)>1.0 ? 0. : max(0.,(result_4.z*1.-0.))))/3.0+(0.48))); float  l_8_ =  1.0-al_8_;   result =  result_3  ;  result = result*al_8_ +  oldrs_8_ * l_8_;    } 
 

but it is so clear in shaderBuilder  that replace  edge and this result is just for 

 .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}) ;

but here all people wanna understand the part one it is wired   

 

 What ever this code is doing... It is amazing...

i kinda just made a copy of your function for my shaders:

 

vec4 getTileFromAtlasMap(sampler2D txtRef_0, vec4 rect , vec2 tile,  vec2 vuv) {
		vec4 result = vec4(0.0);

		float uv_w =  rect.w;
		float uv_h =  rect.z;
		float uv_x =  rect.x;
		float uv_y =  rect.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  );
		
		vec4 color_2_ = texture2D(txtRef_0 ,edgeUvAtlas_x.xy*vec2(1.,1.)+vec2(0.,0.));
			
		result = vec4(color_2_.rgb , 1.); 
		vec4 resHelp_2_ = result; vec4 result_1 = vec4(0.);
		result_1 = result;result = resHelp_2_;
		
		vec4 color_3_ = texture2D(txtRef_0 ,edgeUvAtlas_y.xy*vec2(1.,1.)+vec2(0.,0.));
			
		result = vec4(color_3_.rgb , 1.); 
		vec4 resHelp_3_ = result; vec4 result_2 = vec4(0.);
		result_2 = result;result = resHelp_3_;  

		vec4 color_4_ = texture2D(txtRef_0 ,edgeUvAtlas_xy.xy*vec2(1.,1.)+vec2(0.,0.));
				
		result = vec4(color_4_.rgb , 1.); 
		vec4 resHelp_4_ = result; vec4 result_3 = vec4(0.);
		result_3 = result;result = resHelp_4_; 

		vec4 color_5_ = texture2D(txtRef_0 ,newUvAtlas.xy*vec2(1.,1.)+vec2(0.,0.));
				
		result = vec4(color_5_.rgb , 1.); 
		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.) ) ;vec4 resHelp_5_ = result; vec4 result_4 = vec4(0.);
		result = vec4(  edge.x ,edge.y,  max(edge.x,edge.y)  ,1.);
		result_4 = result;
		
		result = resHelp_5_; 
					
		// Nasimi - WOW
		if( ((result_4.x*1.-0.)>1.0 ? 0. : max(0.,(result_4.x*1.-0.))) > 0.5 + -0.48  && ((result_4.y*1.-0.)>1.0 ? 0. : max(0.,(result_4.y*1.-0.))) < 0.5 - -0.48  && ((result_4.z*1.-0.)>1.0 ? 0. : max(0.,(result_4.z*1.-0.))) > 0.5 + -0.48  ) { vec4 oldrs_6_ = vec4(result);float al_6_ = max(0.0,min(1.0,(((result_4.x*1.-0.)>1.0 ? 0. : max(0.,(result_4.x*1.-0.))) + ((result_4.z*1.-0.)>1.0 ? 0. : max(0.,(result_4.z*1.-0.))))/2.0 - (((result_4.y*1.-0.)>1.0 ? 0. : max(0.,(result_4.y*1.-0.))))/1.0+(0.48))); float  l_6_ =  1.0-al_6_;   result =  result_1   ;  result = result*al_6_ +  oldrs_6_ * l_6_;    } if( ((result_4.x*1.-0.)>1.0 ? 0. : max(0.,(result_4.x*1.-0.))) < 0.5 - -0.48  && ((result_4.y*1.-0.)>1.0 ? 0. : max(0.,(result_4.y*1.-0.))) > 0.5 + -0.48  && ((result_4.z*1.-0.)>1.0 ? 0. : max(0.,(result_4.z*1.-0.))) > 0.5 + -0.48  ) { vec4 oldrs_7_ = vec4(result);float al_7_ = max(0.0,min(1.0,(((result_4.y*1.-0.)>1.0 ? 0. : max(0.,(result_4.y*1.-0.))) + ((result_4.z*1.-0.)>1.0 ? 0. : max(0.,(result_4.z*1.-0.))))/2.0 - (((result_4.x*1.-0.)>1.0 ? 0. : max(0.,(result_4.x*1.-0.))))/1.0+(0.48))); float  l_7_ =  1.0-al_7_;   result =  result_2 ;  result = result*al_7_ +  oldrs_7_ * l_7_;    } if( ((result_4.x*1.-0.)>1.0 ? 0. : max(0.,(result_4.x*1.-0.))) > 0.5 + -0.48  && ((result_4.y*1.-0.)>1.0 ? 0. : max(0.,(result_4.y*1.-0.))) > 0.5 + -0.48  && ((result_4.z*1.-0.)>1.0 ? 0. : max(0.,(result_4.z*1.-0.))) > 0.5 + -0.48  ) { vec4 oldrs_8_ = vec4(result);float al_8_ = max(0.0,min(1.0,(((result_4.x*1.-0.)>1.0 ? 0. : max(0.,(result_4.x*1.-0.))) + ((result_4.y*1.-0.)>1.0 ? 0. : max(0.,(result_4.y*1.-0.))) + ((result_4.z*1.-0.)>1.0 ? 0. : max(0.,(result_4.z*1.-0.))))/3.0+(0.48))); float  l_8_ =  1.0-al_8_;   result =  result_3  ;  result = result*al_8_ +  oldrs_8_ * l_8_;} 

		return result;
	} 

 

Then all my splats are called like this:

			splatColor = getTileFromAtlasMap(albedoSampler, atlasRect1, atlasInfo1.xy, vTerrainUV) * baseColor1.r;
			if (atlasInfos > 1.0 && atlasRects > 1.0) {
				splatColor += getTileFromAtlasMap(albedoSampler, atlasRect2, atlasInfo2.xy, vTerrainUV) * baseColor1.g;
			}
			if (atlasInfos > 2.0 && atlasRects > 2.0) {
				splatColor += getTileFromAtlasMap(albedoSampler, atlasRect3, atlasInfo3.xy, vTerrainUV) * baseColor1.b;
			}
			// Second splat colors
			if (atlasInfos > 3.0 && atlasRects > 3.0) {
				splatColor += getTileFromAtlasMap(albedoSampler, atlasRect4, atlasInfo4.xy, vTerrainUV) * baseColor2.r;
			}
			if (atlasInfos > 4.0 && atlasRects > 4.0) {
				splatColor += getTileFromAtlasMap(albedoSampler, atlasRect5, atlasInfo5.xy, vTerrainUV) * baseColor2.g;
			}
			if (atlasInfos > 5.0 && atlasRects > 5.0) {
				splatColor += getTileFromAtlasMap(albedoSampler, atlasRect6, atlasInfo6.xy, vTerrainUV) * baseColor2.b;
			}
			// Third splat colors
			if (atlasInfos > 6.0 && atlasRects > 6.0) {
				splatColor += getTileFromAtlasMap(albedoSampler, atlasRect7, atlasInfo7.xy, vTerrainUV) * baseColor3.r;
			}
			if (atlasInfos > 7.0 && atlasRects > 7.0) {
				splatColor += getTileFromAtlasMap(albedoSampler, atlasRect8, atlasInfo8.xy, vTerrainUV) * baseColor3.g;
			}
			if (atlasInfos > 8.0 && atlasRects > 8.0) {
				splatColor += getTileFromAtlasMap(albedoSampler, atlasRect9, atlasInfo9.xy, vTerrainUV) * baseColor3.b;
			}
			// Final splat colors
			if (atlasInfos > 9.0 && atlasRects > 9.0) {
				splatColor += getTileFromAtlasMap(albedoSampler, atlasRect10, atlasInfo10.xy, vTerrainUV) * baseColor4.r;
			}
			if (atlasInfos > 10.0 && atlasRects > 10.0) {
				splatColor += getTileFromAtlasMap(albedoSampler, atlasRect11, atlasInfo11.xy, vTerrainUV) * baseColor4.g;
			}
			if (atlasInfos > 11.0 && atlasRects > 11.0) {
				splatColor += getTileFromAtlasMap(albedoSampler, atlasRect12, atlasInfo12.xy, vTerrainUV) * baseColor4.b;
			}

 

 

Looks great so far... Just a little artifacts on far away

 

BUT REAL NICE.... thanks too much

 

[NasimiAsl]

*** notic this part of code

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.) ) ; 

 

you see '3.'

if you change that to 1 you most see a little artifacts ( i guess )

this number make the edge bigger if you  use the big number like 100 you have a small edge and see more artifacts

 

[MackeyK24]

10 minutes ago, NasimiAsl said:

*** notic this part of code

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.) ) ; 

 

you see '3.'

if you change that to 1 you most see a little artifacts ( i guess )

this number make the edge bigger if you  use the big number like 100 you have a small edge and see more artifacts

 

 i made that 3. a var - float edgeUvFactor = 5.0 ... show a little less artifacts but the after about 10.0 it starts to show more artifacts again... its like there is a sweet spot between 3.0 and 10.0 and under that of over that shows more artifacts... 4.0 to 5.0 shows LESS artifacts... but they still show up

 

[MackeyK24]

5 minutes ago, MackeyK24 said:

 i made that 3. a var - float edgeUvFactor = 5.0 ... show a little less artifacts but the after about 10.0 it starts to show more artifacts again... its like there is a sweet spot between 3.0 and 10.0 and under that of over that shows more artifacts... 4.0 to 5.0 shows LESS artifacts... but they still show up

 

 

Here is a shot with the edgeUvFactor set to 5.0

 

You have to actual size to see the artifacts... But they a MUCH less using 5.0 instead of 3.0... I going to try test the fractions of 4.0 to about 6.0 to see HOW minimized i can get before it starts to turn around and start showing more artifacts... Trying to find that magic edge number... 

Can you think of anything else that would contribute to this... Is mipmaps an issue... Should it have mipmaps... Basically lower resolution versions embedded in the png i guess... not too sure about WHO or what actually generates the mipmaps... It was my understanding that the mipmap pixels are actually encoded into image... Something like texture.SetPixels(pixels, mipLevel)  by default we only set pixel to mipmap 0... mean only 1 base mipmap level in texture... i thought i can scale image down each power and set those pixels to the next mipLevel 1 and so on... 

I thought that was the only way to generate mip maps in the texture... or am i way off on that ???

 

[MackeyK24]

Yo @NasimiAsl Hey bro... even though JPEG as the slats DOES work... You see MUCH less artifacts when using PNG as the splats as well...

Her is edgeUvFactor set to 5.0 with PNG splats:

 

Now you pretty much only see artifacts on EDGE of terrain... Look at very top right corner in actual size...

 

But GETTING BETTER EACH TIME

 

We might just pull this shit off... Thanks to @NasimiAsl

 

 

EDIT:

I think I'm going to ENFORCE png for terrain splats as well as the actuals splatmap or mixmap if you prefer 

 

[MackeyK24]

Yo @NasimiAsl here is latest shot use 5.0 instead of 3.0 for that edgeUvFactor

The green areas highlight the slight artifacts when further away from camera...

Is that some kind of LOD issue or what

Whats up with GLSL/WebGL... Man i just can't believe how DIFFICULT something that should be simple ... Tiling into a texture atlas... I mean the whole thing with WebGL is to run on the web, it should have been designed from the beginning to use RESOURCE SAVING features like texture atlas and the ONLY function we have to use is fract() which leaves seams... And you go '4-Tapping' the texture2D and use these really HEAVY computations to try and get the best results you can... Man that just sucks for GLSL and Texture Atlas Tiling. And apparently this has been an issue for GLSL for many years now