Best way to implement a "toggle x axis log scale" for a 2D line plot?

Questions
1

Hi,

I’m using three.js to do 2D line plots (using OrthographicCamera and the Line object). I’d like to enable a “set x-axis log mode” toggle, and wondered what the best approach would be.

One idea would be to implement a custom BufferGeometry class which provides a toggleXAxisLogMode() member which would replace all of the x components in the position attribute and set needsUpdate=true;

But, I wondered if there was a more typical way to do this? Because I looked through a lot of the custom geometries in src/geometries, and none of them provide new methods for actually morphing the existing positions.

Any advice would be greatly appreciated!

2

If you want to switch between linear and logarithmic scale along x axis, there are many ways. So, “the best” depends on what properties you would consider important.

Some options that use double data, but switching modes is fast:

  • have both plots (one linear and one logarithmic) and show only one of them
  • have single plot with secondary plot as a morph target, then morph between them
  • have both plots in a single geometry but draw only part of the geometry

Some options that use single data, switching is also fast

  • have a custom shader to scale the plot at runtime
  • have a custom TSL-shader to scale the plot at runtime

An option with single data that is updated on demand - slower, but OK for a few thousands line segments:

  • update the data via JS, then set needsUpdate

If I were to do this, I’d try with the last option if the data is not too much; or with a TSL-shader if memory space is an issue.

Usually the concept of ‘best’ is subjective, my ‘best’ is not necessarily your ‘best’.

4 Likes
3

Thanks Pavel! This is a very helpful overview. At the moment I’m trying to go with the slower option of updating the data on JS and then setting needsUpdate. In fact I do have in some cases 10 million data points - although recomputing this on CPU seems to take just a few milliseconds, which is fine for my purposes. (It’s just a user-driven toggle between log and linear scale, not an animation) Secondly, I do want to eventually add other functionality like window smoothing or whatnot. These would be much easier to add as functions on the JS side.

But, I will keep your other suggestions in mind, they are great to know about.