Three.jsですりガラスのようなテクスチャを実装する方法

Question

##Three.jsのPlaneBufferGeometryにすりガラスのようなテクスチャを実装したいです。
イメージはCSSの

filter: blur(20px);

のように、重なっている領域がぼやけるような状態です。
参考：https://codepen.io/kylewetton/pen/bGbaazX

公式ドキュメントで、MeshPhongMaterialのemvMapにテクスチャキューブを適用してガラスのような表現ができることは分かったのですが、すりガラスのように奥がぼやける処理の方法がわかりません。

もしくは自分でシェーダーを書くことで実装できると予想しているのですが、「こうすれば良い」といった最低限のサンプルが見つからず、どなたかご教示いただけますと幸いです。

Answer 1

MeshPhysicalMaterial の transmission パラメータは如何でしょうか？
https://threejs.org/docs/#api/en/materials/MeshPhysicalMaterial.transmission

以下、サンプルになります。
https://threejs.org/examples/?q=transmission#webgl_materials_physical_transmission

Comments

[Bokoko33]

ご回答いただきありがとうございます！
MeshPhysicalMaterialのtransmissionはドキュメントのGUI部分にパラメータがなかったので見落としておりました。。。
サンプルも拝見しました！サンプルでは私が理想とする、「奥がぼやける状態」にはならなさそうでしたが、応用次第で可能かもしれません。そうでなくとも、かなり近い実装ができそうです、ありがとうございます！

[cx20]

そうですね。確かにすりガラスの表現とはちょっと違いそうですね。。
シェーダによる実装の場合は下記のコードが利用できるかもしれません。
https://www.shadertoy.com/view/WdSGz1

ちなみに、glTF という3Dフォーマットの規格でガラスのような表現を扱う KHR_materials_transmission という拡張規格があるのですが、
Babylon.js や Filament というライブラリでは対応しているのですが、Three.js では未対応のようでした。
もしかしたら、Three.js の標準機能ではまだ表現が難しいのかもしれません。。

■ KHR_materials_transmission 拡張
https://github.com/KhronosGroup/glTF/tree/master/extensions/2.0/Khronos/KHR_materials_transmission

■ Babylon.js + TransmissionTest.gltf 表示サンプル
https://cx20.github.io/gltf-test/examples/babylonjs/index.html?category=tutorialModels&model=TransmissionTest&scale=3.0&type=glTF
■ Filament + TransmissionTest.gltf 表示サンプル
https://cx20.github.io/gltf-test/examples/filament/index.html?category=tutorialModels&model=TransmissionTest&scale=3.0&type=glTF
■ Three.js + TransmissionTest.gltf 表示サンプル
https://cx20.github.io/gltf-test/examples/threejs/index.html?category=tutorialModels&model=TransmissionTest&scale=3.0&type=glTF

[cx20]

別の案ですが Three.js のポストプロセス機能で BloomPass というのがあるようです。こちらは如何でしょうか？
https://threejsfundamentals.org/threejs/lessons/ja/threejs-post-processing.html
https://w.atwiki.jp/threejs/pages/89.html

[Bokoko33]

とてもたくさんの案をご提示いただきありがとうございます、、！
ポストプロセスが気になったので試してみました。シーン全体をぼやかすことができたので、これを特定のメッシュのみに適応することができれば、、といった状況です。

https://threejs.org/examples/#webgl_postprocessing_unreal_bloom_selective
↑こちらのサンプルでは、球一つ一つにbloomが適用されているように見えるのですが、ソースの理解に時間がかかっております、、

[Bokoko33]

上記のサンプルを参考に、一枚のplaneのみにbloomを適用することはできました。同時に、この問題の難しさを理解しました。。。

映っているものをぼかすということは、通常のレンダリングに加えてエフェクトを適用したレンダリングを再度行う必要があり、今回のように「一部分だけぼかす」となると、描画のレイヤーを分けてそれらを両方とも行うことになるようですね。
マウスインタラクションで動かしたいと考えていたのですが、かなり重くなってしまうようでした。ますますCSSのfilter機能の仕組みが気になります、、笑

完全に実現とは行きませんでしたが、たくさんのヒントや学びのきっかけを下さり、大変感謝しております。