Hi, all.

I'm working on terrain editor, and the idea so far, is to have a set of textures I could place on each square with UV coords 1x1. I wrote a simple shader, which samples from 2 different textures, depending on UV coords, but for some reason, even though the textures should connect seamlessly, I'm having a strange artifact pixels on the seams. Now the really funny part, is that it works perfectly on a crappy Intel on-board video card, and doesn't work on my GTX500 with drivers up to date (!!!)

For instance, on an arbitrary hexagonal surface I sample everything, except for one square from grass texture, and one square from desert texture.

Magnified (Where are those pixels sampled from exactly? o.O)

Vertex shader code:

precision highp float;
precision highp int;

uniform mat4 modelViewMatrix;
uniform mat4 projectionMatrix;
attribute vec3 position;
attribute vec2 uv;
varying vec2 vUv

void main()
{
	vUv = uv;
	vec4 mvPosition;
	mvPosition = modelViewMatrix * vec4( position, 1.0 );
	gl_Position = projectionMatrix * mvPosition;
}

Fragment shader code:

precision highp float;
precision highp int;

uniform vec3 diffuse
uniform float opacity;
varying vec2 vUv;
uniform sampler2D map;
uniform sampler2D map1;

void main()
{
	gl_FragColor = vec4( diffuse, opacity );

	vec4 texelColor;
	if(vUv.x >= 0.0 && vUv.x < 1.0 && vUv.y >=0.0 && vUv.y < 1.0) // <- Sample from a different texture for that square
		texelColor = texture2D( map1, vUv );
	else
		texelColor = texture2D( map, vUv );

	gl_FragColor = gl_FragColor * texelColor;
}

JSFiddle link (sorry for a big chunk of code, embedded textures take some space). The code is first 100 lines, everything below is THREE.js code to render the scene (Scroll wheel: dolly in/out, left click: rotate, right click: pan) -> https://jsfiddle.net/denisve/aucxz90s/

What am I doing wrong? The code is pretty straight forward, just sample from a different texture depending on UV.

Thanks in advance,

Denis.

I expect it to be as it is now, just without the artifacts on the seams.

The idea is very simple: I have a UV mapped mesh, I have a set of textures. Now depending on UV coords I sample from different textures, each textures covers UV square of size 1 x 1.

See the image below, hope it explains better. Yellow lines denote faces, red grid is the UV grid, each square is 1 x 1. What I want, is for each square on the grid, the shader would sample from a different texture. See fragment shader code in OP.

void main()
{
	gl_FragColor = vec4( diffuse, opacity );
	vec4 a = texture2D( map1, vUv );
	vec4 b = texture2D( map, vUv );

	vec4 texelColor;
	if(vUv.x >= 0.0 && vUv.x < 1.0 && vUv.y >=0.0 && vUv.y < 1.0) // <- Sample from a different texture for that square
		texelColor = a;
	else
		texelColor = b;

	gl_FragColor = gl_FragColor * texelColor;
}

Were are these artifacts?

See the images I linked above in my first post. The "desert" square has a border of weird pixels around it, you can also see it on the magnified image.

And yes, I'm planning to have 40 different textures, or even more. This was just an example, so I've passed 2 uniforms, the real implementation is going to be one big texture atlas and I'm going to sample from it directly.

Do your textures have mipmaps? Try turning those off and see if it makes a difference. The mip level selected during a sample will depend on the texture coordinate gradient between adjacent pixels. you have conditional logic to sample from one texture or the other, so weird things might happen at that "boundary"

Mipmaps is an issue I'll have to solve separately, since I'm going to use atlas texture, so I'll have to implement something to avoid pixel bleeding. I'm not there yet, though, far from it. Just trying to basic code right now, to see it it will work at all.

Try restructuring your shader to look like this:

void main()
{
	gl_FragColor = vec4( diffuse, opacity );
	vec4 a = texture2D( map1, vUv );
	vec4 b = texture2D( map, vUv );

	vec4 texelColor;
	if(vUv.x >= 0.0 && vUv.x < 1.0 && vUv.y >=0.0 && vUv.y < 1.0) // <- Sample from a different texture for that square
		texelColor = a;
	else
		texelColor = b;

	gl_FragColor = gl_FragColor * texelColor;
}

Calling texture2D inside a non-uniform if block can result in undefined behaviour, so you should hoist them out of the if/else and do them all the time. Then you can select which result you want.

That actually solved it! Lots of thanks! Could you perhaps link me to an article that explains why sampling textures shouldn't be done inside if? Also what other functionality should be avoided?