# Repeat a Shader material texture?

**URL:** <https://discourse.threejs.org/t/repeat-a-shader-material-texture/47744>\
**Category:** Questions\
**Tags:** shaders\
**Created:** [February 7, 2023, 12:21am UTC](https://discourse.threejs.org/t/repeat-a-shader-material-texture/47744 "2023-02-07T00:21:20Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![UI\_UNICORN](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/ui_unicorn/32/9842_2.png) [@UI\_UNICORN](https://discourse.threejs.org/u/UI_UNICORN)\
**Post date:** [February 7, 2023, 12:21am UTC](https://discourse.threejs.org/t/repeat-a-shader-material-texture/47744/1 "2023-02-07T00:21:20Z")

</div>

i want to repeat my shader texture lets say 8x8 how can i do this within this frag below? i tried setting the normal way `repeat.set( 4, 4 );` etc that didnt work tho

```javascript
  const _FS = `
  uniform vec3 topColor;
  uniform vec3 bottomColor;
  uniform float offset;
  uniform float exponent;
  
  uniform vec3 fogColor;
  uniform float fogNear;
  uniform float fogFar;
  uniform float fogDensity;
  uniform samplerCube background;
  
  varying vec3 vWorldPosition;
  
  void main() {
    vec3 viewDirection = normalize(vWorldPosition - cameraPosition);
    vec3 stars = textureCube(background, viewDirection).xyz;
  
    float h = normalize(vWorldPosition + offset).y;
    float t = max(pow(max(h, 0.0), exponent), 0.0);
  
    float f = exp(min(0.0, -vWorldPosition.y * 0.00125));
  
    vec3 sky = mix(stars, bottomColor, f);

    gl_FragColor = vec4(sky, 1.0);
  }`;

```

js:

```javascript
  const texture0 = loaderSprite.load("./resources/terrain/ski.jpg");
      texture0.encoding = THREE.sRGBEncoding;
  
      const uniforms = {
		  
        "topColor": { value: new THREE.Color(0x0b152b) },
        "bottomColor": { value: new THREE.Color(0x0b152b) },
        "offset": { value: -30 },
        "exponent": { value: 1.0 },
		"fogColor": { type: "c", value: scene.fog.color },
		"fogNear": { type: "f", value: scene.fog.near },
		"fogFar": { type: "f", value: scene.fog.far },
		"fogDensity": { type: "f", value: 1.75 },
		 "background": { value: texture0 },
      };
     uniforms["topColor"].value.copy(hemiLight.color);
    this.scene_.fog.color.copy(uniforms["bottomColor"].value);
  
      const skyGeo = new THREE.SphereBufferGeometry(4000, 40, 40);
      const skyMat = new THREE.ShaderMaterial({
          uniforms: uniforms,
          vertexShader: _VS,
          fragmentShader: _FS,
          side: THREE.DoubleSide,
		 fog: true,
		 // glslVersion: THREE.GLSL3
      });
  
      const sky = new THREE.Mesh(skyGeo, skyMat);
      this.scene_.add(sky);

```

---

<div class="post-metadata">

**Author:** ![tfoller](https://avatars.discourse-cdn.com/v4/letter/t/3e96dc/32.png) [@tfoller](https://discourse.threejs.org/u/tfoller)\
**Post date:** [February 7, 2023, 2:27am UTC](https://discourse.threejs.org/t/repeat-a-shader-material-texture/47744/2 "2023-02-07T02:27:31Z")

</div>

`repeat` is not an internal property of a texture, it’s a command to THREE to add an extra custom code to the fragment shader that tiles the texture. If you write your own shader, you need to implement tiling yourself.

Try this:

JS

```javascript
uniforms: {
   tex: { value: new THREE.TextureLoader().load('....', ) },
   repeat: { value: [2, 3] }
},

```

GLSL

```javascript
uniform sampler2D tex;
uniform vec2 repeat;

void main() {

   vec2 uv = vuv;
   uv = fract(uv * repeat);
   vec2 smooth_uv = repeat * vuv;
   vec4 duv = vec4(dFdx(smooth_uv), dFdy(smooth_uv));
   vec3 txl = textureGrad(tex, uv, duv.xy, duv.zw).rgb;

   gl_FragColor = vec4(txl, 1.0);
}

```

---

<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:** [February 7, 2023, 2:27am UTC](https://discourse.threejs.org/t/repeat-a-shader-material-texture/47744/3 "2023-02-07T02:27:33Z")

</div>

> [@UI\_UNICORN](#):
>
> i tried setting the normal way `repeat.set( 4, 4 );`

And both `.wrapS` and `.wrapT` are set to `THREE.RepeatWrapping`?

---

<div class="post-metadata">

**Author:** ![UI\_UNICORN](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/ui_unicorn/32/9842_2.png) [@UI\_UNICORN](https://discourse.threejs.org/u/UI_UNICORN)\
**Post date:** [February 7, 2023, 8:26am UTC](https://discourse.threejs.org/t/repeat-a-shader-material-texture/47744/4 "2023-02-07T08:26:14Z")

</div>

don’t you have to set that on the uniform ? like this?  
`uniforms.background.value.wrapS = uniforms.background.value.wrapT = THREE.RepeatWrapping;`  
I’ll try the above soon when I get on my laptop thanks for your reply !

---

<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:** [February 7, 2023, 10:17am UTC](https://discourse.threejs.org/t/repeat-a-shader-material-texture/47744/5 "2023-02-07T10:17:01Z")

</div>

Wrapping mode is set by the WebGL function `gl.texParameteri()`, you cannot set it from within the shader (as far as I know).

However, you can do texture repeating and wrapping manually by juggling with texture coordinates in the shader (for example, scaling texture coordinates makes the repeat, while modding coordinates with `fract` to interval [0,1) makes the wrap).

---

<div class="post-metadata">

**Author:** ![UI\_UNICORN](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/ui_unicorn/32/9842_2.png) [@UI\_UNICORN](https://discourse.threejs.org/u/UI_UNICORN)\
**Post date:** [February 7, 2023, 11:09am UTC](https://discourse.threejs.org/t/repeat-a-shader-material-texture/47744/6 "2023-02-07T11:09:06Z")

</div>

> [@tfoller](#):
>
> ```javascript
> vec2 uv = vuv;
> uv = fract(uv * repeat);
> 
> ```

So i’ve attempted to apply this to my code but i can not get it to work something about `

> ‘textureGrad’ : no matching overloaded function found

`How can I apply this to my code?  
thanks

---

<div class="post-metadata">

**Author:** ![tfoller](https://avatars.discourse-cdn.com/v4/letter/t/3e96dc/32.png) [@tfoller](https://discourse.threejs.org/u/tfoller)\
**Post date:** [February 7, 2023, 11:34am UTC](https://discourse.threejs.org/t/repeat-a-shader-material-texture/47744/7 "2023-02-07T11:34:28Z")

</div>

`uv` is normally available in vertex shader and passed to fragment as `vuv`, here’s the complete exampe of how to tile a texture using shader material:

> **[Edit fiddle - JSFiddle - Code Playground](https://jsfiddle.net/tfoller/4eonav7g/)**
>
> Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.

---

<div class="post-metadata">

**Author:** ![DeVDawn](https://avatars.discourse-cdn.com/v4/letter/d/6a8cbe/32.png) [@DeVDawn](https://discourse.threejs.org/u/DeVDawn)\
**Post date:** [April 21, 2025, 11:57pm UTC](https://discourse.threejs.org/t/repeat-a-shader-material-texture/47744/8 "2025-04-21T23:57:48Z")

</div>

This is what helped me, thanks!