# How to draw spheres more than 1000000?

**URL:** <https://discourse.threejs.org/t/how-to-draw-spheres-more-than-1000000/19731>\
**Category:** Questions\
**Tags:** geometry\
**Created:** [October 14, 2020, 2:45am UTC](https://discourse.threejs.org/t/how-to-draw-spheres-more-than-1000000/19731 "2020-10-14T02:45:11Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![ayuuuu](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/ayuuuu/32/13921_2.png) [@ayuuuu](https://discourse.threejs.org/u/ayuuuu)\
**Post date:** [October 14, 2020, 2:45am UTC](https://discourse.threejs.org/t/how-to-draw-spheres-more-than-1000000/19731/1 "2020-10-14T02:45:11Z")

</div>

Recently, I used the below code to visualize some kinds of molecule structure.

```
var geometry = new THREE.SphereBufferGeometry(r, segmentNum, segmentNum);
var vertexNum = geometry.getAttribute("position").count;
var vertexColor = new Float32Array(vertexNum*3);
for (var i = 0; i < vertexNum*3; i+=3){
    vertexColor[i] = rgbColor[0];
    vertexColor[i+1] = rgbColor[1];
    vertexColor[i+2] = rgbColor[2];
}
geometry.addAttribute("color", new THREE.BufferAttribute(vertexColor, 3));
var material = new THREE.MeshPhongMaterial({color: atomColor, shininess: 30});
var mesh = new THREE.Mesh(geometry, material);

```

However, as the number of atoms increases more than 10000, the browser will crash and alert an error that “Page no response!”. For the demand of some cheminformatic experiment, we need to visualize atoms more than 1000000. So I wonder if there are any possible solutions to this problem. Thanks for your attention~

---

<div class="post-metadata">

**Author:** ![trusktr](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/trusktr/32/13726_2.png) [@trusktr](https://discourse.threejs.org/u/trusktr)\
**Post date:** [October 14, 2020, 4:18am UTC](https://discourse.threejs.org/t/how-to-draw-spheres-more-than-1000000/19731/2 "2020-10-14T04:18:20Z")

</div>

You’ll want to use `InstancedMesh`, so that you can render many objects with a single call to the GPU, instead of one call to the GPU per object. See the following:

Three.js builtin `InstancedMesh` class:

> **[three.js docs](https://threejs.org/docs/index.html#api/en/objects/InstancedMesh)**

The three-instanced-mesh lib, with a few extra features:

> **[pailhead/three-instanced-mesh](https://github.com/pailhead/three-instanced-mesh/)**
>
> wrapper around THREE.InstancedBufferGeometry . Contribute to pailhead/three-instanced-mesh development by creating an account on GitHub.

Examples on how instancing works (note the large number of objects drawing on screen):

> **[three.js examples](https://threejs.org/examples/?q=instanc)**

The basic concept is that you draw many objects at once, as if they were all a single mesh (one GPU call means the GPU draws one set of vertices for all of your “objects” as if they were a single object).

---

<div class="post-metadata">

**Author:** ![ayuuuu](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/ayuuuu/32/13921_2.png) [@ayuuuu](https://discourse.threejs.org/u/ayuuuu)\
**Post date:** [October 16, 2020, 9:23am UTC](https://discourse.threejs.org/t/how-to-draw-spheres-more-than-1000000/19731/3 "2020-10-16T09:23:09Z")

</div>

However, the radius and the color of the atoms are different from each other. Can this situation still uses InstancedMesh?

---

<div class="post-metadata">

**Author:** ![mjurczyk](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mjurczyk/32/10995_2.png) [@mjurczyk](https://discourse.threejs.org/u/mjurczyk)\
**Post date:** [October 16, 2020, 10:12am UTC](https://discourse.threejs.org/t/how-to-draw-spheres-more-than-1000000/19731/4 "2020-10-16T10:12:06Z")

</div>

> [@ayuuuu](#):
>
> 1000000

Even if you’d instance all these Spheres, it’ll either crash or run at 0.01fps - you’d be trying to render 1mil \* (segmentNum^2) faces at once.

I’d try to use some smart math and determine how many atoms are actually visible at a given moment + how many of those would have sub-pixel size. Then use pooling / instancing to render only these that are visible - rest can either be hidden or approximated in groups using some simplified geometry.

---

<div class="post-metadata">

**Author:** ![gonnavis](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/gonnavis/32/11428_2.png) [@gonnavis](https://discourse.threejs.org/u/gonnavis)\
**Post date:** [October 16, 2020, 11:09am UTC](https://discourse.threejs.org/t/how-to-draw-spheres-more-than-1000000/19731/5 "2020-10-16T11:09:23Z")

</div>

May also try pure glsl [RayMarching](https://www.youtube.com/watch?v=PGtv-dBi2wE&feature=youtu.be) and [SDF](https://www.iquilezles.org/www/articles/distfunctions/distfunctions.htm) algorithms, with these algorithms you just need add a **mod** or **fract** or similar to repeat objects.  
No matter how many objects, the algorithm complexity is the same, but with a lot of limitations though.

> **[GLSL Sandbox](http://glslsandbox.com/e#61015.2)**

  

> **[GLSL Sandbox](http://glslsandbox.com/e#61015.89)**

  

> **[GLSL Sandbox](http://glslsandbox.com/e#61015.100)**

  

> **[Shadertoy](https://www.shadertoy.com/view/tltSWS)**

  

> **[Shadertoy](https://www.shadertoy.com/view/tt3XR7)**

---

<div class="post-metadata">

**Author:** ![Fyrestar](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/fyrestar/32/52793_2.png) [@Fyrestar](https://discourse.threejs.org/u/Fyrestar)\
**Post date:** [October 16, 2020, 1:14pm UTC](https://discourse.threejs.org/t/how-to-draw-spheres-more-than-1000000/19731/6 "2020-10-16T13:14:12Z")

</div>

You can render spheres as pixel perfect round spheres using points with the least cost possible without raymarching. But the limit for a stable 60 fps depends on the device at the end, i could render in a test 20 million without issue for sphere based particles on my machine.

> [@How to animate thousands of spheres with the best performance?](https://discourse.threejs.org/t/how-to-animate-thousands-of-spheres-with-the-best-performance/9441/6):
>
> Billboards can respect light, i use billboards with g-buffer and volumetric impostors with the same features as regular geometry. Spheres are especially easy to make as billboards instead actual geometry, shadows only require a depth buffer rendered by the light camera, receiving the shadow requires to translate the sphere position instead the billboard quad.

I’m quite sure someone already made an example for lit spheres but i can’t find right now i’m on mobile.

Recommend reading that thread and look in the forum as it has been a topic before.

---

<div class="post-metadata">

**Author:** ![trusktr](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/trusktr/32/13726_2.png) [@trusktr](https://discourse.threejs.org/u/trusktr)\
**Post date:** [October 17, 2020, 2:13am UTC](https://discourse.threejs.org/t/how-to-draw-spheres-more-than-1000000/19731/7 "2020-10-17T02:13:30Z")

</div>

> [@ayuuuu](#):
>
> However, the radius and the color of the atoms are different from each other. Can this situation still uses InstancedMesh?

Check out the APIs!