bugfix> javascript > 投稿

私は、エッジのピクセルの深さ(カメラから表面までの距離)とそれに隣接するピクセルの深さの差に応じて動的にエッジの周りにアウトラインを作成するシェーダーを見てきました(深さはより細い輪郭またはまったくなし)。これらのレンダリングのように:

また、three.jsレンダリングでこのようなシェーダーを使用することに興味がありますが、各ピクセルの深度データにアクセスする方法を理解する必要があると思います。

Three.jsドキュメント深さ設定について言及している:

depth - whether the drawing buffer has a depth buffer of at least 16 bits. Default is true.

しかし、深さバッファーを持つ描画バッファーの意味がわかりません。私がよく知っている画像バッファは、深度情報のないピクセルバッファです。この深度バッファにはどこでアクセスしますか?

回答 2 件
  • Three.js Webサイトには、シーンを THREE.WebGLRenderTarget にレンダリングする例があります  それは depthBuffer だ   true に設定された属性 。これにより、深度データにアクセスできます。

    アイデアは次のとおりです。

    メインシーンを WebGLRenderTarget にレンダリングする 。このターゲットには、 .texture 経由でアクセスできるRGBデータと深度データが含まれます  および .depthTexture  それに応じて属性。

    これらの2つのテクスチャを取得し、カスタムシェーダーを使用して平面に適用します。

    プレーンのカスタムシェーダーでは、テクスチャデータにアクセスして、色や深さでプレイしたい計算を実行できます。

    2番目のシーン(プレーンのみを含む)をキャンバスにレンダリングします。

    この例のソースコードへのリンクを次に示します。73行目のコードをコメントアウトすると、カラーデータを表示できます。

  • Three.jsには既にMeshToonMaterialがあり、新しいものを作成する必要はありません。

    https://github.com/mrdoob/three.js/blob/master/examples/webgl_materials_variations_toon.html

    html, body, iframe {margin:0;width:100%;height:100%;border:0}
    
    
    <iframe src="https://threejs.org/examples/webgl_materials_variations_toon.html">
    
    

あなたの答え