Three.js: Orientasi tekstur kubus

Maksud Anda dapat memutar scene.background ? Kalau begitu... ya, pasti tertarik.

Kami mungkin membutuhkan API baru ...

scene.background = new THREE.Background( cubeTexture );`
scene.background.rotation.y = Math.PI / 2;

Saya sedang berjuang dengan hal ini sekarang. Mencoba mendapatkan bayangan tanah yang dipanggang agar sesuai dengan arah matahari dari peta kubus.
Sepertinya di suatu tempat di sepanjang jalan cubemap saya dibalik 180 derajat. Akan sangat bagus jika saya bisa memperbaikinya di sini daripada merender ulang peta kubus saya beberapa kali dan mencoba mencari tahu di mana itu terjadi.

@fabienrohrer Coba

scene.rotation.y = Math.PI;

Jika itu tidak berhasil, berikan contoh langsung untuk menunjukkan dengan tepat apa yang Anda lakukan.

Oh, itu berhasil? Kamera harus menjadi anak dari adegan itu?

Kamera harus menjadi anak dari adegan itu?

Saya tidak berpikir itu penting.

@mrdoob inilah yang saya butuhkan juga :-)

@WestLangley :

Memutar keseluruhan adegan terlalu berlebihan dan dapat menyebabkan banyak efek samping di aplikasi saya.

Saya ingin dapat memutar latar belakang saja, dan yang pasti, peta lingkungan harus bekerja dengan cara yang sama.

Demo langsung tidak mungkin dilakukan, karena API tidak ada. Adalah masalah untuk mengambil contoh apa pun yang memiliki peta kubus latar belakang (seperti https://threejs.org/examples/#webgl_materials_cubemap) dan hanya dapat memutar latar belakang di sekitar sumbu y. Atau lebih umum, untuk menerapkan rotasi apa pun ke latar belakang.

Mampu menerapkan matriks / angka empat rotasi khusus ke peta kubus apa pun tampaknya menjadi solusi paling umum bagi saya.

three.js berhati-hati untuk memastikan bahwa pantulan materi konsisten dengan materi envMap , yang didefinisikan dalam sistem koordinat ruang dunia. Mengizinkan pengguna untuk memutar latar belakang pemandangan akan menghasilkan latar belakang yang tidak konsisten dengan pantulan material.

Mengapa Anda tidak membuat peta kubus ruang-dunia yang benar di aplikasi Anda?

Kamera harus menjadi anak dari adegan itu?

Saya tidak berpikir itu penting.

Saya mencoba melakukan scene.rotation.y ++ di konsol di webgl_materials_standard dan pistolnya berputar. Kemudian saya mencoba melakukan scene.add( camera ) dan kemudian jika saya melakukan scene.rotation.y ++ itu melakukan apa yang kami kejar, tetapi kemudian kontrol kamera menjadi kacau 😁

Jika kita memperkenalkan objek THREE.Background , kita bisa menambahkan API untuk menangani ini, ditambah di renderer kita juga bisa memperkenalkan ide:

var envMap = material.envMap;
if ( scene.background && scene.background.isBackground && envMap === null ) {
    envMap = scene.background.texture;
}

saya bilang

Coba scene.rotation.y = Math.PI; Jika itu tidak berhasil, ...

Itu berarti itu mungkin tidak berhasil. :-)

Itu tergantung pada kasus penggunaan. Saya mencoba dengan OrbitControls dan itu bekerja dengan baik.

tidak terkait: contoh webgl_materials_standard harus menggunakan kontrol orbit, bagaimanapun juga IMO.

Maksudmu bisa memutar scene.background? Kalau begitu... ya, pasti tertarik.

Lebih masuk akal untuk melakukan ini pada tingkat tekstur, jika tidak, pencahayaan IBL apa pun tidak akan cocok dengan latar belakang, saya berasumsi.

Kami mengizinkan rotasi tekstur normal, apakah ada alasan mengapa kami tidak ingin melakukan hal yang sama untuk tekstur kubus? Apakah terlalu rumit untuk diterapkan?

Mengapa Anda tidak membuat peta kubus ruang-dunia yang benar di aplikasi Anda?

Ini sangat memakan waktu. Saya telah bekerja untuk menghasilkan peta kubus selama beberapa hari terakhir, dan membuat perubahan kemudian merender ulang peta kubus membutuhkan waktu sekitar 15-20 menit untuk setiap perubahan.

Kasus penggunaan potensial lainnya yang menarik untuk ini adalah Anda dapat mengubah arah pencahayaan lingkungan secara real time. Saat ini saya menggabungkan peta lingkungan PMREM dengan cahaya terarah untuk bayangan waktu nyata, dan menggunakan peta sebagai skybox, yang memberikan efek siang hari yang cukup baik.
Jelas ada batasan untuk apa yang dapat Anda lakukan tanpa mengubah warna peta lingkungan, tetapi Anda dapat mensimulasikan setidaknya beberapa jam siang hari yang lewat dengan memutar peta secara sinkron dengan cahaya arah sambil menyesuaikan .envMapIntensity .

Kekhawatiran saya juga tentang kinerja. Saat ini saya menerapkan peretasan untuk memutar tekstur atas dan bawah dan menukar yang lain. Dibutuhkan sekitar 10 ms untuk memutar tekstur 1024x1024 di JS.

Atau, mungkinkah hanya memiliki dua opsi untuk orientasi CubeTexture, yang saat ini Anda miliki dan satu lagi (dengan rotasi 180 derajat) yang akan ramah dengan standar lain yang sebagian besar digunakan dalam format 3D (X3D, VRML, dll.) .). Kami mungkin dapat dengan mudah menyesuaikan konsistensi dengan refleksi material untuk menangani kedua format?

Ini terdengar familiar #11103

Jika saya akan menerapkan CubeMap.rotation = matrix3 , apakah Anda akan bergabung di r105?

Kekhawatiran saya juga tentang kinerja. Saat ini saya menerapkan peretasan untuk memutar tekstur atas dan bawah dan menukar yang lain. Dibutuhkan sekitar 10 ms untuk memutar tekstur 1024x1024 di JS.

Dan seberapa sering Anda melakukan ini di aplikasi Anda?

@WestLangley Saya baru saja memberi Anda jawaban terperinci di sini: https://github.com/mrdoob/three.js/pull/16507#discussion_r286337864

Dan seberapa sering Anda melakukan ini di aplikasi Anda?

Tidak banyak. Sekali saat memuat per klien, dan sekali setiap kali latar belakang diubah (kasus yang sangat jarang terjadi). A DEFINE juga akan melakukan pekerjaan itu.

Kekhawatiran saya juga tentang kinerja ... Dibutuhkan sekitar 10 ms.

Dan seberapa sering Anda melakukan ini di aplikasi Anda?

Tidak banyak. Sekali saat memuat per klien, dan sekali setiap kali latar belakang diubah (kasus yang sangat jarang terjadi).

Maaf, saya tidak mengikuti logika itu.

Sayangnya, @WestLangley tidak ingin menggabungkan modifikasi saya tentang CubeTexture.rotation karena runtime overhead (perkalian mat3 tambahan). Dalam hal ini, saya kehabisan ide untuk menyelesaikan ini dengan bersih di threejs.
Jika kontributor threejs tidak menyelesaikan ini, harap tutup masalah ini.

Saya menunggu implementasi fitur ini.

@FishOrBear Sayangnya, pengelola threejs memutuskan untuk tidak mengimplementasikan ini. Anda dapat menerapkan tambalan yang tidak digabungkan ini di garpu, jika Anda ingin memiliki ini di proyek Anda:

https://github.com/mrdoob/three.js/pull/16507

@mrdoob Mungkin kita bisa mempertimbangkan kembali permintaan fitur ini di #18157?

Saya menggunakan threejs untuk membuat aplikasi yang mirip dengan AutoCAD, jadi kami menggunakan xy untuk duduk sebagai pesawat.

CubeTexture saat ini sedikit bertentangan dengan kita.

BTW: Dengan Babylon.js, setidaknya dimungkinkan untuk memutar skybox di sekitar sumbu y:

https://www.babylonjs-playground.com/#UU7RQ #447

Mesin mendukung ini dengan mengubah vektor refleksi di shader fragmen. Jadi persisnya pendekatan yang tidak diterima di #16507. Kode dari shader fragmen Babylon.js:

https://github.com/BabylonJS/Babylon.js/blob/1c4627141f83c08fe4a7e30e2621c916b4e6c9c9/src/Shaders/ShadersInclude/reflectionFunction.fx#L114 -L117

@mrdoob Saya pikir kita harus mengimplementasikan fitur ini. Ada permintaan lain di forum:

https://discourse.threejs.org/t/rotate-a-scenes-background-skybox-texture/12199

Saya ragu bahwa satu perkalian matriks/vektor tambahan per fragmen akan sangat mempengaruhi kinerja.

Saya masih memiliki masalah yang sama di aplikasi saya, dan peretasan untuk menyelesaikannya jelek dan sangat mahal... Saya juga merekomendasikan untuk menerima peningkatan ini.

Saya juga ingin melihat fitur ini ditambahkan.

Sepertinya pemblokir adalah potensi penurunan kinerja, tetapi itu seharusnya mudah untuk diuji. Kami dapat mencoba menambahkannya, dan jika ada penurunan kinerja yang tidak dapat diterima, kami dapat menghapusnya lagi.

Sama di sini, bisa menggunakan fitur ini daripada mengimplementasikan kembali rendering latar belakang saya :)

Saya tidak yakin untuk mengikuti masalah kinerja. Tidak ada yang menghalangi kita untuk menghasilkan arah sinar langsung di vertex shader? Maka biayanya sama dengan transformasi modelMatrix .

Dalam kasus saya, saya dapat menggunakan fitur ini karena saya membuat peta kubus yang diambil oleh kamera dan diunggah oleh pengguna. Foto tidak selalu berorientasi ke utara dengan benar, sehingga memerlukan koreksi manual setelah diunggah.

Salah satu cara yang saya lakukan adalah dengan menyimpan rotasi sebagai variabel, menerapkannya ke adegan sebelum rendering, dan kemudian mengatur ulang rotasi adegan ke quat identitas setelah rendering.

Ini menyebabkan dua pembaruan yang tidak perlu untuk semua matriks dunia objek adegan saya. Ini juga berarti saya tidak dapat melakukan pembaruan posisi apa pun di onBeforeRender. Tapi itu membuat adegan dalam keadaan normal sebaliknya.

Btw (karena tidak ada yang menyebutkannya), tampaknya dimungkinkan untuk membuat skybox "klasik" yang berputar menggunakan susunan 6 bahan.

sesuatu seperti ini :

const urls = [
  '/assets/skybox/right.png',
  '/assets/skybox/left.png',
  '/assets/skybox/top.png',
  '/assets/skybox/bottom.png',
  '/assets/skybox/front.png',
  '/assets/skybox/back.png',
];

const materials = urls.map((url) => {
  const texture = new THREE.TextureLoader().load(url);

  return new THREE.MeshBasicMaterial({
    map: texture,
    side: THREE.BackSide,
    fog: false,
    depthWrite: false,
  });
});

const skybox = new THREE.Mesh( new THREE.BoxBufferGeometry(10000, 10000, 10000), materials );
scene.add(skybox);

skybox.rotation.y = Math.PI / 2;

Seperti yang ditunjukkan di sini: https://woodenraft.games/demos/skybox-rotation-threejs.html

@wmcmurray Anda harus memindahkan skybox ini dengan kamera agar berfungsi dengan benar, dan Anda harus memastikan bahwa kotak berdimensi X < Math.sqrt(0.75 * camera.far * camera.far) sehingga sudutnya selalu pas dalam tampilan, tetapi itu tampaknya lebih mudah daripada retasan saya untuk memutar/tidak memutar adegan.

Haruskah kita membuka kembali PR untuk itu? Ada dua kasus penggunaan dan jika kami tidak ingin memengaruhi kinerja, kami dapat menggunakan definisi shader:

• Kasus penggunaan 1: lingkungan sudah dihitung satu kali dan tidak perlu diputar di shader. Ini dapat dilakukan oleh pengguna baik di CPU, atau bahkan di GPU jika dia mau
• Kasus penggunaan 2: saat bekerja pada penampil, cukup umum untuk memutar latar belakang secara real time menggunakan mouse misalnya.

Untuk mencegah pengguna dengan use case 1 terpengaruh oleh perkalian matriks, mungkin kita bisa menambahkan flag seperti:

renderer.dynamicBackground = true;

dan kompilasi shader latar belakang yang sesuai?

Sementara itu

Seperti yang ditunjukkan oleh @capnmidnight , pada dasarnya Anda dapat mengkode ulang rendering latar belakang Anda sendiri dan itu tidak terlalu sulit. Hanya ekstra hati-hati dengan bidang pandang (nilai dekat dan jauh).

Alih-alih menggunakan MeshBasicMaterial , Anda juga dapat langsung membuat shader Anda sendiri dengan memperluas ShaderMaterial dan mengambil sampel peta kubus.