OS と連携して、ウィンドウコンポジタの前段階の3D スクリーンショットを撮り、各ウィンドウに Z 深度を与えて、デスクトップや互いの上に浮いているようにするものだと期待していた
こういう「3D スクリーンショット」は、正投影で見ると通常のスクリーンショットとまったく同じに見えるが、被写界深度効果を入れた瞬間に違いが現れそう
もちろん別の投影で見たり、ここでのように 3D 空間で傾けたり、遠くのウィンドウにフォグをかけたり、点光源でウィンドウ同士が実際に影を落とすようにすることもできそうだ。半透明領域は光をより多く通すようにもできるし、理想的には HTML5 に埋め込めるビューアがこうした機能を全部提供してくれるとよい
この形式とビューアには、visionOS の深度マッピングされた AR ウィンドウ配置を、静的に「見回せる」スナップショットとして再現するという、かなり明確な用途がありそうだ。2D デスクトップ OS のウィンドウに任意の深度マップを付けられるなら、それはおまけだ
これにいちばん近いものとして見たことがあるのは、Xcode のUI デバッグビューアだ。すべての UI 要素を分解図のように 3D 空間で回転して見られる
ただし照明や影はなく、デバッグアクセス権のあるアプリに限られる
Amazon Fire Phone も、複数の前面視線追跡カメラとジャイロ＋加速度計を使って、携帯電話の UI を動かし、視差のある 3D ビューをリアルタイムでまねようとしていたように思う。昔のモバイル Safari のタブ表示でも、端末の向きに応じてタブが動いていた
いつかグローバルイルミネーション UIを見てみたい。実用的でなくても、Microsoft Design チームが出していた Windows のレンダリングをリアルタイムで見るような感じならよい。電力の無駄は大きいだろうが、パストレーシングされた柔らかな影は格好よさそうだ
1件のコメント
Hacker News のコメント
数日前にこれを作った
最初は CSS で被写界深度を「擬似的に」実装してみようと思って作ったもので、デモ動画と shuding_ から受けたインスピレーションは、サイト下部リンクの最後から2番目のツイートにある
ところが昨晩 ThreeJS があることを思い出して、react-three-fiber で書き直した。初めて使ったけれど、かなりエルゴノミックに作られていて感心した
ドキュメントには書いていないが、右クリックドラッグで画面移動できる
https://depth-of-field.vercel.app/
ドキュメント化されていない機能も確認した。macOS で ctrl+左クリックでも移動できない理由は少し不思議
OS と連携して、ウィンドウコンポジタの前段階の3D スクリーンショットを撮り、各ウィンドウに Z 深度を与えて、デスクトップや互いの上に浮いているようにするものだと期待していた
こういう「3D スクリーンショット」は、正投影で見ると通常のスクリーンショットとまったく同じに見えるが、被写界深度効果を入れた瞬間に違いが現れそう
もちろん別の投影で見たり、ここでのように 3D 空間で傾けたり、遠くのウィンドウにフォグをかけたり、点光源でウィンドウ同士が実際に影を落とすようにすることもできそうだ。半透明領域は光をより多く通すようにもできるし、理想的には HTML5 に埋め込めるビューアがこうした機能を全部提供してくれるとよい
この形式とビューアには、visionOS の深度マッピングされた AR ウィンドウ配置を、静的に「見回せる」スナップショットとして再現するという、かなり明確な用途がありそうだ。2D デスクトップ OS のウィンドウに任意の深度マップを付けられるなら、それはおまけだ
ただし照明や影はなく、デバッグアクセス権のあるアプリに限られる
Amazon Fire Phone も、複数の前面視線追跡カメラとジャイロ＋加速度計を使って、携帯電話の UI を動かし、視差のある 3D ビューをリアルタイムでまねようとしていたように思う。昔のモバイル Safari のタブ表示でも、端末の向きに応じてタブが動いていた
いつかグローバルイルミネーション UIを見てみたい。実用的でなくても、Microsoft Design チームが出していた Windows のレンダリングをリアルタイムで見るような感じならよい。電力の無駄は大きいだろうが、パストレーシングされた柔らかな影は格好よさそうだ
最近、スクリーンショットが十分にぼやけていないとよく思っていたので、ちょうどいいね
またポートレートは望遠レンズである程度離れて撮るのがよい。実際に見える顔ではなく、人々が記憶している顔を写してくれるからだ。補正が必要になる理由は、同じレンズ構成では近くで撮ると被写界深度がずっと浅くなり、遠くから撮るとずっと深くなるためだ
でもマーケティングサイトでスクリーンショットの特定部分を強調し、伝えたい内容を示す視覚効果としてはよさそうだ
以前の Show HN だった Screenstab [0] のように見える
[0] https://www.screenstab.com/editor/
[1] https://news.ycombinator.com/item?id=34729849
ほかのコメントに見える質問に答えると、これは three.js で作られている
2D 平面に画像をレンダリングした 3D シーンで、カメラがその一部に特定のガウスぼかしを適用していると考えればよい。ズームや画像の回転には orbit controls を使っている
これはスクリーンショットで「残りを全部ぼかす」ということを格好よく言い換えただけなのか？ 個人的には不要な部分は切り抜くほうが好みだ
切り抜くとナビゲーションの手がかりが消えるが、全部をくっきり残すと実際の UI と同じくらい見づらくなりかねないので、ぼかしが折衷案になり得る
面白そうだ。最初はスクリーンショットのうち自分から最も遠い部分がぼけて、最も近い部分に焦点が合うのだと思ったが、実際の動作はそうではなかった
重要な部分を示せるなら、スクリーンショットの特定部分にフォーカスを当てる用途に使えそうだ
ただデモを見たあとでも、これをどこに使いたいのかはよく分からない
数年前に Blender で試したように、よりリアルに見えるようRGB ピクセルを追加してもよさそうだ
https://blenderartists.org/t/rgb-display-shader/684533
YouTube 動画のサムネイルのようなものの背景に使うと面白そうだ
実際の情報を伝える用途には使われてほしくないが、どのアプリケーションを使っているか分かる程度の情報は伝わるように思う
どうか画像の貼り付けに対応してほしい
ペーストバッファを使う代わりにファイルシステムからファイルを選ばなければならない入力欄は、体感で5倍くらい摩擦が増える。これまで使ったすべての画像アップロードボタンに当てはまる