search

MasatoMakino / threejs-shader-materials

Collection of shader materials for three.js
MIT License
291 stars 26 forks source link

ShaderMaterialの転送後、transparentプロパティをfalseに変更し、opacityを0にするとマテリアルカラーが#fffに化ける #76

Closed MasatoMakino closed 6 months ago

MasatoMakino commented 6 months ago

再現手順 :

  1. transparent : trueのマテリアルを生成し転送する。
  2. transparent : falseに変更する。
  3. uniformOpacityを0に変更する。
  4. materialのcolorを無視して#fffで描画される。

期待される動作 :

transparent : falseの場合、uniformOpacityがどのような値であってもmaterialのcolorが優先される

MasatoMakino commented 6 months ago

この問題がこのリポジトリで改造したShaderMaterialに起因するものなのか Three.js v0.160.0でShaderMaterialを継承したMaterialすべてに影響するものなのか 問題を切り分ける

MasatoMakino commented 6 months ago

描画にはアルファが必須なので、transparentも必須と考えると 各マテリアルはtransparentの切り替えができないとしても良い。

MasatoMakino commented 6 months ago

fragmentシェーダーの最終行に gl_FragColor.a = 0.0; を直接書き込むと再現する。

transparent = falseかつgl_FragColor.aに1以外の値が書き込まれている場合のレンダラーの挙動なのかもしれない。

MasatoMakino commented 6 months ago

cssを変更し、background-colorを#fff以外に変更したところ、白く抜けていた部分がCSSカラーになった。

スクリーンショット 2023-12-30 9 35 35

従ってこの白く抜けた部分は、背景色が透過していることがわかった。 先にオブジェクトを描画し、最後にclearColorで指定された色で描画されていないピクセルを埋めていると思われる。

これはレンダリングエンジンの挙動であり、シェーダーマテリアル側の問題ではない。

MasatoMakino commented 6 months ago

応急処置として renderer.domElement.style.backgroundColor = "#000"; とcanvas要素に直接背景色を指定することで問題が回避できる。

MasatoMakino commented 6 months ago

https://developer.mozilla.org/en-US/docs/Web/CSS/background-color

background-colorのinitial valueはtransparentなので、透過が問題になる場合は自身で設定し直さなければいけない。