Three.js: ¿Cómo hacer que las texturas se vean nítidas en una pantalla de retina?

Creado en 24 oct. 2012  ·  16Comentarios  ·  Fuente: mrdoob/three.js

Así que acabo de actualizar mi computadora portátil a una macbook con pantalla retina y, aunque utilizo texturas de alta resolución con repetición, se ven muy borrosas.

Entonces, me pregunto qué debo hacer para resolver este problema.

Question

Comentario más útil

Solo dejo un comentario aquí para cualquier otra persona que encuentre esto, porque casi me vuelvo loco tratando de encontrar una respuesta y Google seguía trayéndome aquí: tenía exactamente el mismo problema, pero la mía era una solución muy simple, era simplemente establecer el devicePixelRatio en el renderizador (r72):

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

_Vale la pena señalar que configurar devicePixelRatio en la creación del objeto no funciona. ¿Quizás un error? _

Todos 16 comentarios

ok, esto solucionó mi problema con las texturas repetidas, gracias :) Sin embargo, no funcionó para las texturas que no se repiten, ¿alguna idea de cómo se puede solucionar esto?

¿Probablemente necesiten poder de dos texturas?

Bueno, he intentado aumentar la resolución de las texturas pero no veo una mejora. Sin saber realmente cómo se maneja el aumento de densidad, mi conjetura es que la textura se está reduciendo al tamaño de píxel apropiado de la cara de la geometría, pero luego mi navegador la escala nuevamente para adaptarse a la densidad de la pantalla.

Cuando miro más de cerca mi textura repetida, puedo ver que si bien establecer la anisotropía al máximo aumentó en gran medida la calidad, la textura aún no es tan nítida como debería ser

Es difícil saber qué está pasando sin ver el ejemplo o al menos las capturas de pantalla, pero es posible que desee echar un vistazo a esto:

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

impresionante enlace @alteredq ! solucionó mis problemas, todo se ve bien ahora :)

Solo dejo un comentario aquí para cualquier otra persona que encuentre esto, porque casi me vuelvo loco tratando de encontrar una respuesta y Google seguía trayéndome aquí: tenía exactamente el mismo problema, pero la mía era una solución muy simple, era simplemente establecer el devicePixelRatio en el renderizador (r72):

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

_Vale la pena señalar que configurar devicePixelRatio en la creación del objeto no funciona. ¿Quizás un error? _

_Vale la pena señalar que configurar devicePixelRatio en la creación del objeto no funciona. ¿Quizás un error? _

Eso se eliminó hace un tiempo.

@mrdoob , @greggman : FYI, no está del todo claro que uno tenga que llamar a renderer.setPixelRatio _antes_ llamar a renderer.setSize .

@mietek En realidad, creo que esto puede haberse solucionado en dev involuntariamente ya ...

no está del todo claro que uno tenga que llamar a renderer.setPixelRatio antes de llamar a renderer.setSize.

ni siquiera está ayudando, o eso parece. esto es lo que obtengo en la consola safari:

screen shot 2016-01-24 at 19 15 50

y así es como se ve en ipad:

screen shot 2016-01-24 at 19 21 05

como puede ver, el rectángulo parece tener el tamaño correcto, pero la ventana gráfica real es 2 veces más grande.

las cosas se ven bien en el simulador de Chrome con dpr = 2, pero en el ipad no.

@makc ¿tienes un enlace?

[remoto]

Algo más está sucediendo...

screen shot 2016-01-24 at 19 12 49

Usando las herramientas de desarrollo de Safari, he cambiado style="width: 418px a style="width: 408px y se ve como debería. Apuesto a que hay alguna otra regla CSS que estropea las cosas.

parece que inclinar la cosa hacia adelante y hacia atrás arregla esto también ... de cualquier manera, esto

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

no funcionó en absoluto. volver al tablero de dibujo ...

¿Fue útil esta página
0 / 5 - 0 calificaciones