2

問題: 非常に多くのデータ ポイント (約 100 万) を含む点群があります。レンダリングされたポイントに透明度を適用すると、レンダリングされたポイントの背後にあるものが透明度によって表示されません

不適切なレンダリング

マークされたポイントの例でわかるように、バッファリングに問題があるかのように、本来あるべきものが表示されません。

three.js を使用して、次の「セットアップ」を使用して点群を作成します。

レンダラー:

this.renderer = new THREE.WebGLRenderer({
    canvas: this.canvas,
    antialias: true
});

材料:

this.pointMaterial = new THREE.ShaderMaterial( {
    uniforms: {
        time:       { type: "f", value: 1.0 }
    },
    vertexShader:   document.getElementById('vertexShader').textContent,
    fragmentShader: document.getElementById('fragmentShader').textContent,
    transparent:    true
});

頂点シェーダー:

attribute float size;
attribute float opacity;
attribute vec3 color;
varying vec3 vColor;
varying float vOpacity;

void main() {
    vColor = color;
    vOpacity = opacity;
    vec4 mvPosition = modelViewMatrix * vec4(position, 1.0);
    gl_PointSize = size * (500.0 / length(mvPosition.xyz));
    gl_Position = projectionMatrix * mvPosition; 
}

フラグメント シェーダー:

uniform float time;
varying vec3 vColor;
varying float vOpacity;

void main() {
    gl_FragColor = vec4(vColor, vOpacity);
}

ジオメトリ (配列を設定する部分を省いた場所):

var bufferGeometry = new THREE.BufferGeometry();

var vertices = new Float32Array(vertexPositions.length * 3);
var colors = new Float32Array(vertexColors.length * 3);
var sizes = new Float32Array(vertexSizes.length);
var opacities = new Float32Array(vertexOpacities.length);

bufferGeometry.addAttribute('position', new THREE.BufferAttribute(vertices, 3));
bufferGeometry.addAttribute('color', new THREE.BufferAttribute(colors, 3));
bufferGeometry.addAttribute('size', new THREE.BufferAttribute(sizes, 1));
bufferGeometry.addAttribute('opacity', new THREE.BufferAttribute(opacities, 1));

this.points = new THREE.Points(bufferGeometry, this.pointMaterial);
this.scene.add(this.points);

組み込みのポイント マテリアルでこれを試しましたが、同じことが起こります

this.pointMaterial = new THREE.PointsMaterial({
    size: this.pointSize,
    vertexColors: THREE.VertexColors,
    transparent: true,
    opacity: 0.25
});

これはしかし、予想される動作ですか、それとも何か間違っていますか?

4

1 に答える 1

3

アルファ ブレンディング方程式が機能する方法は、後ろにあるジオメトリのソース カラーが、前にあるジオメトリの宛先カラーによって覆われるというものです。これは、前のジオメトリが後ろのジオメトリと正しくブレンドされるように、透明なジオメトリを後ろから前にソートされた順序でレンダリングする必要があることを意味します。

透明なジオメトリしかない場合は、深度テストを無効にし、逆の深度ソート順でレンダリングするだけで機能します。不透明なジオメトリもある場合は、最初にすべての不透明なジオメトリを通常どおりにレンダリングし、次に深度書き込みを無効にし (テストではありません)、透明なジオメトリを逆の深度ソート順でレンダリングしてから、深度書き込みを再度有効にする必要があります。

もう少し詳しく知りたい場合は、同様の質問に対するいくつかの回答を次に示します。

于 2016-02-03T15:55:48.243 に答える