Three.js rendering

[cphyc]

Adds a simple webpage that allows interactive viewing of any cell-based dataset.

The input format is raw binary, 32-bit floats:

• x
• y
• z
• dx
• field to plot
• field to use as weight

And that's it. For example, to generate the data for output_00080

ds = yt.load_sample("output_00080")

with open("/tmp/test.bin", "w") as f:
    for k in "x y z dx".split():
        ds.r[k].astype(np.float32).to("unitary").tofile(f)
     ds.r["density"].astype(np.float32).to("mp/cm**3").tofile(f)
     ds.r["cell_mass"].to("code_mass").astype(np.float32).tofile(f)

and here is an example: https://pub.cphyc.me/.tmp/volume_rendering.html#output_00080.bin (note that you need to adapt the minimum/maximum values to see anything).

A larger dataset can be viewed as well with https://pub.cphyc.me/.tmp/volume_rendering.html#halo_3446.3d.bin (~20,000,000 cells). It might take up to a minute to download the dataset (400MiO) and might not load unless you have a powerful enough GPU.

Screencast.From.2025-04-24.10-37-51.mp4

Features include:

• Adaptive sampling aiming to allow interactions at ~30fps.
• "True" rendering of the cells, taking into account the depth along each line of sight of the cells.
• Change the colormap, the minimum value and maximum value of the projection.
• Load models from URL or from a file.

Missing stuff/ideas:

• No frustum culling. This could be done by splitting the instances into a few hundred instances, and computing frustum culling at the instance container level (you cannot do it at instance level in Three.js),
• On Firefox on my integrated GPU, the larger example above essentially crashes my browser.
• Maximum-intensity projection? It might be possible by changing the blending from additive to some function that takes the max of the value.
• Level contours. It might be possible by tweaking the blending and making sure things are drawn in order. The difficulty is gonna come from the need to interpolate between cells...
• This PR makes ENH: use Lagrangian tesselation for smoothing N-body plotting yt#4306 very easy: instead of instancing one cube per cell, we can instanciate 6 tetrahedra per particle and use the same shaders as those here.
• Integration into yt + jupyter lab. This should be very easy: we could decorate each yt container with a "view_3d(field, weight)" method that injects the data + the HTML in a widget and instanciate some widgets to set the colormap etc. or use a similar infrastructure as for firefly.
• Automatically set the boundaries from those measured in the first frame generated.
• It'd be quite easy to change the field that's being projected, but the issue is how to handle the loading. At present, you can achieve it by loading a new file that contains the data + weight to be plotted.
• Allow changing the normalization. Currently, a lognorm is hard-coded.

[chrishavlin]

cool!

[chummels]

Very cool!