# 2d plots with ShapeBufferGeometry performance

**URL:** <https://discourse.threejs.org/t/2d-plots-with-shapebuffergeometry-performance/6259>\
**Category:** Questions\
**Tags:** geometry\
**Created:** [February 21, 2019, 4:56pm UTC](https://discourse.threejs.org/t/2d-plots-with-shapebuffergeometry-performance/6259 "2019-02-21T16:56:11Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![g44](https://avatars.discourse-cdn.com/v4/letter/g/e19b73/32.png) [@g44](https://discourse.threejs.org/u/g44)\
**Post date:** [February 21, 2019, 4:56pm UTC](https://discourse.threejs.org/t/2d-plots-with-shapebuffergeometry-performance/6259/1 "2019-02-21T16:56:11Z")

</div>

Hi,

I am new to WebGL and Three.js, and I am wondering if someone can give me some advices on what I am trying to do.  
I want to draw a large 2d plot like the image below (it’s composed of lines, and filled polygons between the line and a virtual zero value).

![TestView](https://cdck-file-uploads-canada1.s3.dualstack.ca-central-1.amazonaws.com/flex035/uploads/threejs/original/2X/d/dd8751c7ed8d7f625e0281de10b3cb4dd290d14c.png)

My example works, but I have some performances troubles, so perhaps I did it the wrong way.

For now, the lines are plotted with THREE.Line and it works well.

But for the red areas, I used ShapeBufferGeometry. And this step is quite slow. In my tests, for all the data(with around 80k polygons/red area), it took almost 1s for the triangulation, and 1s for the other steps of the geometry creation, when I hoped it would take less than 0.5s for the entire process.

My main trouble is that I don’t even know if it is achievable as fast as I would with WebGL/Three.js. Do you think it is ?  
If it’s possible, any idea how can I replace the use of ShapeBufferGeometry to draw these polygons ? (perhaps low level API ?)

Thanks.

---

<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:** [February 21, 2019, 6:08pm UTC](https://discourse.threejs.org/t/2d-plots-with-shapebuffergeometry-performance/6259/2 "2019-02-21T18:08:08Z")

</div>

Hi!  
Any chance to provide a live code example? jsfiddle, codepen etc.

First thought. Use `THREE.PlaneBufferGeometry()` with `THREE.ShaderMaterial()`. Change coordinates of vertices of one side of the plane and in the shader, color only the part that at the positive part of the X-axis, and discard fragments on the negative part.

---

<div class="post-metadata">

**Author:** ![g44](https://avatars.discourse-cdn.com/v4/letter/g/e19b73/32.png) [@g44](https://discourse.threejs.org/u/g44)\
**Post date:** [February 22, 2019, 8:53am UTC](https://discourse.threejs.org/t/2d-plots-with-shapebuffergeometry-performance/6259/3 "2019-02-22T08:53:02Z")

</div>

I’ll try to provide a live example on monday.

I already tried the PlaneBufferGeometry, but except if I am using it wrong, it is even slower (  
for each line I created a PlaneBufferGeometry like this : new THREE.PlaneBufferGeometry(1, plotHeight, 1 linePoints), and if linePoints grows, it can take some time for the plane creation.

---

<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:** [February 22, 2019, 8:56am UTC](https://discourse.threejs.org/t/2d-plots-with-shapebuffergeometry-performance/6259/4 "2019-02-22T08:56:04Z")

</div>

Ehm… I mean you can create a plane with desired division on x or y and just re-use its vertices, changing their values.

---

<div class="post-metadata">

**Author:** ![g44](https://avatars.discourse-cdn.com/v4/letter/g/e19b73/32.png) [@g44](https://discourse.threejs.org/u/g44)\
**Post date:** [February 22, 2019, 9:32am UTC](https://discourse.threejs.org/t/2d-plots-with-shapebuffergeometry-performance/6259/5 "2019-02-22T09:32:34Z")

</div>

I think we are talking about the same thing 🙂  
With an exaggerated example, let’s say I create 1000 THREE.PlaneBufferGeometry(w, h, 1, 2000).  
On my computer,it take a few seconds.  
Then changing vertices is very very fast, but I’am a little annoyed with the creation time.

---

<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:** [February 22, 2019, 9:44am UTC](https://discourse.threejs.org/t/2d-plots-with-shapebuffergeometry-performance/6259/6 "2019-02-22T09:44:44Z")

</div>

Nope, I’m saying about just one plane 🙂 I’m making a demo, so I’ll show later what I mean 🙂

---

<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:** [February 22, 2019, 1:18pm UTC](https://discourse.threejs.org/t/2d-plots-with-shapebuffergeometry-performance/6259/7 "2019-02-22T13:18:20Z")

</div>

So, this is what I’ve meant: one `THREE.Line()`, one `THREE.PlaneBufferGeometry()` with `THREE.ShaderMaterial()`.

![RandomizedValues](https://cdck-file-uploads-canada1.s3.dualstack.ca-central-1.amazonaws.com/flex035/uploads/threejs/original/2X/5/5f48331935a363d51b3d93003469db141cb2f5d4.png)

And a working demo:  
[https://codepen.io/prisoner849/pen/mvZWRo?editors=0010](https://codepen.io/prisoner849/pen/mvZWRo?editors=0010)

also works fine without chaning of shaders:  
[https://codepen.io/prisoner849/pen/yZdqxL?editors=0010](https://codepen.io/prisoner849/pen/yZdqxL?editors=0010)

---

<div class="post-metadata">

**Author:** ![g44](https://avatars.discourse-cdn.com/v4/letter/g/e19b73/32.png) [@g44](https://discourse.threejs.org/u/g44)\
**Post date:** [February 22, 2019, 6:04pm UTC](https://discourse.threejs.org/t/2d-plots-with-shapebuffergeometry-performance/6259/8 "2019-02-22T18:04:00Z")

</div>

It’s not exactly what I need, but I like it. It can help me for other things I have in mind. Thank you.

My needs are more statics, and with more data.  
Here an example with 10 lines, but in a perfect world, I need more 1000 lines (less wide) instead of 10.

See the Pen [pGXVOe](https://codepen.io/g44/pen/pGXVOe/) by Guillaume ([@g44](https://codepen.io/g44)) on [CodePen](https://codepen.io).