# Moire effect with the WebGLRenderTarget.texture

**URL:** <https://discourse.threejs.org/t/moire-effect-with-the-webglrendertarget-texture/62428>\
**Category:** Questions\
**Tags:** textures, materials\
**Created:** [March 7, 2024, 11:38am UTC](https://discourse.threejs.org/t/moire-effect-with-the-webglrendertarget-texture/62428 "2024-03-07T11:38:08Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![UnknownZozo](https://avatars.discourse-cdn.com/v4/letter/u/45deac/32.png) [@UnknownZozo](https://discourse.threejs.org/u/UnknownZozo)\
**Post date:** [March 7, 2024, 11:38am UTC](https://discourse.threejs.org/t/moire-effect-with-the-webglrendertarget-texture/62428/1 "2024-03-07T11:38:08Z")

</div>

I have to render a procedural texture offscreen. This texture is render in a WebGLRenderTarget where I set my scene.

```javascript
let renderTarget = new THREE.WebGLRenderTarget(1024, 128);
let sceneRT = new THREE.Scene();
let cameraRT = new THREE.Camera();
let geoRT = new THREE.PlaneGeometry(2, 2);
let matRT = new THREE.ShaderMaterial({
	uniforms: uniforms,
	fragmentShader: this.fragmentShader(),
	vertexShader: this.vertexShader(),
});
let planeRT = new THREE.Mesh(geoRT, matRT);
sceneRT.add(planeRT);

```

With a custom sahder, I can render and get my texture in this WebGLRenderTarget.texture.

```javascript
Render.renderer.setRenderTarget(renderTarget);
Render.renderer.render(sceneRT, cameraRT);
Render.renderer.setRenderTarget(null);
...
mat.map = renderTarget.texture

```

However, when I apply it on my objetcs in the scene, there is this moire effect.

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

I should have a result like that :

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

I tried to use mipmaps or FXAAPass but I still have this bad effect.

Do you know if there is a solution to my problem ? Or maybe, I need to generate my texture by another way ? I already tried to use a FrameufferTexture but I still have the same problem.

Many thanks for your help !

---

<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:** [March 7, 2024, 2:07pm UTC](https://discourse.threejs.org/t/moire-effect-with-the-webglrendertarget-texture/62428/2 "2024-03-07T14:07:59Z")

</div>

Does it improve if you set texture’s [anisotropy](https://threejs.org/docs/#api/en/textures/Texture.anisotropy) to something larger?

---

<div class="post-metadata">

**Author:** ![UnknownZozo](https://avatars.discourse-cdn.com/v4/letter/u/45deac/32.png) [@UnknownZozo](https://discourse.threejs.org/u/UnknownZozo)\
**Post date:** [March 7, 2024, 2:22pm UTC](https://discourse.threejs.org/t/moire-effect-with-the-webglrendertarget-texture/62428/3 "2024-03-07T14:22:05Z")

</div>

Thanks for your help !

I tested out this but it doesn’t change nothing

---

<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:** [March 7, 2024, 2:54pm UTC](https://discourse.threejs.org/t/moire-effect-with-the-webglrendertarget-texture/62428/4 "2024-03-07T14:54:17Z")

</div>

Maybe is stretched texture and need to use something like

```javascript
mat.map = renderTarget.texture;
mat.map.repeat.x=0.1;
mat.map.repeat.y=0.1;

```

I didnt remember, but maybe this texture without mipmaps (pixelated).

---

<div class="post-metadata">

**Author:** ![UnknownZozo](https://avatars.discourse-cdn.com/v4/letter/u/45deac/32.png) [@UnknownZozo](https://discourse.threejs.org/u/UnknownZozo)\
**Post date:** [March 7, 2024, 3:14pm UTC](https://discourse.threejs.org/t/moire-effect-with-the-webglrendertarget-texture/62428/5 "2024-03-07T15:14:47Z")

</div>

Thanks a lot. You are right, I don’t get this effect anymore.

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

But that’s not the result I expect. I need some really litlle lines like wood grain. I don’t know if it’s possible to get the result I want without theses artefatcs …

---

<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:** [March 7, 2024, 3:53pm UTC](https://discourse.threejs.org/t/moire-effect-with-the-webglrendertarget-texture/62428/6 "2024-03-07T15:53:29Z")

</div>

Change the repeats, instead of x=0.1 and y=0.1, make one of them 0.1 and the other 1; or vice versa (it depends on the texture orientation).

---

<div class="post-metadata">

**Author:** ![UnknownZozo](https://avatars.discourse-cdn.com/v4/letter/u/45deac/32.png) [@UnknownZozo](https://discourse.threejs.org/u/UnknownZozo)\
**Post date:** [March 8, 2024, 8:22am UTC](https://discourse.threejs.org/t/moire-effect-with-the-webglrendertarget-texture/62428/7 "2024-03-08T08:22:41Z")

</div>

Thank you, the effect is not here anymore. But, in the other hand, I loose my little lines for very thin wood grain (which is completely logical) …

This effect is here because I have a lot of contrast between the two adjacent pixel and, as it is an alternation between light and dark pixels, it is difficult to render this. I don’t if there is ant solution to avoid this … I want to keep this contrats between pixels, it is the reality a the wood grain I want to render.

---

<div class="post-metadata">

**Author:** ![UnknownZozo](https://avatars.discourse-cdn.com/v4/letter/u/45deac/32.png) [@UnknownZozo](https://discourse.threejs.org/u/UnknownZozo)\
**Post date:** [March 8, 2024, 3:25pm UTC](https://discourse.threejs.org/t/moire-effect-with-the-webglrendertarget-texture/62428/8 "2024-03-08T15:25:17Z")

</div>

Ok, I find the solution but it wasnt’ that simple to understand everything.

I tried to use renderTarget.texture but when I applied it on my object, the texture was simply black.  
Now, I use an array to store it. And when I want to apply my texture, instead of applying it directly, I search my texture in this array.

This is the result I wanted to have.

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

Thanks all for your help 😃