Three.js: Como fazer as texturas parecerem nítidas em uma tela de retina?

Criado em 24 out. 2012  ·  16Comentários  ·  Fonte: mrdoob/three.js

Então, acabei de atualizar meu laptop para um macbook com tela retina e, embora use texturas de alta resolução com repetição, elas parecem muito borradas.

Então, estou me perguntando o que devo fazer para resolver esse problema.

Question

Comentários muito úteis

Apenas deixando um comentário aqui para qualquer outra pessoa que acha isso, porque eu quase enlouqueci tentando encontrar uma resposta e Google continuou me trazendo aqui: eu tinha exatamente o mesmo problema, mas a minha era uma solução muito simples, era simplesmente definir o devicePixelRatio no renderizador (r72):

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

_ Vale a pena notar que definir devicePixelRatio na criação do objeto não funciona. Talvez um bug? _

Todos 16 comentários

A anisotropia é provavelmente o que você está procurando.
http://mrdoob.github.com/three.js/examples/webgl_materials_texture_anisotropy.html

ok isso corrigiu meu problema com texturas repetidas, thx :) No entanto, não funcionou para texturas não repetidas, alguma ideia de como isso pode ser corrigido?

Eles provavelmente precisam ser potência de duas texturas?

bem, eu tentei aumentar a resolução das texturas, mas não estou vendo uma melhora. Sem realmente saber como o aumento da densidade é tratado, meu palpite é que a textura está sendo reduzida para o tamanho de pixel apropriado da face da geometria, mas é então aumentada novamente pelo meu navegador para se ajustar à densidade da tela.

Ao olhar mais de perto a minha textura repetida, posso ver que, ao definir a anisotropia para o máximo, aumentou muito a qualidade, a textura ainda não é tão nítida quanto deveria ser

É difícil dizer o que está acontecendo sem ver o exemplo ou pelo menos as capturas de tela, mas você pode querer dar uma olhada nisso:

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

link incrível @alteredq ! consertou meus problemas, tudo parece afiado agora :)

Apenas deixando um comentário aqui para qualquer outra pessoa que acha isso, porque eu quase enlouqueci tentando encontrar uma resposta e Google continuou me trazendo aqui: eu tinha exatamente o mesmo problema, mas a minha era uma solução muito simples, era simplesmente definir o devicePixelRatio no renderizador (r72):

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

_ Vale a pena notar que definir devicePixelRatio na criação do objeto não funciona. Talvez um bug? _

_ Vale a pena notar que definir devicePixelRatio na criação do objeto não funciona. Talvez um bug? _

Isso foi removido há um tempo.

@mrdoob , @greggman : Para sua informação, não está claro se alguém tem que chamar renderer.setPixelRatio _before_ chamar renderer.setSize .

@mietek Na verdade, acho que isso já pode ter sido corrigido em dev involuntariamente ...

não está claro se é necessário chamar renderer.setPixelRatio antes de chamar renderer.setSize.

não está nem ajudando, ou assim parece. isto é o que eu obtenho no console do safari:

screen shot 2016-01-24 at 19 15 50

e é assim que fica no ipad:

screen shot 2016-01-24 at 19 21 05

como você pode ver, o retângulo parece ter o tamanho certo, mas a janela de visualização real é 2x maior.

as coisas parecem certas no simulador do Chrome com dpr = 2, mas não no ipad.

@makc você tem um link?

[removido]

Outra coisa está acontecendo ...

screen shot 2016-01-24 at 19 12 49

Usando as ferramentas de desenvolvedor do Safari, mudei style="width: 418px para style="width: 408px e vice-versa e está como deveria. Aposto que há algumas outras regras de css atrapalhando as coisas.

parece que inclinar a coisa para frente e para trás corrige isso também ... de qualquer forma, isso

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

não funcionou de todo. de volta à prancheta ...

Esta página foi útil?
0 / 5 - 0 avaliações

Questões relacionadas

akshaysrin picture akshaysrin  ·  3Comentários

yqrashawn picture yqrashawn  ·  3Comentários

clawconduce picture clawconduce  ·  3Comentários

zsitro picture zsitro  ·  3Comentários

filharvey picture filharvey  ·  3Comentários