Object loose quality when rendered in a frame buffer and then to the screen

Questions
,
1

I’ve recently played around with textures of feathers and three.js. I’ve got some decent results using as setting for the texture:

var maxAnis = renderer.capabilities.getMaxAnisotropy();
material.map.magFilter = THREE.LinearFilter;
material.map.minFilter = THREE.LinearMipMapLinearFilter;
material.map.anisotropy = maxAnis;

Now I want to make another experiment, rendering the whole scene to a texture, and then use this texture in the material for another object, in this case a plane. I’ve use the same magFilter and minFilter as before, but the results are quite bad. I’ve put together a codepen

Any suggestion about how to improve the quality of the image is appreciated,
thanks

2

You should probably use CSS3 to draw things that you want to have high quality textures. This is just my common practice. You don’t have to listen to me at all :laughing:

3

If you check the console you’ll see this message for your pen:

THREE.WebGLRenderer: Texture is not power of two. Texture.minFilter should be set to THREE.NearestFilter or THREE.LinearFilter.

This is because you are setting the RenderTarget texture to window.innerWidth x window.innerHeight. Setting the minFilter as suggested won’t do much here, you’ll need to set the buffer texture to a power of 2

Here I’ve changed it to 4096 x 4096

https://codepen.io/looeee/pen/YrJvJY

EDIT: Something strange is happing with canvas resizing on the embedded pen. If this still look blurry open it in a new window and you’ll see what I mean.

2 Likes
4

Thank you @looeee, I somehow did not thought at the size of the buffered texture. This solved the problem

1 Like
5

I’m having another problem really similar to the previous one.
I’m trying to render a texture in a buffer object and keep track of the movement of that object. I’ve got it working here

https://codepen.io/edapx/full/LzaOpp/

As you see, the resolution is quite bad, because the resolution of the WebGLRenderTarget is small. But If I change the resolution of the WebGLRenderTarget to 4096 to 4096, simply changing:

var small = true;
to
var small = false;
in the buffer_texture_setup method, as suggested in the previous post, the feather has an higher resolution, but the trails effect is gone.
Instead, the feather it is repeated in the left corner of the screen.
48

I’ve thought that no matter of the size of the WebGLRenderTarget, the texture obtained from it will be wrapped to the rectangle, but it is not.

The shader is trivial:

uniform vec2 res;//The width and height of our screen
uniform sampler2D bufferTexture;//Our input texture
void main() {
	vec2 st = gl_FragCoord.xy / res;
	vec4 sum = texture2D(bufferTexture, st);
	gl_FragColor = sum;
}

I’m rendering the texture as I receive it.

Any hints about what I’m doing wrong?

6

I think indeed that my problem IS in the shader.

uniform sampler2D bufferTexture;//Our input texture
    void main() {
        vec 2 highRes = vec2(4096.0, 4096.0) 
        vec2 st = gl_FragCoord.xy / highRes;
        vec4 sum = texture2D(bufferTexture, st);
        gl_FragColor = sum;
    }

This seems to improve the quality quite a lot