Three.js: Bagaimana cara membuat tekstur tampak tajam pada layar retina?

Dibuat pada 24 Okt 2012  ·  16Komentar  ·  Sumber: mrdoob/three.js

Jadi saya baru saja memperbarui laptop saya ke macbook tampilan retina dan meskipun saya menggunakan tekstur resolusi tinggi dengan pengulangan, mereka terlihat sangat buram.

Jadi saya bertanya-tanya apa yang harus saya lakukan untuk mengatasi masalah ini?

Question

Komentar yang paling membantu

Hanya meninggalkan komentar di sini untuk orang lain yang menemukan ini, karena saya hampir gila mencoba menemukan jawaban dan Google terus membawa saya ke sini: Saya memiliki masalah yang sama persis tetapi saya adalah solusi yang sangat sederhana, itu hanya mengatur devicePixelRatio dalam perender (r72):

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

_Perhatikan bahwa pengaturan devicePixelRatio pada pembuatan objek tidak berfungsi. Mungkin bug? _

Semua 16 komentar

ok ini memperbaiki masalah saya dengan tekstur yang berulang, thx :) Namun itu tidak berfungsi untuk tekstur yang tidak berulang, ada ide tentang bagaimana ini bisa diperbaiki?

Mereka mungkin perlu kekuatan dua tekstur?

Saya telah mencoba meningkatkan resolusi tekstur tetapi saya tidak melihat adanya peningkatan. Tanpa benar-benar mengetahui bagaimana peningkatan kepadatan ditangani, tebakan saya adalah bahwa tekstur sedang diturunkan ke ukuran piksel yang sesuai dari wajah geometri tetapi kemudian ditingkatkan lagi oleh browser saya agar sesuai dengan kepadatan layar.

Ketika melihat lebih dekat pada tekstur berulang saya, saya dapat melihat bahwa sementara mengatur anisotropi ke max sangat meningkatkan kualitas, teksturnya masih tidak setajam yang seharusnya.

Sulit untuk mengetahui apa yang terjadi tanpa melihat contoh atau setidaknya tangkapan layar, tetapi Anda mungkin ingin melihat ini:

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

tautan luar biasa @alteredq ! memperbaiki masalah saya, semuanya terlihat tajam sekarang :)

Hanya meninggalkan komentar di sini untuk orang lain yang menemukan ini, karena saya hampir gila mencoba menemukan jawaban dan Google terus membawa saya ke sini: Saya memiliki masalah yang sama persis tetapi saya adalah solusi yang sangat sederhana, itu hanya mengatur devicePixelRatio dalam perender (r72):

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

_Perhatikan bahwa pengaturan devicePixelRatio pada pembuatan objek tidak berfungsi. Mungkin bug? _

_Perhatikan bahwa pengaturan devicePixelRatio pada pembuatan objek tidak berfungsi. Mungkin bug? _

Itu telah dihapus beberapa waktu lalu.

@mrdoob , @greggman : FYI, sama sekali tidak jelas bahwa seseorang harus menelepon renderer.setPixelRatio _before_ menelepon renderer.setSize .

@mietek Sebenarnya, saya pikir ini mungkin telah diperbaiki di dev secara tidak sengaja ...

sama sekali tidak jelas bahwa seseorang harus memanggil renderer.setPixelRatio sebelum memanggil renderer.setSize.

itu bahkan tidak membantu, atau begitulah tampaknya. ini yang saya dapatkan di konsol safari:

screen shot 2016-01-24 at 19 15 50

dan seperti inilah tampilannya di ipad:

screen shot 2016-01-24 at 19 21 05

seperti yang Anda lihat, persegi panjang tampaknya berukuran benar, tetapi area pandang sebenarnya 2x lebih besar.

segala sesuatunya terlihat benar di simulator chrome dengan dpr = 2 tetapi di ipad tidak.

@makc apakah kamu punya link?

[dihapus]

Sesuatu yang lain sedang terjadi ...

screen shot 2016-01-24 at 19 12 49

Menggunakan Alat Pengembang Safari, saya telah mengubah style="width: 418px menjadi style="width: 408px dan kembali dan itu terlihat sebagaimana mestinya. Saya yakin ada beberapa aturan css lain yang mengacaukan.

tampaknya memiringkan benda itu bolak-balik memperbaiki ini juga ... dengan cara apa pun, ini

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

tidak bekerja sama sekali. kembali ke papan gambar ...

Apakah halaman ini membantu?
0 / 5 - 0 peringkat