Moire effect with the WebGLRenderTarget.texture

Questions
,
1

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

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.

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

I should have a result like that :

image
image746Ă—143 36 KB

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 !

2

Does it improve if you set texture’s anisotropy to something larger?

3

Thanks for your help !

I tested out this but it doesn’t change nothing

4

Maybe is stretched texture and need to use something like

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

1 Like
5

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

image
image873Ă—270 29.1 KB

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 …

6

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

7

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.

8

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

Thanks all for your help :smiley: