Question of particles, textures and png files

[gmiliotis]

I have just started with three.js and I have a couple of basic questions please.I want to render millions of points on the browser (between 5-10million). These points will have different shapes, basic geometric shapes, like circles, squares, triangles etc and different colours. The texture is not important, If for example a point is a plain red square thats fine.
How do I make those shapes please? I have seen some examples where they create a variable
const particleTexture = textureLoader.load(path\to\sprite.png) and they set this to the alphaMap like the following: particlesMaterial.alphaMap = particleTexture

My question is how to I make these png files for the spites please? Any examples or pointers will be greatly appreciated. I have also heard that if a texture is too detailed then it will affect the performance especially for a big dataset like mine. What does this mean please? As I said, I am not at all interested in the texture of my markers. Will it be ok if I make somehow a square-like png and then use it in the textureLoader as outlined above.or there is another more efficient way?

Thanks

[hofk]

Maybe this will help you? Shader to create an offset, inward-growing stroke?

[lunch]

Adding on to the post @hofk referenced, regular polygons can be created in a shader quite simply. This is the route I took to make the point shapes in the referenced post. Take a look at the following resource:

Book of Shaders - Scroll down to the triangle example

[hofk]

see also discourse.threejs.hofk.de

from the Collection of examples from discourse.threejs.org