1

私は Cocos2d HTML5 フレームワークを試していますが、これは標準的な WebGL の問題であり、このトピックについて十分な知識がないため特定できません。ソフト エッジなどの半透明ピクセルを含む標準の PNG 画像があり、背景 (キャンバスまたは RenderTexture の背後にあるその他の要素) が黒以外の色で塗りつぶされている場合、RenderTexture に描画されたスプライトは最終的に必要がない場合でも背景。たとえば、描画しているグラフィックが赤で、緑の背景を使用している場合、半透明のピクセルは最終的に黄色に変化します。次の図を参照してください。

真っ黒な背景に映える姿、これが私の望み 真っ黒な背景に映える姿、これが私の望み

背景がにじみ出ている、黒以外の背景に対する外観 背景がにじみ出ている、黒以外の背景に対する外観

100% 不透明でない画像を配置すると、背景にあるものはすべて透けて見えます。

完全な JavaScript ベースの RenderTexture クラス コードは、cocos2d/misc_nodes/CCRenderTexture.js の下の cocos2d-html5 Github リポジトリで見ることができます。Cocos2d-x C++ / Objective C (この問題は発生しません) からの変換です。cocosd-iphone issue tracker で問題番号 937 が報告され、数年前に非 HTML バージョンで同じ問題が報告されました。その後解決されましたが、解像度が何であるか、またはどのように WebGL 形式に変換できるかを判断できないようです。ブレンドの問題だと確信していますが、ブレンドモードを（GL_ONE、GL_ONE_MINUS_SRC_ALPHAからGL_SRC_ALPHA、GL_ONE_MINUS_SRC_ALPHAなどに）変更しようとしましたが、役に立ちませんでした。

OpenGL / WebGL の専門家からの助けをいただければ幸いです。この RenderTexture の外で Cocos2d の標準の「スプライト」を使用すると、問題は発生しません。また、MotionStreak 機能も問題なく動作しているようですが、今後使用する動的テクスチャを作成するには RenderTexture が必要です。

4

1 に答える 1

2

WebGL のデフォルトは、画像およびキャンバス 2D と同じです。つまり、キャンバスのコンテンツが RGBA であると想定し、RGB にアルファが事前に乗算されていると想定します (つまり、アルファがゼロの場合、RGB もゼロである必要があります。ゼロ倍はゼロに等しい)。そして最後に、GL_ONE、GL_ONE_MINUS_SOURCE_ALPHA を使用して、その背後にあるものとブレンドします。

別のものにしたい場合は、2つのオプションがあります

  1. WebGL にアルファを持たないように指示する

    これを行うには、アルファなしのコンテキストを作成します

    gl = canvas.getContext("experimental-webgl", { alpha: false });

    これはおそらくあなたのケースに最適なオプションです。アルファがないため、ブラウザーが通常行う必要がある背景とのブレンドよりも高速なブレンドは必要ありません。

  2. RGB値が事前に乗算されていないことをWebGLに伝えます

    gl = canvas.getContext("experimental-webgl", { premultipledAlpha: false });

    これは、ブラウザーが引き続き WebGL キャンバスを背景とブレンドすることを意味し、代わりに GL_SRC_ALPHA、GL_ONE_MINUS_SRC_ALPHA を使用してブレンドします。奥にグリーンが見えます。

特別な場合に役立つかもしれない他のいくつかの解決策があります

  1. 一部の計算のために宛先にアルファが必要な場合は、完了時にアルファを 1 にクリアできます。

    ...render scene...

gl.colorMask(false, false, false, true);
gl.clearColor(0, 0, 0, 1);
gl.clear(gl.COLOR_BUFFER_BIT);

    すべてのアルファが 1 に設定されているため、ブレンディングは引き続き行われます。最適なソリューションではありませんが、デスティネーション アルファが必要な場合は、それが唯一のソリューションになる可能性があります。

  2. キャンバスの背後にあるものが透けて見えたくない場合は、キャンバスに背景色を指定します

    <canvas style="background-color: green;"></cavnas>

    キャンバスの背景色を黒に設定することもできますが、キャンバスを黒とブレンドすることになるため、これも無駄です。それが必要な場合は、最初にアルファをオフにしてください。

于 2013-10-31T00:07:56.173 に答える