I have some meshes in scene, trying to repeat the texture on it.
facing some difficulties as following.
live code link : Glitch :･ﾟ✧
in current output one texture is repeated, and lines are aliased / distorted.
any suggestions or feedbacks are much appreciated.
Thanks in Advance.
I’d draw the grouts in the texture itself, then use proper mipmap and anisotropic filtering to make the lines smooth.
drawing the grout lines before repeating the texture. correct ?
I will update like that.
can you please guide for randomization ?
Maybe need upload texture already with randomisation and then no need for shader and set repetition. I dont know english good
I have updated code as per your suggestion code in this link : Glitch :･ﾟ✧
works correctly for normal (grid) layout, but when we change layout type to brick or brick2,
one of the line horizontal / vertical gets aliased / distorted.
layout can be changed from following lines. available options : grid, brick,brick2
async function loadTextureAndSetRepeat({
element,
rotateAngle = 0,
> layout = "brick2",
groutWidth = 0.01,
groutColor = "rgba(255, 0, 0, 1.0)",
}) {
I need to implement for dynamic purpose and number of similar textures (which needs to be randomized) would be variable.
that’s why trying to achieve the randomization through code 
update randomization achieved with help of @manthrax .
@PavelBoytchev now facing following issue. please guide
with brick layout :
with brick2 layout :
Far for perfect, but slightly better:
if (grout_v_width > 0) {
context.lineWidth = grout_v_width;
context.beginPath();
context.moveTo(0, grout_v_width);
context.lineTo(canvas.width, grout_v_width);
context.stroke();
}
if (grout_h_width > 0) {
context.lineWidth = grout_h_width;
context.beginPath();
context.moveTo(grout_h_width, 0);
context.lineTo(grout_h_width, canvas.height);
context.stroke();
}
yes those lines are set with bit offset for layouts. appears more clearly when grout width is large in scale.
fshaders
void main() {
//other code
if (layoutType == 1) {//brick
uv.x += mod(floor(vUv.y * repeatY), 2.0) * 0.5 / repeatX;
} else if (layoutType == 2) {//brick2
uv.y += mod(floor(vUv.x * repeatX), 2.0) * 0.5 / repeatY;
}
vec2 center = vec2(0.5, 0.5);
uv = uv * vec2(repeatX, repeatY) - center;
//rest of the code
}
@PavelBoytchev @Chaser_Code issue can be here while creating layout ? as for default grid layout those lines were generated 100% accurate.
The issue is caused by sliding UVs. This confuses texture mipmap sampling along the line of sliding. Generally, it is a loose-loose situation.
One option is to pack several tiles in one tile (see the image) and apply it without sliding. This will make it harder to randomize tiles:
Another option is to draw in the fragment shader a thin line on the border of the grout. Here is a demo (the marked text draws the lines):
float eps = 0.005;
vec2 f = fract(rotatedUv);
if( (layoutType == 2) && ((f.x<eps) || (f.x>1.0-eps)) )
{
gl_FragColor = vec4(1,0,0,1);
return;
}
if( (layoutType == 1) && ((f.y<eps) || (f.y>1.0-eps)) )
{
gl_FragColor = vec4(1,0,0,1);
return;
}
Thanks a lot. this will work.
Hello @PavelBoytchev , your solution worked correctly while using sample2D.
but now the issue is I need to pass more than 16 textures in shader code, which is not allowed and showing error as “FRAGMENT shader texture image units count exceeds MAX_TEXTURE_IMAGE_UNITS(16)”
to overcome this limitation, I am trying to implement the layout and texture repetition using “sampler2DArray” in shader code. using that limitation of 16 was fixed but again texture and grout lines became aliased, I tried by appling minFilter, magFilter but it didn’t worked.
can you please guide how to generate proper texture and grout lines ?
I have updated code with sampler2DArray in live link : Glitch :･ﾟ✧
current output :
previous live code link : Glitch :･ﾟ✧
previous output :
bump. please guide still stuck in this issue to generate proper texture and lines with sampler2DArray.
