2d plots with ShapeBufferGeometry performance

Questions
1

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

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.

2

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.

3

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.

4

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

5

I think we are talking about the same thing :slight_smile:
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.

6

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

7

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

RandomizedValues

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

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

2 Likes
8

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 by Guillaume (@g44) on CodePen.