Volume traces #2753

kig · 2018-06-25T07:29:59Z

Volume trace

Volume rendering trace for plotly.js. Renders 3D volumes as stacks of translucent images. Integration work in progress.

Volume data is passed in in the streamtube / isosurface fashion: x,y,z, and u arrays of coordinates and intensity, each array has the same length. The x, y, z arrays are used to construct a meshgrid that determines the shape of the u array.
scene.js transparent pass results in nothing drawn, the trace is now using a hack where it's rendered in the opaque pass.
There's an opacityscale parameter to control the mapping of intensity values to opacity multipliers, this is passed in as a 256-element array of numbers 0..1. Which is arbitrary and a bit of a pain to construct.
[x ] When rotating the volume, the rendering jumps when changing the image stack render order. The stack layers may not line up perfectly.
- This is because the stacks should really be rendered as voxels to get proper z-sorting. Voxels would add up to around 6 triangles per voxel, or 12 million tris for a 128x128x128 volume. Rendering as a point cloud is another option.
The volume lib represents volumes with textures that have the layer images stacked vertically. This runs into trouble with higher-res volumes, exceeding max texture size.
- Fixable by using 3D textures, which is easiest in WebGL2. Possible to do with a hack for WebGL1, but that'll require multiple textures for storing the volume.
~~Asymmetric volume dimensions seem buggy, try with 64x32x64 for example~~
~~Hover?~~
- Hover doesn't really have a nice mapping here. We could ray march into the volume and look for an intensity value above a hover cutoff (so it'd work a bit like a voxel isosurface wrt picking.)

alexcjohnson · 2018-09-12T00:00:21Z

src/traces/volume/attributes.js

+        role: 'info',
+        editType: 'calc',
+        description: 'Sets the opacity scale of the volume, which opacity to use for which intensity. Array of 256 values in 0..1 range.'
+    },


Is this mapping over the same range as colorscale? If so, can we specify it similarly, as a piecewise-linear list of pairs [[0, opacity0], [v1, opacity1], ..., [1, opacityN]]?

Is this used along with trace.opacity? Like the two are multiplied together perhaps? However that works it should be in the description.

alexcjohnson · 2018-09-12T00:27:58Z

src/traces/volume/attributes.js

+        role: 'info',
+        editType: 'calc',
+        description: 'Sets the opacity of the volume.'
+    },


opacity is a standard attribute for all traces (unless you disable it with 'noOpacity' in module.categories) so you shouldn't need this attribute, nor the coerce('opacity'), nor even trace.opacity === undefined ? 1 : trace.opacity - you should just be able to do volumeOpts.opacity = trace.opacity; since opacity defaults to 1.

alexcjohnson · 2018-09-12T00:31:07Z

src/traces/volume/defaults.js

+    coerce('opacityscale');
+
+    coerce('boundmin');
+    coerce('boundmax');


Similar to isosurface, could we change these to (x|y)(min|max)? Doesn't look like these are implemented yet, and it doesn't feel to me as though they're as important here as in isosurface, so I'd be OK with removing them for the first version of this trace type.

… and make it colorscale-like

alexcjohnson · 2018-09-13T15:59:20Z

src/traces/volume/convert.js

        trace.imax === undefined ? trace.cmax : trace.imax
    ];

-    volumeOpts.opacity = trace.opacity === undefined ? 1 : trace.opacity;


You can still set this, if it'll get used downstream - which it looks like it will based on your amended description for opacityscale, thanks for fleshing that out!

My point was just that you don't need to handle the undefined case here, since the global trace.opacity attribute has a default of 1 you know at this point that you can only have a number between 0 and 1.

Ohh, right, thanks for catching this.

etpinard

Unfortunately, I wasn't able to test @kig's volume on my laptop.

Punching in

    var width = 128
    var height = 128
    var depth = 128

    var xs = []
    var ys = []
    var zs = []

    var data = []
    for (var z=0; z<depth; z++)
    for (var y=0; y<height; y++)
    for (var x=0; x<width; x++) {
        xs.push(2*x/width);
        ys.push(3*y/height);
        zs.push(z/depth);
        var value = Math.pow(Math.abs((10000 + (0.5+Math.random())*500 * (
            Math.sin(2 * 2*Math.PI*(z/depth-0.5)) +
            Math.cos(3 * 2*Math.PI*(x*x/(width*width)-0.5)) +
            Math.sin(4 * 2*Math.PI*(y*z/(height*depth)-0.5))
        )) * Math.pow(z/depth,1/3) * (1-Math.sqrt(x*x / width*width + y*y / height*height)) % 500000)/1e6, 2);
        data[z*height*width + y*width + x] = value
    }

    var opacityscale = []
    for (var i=0; i<16; i++) {
        opacityscale[i] = [i/15, Math.pow(i/15, 1.2)]
    }

    Plotly.newPlot(gd, [{
      type: 'volume',

      x: xs,
      y: ys,
      z: zs,

      value: data,

      cmin: 0.05,
      cmax: 0.22,

      imin: 0.05,
      imax: 0.25,

      opacity: 0.05,

      colorscale: 'Portland',
      opacityscale: opacityscale
    }])

gives me a blank scene and:

Applying a patch similar to gl-vis/gl-cone3d@a9e5bb3 does not seem to resolve the issue. @kig do these console errors look familiar to you?

Moreover, @kig , would you be interested in adding 2 or 3 "data"/"layout" mocks in test/image/mocks/ and a few jasmine tests similar to:

Volume trace don't have hover, so that's one less thing to worry about, but we should make sure autorange and Plotly.restyle behave correctly.

etpinard · 2018-09-21T18:53:38Z

src/traces/volume/convert.js

+        return simpleMap(arr, function(v) { return ax.d2l(v) * scale; });
+    }
+
+    var xs = getSequence(trace.x);


How is this different / better than

plotly.js/src/traces/streamtube/convert.js

Lines 64 to 66 in 2a3dc26

function distinctVals(col) {

return Lib.distinctVals(col).vals;

}

used in streamtubes?

Ooh, good to see. I'll change it to use Lib.distinctVals to have a single reference for this kind of function.

FWIW, getSequence operates on an array of sequences sorted in ascending order and returns the unique values of the first sequence. E.g. [1,1,2,2,3,3,1,1,2,2,3,3] -> [1,2,3]. So it is a bit more performant for this kind of data (no need to sort, can bail out after the first sequence), but I don't think it's worth the maintenance burden.

Thanks for the info @kig !

I don't think it's worth the maintenance burden.

I think so too. 👍

etpinard · 2018-09-21T18:55:37Z

src/traces/volume/attributes.js

+        ].join(' ')
+    },
+
+    value: {


I pushed this in a couple months ago, but thinking about this again, I think values (n.b. plural) would be better. It would match values attributes in pie, splom and parcoords traces.

etpinard · 2018-09-21T18:56:58Z

src/traces/volume/convert.js

+var proto = Volume.prototype;
+
+proto.handlePick = function(selection) {
+    // TODO


We should just return here if we're not going to implement hover for volume traces.

etpinard · 2018-09-21T18:59:34Z

src/traces/volume/attributes.js

+        ].join(' ')
+    },
+
+    imin: {


I forget. Did we settle on imin / imax in the past? If not, I think I would prefer vmin and vmax to match the v in values.

We should also explain how this pair of attributes is related to cmin / cmax

volumeOpts.isoBounds = [trace.cmin, trace.cmax]; volumeOpts.intensityBounds = [ trace.imin === undefined ? trace.cmin : trace.imin, trace.imax === undefined ? trace.cmax : trace.imax ];

in the attribute description.

etpinard · 2018-09-21T19:13:32Z

src/traces/volume/attributes.js

+attrs.hoverinfo = extendFlat({}, baseAttrs.hoverinfo, {
+    editType: 'calc',
+    flags: ['x', 'y', 'z', 'intensity', 'text', 'name'],
+    dflt: 'x+y+z+intensity+text+name'


We should remove hoverinfo completely, as we're not implementing a hover handler in this first iteration.

kig · 2018-10-03T12:34:58Z

@etpinard The gl-texture2d failure is likely because a 128x128x128 volume tries to create a 16kpx high texture. 64x64x64 should work. I'm working on a proper fix to this issue by laying out the slices on a grid (and eventually using that as a raymarchable volume).

etpinard · 2018-10-03T14:02:22Z

The gl-texture2d failure is likely because a 128x128x128 volume tries to create a 16kpx high texture. 64x64x64 should work. I'm working on a proper fix to this issue by laying out the slices on a grid (and eventually using that as a raymarchable volume).

Awesome 👌

etpinard · 2018-10-29T22:22:12Z

@archmoj could you try pulling down this branch, npm i, npm start and opening up mock gl3d_volume-simple. I'm getting

and I'd like to confirm I'm not the only one.

archmoj · 2018-10-30T00:57:46Z

@etpinard Yes I am getting the same errors on Ubuntu & Windows too.

kig added 5 commits June 23, 2018 16:43

initial scaffolding for volume trace

6a9c27b

volume convert, pass gl to volume generator

31fbc97

volume attributes tweaks, something renders

d3fc93f

volume trace rendering sort of works, automatic default isoBounds

9e8378d

volume: add opacityscale param

0691672

kig added feature something new status: in progress labels Jun 25, 2018

kig and others added 4 commits June 25, 2018 17:26

fix volume update, cooler example function

a48ee0e

Merge branch 'master' into volume-traces

27e6334

add gl-volume3d (w/ updated deps) to package-lock

e0d7fa1

use 'value' instead of 'u'

bbaaebb

jackparmer assigned kig Jul 27, 2018

kig and others added 6 commits August 27, 2018 16:47

add gl-volume3d npm package

c392a7d

add volume to lib/index-gl3d.js

d7ae2fd

createvolumeTrace -> createVolumeTrace

ce212cb

volume trace hover text scaffolding

6866c18

add roles to volume attributes

379efe6

Merge branch 'master' into volume-traces

61b9f60

alexcjohnson reviewed Sep 12, 2018

View reviewed changes

kig added 2 commits September 13, 2018 17:09

volume lint fixes

34a1aa7

volume: remove boundmin/max, use default opacity, describe opacitymap…

4f11e35

… and make it colorscale-like

alexcjohnson reviewed Sep 13, 2018

View reviewed changes

kig added 2 commits September 20, 2018 14:16

fix lint issue

0b06423

volume/convert.js: bring back trace.opacity

34b40f0

etpinard reviewed Sep 21, 2018

View reviewed changes

volume: document vmin, vmax, cmin, cmax, rename value to values

4c6f59c

volume plot tests, initial scaffold

d788250

etpinard added 2 commits October 29, 2018 18:16

Merge branch 'master' into volume-traces

7107b68

bump gl-volume3d to kig's latest

8f93b02

etpinard unassigned kig Dec 12, 2018

archmoj mentioned this pull request Jan 24, 2019

Volume3d iso #3479

Closed

archmoj closed this Jan 24, 2019

etpinard deleted the volume-traces branch February 12, 2019 14:45

	function distinctVals(col) {
	return Lib.distinctVals(col).vals;
	}

Uh oh!

Volume traces #2753

Volume traces #2753

Uh oh!

Conversation

kig commented Jun 25, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

etpinard left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

kig commented Oct 3, 2018

Uh oh!

etpinard commented Oct 3, 2018

Uh oh!

etpinard commented Oct 29, 2018

Uh oh!

archmoj commented Oct 30, 2018

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

kig commented Jun 25, 2018 •

edited

Loading