5

ブラウザに 3D ボールがあり、その後ろを見るために穴を掘りたいと思っています。

どうすれば可能になりますか？

たとえば、立方体の白い三角形の部分を透明にしたい (つまり、立方体の後ろの背景を見ることができる)。

ここに画像の説明を入力

フラグメント シェーダーでアルファを変更しようとしました (コード内の領域は三角形ではなく正方形です。問題ありません):

<script id="shader-fs-alpha" type="x-shader/x-fragment">
    precision mediump float;

    varying vec4 vColor;

    uniform float uAlpha;

    void main(void) {
      if( gl_FragCoord.x < 350.0 && gl_FragCoord.x > 300.0
        && gl_FragCoord.y < 300.0 && gl_FragCoord.y > 230.0
        ) {
        gl_FragColor = vec4(0, 0 ,0, 0.0);
      } else {
        gl_FragColor = vec4(vColor.rgb, 1.0);
      }
    }
</script>

これは実際には機能しますが、領域が白くなる(透明ではない)ので、ブレンドを有効にしようとしましたが、キューブ全体が透明になります。

それでbleanding、フラグメントシェーダーで有効にする方法があれば、elseブロックで無効にできると思いました。

これが私のプロジェクト全体ですhttps://gist.github.com/royguo/5873503：

  • index.html : シェーダー スクリプトはこちら。
  • buffers.js : すべてのオブジェクトがここにあります。
  • shaders.js : シェーダーを初期化します。
4

4 に答える 4

5

ステンシル バッファーを使用する必要があります。2つの手順: 1つは、ステンシルに三角形を描きます。2、ステンシル テストで立方体を描きます。

// you can use this code multiple time without clearing stencil
// just increment mask_id
mask_id = 1;

// allow to draw inside or outside mask
invert_mask = false;

1) ステンシル バッファをアクティブにします。構成: テストなしで mask_id 値を書き込む

glEnable(GL_STENCIL_TEST);
glStencilOp(GL_KEEP, GL_KEEP, GL_REPLACE);
glStencilFunc(GL_ALWAYS, mask_id, 0);

2) 色と深度の書き込みを削除

glDepthMask(GL_FALSE);
glColorMask(GL_FALSE, GL_FALSE, GL_FALSE, GL_FALSE);

3）ここに三角形を描きます:)

4) 立方体の深度と色の書き込みを有効にしました

glColorMask(GL_TRUE, GL_TRUE, GL_TRUE, GL_TRUE);
glDepthMask(GL_TRUE);

5) キューブのステンシルを構成する: 書き込みなしとステンシル値のテスト

glStencilOp(GL_KEEP, GL_KEEP, GL_KEEP);
glStencilFunc(invert_mask ? GL_NOTEQUAL : GL_EQUAL, mask_id, 0xff);

6) ここで立方体を描きます :)

7) クリーンアップ: ステンシル テストを削除

glDisable(GL_STENCIL_TEST);

opengl コンテキストを作成するときにステンシルを要求することを忘れないでください (WebGLContextAttributes、getContext の 2 番目のパラメーターを参照)。

このコードは、Ios プラットフォームの Opengl ES 2 でうまく動作します。拡張子には依存しませんでした。WebGL は同じ API を使用します。

唯一の小さな欠陥: 三角形の境界線に msaa がありません。無料のランチはありません:)

于 2013-07-04T23:20:01.257 に答える
1

オブジェクト (または内部のオブジェクト) のないシーンの一部をテクスチャにレンダリングし、そのテクスチャをオブジェクトの前のサーフェスに投影できます。表面がカメラに直接向いている (カム空間の xy 平面に平行である) ことと、テクスチャが画面と同じ中心と遠近法でレンダリングされていることを確認してください。

これを行うのに助けが必要な場合は、Learning WebGL: Rendering to Texturesを使用してください。また、ライト オプションをチェックして、サーフェス自体がオブジェクトが受ける照明の影響を受けないようにする必要があります。

また:公式の WebGL リファレンス シート

于 2013-07-01T06:48:10.067 に答える
1

try add these lines

glEnable (GL_BLEND);                                                              
glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);

It worked for me with OpenGL ES.

于 2016-06-29T12:57:11.883 に答える
0

または、ボール メッシュからいくつかの三角形を削除するか、透明な部分があるテクスチャをそれに適用し、ブレンドをオンにして、任意の種類のカリングをオフにして、背面向きの三角形を失わないようにします。

編集：

webGL でのブレンドに関するチュートリアルは次のとおりです 。

最終的に、アルファが 1.0 に設定されたテクスチャを、「中空」であるべき部分を除いてどこにでも適用し、ブレンドを有効にします。私は自分自身を明確にしたことを願っています。

ヒント: ドキュメントを読む代わりに (ヘルプよりも混乱を招くことがあります)、このhttp://www.nihilogic.dk/labs/webgl_cheat_sheet/WebGL_Cheat_Sheet.htmを試してください。すべての機能を非常に優れた方法でリストします。

于 2013-06-22T21:28:12.227 に答える