Three.js: Permintaan Fitur: Refleksi Ruang Layar

Satu-satunya kekhawatiran saya di sini adalah bahwa itu tidak bekerja dengan baik dengan Rendering stereo, jadi itu akan sulit di WebVR, tapi tolong jangan berpikir saya menentang fitur ini :) :+1:

Matikan saja di VR. Banyak efek mahal tidak bekerja dengan baik di VR. UE4 bahkan menyarankan untuk melanjutkan rendering daripada ditangguhkan dalam konteks VR untuk tujuan kecepatan.

Tepat, itulah sebabnya saya tidak menentangnya.

Saya menemukan di sini saat mengerjakan implementasi React Native dari pemetaan refleksi, Refleksi ruang layar sangat bagus untuk game non-VR.

THREE.Reflector berfungsi di VR ️
https://threejs.org/examples/webvr_sandbox.html

Bagus!

Meskipun bahkan di Nightly saya mendapatkan "VR Tidak ditemukan" tetapi saya akan memeriksanya.

Masalah khusus saya (yang bukan OP) bukan untuk memecahkan masalah refleksi, itu adalah bagaimana membuat objek asli three.js, dan merendernya dalam adegan dan penyaji ReactVR yang ada. Saya mendapatkan hasil yang OK, satu-satunya hal adalah gambar latar belakang sedikit aneh, jadi pantulannya terlihat aneh - tetapi seperti yang diharapkan, React VR menciptakan bola luar-dalam untuk panorama latar belakang. Saya belum mencoba peta kubus, tapi itu mungkin bekerja lebih baik.

Saya JAUH di halaman di buku jadi saya mungkin akan meninggalkan demo yang ada seperti itu, tapi ini terlihat seperti teknik yang hebat.

Saya sudah lama ingin mempelajari lebih lanjut tentang jenis efek ini, jadi saya mencoba membuat efek komposer untuknya. Masih ada beberapa pekerjaan yang bisa dilakukan tetapi inilah yang saya kumpulkan berdasarkan implementasi Kode80 dan blogpost Morgan McGuire (adegan sponza membutuhkan sedikit waktu untuk dimuat):

https://gkjohnson.github.io/threejs-sandbox/screenSpaceReflectionsPass/

Beberapa hal yang harus dilakukan selanjutnya adalah membersihkan artefak jitter, refleksi glossy (dengan blur pass atau sampel peta mip + piramida peta kedalaman) dan beberapa pantulan melalui proyeksi ulang temporal.

Jika ada yang benar-benar tertarik untuk menggunakan efek ini, saya akan senang bekerja dengan seseorang untuk memoles ini sedikit lebih banyak!

@gkjohnson Manis. Namun, adegan Anda mungkin terlalu rumit. Bagaimanapun, demo Anda tampaknya sebagian besar tidak responsif. Bisakah Anda membuat contoh yang lebih sederhana? Juga, sakelar hidup-mati akan menyenangkan.

@WestLangley

demo Anda tampaknya sebagian besar tidak responsif

Apakah Anda dapat melihat demonya? Layar mungkin menjadi hitam selama beberapa detik atau lebih karena adegan Sponza akan membutuhkan sedikit waktu untuk mengunduh tergantung pada koneksi Anda.

Jika tidak berfungsi sama sekali, saya dapat mencoba membuat sesuatu yang lebih sederhana -- ini berfungsi pada Pixel 2 saya

sebuah toggle on-off akan menyenangkan.

Mengubah penggeser "intensitas" ke 0 terlihat sama dengan mematikannya, meskipun ray tracing masih terjadi sehingga tidak akan ada perbedaan kinerja dalam kasus itu jika itu yang Anda cari.

@gkjohnson Mengerti. Di mac saya, demo Anda berwarna hitam untuk sementara, dan kemudian frame rate menjadi 4.

@WestLangley Ini adalah efek yang sangat bergantung pada resolusi jadi jika Anda membuat jendela Anda lebih kecil, framerate mungkin akan naik. Melakukan ray tracing pada resolusi yang lebih rendah dan kemudian mengomposisi dengan buffer resolusi penuh akan membantu membuat efek lebih terukur, tetapi saya belum meluangkan waktu untuk mengoptimalkannya.

@gkjohnson bagaimana Anda menutupinya ke permukaan reflektif saja? Jika saya meningkatkan intensitas, semuanya mulai terpantul dan ada beberapa artefak yang cukup menggelegar.

@bicubic Saat ini tidak ada atribut permukaan yang diperhitungkan tetapi seharusnya tidak terlalu sulit untuk menambahkan versi dasar itu. Anda dapat memudarkan atau mengaburkan efeknya berdasarkan atribut specular/kekasaran material.

Sayangnya saya tidak menggunakan efeknya saat ini, jadi saya belum mencoba menambahkan fitur-fitur lain ini. Seperti yang saya sebutkan sebelumnya, jika ada minat untuk menggunakannya untuk sesuatu, saya akan dengan senang hati berkolaborasi dan melengkapi efeknya!

Anda dapat memudarkan atau mengaburkan efeknya berdasarkan atribut specular/kekasaran material.

Akan lebih berguna untuk dapat menentukan objek sebagai reflektif / non-reflektif. Saat ini semuanya reflektif, termasuk hal-hal seperti tirai dan tanaman. Idealnya, hanya lantai yang harus memantulkan cahaya dalam demo ini.

@looeee Saya setuju itu yang saya katakan - maaf jika saya tidak jelas. Atribut material harus ditulis ke target sehingga dapat diambil sampelnya di ruang layar dan digunakan untuk memudarkan atau mengaburkan pantulan pada piksel yang diberikan. Ini akan memungkinkan peta kekasaran dll mempengaruhi pantulan juga.

Saya ingin melihat ini menjadi bagian dari kemampuan default three.js.

Ada banyak hal seperti ini yang membuat Anda bertanya-tanya apakah arsitektur renderer yang ditangguhkan juga harus menjadi bagian dari penawaran default. Khusus untuk webgl2.0

@gkjohnson mengerti, itu masuk akal. Namun, sepertinya topeng semacam itu mungkin diperlukan untuk mencegah artefak. Dalam contoh Anda, Anda ingin nol refleksi pada tirai dan tanaman. Akankah memudar ke nol berdasarkan sifat material tersebut bekerja dengan benar?

@bicubic
Saya setuju saya benar-benar ingin melihat jalur rendering yang ditangguhkan khusus, juga. Dengan WebGL2 dan beberapa tekstur render, ini jauh lebih layak.

@looee
Itu tergantung pada efek yang Anda inginkan tetapi dengan pendekatan yang saya jelaskan, nilai kekasaran yang dirender akan secara efektif berperilaku sebagai topeng untuk pemandangan dengan nilai kekasaran 1 yang berarti "tidak memberikan pantulan pada piksel ini" dan nilai 0 yang berarti "render penuh refleksi pada piksel ini". Nilai di antaranya akan membuat refleksi pada intensitas parsial. Slider intensity dalam demo menunjukkan efeknya (tapi jelas untuk keseluruhan adegan, bukan per piksel).

Pendekatan lain adalah mengaburkan piksel yang dipantulkan berdasarkan nilai kekasaran untuk meniru permukaan yang memantulkan cahaya. Jadi tirai masih akan memiliki beberapa pantulan, hanya saja tidak tajam. Ini akan memungkinkan tirai diterangi oleh lantai biru yang terang benderang, misalnya.

nilai kekasaran 1 berarti "tidak memberikan refleksi pada piksel ini" dan nilai 0 berarti "membuat refleksi penuh pada piksel ini".

Sepertinya ini bisa bekerja dengan baik. Unreal menggunakan parameter "kekasaran maksimum" dan merekomendasikannya untuk disetel ke 0,8.

Ups

@gkjohnson
Ini sangat menarik dan saya suka hasil Anda, saya mengintegrasikannya dalam penyaji WebGL2/MRT sekarang dan akan bereksperimen dengannya. Apakah Anda memperhatikan bahwa Anda membuat materi di setiap panggilan render?
this.scene.overrideMaterial = this.createPackedMaterial();

@Fyrestar Terima kasih! Dan saya tidak menyadarinya! Tapi seperti yang saya katakan, saya pikir masih ada sedikit pembersihan yang harus dilakukan dan kinerjanya mungkin belum cukup berguna.

Jenis efek ini benar-benar lebih cocok untuk penyaji yang ditangguhkan daripada diteruskan (mungkin seperti yang sedang Anda kerjakan). Saya sudah lama ingin menggabungkan ini dan beberapa efek berkualitas tinggi lainnya, tetapi saya cenderung menunggu sampai penyaji tangguhan yang tepat tersedia sebelum meluangkan lebih banyak waktu untuk itu. Apakah penyaji tangguhan / MRT yang sedang Anda kerjakan tersedia di Github?

Saya telah mengintegrasikannya sekarang, sementara SSR meneruskan output ke RT resolusi lebih rendah, pada dasarnya hanya pantulan dan kemudian menggabungkannya menggunakan blur kedalaman dengan gambar utama untuk menghapus/mengurangi kesalahan. Saya merender nilai kekasaran ke atribut RT dan menggunakannya lagi untuk menentukan kekuatan blur dengan 1 menjadi tidak terlihat untuk membuang fragmen.

Blur juga menghilangkan kesalahan yang semakin kuat di kejauhan. Satu masalah belum tampak transparansi lagi dan objek sebagian menutupi orang lain menyebabkan klip refleksi lainnya. Saya benar-benar perlu membaca lebih banyak tentang teknik ini.

Saya menggunakannya dengan mesin khusus di atas TIGA, tidak menggunakan penyusun TIGA. TIGA sebenarnya siap untuk menggunakan konteks WebGL2 di WebGLRenderer saat ini, saya telah menambahkan MRT di sana. Saya akan segera meletakkannya di github. Itu masih membutuhkan untuk membuat adegan untuk kedua kalinya untuk buffer kedalaman backface, tapi itu tidak terlalu mahal.

@Fyrestar
Hei, ada berita tentang?

Saya menulis sendiri dan membuat pr ke three.js , tetapi sekarang hanya mendukung OrthographicCamera, saya mencoba mendukung PerspectiveCamera.
Demo Demo2

Dukungan PerspectiveCamera baik-baik saja sekarang. https://github.com/mrdoob/three.js/pull/20156

Demo

Ini indah dan cukup pencapaian. Ini sangat lambat di mesin saya -- saya mendapatkan 5fps pada 1920x1080. Apa perbedaan antara implementasi Anda dan Sketchfab? Saya menduga jika kami mengetahui perbedaannya, kami akan tahu cara mengoptimalkan milik Anda....

@bhouston Terima kasih!

Sekarang semua yang ada di adegan itu reflektif, tetapi tidak diperlukan di sebagian besar proyek praktis.
Saya akan menambahkan beberapa seperti properti IntensityMap atau menggunakan informasi Roughness Metalness yang ada, dikombinasikan dengan redaman jarak, pada piksel dengan nilai 0, menghentikan perhitungan secara langsung, saya pikir itu akan sangat meningkatkan fps.
Mungkin juga secara acak memilih bagian dari piksel reflektif.

Saya telah mencoba melihat kode Sketchfab, tetapi gagal. Saya akan mencoba lagi, tetapi saya tidak merasa banyak harapan. Jika ada yang memiliki kode Sketchfab, tolong bagikan, terima kasih!

------EDIT------
Selain itu, jendela presentasi Sketchfab tidak memiliki layar penuh secara default, dan berhenti merender saat tidak ada operasi.
Jika layar penuh dan terus berputar, bahkan adegan sederhana juga akan memiliki penggunaan GPU yang tinggi.

@gonnavis Kode shader untuk contoh itu harus dapat dilihat melalui ekstensi Chrome Spector.js.

Hanya bermain-main dengan Sketchfab Saya dapat melihat bahwa mereka mengubah resolusi SSR mereka dan menyempurnakannya. Saya tidak akan terkejut jika mereka memiliki 3 hingga 5 tingkat kualitas yang mereka lompati secara progresif. Ini memastikan ada framerate interaktif tetapi disempurnakan hingga sempurna saat statis.

Ini memastikan ada framerate interaktif tetapi disempurnakan hingga sempurna saat statis.

Kelemahannya adalah ada lompatan nyata saat kamera berhenti bergerak dan tingkat kualitas berubah. Ini lebih jelas di beberapa adegan daripada yang lain. Inilah salah satu di mana itu sangat jelas.

EDIT: mereka melakukannya dengan lebih dari sekadar pantulan - sepertinya lampu, bayangan, pantulan, dan mungkin resolusi tekstur semakin ditingkatkan. Perhatikan cahaya/bayangan di dinding belakang pemandangan ini .

Ketika saya bereksperimen dengan SSRR di atas, saya sedikit mereferensikan artikel Morgan Mcguire di sini , yang menjelaskan beberapa teknik yang sepertinya digunakan Sketchfab.

Secara khusus langkah piksel dapat ditingkatkan sehingga lebih sedikit piksel piksel yang diambil sampelnya yang dapat digabungkan dengan jitter per piksel biasa sehingga piksel saudara "melewati" sampel kedalaman yang berbeda saat melangkah. Jika ray stride cukup tinggi, Anda dapat menambahkan pencarian biner di akhir setelah ada sesuatu yang berpotongan di buffer kedalaman untuk menemukan piksel yang akan terkena sinar terlebih dahulu. Mengembalikan lebih awal pada fragmen yang tidak reflektif mungkin akan membantu seperti yang telah Anda sebutkan @gonnavis.

Saya juga bereksperimen dengan raymarch resolusi rendah yang mendalam dan sadar-normal, tetapi saya tidak pernah sampai pada titik di mana saya senang dengan tampilannya. Saya pikir teknik dalam game ini dapat mengambil manfaat yang cukup besar dari fakta bahwa resolusi yang tersedia seringkali dapat dibagi dua, yang membuat kelas atas menjadi lebih sederhana.

Saya ingin tahu bagaimana Sketchfab menangani pantulan kasar yang kabur berdasarkan jarak pantulan. Saya telah melihat bahwa Godot Engine melakukan blur setelah dengan radius berdasarkan jarak sinar dan kekasaran permukaan tetapi itu menghasilkan artefak yang saya rasa tidak saya lihat di sini. Saya harus melihat-lihat Spector.js ketika saya memiliki kesempatan (terima kasih atas tipnya @WestLangley!). Makalah Frostbite @bhouston yang diposting awalnya menyarankan menggunakan piramida kedalaman saat ray berbaris tetapi menghasilkan itu bisa menyusahkan di webgl1 (dan mungkin 2?).

Kelihatannya bagus @gonnavis! Senang melihatnya mungkin berhasil masuk ke perpustakaan.

@WestLangley Terima kasih! tetapi ketika saya menggunakan Spector.js di Sketchfab, saya mendapatkan "Tidak ada bingkai dengan perintah gl yang terdeteksi. Coba gerakkan kamera." kesalahan.

Saya ragu setelah SSRPass dioptimalkan seperti yang saya katakan sebelumnya, kinerja Sketchfab masih akan memimpin secara signifikan. Terutama dalam hal rendering berkelanjutan dan tidak ada strategi downgrade seperti yang disebutkan @bhouston @looeee . Saya bahkan berpikir bahwa jika tidak membicarakan detail implementasi, konsep inti dari SSRPass ini mungkin sudah menjadi solusi yang optimal.

@gkjohnson Terima kasih atas informasi dan dukungan Anda! Saya akan terus meningkatkan.

@gonnavis

Saya merekomendasikan tab Grafik Safari:

Jika Anda menggunakan Linux, Anda dapat menggunakan Epiphany (alias Gnome Web):
https://webkit.org/downloads/

Saya tidak berpikir ada WebKit build untuk Windows ...

@mrdoob Terima kasih! Meskipun saya terutama menggunakan windows, saya akan mencoba di Mac jika diperlukan.

Tapi saya bertanya-tanya apakah diperbolehkan mengunggah kode Sketchfab ke perpustakaan sumber terbuka, jika menemukan hal-hal berguna seperti fungsi glsl?

Struktur SSRPass ini didasarkan pada three.js SSAOPass , dan adegan demo menggunakan contoh three.js webgl_shading_physical , fungsi key pointToLineDistance berasal dari wolfram.com , dan lainnya terutama ditulis oleh saya sendiri (tentu saja didasarkan pada banyak pengalaman sebelumnya, terutama contoh three.js lainnya). Saya pikir ini semua tidak ada masalah, tetapi apakah ini kasus kode Sketchfab yang sama?

Terima kasih! tetapi ketika saya menggunakan Spector.js di Sketchfab, saya mendapatkan "Tidak ada bingkai dengan perintah gl yang terdeteksi. Coba gerakkan kamera." kesalahan.

Gulir mouse untuk memperbesar kamera. Itu seharusnya cukup untuk memicu Spector.

Juga, gunakan adegan statis dalam contoh Anda yang tidak memerlukan loop render. Saat ini, frekuensi gambar terlalu rendah untuk dapat diterima.

@WestLangley Berhasil dalam adegan ini , terima kasih!

Tolong jangan posting kode Sketchfab. Saya hanya menyarankan agar kami mengerti
teknik mereka. Yang dapat kita lakukan tanpa membagikan kode mereka. Kamu juga
tidak dapat menyalin apa pun dari kode mereka, itu akan bertentangan dengan hak cipta.

Pada Selasa, 25 Agustus 2020 pukul 06:21 Vis [email protected] menulis:

@WestLangley https://github.com/WestLangley Berhasil dalam adegan ini
https://sketchfab.com/3d-models/iron-man-helmet-captain-america-shield-endgame-02556e341dd84fa5b9ef92c5eeeb3287 ,
Terima kasih!

—
Anda menerima ini karena Anda disebutkan.
Balas email ini secara langsung, lihat di GitHub
https://github.com/mrdoob/three.js/issues/8248#issuecomment-679939119 ,
atau berhenti berlangganan
https://github.com/notifications/unsubscribe-auth/AAEPV7OEK245U5EF35YTZQDSCOGBPANCNFSM4B4V62SQ
.

--
Ben Houston , CTO
M : +1-613-762-4113
[email protected]
Ottawa, Kanada
Platform Visualisasi ThreeKit: 3D, 2D, AR, VR
http://https//threekit.com/

@bhouston OK, untuk referensi hanya jika perlu.

Saya bahkan sering merasa, setelah mendapat inspirasi, terus melihat kertas dan kode orang lain lebih sulit daripada menulisnya sendiri, apalagi ketika berada di lingkungan yang berbeda.

Misalnya, kali ini, saya terutama terinspirasi oleh tut ini , tetapi sulit untuk memahami dengan jelas arti teks di awal, dan karena sistem koordinat yang berbeda yang dia gunakan, dan saya tidak tahu cara menjalankan . cxx, jadi saya hanya membaca sedikit teks dan hampir tidak membaca kodenya. Jadi pada akhirnya, dua gambar imgA imgB yang paling membantu saya.

Tambahkan beberapa demo.

Demo, Demo2, Demo3, SelectiveDemo, OrtografiDemo.

Terinspirasi oleh @gonnavis, saya akhirnya mencoba beberapa hal baru dalam implementasi SSR yang saya posting beberapa tahun yang lalu, jadi saya pikir saya akan membagikannya di sini. Saya tidak punya rencana untuk menggunakan ini dalam proyek nyata sehingga tidak dioptimalkan dan pada titik ini dan itu menjadi tumpukan fitur SSR yang berbeda tetapi saya telah belajar sebagian besar dari apa yang saya inginkan darinya jadi saya akan menyebutnya " selesai" untuk saat ini. Mungkin ada beberapa hal yang bisa diambil orang lain. Masih ada hal-hal yang saya tahu dapat ditambahkan atau diperbaiki tetapi mungkin jika saya mengambilnya kembali, saya akan memanfaatkan beberapa fitur di WebGL2 untuk menyederhanakan banyak hal.

Beberapa fitur baru:

• Dukungan blue noise ray jitter sehingga pola simpang kurang teratur.
• Kelas atas / blur yang mendalam dan berbobot normal dari tekstur berbaris resolusi lebih rendah untuk mempertahankan detail.
• Beberapa pendekatan mata-tweak untuk merender refleksi glossy dengan sampel gelisah dan mipmaps.
• Dukungan untuk peta normal dan peta alfa.

Ini adalah efek yang cukup intensif tetapi saya merasa seperti dengan campuran peningkatan refleksi, blur, jitter, dan jumlah langkah yang rendah, Anda dapat melakukan sesuatu yang berfungsi dengan baik terutama dengan kanvas tertanam yang lebih kecil daripada aplikasi jendela penuh. Dengan menyelesaikan gambar akhir pada beberapa bingkai seperti yang telah dibahas di https://github.com/mrdoob/three.js/issues/14048 Anda mungkin juga bisa mendapatkan pantulan mengkilap yang layak. Tentu saja seperti yang telah disebutkan di tempat lain, refleksi masih tidak akan benar-benar benar tanpa lintasan terpisah untuk difus dan yang lainnya, tetapi selalu ada hal lain untuk ditingkatkan.

Berikut adalah beberapa tangkapan layar dengan jumlah langkah yang lebih tinggi:

| Tidak Mengkilap | Multisampel Glossiness | Hirarki Kedalaman Kilauan |
|---|---|---|
| | | |

Dan inilah demonya:

https://gkjohnson.github.io/threejs-sandbox/screenSpaceReflectionsPass/

Ada slide di Siggraph 2015 tentang "Refleksi Ruang Layar Stokastik" yang mungkin menarik bagi Anda: http://advances.realtimerendering.com/s2015/index.html