How to create foggy objects to achieve the effect of temperature field

Questions
1

I want to create a fog-like object to achieve the temperature field effect. Attached drawings:

TIM%E6%88%AA%E5%9B%BE20190921171525
TIM截图20190921171525.jpg1146×527 168 KB
TIM%E6%88%AA%E5%9B%BE20190921171542

As shown in the figure, we know the temperature value of each position in the scene space, and different temperature sections show different colors.

I initially used the following methods to achieve, but the effect is not good:unamused::

var particles = datas.length;
var geometry = new THREE.BufferGeometry();

var positions = [];
var colors = [];

for (let index = 0; index < particles; index++) {

    const element = datas[index];
        positions.push(element.v[0], element.v[2], element.v[1]);//position
    var colorArray = temperature2Color2(element.t);//color
    colors.push(colorArray[0], colorArray[1], colorArray[2]);
}

geometry.addAttribute('position', new THREE.Float32BufferAttribute(positions, 3));
geometry.addAttribute('color', new THREE.Float32BufferAttribute(colors, 3));

geometry.computeBoundingSphere();

var material = new THREE.PointsMaterial({ //ShaderMaterial
    size: 20,
    vertexColors: THREE.VertexColors,
    sizeAttenuation: true,
    // morphTargets:true,
    transparent: true,
    // dithering:true,
    precision: "highp",
    // premultipliedAlpha: true,
    side: THREE.DoubleSide,
    opacity: .25
});

var points = new THREE.Points(geometry, material);
points.renderOrder = 0;
points.name = "scene_pointsTemp"
scene.add(points);

I really hope to get some good advice about it,Thank you in advance:hugs:.

2

Maybe try looking up soft particles. Volumetric effects in 3D graphics are in general not an easy task

3 Likes
3

First of all, thank you. I haven’t used in the project ( soft particles) yet. Before that, I simply modified it to render random colors for each point and found some problems.
We can’t add more points. We have 200,000 points, or even as many as 700,000 points. The following images are 50 points, 100 points and 1000 points. I find that their color overlay is white, which is not what I want. You have a solution.

num50
num50671×586 95.5 KB
num100
num100671×586 248 KB
num1000
num1000671×586 164 KB

1 Like
4

You will need to learn about:

  • overdraw
  • custom material attributes

When you do - you will be able to understand answers to your question.

1 Like
5

Are you talking about ShaderMaterial implemented with custom shaders?

There are relevant examples for reference.

6

im curious about this too. did u ever figure it out?