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

**URL:** <https://discourse.threejs.org/t/how-to-display-points-of-different-sizes-using-three-points/4751>\
**Category:** Questions\
**Tags:** points, materials, geometry\
**Created:** [October 31, 2018, 7:42pm UTC](https://discourse.threejs.org/t/how-to-display-points-of-different-sizes-using-three-points/4751 "2018-10-31T19:42:19Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![WaldemarLehner](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/waldemarlehner/32/3086_2.png) [@WaldemarLehner](https://discourse.threejs.org/u/WaldemarLehner)\
**Post date:** [October 31, 2018, 7:42pm UTC](https://discourse.threejs.org/t/how-to-display-points-of-different-sizes-using-three-points/4751/1 "2018-10-31T19:42:19Z")

</div>

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/](https://waldemarlehner.github.io/three.js-fiddles/varyingSizePoints/)  
and the code to that:

> <https://github.com/WaldemarLehner/three.js-fiddles/blob/master/docs/varyingSizePoints/script.js>

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [October 31, 2018, 7:54pm UTC](https://discourse.threejs.org/t/how-to-display-points-of-different-sizes-using-three-points/4751/2 "2018-10-31T19:54:32Z")

</div>

Hi!  
Have a look at this example:  
[https://threejs.org/examples/?q=points#webgl\_custom\_attributes\_points](https://threejs.org/examples/?q=points#webgl_custom_attributes_points)

---

<div class="post-metadata">

**Author:** ![WaldemarLehner](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/waldemarlehner/32/3086_2.png) [@WaldemarLehner](https://discourse.threejs.org/u/WaldemarLehner)\
**Post date:** [October 31, 2018, 7:58pm UTC](https://discourse.threejs.org/t/how-to-display-points-of-different-sizes-using-three-points/4751/3 "2018-10-31T19:58:16Z")

</div>

Thank you! I ill have a look and report back 🙂

---

<div class="post-metadata">

**Author:** ![WaldemarLehner](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/waldemarlehner/32/3086_2.png) [@WaldemarLehner](https://discourse.threejs.org/u/WaldemarLehner)\
**Post date:** [November 1, 2018, 12:35am UTC](https://discourse.threejs.org/t/how-to-display-points-of-different-sizes-using-three-points/4751/4 "2018-11-01T00:35:12Z")

</div>

![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/8/81543e2d2807b247a210f27cd781a5fe17f99cca.png)  
It worked! Thank you very much! 🙂

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [November 1, 2018, 6:36am UTC](https://discourse.threejs.org/t/how-to-display-points-of-different-sizes-using-three-points/4751/5 "2018-11-01T06:36:36Z")

</div>

You’re welcome 🙂

---

<div class="post-metadata">

**Author:** ![dolfandringa](https://avatars.discourse-cdn.com/v4/letter/d/a9adbd/32.png) [@dolfandringa](https://discourse.threejs.org/u/dolfandringa)\
**Post date:** [August 25, 2020, 7:17am UTC](https://discourse.threejs.org/t/how-to-display-points-of-different-sizes-using-three-points/4751/6 "2020-08-25T07:17:14Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [August 25, 2020, 8:39am UTC](https://discourse.threejs.org/t/how-to-display-points-of-different-sizes-using-three-points/4751/7 "2020-08-25T08:39:20Z")

</div>

> [@dolfandringa](#):
>
> I see something called a “vertexshader” and a “fragment shader”. What are those? Where can I find docs on that?

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](https://threejs.org/examples/webgl_points_waves)

---

<div class="post-metadata">

**Author:** ![dolfandringa](https://avatars.discourse-cdn.com/v4/letter/d/a9adbd/32.png) [@dolfandringa](https://discourse.threejs.org/u/dolfandringa)\
**Post date:** [August 29, 2020, 3:33pm UTC](https://discourse.threejs.org/t/how-to-display-points-of-different-sizes-using-three-points/4751/8 "2020-08-29T15:33:48Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![seanwasere](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/seanwasere/32/20864_2.png) [@seanwasere](https://discourse.threejs.org/u/seanwasere)\
**Post date:** [August 30, 2020, 11:13am UTC](https://discourse.threejs.org/t/how-to-display-points-of-different-sizes-using-three-points/4751/9 "2020-08-30T11:13:11Z")

</div>

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](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.

---

<div class="post-metadata">

**Author:** ![dolfandringa](https://avatars.discourse-cdn.com/v4/letter/d/a9adbd/32.png) [@dolfandringa](https://discourse.threejs.org/u/dolfandringa)\
**Post date:** [September 4, 2020, 8:29am UTC](https://discourse.threejs.org/t/how-to-display-points-of-different-sizes-using-three-points/4751/10 "2020-09-04T08:29:56Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![mohamad\_chouacha](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mohamad_chouacha/32/34568_2.png) [@mohamad\_chouacha](https://discourse.threejs.org/u/mohamad_chouacha)\
**Post date:** [April 11, 2023, 2:30pm UTC](https://discourse.threejs.org/t/how-to-display-points-of-different-sizes-using-three-points/4751/11 "2023-04-11T14:30:49Z")

</div>

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

```javascript
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 );

```

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [April 11, 2023, 2:44pm UTC](https://discourse.threejs.org/t/how-to-display-points-of-different-sizes-using-three-points/4751/12 "2023-04-11T14:44:15Z")

</div>

> [@mohamad\_chouacha](#):
>
> `const material = new THREE.PointsMaterial( { color: 0x888888 ,name:'P0'+i} );`

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.