Saya membuat ini beberapa hari lalu
Awalnya saya membuatnya untuk mencoba mengimplementasikan depth of field secara “palsu” di CSS, dan video demo serta inspirasi dari shuding_ ada di tweet kedua dari akhir pada tautan di bagian bawah situs
Namun semalam saya teringat ada ThreeJS, jadi saya menulis ulang dengan react-three-fiber. Ini pertama kalinya saya memakainya, dan saya terkesan karena sangat ergonomis
Belum didokumentasikan, tapi layar bisa digeser dengan drag klik kanan
Saya suka interaktivitas UI-nya. Dibuat dengan baik
Saya juga melihat fitur yang belum didokumentasikan. Agak heran kenapa di macOS ctrl+klik kiri juga tidak bisa dipakai untuk menggeser
Saya berharap ini terintegrasi dengan OS untuk mengambil screenshot 3D pada tahap sebelum window compositor, lalu memberi tiap jendela kedalaman Z sehingga tampak melayang di atas desktop dan di atas satu sama lain
“Screenshot 3D” seperti ini, jika dilihat dengan proyeksi ortografis, akan terlihat sama persis seperti screenshot biasa, lalu perbedaannya baru tampak saat efek depth of field diterapkan
Tentu saja, bisa juga dilihat dengan proyeksi lain, dimiringkan di ruang 3D seperti di sini, diberi kabut pada jendela yang jauh, atau dibuat agar jendela saling menimbulkan bayangan nyata dengan point light. Area transparan juga bisa dibuat membiarkan lebih banyak cahaya lewat, dan idealnya viewer yang bisa di-embed di HTML5 menyediakan semua fitur seperti ini
Format dan viewer semacam ini tampaknya punya kegunaan yang cukup jelas untuk mereproduksi penataan jendela AR dengan depth mapping di visionOS sebagai snapshot statis yang “bisa dijelajahi”. Kalau jendela OS desktop 2D bisa diberi depth map arbitrer, itu bonus
Yang paling mirip yang pernah saya lihat adalah UI debug viewer di Xcode. Semua elemen UI bisa diputar di ruang 3D seperti tampilan exploded view
Namun tidak ada pencahayaan atau bayangan, dan terbatas pada aplikasi yang akses debug-nya tersedia
Sepertinya Amazon Fire Phone juga mencoba meniru tampilan 3D berparalaks secara real-time dengan menggerakkan UI ponsel memakai beberapa kamera eye-tracking depan serta giroskop+akselerometer. Pada tampilan tab Safari mobile lama, tab juga bergerak mengikuti orientasi perangkat
Suatu hari saya ingin melihat UI dengan global illumination. Meski tidak praktis, akan menyenangkan kalau rasanya seperti melihat rendering Windows yang dulu dirilis tim Microsoft Design secara real-time. Akan sangat boros daya, tapi bayangan lembut hasil path tracing pasti keren
Ini hampir mendekati motivasi VisionOS, yaitu sistem operasi yang berorientasi ruang 3D
Akhir-akhir ini saya sering merasa screenshot belum cukup buram, jadi ini pas sekali
Membatasi depth of field sangat berguna dalam fotografi untuk menonjolkan elemen tertentu, dan karena itu hampir selalu dipakai untuk foto potret
Selain itu, foto potret sebaiknya diambil dari jarak tertentu dengan lensa telefoto, karena yang ditangkap bukan wajah sebagaimana terlihat sebenarnya, melainkan wajah sebagaimana diingat orang. Alasan perlu koreksi adalah, pada konfigurasi lensa yang sama, memotret dari dekat membuat depth of field jauh lebih dangkal, sedangkan memotret dari jauh membuatnya jauh lebih dalam
Ini sindiran yang tidak perlu. Saya tidak akan suka memakai screenshot dengan depth of field seperti ini sebagai lampiran laporan bug
Namun sebagai efek visual di situs marketing untuk menonjolkan bagian tertentu dari screenshot dan menunjukkan pesan yang ingin disampaikan, ini terlihat bagus
Benar, mari kita buat screenshot buram dulu lalu menajamkannya lagi dengan layar HiDPI /s
Apakah ada alat serupa yang bisa membuat montase video dengan depth of field dan rotasi lambat dari kumpulan screenshot dan caption?
Untuk menjawab pertanyaan yang terlihat di komentar lain, ini dibuat dengan three.js
Anggap saja ini adegan 3D yang merender gambar pada bidang 2D, dan kameranya menerapkan blur Gaussian tertentu pada sebagian bidang itu. Untuk zoom dan rotasi gambar, digunakan orbit controls
Apakah ini hanya cara keren untuk mengatakan “memburamkan semua bagian lain” pada screenshot? Secara pribadi saya lebih suka memotong bagian yang tidak perlu
Saat menunjukkan ke mana harus berpindah di UI yang kompleks, mempertahankan sisa UI dalam screenshot bisa berguna
Jika dipotong, petunjuk navigasi hilang, tetapi jika semuanya dibiarkan tajam, bisa jadi sama sulitnya dilihat seperti UI aslinya; jadi blur bisa menjadi kompromi
Terlihat menarik. Awalnya saya mengira bagian screenshot yang paling jauh dari saya akan buram dan bagian yang paling dekat akan fokus, tetapi ternyata bukan begitu cara kerjanya
Jika bisa menandai bagian penting, ini bisa dipakai untuk memberi fokus pada bagian tertentu dari screenshot
Jika Anda mengklik sebagian gambar, fokus akan diarahkan ke sana
Depth of field yang dangkal dipakai dalam fotografi, dan kadang film, untuk tujuan persis itu: mengarahkan perhatian orang ke elemen tertentu
Namun setelah melihat demonya, saya tidak terlalu yakin ingin memakainya untuk apa
Sepertinya menarik jika dipakai sebagai latar untuk sesuatu seperti thumbnail video YouTube
Saya tidak ingin ini dipakai untuk menyampaikan informasi nyata, tetapi tampaknya masih cukup untuk menunjukkan aplikasi apa yang sedang digunakan
Tolong dukung paste gambar
Field input yang mengharuskan memilih file dari sistem file alih-alih memakai buffer paste terasa meningkatkan friksi penggunaan sekitar 5 kali lipat. Ini berlaku untuk semua tombol unggah gambar yang pernah saya pakai
1 komentar
Komentar di Hacker News
Saya membuat ini beberapa hari lalu
Awalnya saya membuatnya untuk mencoba mengimplementasikan depth of field secara “palsu” di CSS, dan video demo serta inspirasi dari shuding_ ada di tweet kedua dari akhir pada tautan di bagian bawah situs
Namun semalam saya teringat ada ThreeJS, jadi saya menulis ulang dengan react-three-fiber. Ini pertama kalinya saya memakainya, dan saya terkesan karena sangat ergonomis
Belum didokumentasikan, tapi layar bisa digeser dengan drag klik kanan
https://depth-of-field.vercel.app/
Saya juga melihat fitur yang belum didokumentasikan. Agak heran kenapa di macOS ctrl+klik kiri juga tidak bisa dipakai untuk menggeser
Saya berharap ini terintegrasi dengan OS untuk mengambil screenshot 3D pada tahap sebelum window compositor, lalu memberi tiap jendela kedalaman Z sehingga tampak melayang di atas desktop dan di atas satu sama lain
“Screenshot 3D” seperti ini, jika dilihat dengan proyeksi ortografis, akan terlihat sama persis seperti screenshot biasa, lalu perbedaannya baru tampak saat efek depth of field diterapkan
Tentu saja, bisa juga dilihat dengan proyeksi lain, dimiringkan di ruang 3D seperti di sini, diberi kabut pada jendela yang jauh, atau dibuat agar jendela saling menimbulkan bayangan nyata dengan point light. Area transparan juga bisa dibuat membiarkan lebih banyak cahaya lewat, dan idealnya viewer yang bisa di-embed di HTML5 menyediakan semua fitur seperti ini
Format dan viewer semacam ini tampaknya punya kegunaan yang cukup jelas untuk mereproduksi penataan jendela AR dengan depth mapping di visionOS sebagai snapshot statis yang “bisa dijelajahi”. Kalau jendela OS desktop 2D bisa diberi depth map arbitrer, itu bonus
Namun tidak ada pencahayaan atau bayangan, dan terbatas pada aplikasi yang akses debug-nya tersedia
Sepertinya Amazon Fire Phone juga mencoba meniru tampilan 3D berparalaks secara real-time dengan menggerakkan UI ponsel memakai beberapa kamera eye-tracking depan serta giroskop+akselerometer. Pada tampilan tab Safari mobile lama, tab juga bergerak mengikuti orientasi perangkat
Suatu hari saya ingin melihat UI dengan global illumination. Meski tidak praktis, akan menyenangkan kalau rasanya seperti melihat rendering Windows yang dulu dirilis tim Microsoft Design secara real-time. Akan sangat boros daya, tapi bayangan lembut hasil path tracing pasti keren
Akhir-akhir ini saya sering merasa screenshot belum cukup buram, jadi ini pas sekali
Selain itu, foto potret sebaiknya diambil dari jarak tertentu dengan lensa telefoto, karena yang ditangkap bukan wajah sebagaimana terlihat sebenarnya, melainkan wajah sebagaimana diingat orang. Alasan perlu koreksi adalah, pada konfigurasi lensa yang sama, memotret dari dekat membuat depth of field jauh lebih dangkal, sedangkan memotret dari jauh membuatnya jauh lebih dalam
Namun sebagai efek visual di situs marketing untuk menonjolkan bagian tertentu dari screenshot dan menunjukkan pesan yang ingin disampaikan, ini terlihat bagus
Ini terlihat seperti Screenstab [0], Show HN sebelumnya
[0] https://www.screenstab.com/editor/
[1] https://news.ycombinator.com/item?id=34729849
Untuk menjawab pertanyaan yang terlihat di komentar lain, ini dibuat dengan three.js
Anggap saja ini adegan 3D yang merender gambar pada bidang 2D, dan kameranya menerapkan blur Gaussian tertentu pada sebagian bidang itu. Untuk zoom dan rotasi gambar, digunakan orbit controls
Apakah ini hanya cara keren untuk mengatakan “memburamkan semua bagian lain” pada screenshot? Secara pribadi saya lebih suka memotong bagian yang tidak perlu
Jika dipotong, petunjuk navigasi hilang, tetapi jika semuanya dibiarkan tajam, bisa jadi sama sulitnya dilihat seperti UI aslinya; jadi blur bisa menjadi kompromi
Terlihat menarik. Awalnya saya mengira bagian screenshot yang paling jauh dari saya akan buram dan bagian yang paling dekat akan fokus, tetapi ternyata bukan begitu cara kerjanya
Jika bisa menandai bagian penting, ini bisa dipakai untuk memberi fokus pada bagian tertentu dari screenshot
Namun setelah melihat demonya, saya tidak terlalu yakin ingin memakainya untuk apa
Agar terlihat lebih realistis, mungkin bisa menambahkan piksel RGB, seperti yang pernah saya coba di Blender beberapa tahun lalu
https://blenderartists.org/t/rgb-display-shader/684533
Sepertinya menarik jika dipakai sebagai latar untuk sesuatu seperti thumbnail video YouTube
Saya tidak ingin ini dipakai untuk menyampaikan informasi nyata, tetapi tampaknya masih cukup untuk menunjukkan aplikasi apa yang sedang digunakan
Tolong dukung paste gambar
Field input yang mengharuskan memilih file dari sistem file alih-alih memakai buffer paste terasa meningkatkan friksi penggunaan sekitar 5 kali lipat. Ini berlaku untuk semua tombol unggah gambar yang pernah saya pakai