問題タブ [compositing]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
colors - レイヤー合成/ブレンドのGIMPの方法
Matlab のイメージ ブレンディング ツールにアルファ容量を追加しようとしているときに、ちょっとした問題に遭遇しました。とりわけ、前景と背景のアルファが出力カラー データと出力アルファの両方の構成にどのように影響するかについて、これらの リンクを参照として使用してきました。
私の最初のアプローチは、単純に「通常の」ブレンド モードにはSrc-Over合成を使用し、他のモードにはSrc-Atop合成を使用することでした。GIMP からの出力と比較すると、同様の結果が得られましたが、異なる結果が得られました。出力アルファは一致しますが、RGB データは異なります。
具体的には、背景のアルファがゼロの場合、背景に対する前景の色の影響はゼロです。GIMP 2.8.10 のソースを何時間も単純に調べた後、混乱する点がいくつかあることに気付きました。
コードでまだ収集していない特定のモードとエクスポート中に発生するいくつかの補助的なことを除いて、アプローチはおおよそ次のようになります。
好奇心のポイントは、構成に最小のレイヤーアルファを使用する理由を概念的に理解していないという事実にあります。確かに、このアプローチは GIMP に一致する結果を生成しますが、理由が理解できない場合、これをデフォルトの動作として確立するのは気が進まないです。
これはどこかの GIMP フォーラムに尋ねるのが一番良いかもしれませんが、一般の聴衆にアプローチする方が実り多いと思いました。明確にして要約するには:
- 透明な BG 領域の色が、不透明な前景色との乗算の影響を受けないというのは理にかなっていますか? このリスクにより、ハード マスクのエッジ付近で変更されていないデータが流出する可能性はありますか?
- 何も見つかりませんでしたが、このアプローチを使用する他のアプリケーションはありますか?
GIMP の動作を参考にするのは間違っていますか? 比較する PS はありません。また、ImageMagick は非常に柔軟であるため、特定の予想される動作を実際に示唆するものではありません。確かに、GIMP には間違った動作がいくつかあります。多分これは変わるかもしれない何かです。
編集:少なくとも、最後の質問を省略することで答えることができます。SVG 1.2 と従来の GIMP メソッドの両方のサポートを追加することにしました。今後 GIMP で使用される GEGL メソッドは SVG メソッドを踏襲しているため、従来のメソッドの妥当性を示唆していると考えられます。
価値のあることとして、SVG メソッドはすべて Porter-Duff Src-Over構成に基づいています。ドキュメンテーションを参照すると、ブレンドと構成が事前に乗算されたアルファを使用して代数的に結合され、全体的な計算コストが削減されるため、ブレンドの計算が同じであるという事実が難読化されます。SoftLight を除いて、コア ブレンドの計算は GIMP などで使用されているものと同じです。
他のブレンド操作 (PinLight、Hue など) は、次のようにするだけで互換性を持たせることができます。
単純化する場合は、代数を実行します。
gstreamer - Gstreamer 3 つのストリームを使用した合成画像
gstreamer の videomixer プラグインを使用して 3 つのストリームを合成しようとしています。このスレッドを見つけました複数の画像を gstreamerで結合すると、2 つのストリームを並べて配置できますが、3 つ目のストリームを追加する方法がわかりません。誰でも助けることができますか?
私が使用して動作する元のコマンド:
2 つの udp ストリームを持つ私のバージョンも機能します。
しかし、どうすれば 3 番目のストリームを追加できますか?
javascript - CSSでアルファボーダーのある2つの.png画像を混ぜる
2 つの PNG 画像をブレンドして、両方にアルファの境界線がある場合に完全に一致させる方法はありますか?
これは私が抱えている問題の例です:
またはCodePenへのリンク
PNG として保存されている 2 つの 3D レンダリングがあり、両方とも 50% の透明度のアルファ境界線を持っているため、Photoshop や After Effects でそれらをマージすると完全に一致します。
しかし、HTML/CSS で同じ状況を作成すると、要素間に白い線ができました。mix-blending-modeとbackground-blending- modeについて読んで、それらを使っていくつかのテストを行った後、それは役に立たないようです。両方の画像 (アルファ チャネル) が背景と事前に乗算されているため、それらの間に半透明の線 (境界線がある場所) が表示されると考えられます。
CSS、あるいは JavaScript/jQuery でこれを達成する方法はありますか?
編集: そのため、画像の移動や CSS のトリックについてこれ以上コメントすることはありません。その 1px を削除したり非表示にしたりすることはできません。全体像が同じように見えないからです。