How to display points of different sizes using THREE.Points()

Questions
, ,
1

I need to generate Points of different size and color.
I can achieve the color by passing a typed array as the “color” attribute and use vertexColors: THREE.VertexColors inside the PointsMaterial generation but I did bot find a way to do the same for the size.
can I pass a typed array of different point sizes, something like geometry.addAttribute("size",new THREE.Float32BufferAttribute(sizes),1);?

Here’s an example. How can I make the Point’s sizes individual?
https://waldemarlehner.github.io/three.js-fiddles/varyingSizePoints/
and the code to that:

2

Hi!
Have a look at this example:
https://threejs.org/examples/?q=points#webgl_custom_attributes_points

3

Thank you! I ill have a look and report back :slight_smile:

4

image
image1920×1050 111 KB

It worked! Thank you very much! :slight_smile:

2 Likes
5

You’re welcome :slight_smile:

6

I know this is an old old question, but google keeps turning it up. So I am unclear what the solution is. I see something called a “vertexshader” and a “fragment shader”. What are those? Where can I find docs on that? If I just want to set a static individual fixed size on a point, do I need them? The example linked is quite complex with animations and things moving and stuff. I don’t want that, I just want to set the size differently for each point, just like is possible with the ‘color’ attribute. Is that possible?

7

Both are basic WebGL entities. I suggest you read a beginner book about WebGL in order to get more familiar with these terms.

THREE.Points and THREE.PointsMaterial do not support individual sizes/scales for points. Hence, you need a custom shader for this. There is an official example at the three.js website that demonstrates this use case:

https://threejs.org/examples/webgl_points_waves

8

Thanks. THe problem with those examples is that they always have way more functionality than I am looking for and then it becomes really hard to understand what parts I actually need, and what parts are only needed because they do something cool that I don’t want in the first place. I guess I’ll give up on varying point sizes. It doesn’t seem to be worth the effort if I need to read a book on it first.

9

Maybe you need to see several a different example of the same approach being used.

See mine, then look back again at the source of the official waves example Mugen87 posted and it should become clearer.

In my example at https://codesandbox.io/s/github/Sean-Bradley/Three.js-TypeScript-Boilerplate/tree/bsc5/?file=/src/client/client.ts
I use size and colour.
Size is very subtle in my example, but it is being used.

At lines 109-112, I am creating a buffergeometry with attributes that store the positions, sizes and colours of my points that I have calculated earlier.

I then create a shader material which contains a vertex shader(lines 177-188) and fragment shader(lines 190-196)
The vertex shader has 2 attributes for size and color which are used in the vertex and fragment scripts. See line 185 for size. See line 194 for color.

When I create the points at line 120, I give it the geometry and the shader material, and the attributes created earlier are passed into the shader.

The attributes in both the examples are the what to pay attention to.

2 Likes
10

That example is actually quite clear. I still have to read up on the shaders functionality but it is easier to figure out whats going on. Thanks a lot. I didn’t realize I could just write them as a string literal and pass them that way. Awesome.

1 Like
11

how about if we need to gave a name for each points This code not working

const vertices = [];

for ( let i = 0; i < 10000; i ++ ) {

	const x = THREE.MathUtils.randFloatSpread( 2000 );
	const y = THREE.MathUtils.randFloatSpread( 2000 );
	const z = THREE.MathUtils.randFloatSpread( 2000 );

	vertices.push( x, y, z );
const material = new THREE.PointsMaterial( { color: 0x888888 ,name:'P0'+i} );
}

const geometry = new THREE.BufferGeometry();
geometry.setAttribute( 'position', new THREE.Float32BufferAttribute( vertices, 3 ) );

const points = new THREE.Points( geometry, material );

scene.add( points );
12

Why do you put this line into the for-loop? And what do you want to achieve?

PS Better to create a new topic in the “Questions” category.