Three.js: Wie lassen sich Texturen auf einem Retina-Display scharf aussehen?

Erstellt am 24. Okt. 2012  ·  16Kommentare  ·  Quelle: mrdoob/three.js

Also habe ich gerade meinen Laptop auf ein Retina-Display-Macbook aktualisiert und obwohl ich hochauflösende Texturen mit Wiederholungen verwende, sehen sie sehr verschwommen aus.

Ich frage mich also, was ich tun soll, um dieses Problem zu beheben?

Question

Hilfreichster Kommentar

Ich habe hier nur einen Kommentar für alle anderen hinterlassen, die dies finden, weil ich fast verrückt geworden bin, als ich versucht habe, eine Antwort zu finden, und Google mich immer wieder hierher gebracht hat: Ich hatte genau das gleiche Problem, aber meins war eine sehr einfache Lösung, es war einfach, das devicePixelRatio im Renderer (r72):

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

_Wenn Sie beachten, dass das Festlegen von devicePixelRatio bei der Objekterstellung nicht funktioniert. Vielleicht ein Fehler? _

Alle 16 Kommentare

Anisotropie ist wahrscheinlich das, wonach Sie suchen.
http://mrdoob.github.com/three.js/examples/webgl_materials_texture_anisotropy.html

ok das hat mein Problem mit sich wiederholenden Texturen behoben, danke :) Allerdings hat es bei sich nicht wiederholenden Texturen nicht funktioniert, eine Idee, wie dies behoben werden kann?

Sie müssen wahrscheinlich die Kraft zweier Texturen sein?

Nun, ich habe versucht, die Auflösung der Texturen zu erhöhen, aber ich sehe keine Verbesserung. Ohne wirklich zu wissen, wie mit der erhöhten Dichte umgegangen wird, gehe ich davon aus, dass die Textur auf die entsprechende Pixelgröße der Geometriefläche verkleinert wird, aber von meinem Browser erneut skaliert wird, um sie an die Dichte der Anzeige anzupassen.

Wenn ich mir meine sich wiederholende Textur genauer ansehe, kann ich sehen, dass die Einstellung der Anisotropie auf max die Qualität erheblich erhöht, aber immer noch nicht so scharf ist, wie sie sein sollte

Es ist schwer zu sagen, was los ist, ohne das Beispiel oder zumindest Screenshots zu sehen, aber vielleicht möchten Sie sich das ansehen:

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

super link

Ich habe hier nur einen Kommentar für alle anderen hinterlassen, die dies finden, weil ich fast verrückt geworden bin, als ich versucht habe, eine Antwort zu finden, und Google mich immer wieder hierher gebracht hat: Ich hatte genau das gleiche Problem, aber meins war eine sehr einfache Lösung, es war einfach, das devicePixelRatio im Renderer (r72):

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

_Wenn Sie beachten, dass das Festlegen von devicePixelRatio bei der Objekterstellung nicht funktioniert. Vielleicht ein Fehler? _

_Wenn Sie beachten, dass das Festlegen von devicePixelRatio bei der Objekterstellung nicht funktioniert. Vielleicht ein Fehler? _

Das wurde vor einiger Zeit entfernt.

@mrdoob, @greggman: FYI, ist es nicht klar , dass man anrufen renderer.setPixelRatio _before_ Aufruf renderer.setSize .

@mietek Eigentlich denke ich, dass dies möglicherweise bereits unbeabsichtigt in dev behoben wurde ...

Es ist überhaupt nicht klar, dass man renderer.setPixelRatio aufrufen muss, bevor man renderer.setSize aufruft.

es hilft nicht einmal, oder so scheint es. Folgendes bekomme ich in der Safari-Konsole:

screen shot 2016-01-24 at 19 15 50

und so sieht es im ipad aus:

screen shot 2016-01-24 at 19 21 05

Wie Sie sehen, scheint das Rechteck die richtige Größe zu haben, aber das tatsächliche Ansichtsfenster ist 2x größer.

Im Chrome-Simulator mit dpr = 2 sieht es richtig aus, auf dem iPad jedoch nicht.

@makc hast du einen link

[entfernt]

Etwas anderes ist los ...

screen shot 2016-01-24 at 19 12 49

Mit den Entwicklertools von Safari habe ich style="width: 418px in style="width: 408px und zurück geändert und es sieht so aus, wie es sollte. Ich wette, es gibt noch einige andere CSS-Regeln, die die Dinge durcheinander bringen.

es scheint, dass das Hin- und Herkippen des Dings dies ebenfalls behebt ... auf jeden Fall

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

hat überhaupt nicht funktioniert. zurück zum Zeichenbrett ...

War diese Seite hilfreich?
0 / 5 - 0 Bewertungen

Verwandte Themen

jlaquinte picture jlaquinte  ·  3Kommentare

filharvey picture filharvey  ·  3Kommentare

donmccurdy picture donmccurdy  ·  3Kommentare

yqrashawn picture yqrashawn  ·  3Kommentare

fuzihaofzh picture fuzihaofzh  ·  3Kommentare