渲染100k的精靈用0.1混濁，透明的地圖和光滑抗鋸齒

我具有以下設置（的碼唯一相關的比特）：渲染100k的精靈用0.1混濁，透明的地圖和光滑抗鋸齒

渲染

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

紋理

dot: THREE.ImageUtils.loadTexture('./assets/images/dot.png')

材料

let material = new THREE.PointsMaterial({ 
    size: size, 
    sizeAttenuation: true, 
    color: color, 
    map: textures.dot, 
    // alphaMap: textures.dotAlpha, 
    blending: THREE.NormalBlending, // THREE.MultiplyBlending 
    transparent: true, 
    alphaTest: 0.1, 
    opacity: 0.3 
});

點雲平時我有1K到10k點20至50點雲。我在屏幕上看到的只是其中的一小部分。

pointCloud = new THREE.Points(geometry, material);

添加點

cfg.pointCloud.forEach(point => { 
    var vertex = new THREE.Vector3(); 
    vertex.x = point.x; 
    vertex.y = point.y; 
    vertex.z = point.z; 
    geometry.vertices.push(vertex); 
});

我有以下問題：

Overlaping精靈往往夾，而不是呈現在彼此的頂部對方。因此，我得到很多隻是模糊的點
如果我使用material.alphaTest = 0.5和material.opacity:0.1精靈的邊緣變得非常尖銳，失去了所有的抗鋸齒效果。當從遠處觀看時，它們傾向於變得非常差並且消失。我期待能夠呈現平滑的邊框。我正在使用512x512 png地圖。
當我將相機從原點移開一段距離後，精靈會消失。
低不透明度值似乎會使點消失。

我該如何改進這種渲染？除了使用精靈之外還有其他方法嗎？我缺乏編寫自定義着色器所需的知識，所以我會很感激任何有助於改進渲染的東西。

這裏是展示麻煩一些樣品圖片：

儘管藍點密度爲他們往往被遮蔽的綠色區域高得多。我相信這是因爲綠色和紅色點是引入場景的第一個點雲。它們呈現在藍色的頂部。

如果我傾斜似乎有些點突然得到，因爲不同的深度指標的呈現相機。

如果我增加一定的點雲的精靈往往是由精靈用較低的不透明度模糊的不透明度。我期待着那裏有一些混合效果。

大部分的點往往被聚集，並由於渲染quircks大多傾向於dissapear

又有些裁剪效果從接近起

來源

2017-03-18 Adrian Moisa

這可能會有所幫助：https://github.com/mrdoob/three.js/issues/5668 – gman

我跟着鏈接，但似乎，提交人有因爲沒有使用'渲染問題material.alphaTest = value'。我試着用'BufferGeometry'改變例子。當我將精靈數量增加到10k時，它已經顯示出與我的例子中相同的問題。 http://jsfiddle.net/z6nmto9e/ –

如果你遵循線程，粒子的排序已從Three.js中刪除，這是你的問題之一。線程說你要麼自己排序或使用THREE.Sprite – gman

我設法在渲染質量顯著的改善。我發現very good answer here。此question有一些很好的信息。

我在材料中添加了depthWrite和depthTest作爲錯誤。

let material = new THREE.PointsMaterial({ 
    size: size, 
    sizeAttenuation: true, 
    color: color, 
    map: this._textures.dot, 
    blending: THREE.NormalBlending, 
    transparent: true, 
    alphaTest: 0.1, 
    opacity: 0.3, 
    depthWrite: false, 
    depthTest: false 
});

不同的是顯著：

不過我必須找到抗鋸齒問題的解決方案。當距離相機很遠時，點會像這個特寫所顯示的那樣完全溶解並消失。

來源

2017-03-18 09:02:07

渲染100k的精靈用0.1混濁，透明的地圖和光滑抗鋸齒

回答

相關問題