2

だから私は、今後の CSS シェーダー仕様のシェーダーに取り組んでいます。私は、特にプロのビデオ製品を対象としたものを構築しています。アルファ チャネル (ルミナンスとして成功しました) と、アルファ チャネルを持たない「ストレート」バージョンの画像を分離する必要があります。

例: https://dl.dropbox.com/u/4031469/shadertest.html (派手な Adob​​e Webkit ブラウザーでのみ動作します)

最後のシェーダーを見つけようとしているところです。

これが私が期待するものの例です。(これは Targa ファイルからのものです)

https://dl.dropbox.com/u/4031469/Randalls%20Mess.png – 塗りつぶし (私が理解していないもの)

https://dl.dropbox.com/u/4031469/Randalls%20Mess%20Alpha.png – キー (別名、私が把握したアルファ)

(興味がある場合は、最終版: https://dl.dropbox.com/u/4031469/final.png )

マトリックス変換だと思っていましたが、いろいろ試してみると、マトリックス変換よりも複雑なものになると思います。私は悲しいことに正しいですか？もしそうなら、どうすればこの問題に取り組み始めることができるでしょうか?

4

3 に答える 3

1

シェーダーには、次のようなテクスチャをサンプリングするコードがあると思いますね。

vec4 textureColor = texture2D(texture1, texCoord);

textureColorその時点で、4つの値が含まれています。赤、緑、青、およびアルファチャネルで、それぞれ0〜1の範囲です。これらの各色に個別にアクセスできます。

float red = textureColor.r;
float alpha = textureColor.a;

または、「スウィズリング」と呼ばれる手法を使用して、セットでそれらにアクセスできます。

vec3 colorChannels = textureColor.rgb;
vec2 alphaAndBlue = textureColor.ab;

これから得られる色の値は事前に乗算されるべきではないので、必要がない限りアルファは効果がありません。

これを使用して、テクスチャのスペキュラレベルを拡散テクスチャのアルファチャネルにパックするなどの操作を行うことは、実際には非常に一般的です。

float specularLevel = textureColor.a;
float lightValue = lightFactor + (specularFactor * specularLevel); // Lighting factors calculated from normals
gl_FragColor = vec4(textureColor.rgb * lightValue, 1.0); // 1.0 gives us a constant alpha

シェーダーの柔軟性を考えると、カラーチャンネルのさまざまな組み合わせを使用および乱用するさまざまな効果が可能であるため、必要な正確なアルゴリズムを言うことは困難です。うまくいけば、それはあなたにカラーチャンネルを別々に扱う方法のアイデアをあなたに与えるでしょう。

于 2012-06-06T01:04:45.947 に答える
0

どうやら、adobeの人の一人によると、行列変換は既存の値を変換することしかできず、「バイアス」ベクトルを追加できないため、CSSシェーダー言語ではこれは不可能です。

私が今調べている別の方法は、SVGフィルターを使用することです。

于 2012-06-27T17:07:20.637 に答える
0

SVG フィルターは、Chrome でこれを実現する方法になりました。

https://dl.dropbox.com/u/4031469/alphaCanvases.html

まだ初期段階ですが、CSS アニメーションは現在 Canary ビルドでのみサポートされています。

于 2012-11-28T17:07:23.397 に答える