# Texture repetition & Drawing lines issue with GLSL shaders

**URL:** <https://discourse.threejs.org/t/texture-repetition-drawing-lines-issue-with-glsl-shaders/68829>\
**Category:** Questions\
**Tags:** shader-material, draw-line, glsl, textures, shaders\
**Created:** [August 1, 2024, 6:34am UTC](https://discourse.threejs.org/t/texture-repetition-drawing-lines-issue-with-glsl-shaders/68829 "2024-08-01T06:34:44Z")\
**Posts on this page:** 14\
**Page:** 1

<div class="post-metadata">

**Author:** ![Vatsal\_Pandya](https://avatars.discourse-cdn.com/v4/letter/v/b9e5f3/32.png) [@Vatsal\_Pandya](https://discourse.threejs.org/u/Vatsal_Pandya)\
**Post date:** [August 1, 2024, 6:34am UTC](https://discourse.threejs.org/t/texture-repetition-drawing-lines-issue-with-glsl-shaders/68829/1 "2024-08-01T06:34:44Z")

</div>

I have some meshes in scene, trying to repeat the texture on it.

facing some difficulties as following.

1. not able to correctly draw the lines in between the texture repetition.
2. how can I repeat all the available textures randomly on the mesh?
3. texture becomes blurry at the distance from the camera point.

live code link : [Glitch :･ﾟ✧](https://glitch.com/edit/#!/triangular-acute-mist)

> in current output one texture is repeated, and lines are aliased / distorted.

any suggestions or feedbacks are much appreciated.

Thanks in Advance.

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/d/b/db3be756a18aaec440ae38695e802205f5a13f20.jpeg)

---

<div class="post-metadata">

**Author:** ![PavelBoytchev](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/pavelboytchev/32/38639_2.png) [@PavelBoytchev](https://discourse.threejs.org/u/PavelBoytchev)\
**Post date:** [August 1, 2024, 7:33am UTC](https://discourse.threejs.org/t/texture-repetition-drawing-lines-issue-with-glsl-shaders/68829/2 "2024-08-01T07:33:47Z")

</div>

> [@Vatsal\_Pandya](#):
>
> any suggestions or feedbacks are much appreciated

I’d draw the grouts in the texture itself, then use proper mipmap and anisotropic filtering to make the lines smooth.

---

<div class="post-metadata">

**Author:** ![Vatsal\_Pandya](https://avatars.discourse-cdn.com/v4/letter/v/b9e5f3/32.png) [@Vatsal\_Pandya](https://discourse.threejs.org/u/Vatsal_Pandya)\
**Post date:** [August 1, 2024, 7:45am UTC](https://discourse.threejs.org/t/texture-repetition-drawing-lines-issue-with-glsl-shaders/68829/3 "2024-08-01T07:45:48Z")

</div>

> [@PavelBoytchev](#):
>
> 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 ?

---

<div class="post-metadata">

**Author:** ![Chaser\_Code](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/chaser_code/32/20199_2.png) [@Chaser\_Code](https://discourse.threejs.org/u/Chaser_Code)\
**Post date:** [August 1, 2024, 8:16am UTC](https://discourse.threejs.org/t/texture-repetition-drawing-lines-issue-with-glsl-shaders/68829/4 "2024-08-01T08:16:05Z")

</div>

Maybe need upload texture already with randomisation and then no need for shader and set repetition. I dont know english good  
 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/9/e/9e9cb5074e66e5fb54e35565d14376d0f3cff37e.png)

---

<div class="post-metadata">

**Author:** ![Vatsal\_Pandya](https://avatars.discourse-cdn.com/v4/letter/v/b9e5f3/32.png) [@Vatsal\_Pandya](https://discourse.threejs.org/u/Vatsal_Pandya)\
**Post date:** [August 1, 2024, 8:18am UTC](https://discourse.threejs.org/t/texture-repetition-drawing-lines-issue-with-glsl-shaders/68829/5 "2024-08-01T08:18:23Z")

</div>

> [@PavelBoytchev](#):
>
> I’d draw the grouts in the texture itself, then use proper mipmap and anisotropic filtering to make the lines smooth.

I have updated code as per your suggestion code in this link : [Glitch :･ﾟ✧](https://glitch.com/edit/#!/holistic-lunar-form)

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

```javascript
async function loadTextureAndSetRepeat({
  element,
  rotateAngle = 0,

> layout = "brick2",

groutWidth = 0.01,
  groutColor = "rgba(255, 0, 0, 1.0)",
}) {

```

---

<div class="post-metadata">

**Author:** ![Vatsal\_Pandya](https://avatars.discourse-cdn.com/v4/letter/v/b9e5f3/32.png) [@Vatsal\_Pandya](https://discourse.threejs.org/u/Vatsal_Pandya)\
**Post date:** [August 1, 2024, 8:19am UTC](https://discourse.threejs.org/t/texture-repetition-drawing-lines-issue-with-glsl-shaders/68829/6 "2024-08-01T08:19:42Z")

</div>

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 🙂

---

<div class="post-metadata">

**Author:** ![Vatsal\_Pandya](https://avatars.discourse-cdn.com/v4/letter/v/b9e5f3/32.png) [@Vatsal\_Pandya](https://discourse.threejs.org/u/Vatsal_Pandya)\
**Post date:** [August 1, 2024, 9:17am UTC](https://discourse.threejs.org/t/texture-repetition-drawing-lines-issue-with-glsl-shaders/68829/7 "2024-08-01T09:17:01Z")

</div>

update randomization achieved with help of @manthrax .

@PavelBoytchev now facing following issue. please guide

> [@Vatsal\_Pandya](#):
>
> works correctly for normal (grid) layout, but when we change layout type to brick or brick2,
> 
> one of the line horizontal / vertical gets aliased

with brick layout :

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/8/f/8f5d2d12318c9c95acfd1be69bcbfa714c83cf77.jpeg)

with brick2 layout :

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/2/4/24c3d684cc42b842544545211484becbebb1a71d.jpeg)

---

<div class="post-metadata">

**Author:** ![PavelBoytchev](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/pavelboytchev/32/38639_2.png) [@PavelBoytchev](https://discourse.threejs.org/u/PavelBoytchev)\
**Post date:** [August 1, 2024, 10:26am UTC](https://discourse.threejs.org/t/texture-repetition-drawing-lines-issue-with-glsl-shaders/68829/8 "2024-08-01T10:26:51Z")

</div>

Far for perfect, but slightly better:

```javascript
      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();
      }

```

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/b/6/b622e8a85f905b02d8e6476388fe9c12f873156e.jpeg)

---

<div class="post-metadata">

**Author:** ![Vatsal\_Pandya](https://avatars.discourse-cdn.com/v4/letter/v/b9e5f3/32.png) [@Vatsal\_Pandya](https://discourse.threejs.org/u/Vatsal_Pandya)\
**Post date:** [August 1, 2024, 10:38am UTC](https://discourse.threejs.org/t/texture-repetition-drawing-lines-issue-with-glsl-shaders/68829/9 "2024-08-01T10:38:58Z")

</div>

> [@PavelBoytchev](#):
>
> Far for perfect, but slightly better:

yes those lines are set with bit offset for layouts. appears more clearly when grout width is large in scale.

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/1/d/1df69263d31ca6a4e0d5fa3cb6777e9385c47b34.jpeg)

---

<div class="post-metadata">

**Author:** ![Vatsal\_Pandya](https://avatars.discourse-cdn.com/v4/letter/v/b9e5f3/32.png) [@Vatsal\_Pandya](https://discourse.threejs.org/u/Vatsal_Pandya)\
**Post date:** [August 1, 2024, 10:48am UTC](https://discourse.threejs.org/t/texture-repetition-drawing-lines-issue-with-glsl-shaders/68829/10 "2024-08-01T10:48:00Z")

</div>

> fshaders

```javascript
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.

---

<div class="post-metadata">

**Author:** ![PavelBoytchev](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/pavelboytchev/32/38639_2.png) [@PavelBoytchev](https://discourse.threejs.org/u/PavelBoytchev)\
**Post date:** [August 1, 2024, 11:26am UTC](https://discourse.threejs.org/t/texture-repetition-drawing-lines-issue-with-glsl-shaders/68829/11 "2024-08-01T11:26:15Z")

</div>

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:

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/d/3/d3282251e5f24ad27ad6ff952df58c5e1e2bb5de.png)

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):

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/4/3/43019ff8d480b00a8baaa75e403d1a9cb757c68b.png)

```javascript
  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;
  }

```

---

<div class="post-metadata">

**Author:** ![Vatsal\_Pandya](https://avatars.discourse-cdn.com/v4/letter/v/b9e5f3/32.png) [@Vatsal\_Pandya](https://discourse.threejs.org/u/Vatsal_Pandya)\
**Post date:** [August 1, 2024, 11:30am UTC](https://discourse.threejs.org/t/texture-repetition-drawing-lines-issue-with-glsl-shaders/68829/12 "2024-08-01T11:30:49Z")

</div>

> [@PavelBoytchev](#):
>
> 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):

Thanks a lot. this will work.

---

<div class="post-metadata">

**Author:** ![Vatsal\_Pandya](https://avatars.discourse-cdn.com/v4/letter/v/b9e5f3/32.png) [@Vatsal\_Pandya](https://discourse.threejs.org/u/Vatsal_Pandya)\
**Post date:** [August 7, 2024, 8:38am UTC](https://discourse.threejs.org/t/texture-repetition-drawing-lines-issue-with-glsl-shaders/68829/13 "2024-08-07T08:38:40Z")

</div>

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 :･ﾟ✧](https://glitch.com/edit/#!/texture-repetition-with-array)

current output :

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/4/2/42c8e1dd3bb10bd174510d1890c4dad169bff828.jpeg)

previous live code link : [Glitch :･ﾟ✧](https://glitch.com/edit/#!/holistic-lunar-form)

previous output :

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/a/d/ad371b514715e91b93eb023d52d9a0eea0c5b306.jpeg)

---

<div class="post-metadata">

**Author:** ![Vatsal\_Pandya](https://avatars.discourse-cdn.com/v4/letter/v/b9e5f3/32.png) [@Vatsal\_Pandya](https://discourse.threejs.org/u/Vatsal_Pandya)\
**Post date:** [August 16, 2024, 7:57am UTC](https://discourse.threejs.org/t/texture-repetition-drawing-lines-issue-with-glsl-shaders/68829/14 "2024-08-16T07:57:48Z")

</div>

bump. please guide still stuck in this issue to generate proper texture and lines with sampler2DArray.