Bunu birkaç gün önce yaptım
Başta CSS’te alan derinliğini “sahte” olarak uygulamayı denemek için yapmıştım; demo videosu ve shuding_’den aldığım ilham, sitenin altındaki bağlantıların sondan ikinci tweet’inde var
Ama dün gece ThreeJS’in varlığını hatırladım ve react-three-fiber ile yeniden yazdım; ilk kez kullandım ve ergonomisinin çok iyi tasarlanmış olması beni etkiledi
Belgelemedim ama sağ tıkla sürükleyerek ekranı kaydırabiliyorsunuz
UI’ın etkileşimliliği hoşuma gitti. İyi iş
Belgelenmemiş özelliği de fark ettim. macOS’ta ctrl+sol tıklamayla da kaydırılamaması biraz tuhaf
İşletim sistemiyle entegre olup pencere birleştiricisinden önceki aşamada 3D ekran görüntüsü almasını, her pencereye Z derinliği vererek masaüstünün ve birbirlerinin üzerinde yüzüyormuş gibi göstermesini beklemiştim
Böyle bir “3D ekran görüntüsü” ortografik projeksiyonla bakıldığında normal bir ekran görüntüsüyle aynı görünür, ama alan derinliği efekti eklendiği anda fark ortaya çıkar gibi geliyor
Elbette başka projeksiyonlarla bakmak, burada olduğu gibi 3D uzayda eğmek, uzaktaki pencerelere sis uygulamak ya da noktasal ışıkla pencerelerin birbirlerine gerçek gölgeler düşürmesini sağlamak da mümkün olabilir. Yarı saydam alanlardan daha fazla ışık geçmesine izin verilebilir; ideal olarak HTML5’e gömülebilen bir viewer tüm bunları yapabilse güzel olurdu
Böyle bir format ve viewer, visionOS’in derinlik haritalı AR pencere yerleşimini statik, “etrafında gezilebilir” bir anlık görüntü olarak yeniden üretmek için oldukça bariz bir kullanım alanına sahip görünüyor. 2D masaüstü işletim sistemindeki pencerelere keyfi derinlik haritası eklenebilirse o da bonus olur
Buna en yakın gördüğüm şey Xcode’un UI debug viewer’ı. Tüm UI öğelerini patlatılmış görünüm gibi 3D uzayda döndürüp inceleyebiliyorsunuz
Ancak ışıklandırma veya gölge yok ve debug erişiminiz olan uygulamalarla sınırlı
Amazon Fire Phone da öndeki birden fazla göz izleme kamerası ve gyro+ivmeölçer kullanarak telefon UI’ını hareket ettirip paralakslı 3D görünümü gerçek zamanlı taklit etmeye çalışıyordu sanırım. Eski mobil Safari sekme görünümünde de cihazın yönüne göre sekmeler hareket ediyordu
Bir gün global illumination UI görmek isterim. Pratik olmasa bile Microsoft Design ekibinin yayımladığı Windows render’larını gerçek zamanlı görmek gibi olsa güzel olurdu. Çok güç harcar ama path-traced yumuşak gölgeler harika görünürdü
Neredeyse VisionOS’in motivasyonuna, yani 3D uzay odaklı bir işletim sistemine yaklaşıyor
Son zamanlarda ekran görüntülerinin yeterince bulanık olmadığını sık sık düşünüyordum; tam isabet olmuş
Alan derinliğini sınırlamak, fotoğrafta belirli öğeleri vurgulamak için çok kullanışlıdır; bu yüzden portre fotoğrafçılığında neredeyse her zaman kullanılır
Ayrıca portreleri telefoto lensle belli bir mesafeden çekmek iyidir; çünkü insanların gerçekten gördüğü yüzü değil, hatırladığı yüzü yakalar. Düzeltme gerekmesinin nedeni, aynı lens düzeninde yakından çekince alan derinliğinin çok daha sığ, uzaktan çekince ise çok daha derin olmasıdır
Bu gereksiz alaycı bir söz. Hata raporuna ek olarak böyle alan derinlikli ekran görüntülerini kullanmak istemezdim
Ama bir pazarlama sitesinde ekran görüntüsünün belirli bir bölümünü vurgulayıp anlatılmak isteneni göstermek için görsel efekt olarak iyi görünüyor
Aynen, önce ekran görüntüsünü bulanıklaştıralım, sonra HiDPI ekranla tekrar keskinleştirelim /s
Ekran görüntüsü ve altyazı çiftlerinden, alan derinliği ve yavaş dönüş içeren bir video montajı oluşturan benzer bir araç var mı?
Diğer yorumlarda gördüğüm soruyu yanıtlamak gerekirse, bu three.js ile yapılmış
2D bir düzleme görüntü render edilen bir 3D sahne gibi düşünebilirsiniz; kamera da bunun bazı kısımlarına belirli bir Gauss bulanıklığı uyguluyor. Yakınlaştırma/uzaklaştırma ve görüntüyü döndürme için orbit controls kullanılıyor
Bu, ekran görüntüsünde “geri kalan her şeyi bulanıklaştırmak” demenin havalı bir yolu mu sadece? Kişisel olarak gereksiz kısımları kırpmayı tercih ederim
Karmaşık bir UI’da nereye gidileceğini gösterirken ekran görüntüsünün UI’ın geri kalanını da bırakması yararlı olabilir
Kırpınca gezinme ipuçları kaybolur; her şeyi net bırakırsanız da gerçek UI kadar okunması zor olabilir, bu yüzden bulanıklaştırma bir uzlaşma olabilir
İlginç görünüyor. İlk başta ekran görüntüsünde benden en uzak kısımların bulanıklaşacağını, en yakın kısımların odakta olacağını sanmıştım ama gerçek davranış öyle değildi
Önemli kısım işaretlenebilirse ekran görüntüsünün belirli bir bölümüne odaklanmak için kullanılabilir gibi
Görselin bir bölümüne tıklarsanız odak oraya geçiyor
Sığ alan derinliği, fotoğraflarda ve bazen filmlerde insanların dikkatini belirli bir öğeye toplamak için tam da bu amaçla kullanılır
Yine de demoyu gördükten sonra bunu nerede kullanmak isteyeceğimden pek emin değilim
YouTube video küçük resimleri gibi şeylerin arka planında kullanmak eğlenceli olabilir
Gerçek bilgi aktarmak için kullanılmasını istemem ama hangi uygulamanın kullanıldığını anlayacak kadar bilgi veriyor gibi
Lütfen görsel yapıştırmayı desteklesin
Yapıştırma arabelleğini kullanmak yerine dosya sisteminden dosya seçmeyi gerektiren giriş alanları, kullanım sürtünmesini hissedilir şekilde yaklaşık 5 kat artırıyor. Şimdiye kadar kullandığım tüm görsel yükleme düğmeleri için geçerli
1 yorum
Hacker News yorumları
Bunu birkaç gün önce yaptım
Başta CSS’te alan derinliğini “sahte” olarak uygulamayı denemek için yapmıştım; demo videosu ve shuding_’den aldığım ilham, sitenin altındaki bağlantıların sondan ikinci tweet’inde var
Ama dün gece ThreeJS’in varlığını hatırladım ve react-three-fiber ile yeniden yazdım; ilk kez kullandım ve ergonomisinin çok iyi tasarlanmış olması beni etkiledi
Belgelemedim ama sağ tıkla sürükleyerek ekranı kaydırabiliyorsunuz
https://depth-of-field.vercel.app/
Belgelenmemiş özelliği de fark ettim. macOS’ta ctrl+sol tıklamayla da kaydırılamaması biraz tuhaf
İşletim sistemiyle entegre olup pencere birleştiricisinden önceki aşamada 3D ekran görüntüsü almasını, her pencereye Z derinliği vererek masaüstünün ve birbirlerinin üzerinde yüzüyormuş gibi göstermesini beklemiştim
Böyle bir “3D ekran görüntüsü” ortografik projeksiyonla bakıldığında normal bir ekran görüntüsüyle aynı görünür, ama alan derinliği efekti eklendiği anda fark ortaya çıkar gibi geliyor
Elbette başka projeksiyonlarla bakmak, burada olduğu gibi 3D uzayda eğmek, uzaktaki pencerelere sis uygulamak ya da noktasal ışıkla pencerelerin birbirlerine gerçek gölgeler düşürmesini sağlamak da mümkün olabilir. Yarı saydam alanlardan daha fazla ışık geçmesine izin verilebilir; ideal olarak HTML5’e gömülebilen bir viewer tüm bunları yapabilse güzel olurdu
Böyle bir format ve viewer, visionOS’in derinlik haritalı AR pencere yerleşimini statik, “etrafında gezilebilir” bir anlık görüntü olarak yeniden üretmek için oldukça bariz bir kullanım alanına sahip görünüyor. 2D masaüstü işletim sistemindeki pencerelere keyfi derinlik haritası eklenebilirse o da bonus olur
Ancak ışıklandırma veya gölge yok ve debug erişiminiz olan uygulamalarla sınırlı
Amazon Fire Phone da öndeki birden fazla göz izleme kamerası ve gyro+ivmeölçer kullanarak telefon UI’ını hareket ettirip paralakslı 3D görünümü gerçek zamanlı taklit etmeye çalışıyordu sanırım. Eski mobil Safari sekme görünümünde de cihazın yönüne göre sekmeler hareket ediyordu
Bir gün global illumination UI görmek isterim. Pratik olmasa bile Microsoft Design ekibinin yayımladığı Windows render’larını gerçek zamanlı görmek gibi olsa güzel olurdu. Çok güç harcar ama path-traced yumuşak gölgeler harika görünürdü
Son zamanlarda ekran görüntülerinin yeterince bulanık olmadığını sık sık düşünüyordum; tam isabet olmuş
Ayrıca portreleri telefoto lensle belli bir mesafeden çekmek iyidir; çünkü insanların gerçekten gördüğü yüzü değil, hatırladığı yüzü yakalar. Düzeltme gerekmesinin nedeni, aynı lens düzeninde yakından çekince alan derinliğinin çok daha sığ, uzaktan çekince ise çok daha derin olmasıdır
Ama bir pazarlama sitesinde ekran görüntüsünün belirli bir bölümünü vurgulayıp anlatılmak isteneni göstermek için görsel efekt olarak iyi görünüyor
Önceki bir Show HN olan Screenstab [0] gibi görünüyor
[0] https://www.screenstab.com/editor/
[1] https://news.ycombinator.com/item?id=34729849
Diğer yorumlarda gördüğüm soruyu yanıtlamak gerekirse, bu three.js ile yapılmış
2D bir düzleme görüntü render edilen bir 3D sahne gibi düşünebilirsiniz; kamera da bunun bazı kısımlarına belirli bir Gauss bulanıklığı uyguluyor. Yakınlaştırma/uzaklaştırma ve görüntüyü döndürme için orbit controls kullanılıyor
Bu, ekran görüntüsünde “geri kalan her şeyi bulanıklaştırmak” demenin havalı bir yolu mu sadece? Kişisel olarak gereksiz kısımları kırpmayı tercih ederim
Kırpınca gezinme ipuçları kaybolur; her şeyi net bırakırsanız da gerçek UI kadar okunması zor olabilir, bu yüzden bulanıklaştırma bir uzlaşma olabilir
İlginç görünüyor. İlk başta ekran görüntüsünde benden en uzak kısımların bulanıklaşacağını, en yakın kısımların odakta olacağını sanmıştım ama gerçek davranış öyle değildi
Önemli kısım işaretlenebilirse ekran görüntüsünün belirli bir bölümüne odaklanmak için kullanılabilir gibi
Yine de demoyu gördükten sonra bunu nerede kullanmak isteyeceğimden pek emin değilim
Birkaç yıl önce Blender’da denediğim gibi, daha gerçekçi görünmesi için RGB pikselleri eklemek de iyi olabilir
https://blenderartists.org/t/rgb-display-shader/684533
YouTube video küçük resimleri gibi şeylerin arka planında kullanmak eğlenceli olabilir
Gerçek bilgi aktarmak için kullanılmasını istemem ama hangi uygulamanın kullanıldığını anlayacak kadar bilgi veriyor gibi
Lütfen görsel yapıştırmayı desteklesin
Yapıştırma arabelleğini kullanmak yerine dosya sisteminden dosya seçmeyi gerektiren giriş alanları, kullanım sürtünmesini hissedilir şekilde yaklaşık 5 kat artırıyor. Şimdiye kadar kullandığım tüm görsel yükleme düğmeleri için geçerli