Three.js: How to make textures look sharp on a retina display?

[emilsjolander]

So i just updated my laptop to a retina display macbook and even though i use high resolution textures with repetition they look very blurry.

So i am wondering what i should do to resolve this issue?

[mrdoob]

Anisotropy is probably what you're after.
http://mrdoob.github.com/three.js/examples/webgl_materials_texture_anisotropy.html

[emilsjolander]

ok this fixed my issue with repeating textures, thx :) However it did not work for non repeating textures, any idea on how this can be fixed?

[mrdoob]

They probably need to be power of two textures?

[emilsjolander]

well i have tried increasing the resolution of the textures but i am not seeing an improvement. Without actually knowing how the increased density is handled, my guess is that the texture is being downscaled to the appropriate pixel size of the geometry face but is than scaled up again by my browser to fit the density of the display.

When looking closer at my repeating texture i can see that while setting the anisotropy to max greatly increased the quality, the texture is still not as sharp as it should be

[alteredq]

Hard to tell what's going on without seeing the example or at least screenshots, but you may want to have a look at this:

http://www.khronos.org/webgl/wiki/HandlingHighDPI

[emilsjolander]

awesome link @alteredq ! fixed my issues, everything looks sharp now :)

[igneosaur]

Just leaving a comment here for anyone else that finds this, because I almost went mad trying to find an answer and Google kept bringing me here: I had the exact same problem but mine was a very simple solution, it was to simply set the devicePixelRatio in the renderer (r72):

renderer.setPixelRatio(window.devicePixelRatio ? window.devicePixelRatio : 1);

_Worth noting that setting the devicePixelRatio at object creation does not work. Maybe a bug?_

[mrdoob]

_Worth noting that setting the devicePixelRatio at object creation does not work. Maybe a bug?_

That got removed a while ago.

[mietek]

@mrdoob, @greggman: FYI, it is not at all clear that one has to call renderer.setPixelRatio _before_ calling renderer.setSize.

[mrdoob]

@mietek Actually, I think this may have been fixed in dev unintentionally already...

[makc]

it is not at all clear that one has to call renderer.setPixelRatio before calling renderer.setSize.

it is not even helping, or so it seems. this is what I get in safari console:

and this is how it looks like in ipad:

as you see, the rectangle appears to be of right size, but the actual viewport is 2x larger.

[makc]

things look right in chrome's simulator with dpr=2 but on ipad they do not.

[mrdoob]

@makc do you have a link?

[makc]

[removed]

[mrdoob]

Something else is going on...

Using Safari's Developer Tools, I have changed style="width: 418px to style="width: 408px and back and it looks as it should. I bet there is some other css rule messing things.

[makc]

it appears that tilting the thing back and forth fixes this as well... any way, this

        setTimeout (function () {
            renderer.domElement.style.width = (parseInt (renderer.domElement.style.width) - 1) + 'px';
            setTimeout (function () {
                renderer.domElement.style.width = (parseInt (renderer.domElement.style.width) + 1) + 'px';
            }, 0);
        }, 0);

did not work at all. back to drawing board...