How to perform calculations based on the actual screen distance between two points

Hello everyone! First time poster here. I am working on a Three.js project involving the creation of 3D graphical plots. The plotter has grids with markings along the x, y and z axes representing a value. The grid is divided into multiple sections and based on the number of divisions, you will see the values along the x, y and z axes (very similar to markings on a real life graph or markings on a ruler). I have attached a gif for the same to give you a better idea of what I’m going for.

My questions pertains to these markings as they might overlap sometimes and hence, I would like to reduce the number of divisions in the grid based on the distance between the end points of the grid. As seen in the beginning of the grid, I want to reduce the number of divisions in the grid itself when the camera zooms out and the on screen distance between the end points of the edges of the grids reduce. Next, towards the end of the gif when the camera views the Time axes from the side, once again the on screen distance between the end points of the grid along that axes reduces (and the markings overlap). I wish to reduce the number of divisions and markings on the grid based on the screen distance of the end points of a grid edge. Do let me know if you need some more clarification for this problem.

[I understand that using the camera zoom itself is a way, but it would not help me in the second case when I am viewing the grid from the side and would still want to reduce the number of divisions.]
gif

I wouldn’t change the number of grid divisions based on the onscreen axis length because that number would depend on the viewing angle and your grid would look weird while you’re rotating the box, going from high divisions to zero when you’re looking along the axis that is subject to division.

Normally you’d keep subdivisions consistent and divide the grid, say, based on the distance from the center of the box to the camera.

If overlapping labels are your main concern, create less labels at a bigger distance (do not label each subdivision) or position labels so they never overlap (that’ll require writing some label positioning code). In case of looking down an axis, you could position labels in a column, making farther labels more transparent, in case of facing an axis - position labels in a row, minding their length.

If I may abstract from your specific question, your graph suffers from various aspects of fuzziness. IMO, these are, without any specific order:

  1. too many subdivisions per axis
  2. inconsistent (random) precision of annotations, varying between zero, one or two digits of decimal precision
  3. overlapping annotations having transparent text background leaves none of them readable
  4. hard to grasp data range

What you can do:

  • limit the number of subdivisions to five, max. 7, depending on data range. I would also see to it, that the mantissa of the interval be either 1, 2 or 5. Round off the lowest axis values as necessary and likewise round up the heighest value as necessary.
  • For the Frequency axis, a natural choice would be 0 to 50, and would give you nice, clean annotation values of 0, 10, 20, 30, 40, 50, without need for any decimal precision.
  • For the Time axis, ranging from 807 to 855, I would round off the lowest value to 800 and round up the highest value to 860. This would leave you with labels at the 800, 810, 820, 830, 840, 850 and 860 positions. again without need for any decimal precision.
  • For the Power axis, ranging from -0.25 to 0.45, a good(?) choice of interval might be 0.2. Which would result in subdivisions at -0.4, -0.2. 0.0, 0.2, 0.4. There is btw. no requirement, that the end points of an axis must carry annotations.

This would, imo, greatly enhance the overview “at a glance” of data ranges involved. For a precision reading of individual values you will anyhow have to employ other means.

The above measures combined will reduce the chances for annotation overlap. If this is still an issue, you may want to set the annotation text background to something opaque.

1 Like