使用0.1不透明度，透明贴图和平滑抗锯齿渲染100k精灵 [英] Render 100k sprites with 0.1 opacity, transparent maps and smooth antialiasing

问题描述

我有以下设置（仅相关的代码位）：

渲染器

  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，
混合：THREE.NormalBlending，// THREE.MultiplyBlending 
 transparent：true，
 alphaTest：0.1，
 opacity：0.3 
}）; 
  

点云通常我有20到50点云，1k到10k点。我在屏幕上看到的只是theese的一小部分。

  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）; 
}）; 
  

我有以下问题：

• 重叠的精灵往往会互相夹住而不是互相渲染。因此，我得到了许多简单模糊的分数


• 如果我使用 material.alphaTest = 0.5 和材料。不透明度：0.1 精灵的边缘变得非常锐利，失去所有抗锯齿效果。从远处观看时，它们往往呈现非常差并且消失。我期待能够渲染光滑的边框。我正在使用512x512 png地图。


• 当我将相机移离原点后，一定距离的精灵往往会消失。


• 低不透明度值似乎使点消失。

如何改进此渲染？除了使用精灵之外还有其他方法吗？我缺乏编写自定义着色器所需的专业知识，所以我会欣赏任何有助于改善此渲染的内容。

以下是一些展示问题的示例图片：

• 尽管绿色区域的蓝点密度要高得多，但它们往往会被遮挡。我相信这是因为绿色和红色点是引入场景的第一个点云。它们呈现在蓝色之上。

• 如果我倾斜相机，由于深度指数不同，似乎突然会出现一些点。

• 如果我增加不透明度某些点云他们的精灵往往被不透明度低的精灵遮挡。我期待那里有一些混合效果。

• 大部分点往往是聚集的，并且由于渲染怪癖，大部分都倾向于消失

• 再次关闭一些剪辑效果

< a href =https://i.stack.imgur.com/emwwo.png =nofollow noreferrer>

解决方案

我设法获得了重要意义提高渲染质量。我在这里找到了

我仍然需要找到抗锯齿问题的解决方案。当远离相机时，圆点往往会完全溶解并消失，因为它在此特写中显示。

I have the following setup (only relevant bits of code):

Renderer

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

Textures

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

Material

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
});

Point cloud Usually I have 20 to 50 point clouds with 1k to 10k dots. What I see on screen it's a small fraction of theese.

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

Adding points

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);
});

I have the following issues:

• Overlaping sprites tend to clip each other instead of rendering on top of each other. Thus I get a lot of points simply obscured
• If i use material.alphaTest = 0.5and material.opacity:0.1 the edges of the sprites become very sharp loosing all antialiasing effect. When viewed from a distance they tend to render very poorly and disappear. I was expecting being able to render smooth borders. I'm using 512x512 png maps.
• When I move the camera away from the origin after a certain distance sprites tend to disappear.
• Low opacity values seem to make the dots disappear.

How can I improve this rendering? Is there any other way besides using sprites? I'm lacking the know-how needed to write a custom shader so I will appreciate anything that helps with improving this rendering.

Here are some sample images that showcase the troubles:

• Even though the blue dots density is much higher in the green zone they tend to be obscured. I belive this happens because the green and red dots are the first point clouds introduced to the scene. And they render on top of the blue ones.

• If I tilt the camera it seems that some dots suddenly get rendered because of a different depth index.

• If I increase the opacity of certain point clouds their sprites tend to be obscured by sprites with lower opacity. I was expecting some blending effect there.

• Most of the dots tend to be clustered and due to the rendering quircks most of them tend to dissapear

• Again some clipping effects from close up

解决方案

I managed to get a significant improvement in the rendering quality. I found very good answer here. Also this question had some good information.

I have added depthWrite and depthTest as false in the material.

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
});

The difference is significant:

Still I have to find a solution for the antialiasing issues. When far away from the camera, dots tend to totally dissolve and disappear as it is shown in this close-up.

这篇关于使用0.1不透明度，透明贴图和平滑抗锯齿渲染100k精灵的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！