support axis order in direct-volume shader

src/mol-geo/geometry/direct-volume/direct-volume.ts

@@ -47,6 +47,7 @@ export interface DirectVolume {
     readonly unitToCartn: ValueCell<Mat4>
     readonly cartnToUnit: ValueCell<Mat4>
     readonly packedGroup: ValueCell<boolean>
+    readonly axisOrder: ValueCell<Vec3>
 
     /** Bounding sphere of the volume */
     readonly boundingSphere: Sphere3D
@@ -55,10 +56,10 @@ export interface DirectVolume {
 }
 
 export namespace DirectVolume {
-    export function create(bbox: Box3D, gridDimension: Vec3, transform: Mat4, unitToCartn: Mat4, cellDim: Vec3, texture: Texture, stats: Grid['stats'], packedGroup: boolean, directVolume?: DirectVolume): DirectVolume {
+    export function create(bbox: Box3D, gridDimension: Vec3, transform: Mat4, unitToCartn: Mat4, cellDim: Vec3, texture: Texture, stats: Grid['stats'], packedGroup: boolean, axisOrder: Vec3, directVolume?: DirectVolume): DirectVolume {
         return directVolume ?
-            update(bbox, gridDimension, transform, unitToCartn, cellDim, texture, stats, packedGroup, directVolume) :
-            fromData(bbox, gridDimension, transform, unitToCartn, cellDim, texture, stats, packedGroup);
+            update(bbox, gridDimension, transform, unitToCartn, cellDim, texture, stats, packedGroup, axisOrder, directVolume) :
+            fromData(bbox, gridDimension, transform, unitToCartn, cellDim, texture, stats, packedGroup, axisOrder);
     }
 
     function hashCode(directVolume: DirectVolume) {
@@ -69,7 +70,7 @@ export namespace DirectVolume {
         ]);
     }
 
-    function fromData(bbox: Box3D, gridDimension: Vec3, transform: Mat4, unitToCartn: Mat4, cellDim: Vec3, texture: Texture, stats: Grid['stats'], packedGroup: boolean): DirectVolume {
+    function fromData(bbox: Box3D, gridDimension: Vec3, transform: Mat4, unitToCartn: Mat4, cellDim: Vec3, texture: Texture, stats: Grid['stats'], packedGroup: boolean, axisOrder: Vec3): DirectVolume {
         const boundingSphere = Sphere3D();
         let currentHash = -1;
 
@@ -100,6 +101,7 @@ export namespace DirectVolume {
                 return boundingSphere;
             },
             packedGroup: ValueCell.create(packedGroup),
+            axisOrder: ValueCell.create(axisOrder),
             setBoundingSphere(sphere: Sphere3D) {
                 Sphere3D.copy(boundingSphere, sphere);
                 currentHash = hashCode(directVolume);
@@ -108,7 +110,7 @@ export namespace DirectVolume {
         return directVolume;
     }
 
-    function update(bbox: Box3D, gridDimension: Vec3, transform: Mat4, unitToCartn: Mat4, cellDim: Vec3, texture: Texture, stats: Grid['stats'], packedGroup: boolean, directVolume: DirectVolume): DirectVolume {
+    function update(bbox: Box3D, gridDimension: Vec3, transform: Mat4, unitToCartn: Mat4, cellDim: Vec3, texture: Texture, stats: Grid['stats'], packedGroup: boolean, axisOrder: Vec3, directVolume: DirectVolume): DirectVolume {
         const width = texture.getWidth();
         const height = texture.getHeight();
         const depth = texture.getDepth();
@@ -125,6 +127,7 @@ export namespace DirectVolume {
         ValueCell.update(directVolume.unitToCartn, unitToCartn);
         ValueCell.update(directVolume.cartnToUnit, Mat4.invert(Mat4(), unitToCartn));
         ValueCell.updateIfChanged(directVolume.packedGroup, packedGroup);
+        ValueCell.updateIfChanged(directVolume.axisOrder, Vec3.fromArray(directVolume.axisOrder.ref.value, axisOrder, 0));
         return directVolume;
     }
 
@@ -137,7 +140,8 @@ export namespace DirectVolume {
         const texture = createNullTexture();
         const stats = Grid.One.stats;
         const packedGroup = false;
-        return create(bbox, gridDimension, transform, unitToCartn, cellDim, texture, stats, packedGroup, directVolume);
+        const axisOrder = Vec3.create(0, 1, 2);
+        return create(bbox, gridDimension, transform, unitToCartn, cellDim, texture, stats, packedGroup, axisOrder, directVolume);
     }
 
     export const Params = {
@@ -260,6 +264,7 @@ export namespace DirectVolume {
             uCartnToUnit: directVolume.cartnToUnit,
             uUnitToCartn: directVolume.unitToCartn,
             dPackedGroup: directVolume.packedGroup,
+            dAxisOrder: ValueCell.create(directVolume.axisOrder.ref.value.join('')),
 
             dIgnoreLight: ValueCell.create(props.ignoreLight),
             dXrayShaded: ValueCell.create(props.xrayShaded),

src/mol-gl/renderable/direct-volume.ts

@@ -37,6 +37,7 @@ export const DirectVolumeSchema = {
     uCartnToUnit: UniformSpec('m4'),
     uUnitToCartn: UniformSpec('m4'),
     dPackedGroup: DefineSpec('boolean'),
+    dAxisOrder: DefineSpec('string', ['012', '021', '102', '120', '201', '210']),
 
     dIgnoreLight: DefineSpec('boolean'),
     dXrayShaded: DefineSpec('boolean'),

src/mol-gl/shader/direct-volume.frag.ts

@@ -254,7 +254,20 @@ vec4 raymarch(vec3 startLoc, vec3 step, vec3 rayDir) {
             float group = decodeFloatRGB(textureGroup(floor(unitPos * uGridDim + 0.5) / uGridDim).rgb);
         #else
             vec3 g = floor(unitPos * uGridDim + 0.5);
-            float group = g.z + g.y * uGridDim.z + g.x * uGridDim.z * uGridDim.y;
+            // note that we swap x and z because the texture is flipped around y
+            #if defined(dAxisOrder_012)
+                float group = g.z + g.y * uGridDim.z + g.x * uGridDim.z * uGridDim.y; // 210
+            #elif defined(dAxisOrder_021)
+                float group = g.y + g.z * uGridDim.y + g.x * uGridDim.y * uGridDim.z; // 120
+            #elif defined(dAxisOrder_102)
+                float group = g.z + g.x * uGridDim.z + g.y * uGridDim.z * uGridDim.x; // 201
+            #elif defined(dAxisOrder_120)
+                float group = g.x + g.z * uGridDim.x + g.y * uGridDim.x * uGridDim.z; // 021
+            #elif defined(dAxisOrder_201)
+                float group = g.y + g.x * uGridDim.y + g.z * uGridDim.y * uGridDim.x; // 102
+            #elif defined(dAxisOrder_210)
+                float group = g.x + g.y * uGridDim.x + g.z * uGridDim.x * uGridDim.y; // 012
+            #endif
         #endif
 
         #if defined(dColorType_direct) && defined(dUsePalette)

src/mol-repr/structure/visual/gaussian-density-volume.ts

@@ -31,8 +31,8 @@ async function createGaussianDensityVolume(ctx: VisualContext, structure: Struct
 
     const unitToCartn = Mat4.mul(Mat4(), transform, Mat4.fromScaling(Mat4(), gridDim));
     const cellDim = Mat4.getScaling(Vec3(), transform);
-
-    const vol = DirectVolume.create(bbox, gridDim, transform, unitToCartn, cellDim, texture, stats, true, directVolume);
+    const axisOrder = Vec3.create(0, 1, 2);
+    const vol = DirectVolume.create(bbox, gridDim, transform, unitToCartn, cellDim, texture, stats, true, axisOrder, directVolume);
 
     const sphere = Sphere3D.expand(Sphere3D(), structure.boundary.sphere, props.radiusOffset + getStructureExtraRadius(structure));
     vol.setBoundingSphere(sphere);
@@ -87,8 +87,8 @@ async function createUnitsGaussianDensityVolume(ctx: VisualContext, unit: Unit,
 
     const unitToCartn = Mat4.mul(Mat4(), transform, Mat4.fromScaling(Mat4(), gridDim));
     const cellDim = Mat4.getScaling(Vec3(), transform);
-
-    const vol = DirectVolume.create(bbox, gridDim, transform, unitToCartn, cellDim, texture, stats, true, directVolume);
+    const axisOrder = Vec3.create(0, 1, 2);
+    const vol = DirectVolume.create(bbox, gridDim, transform, unitToCartn, cellDim, texture, stats, true, axisOrder, directVolume);
 
     const sphere = Sphere3D.expand(Sphere3D(), unit.boundary.sphere, props.radiusOffset + getUnitExtraRadius(unit));
     vol.setBoundingSphere(sphere);

src/mol-repr/volume/direct-volume.ts

@@ -48,7 +48,8 @@ export function createDirectVolume2d(ctx: RuntimeContext, webgl: WebGLContext, v
     texture.load(textureImage);
 
     const { unitToCartn, cellDim } = getUnitToCartn(volume.grid);
-    return DirectVolume.create(bbox, gridDimension, transform, unitToCartn, cellDim, texture, volume.grid.stats, false, directVolume);
+    const axisOrder = volume.grid.cells.space.axisOrderSlowToFast as Vec3;
+    return DirectVolume.create(bbox, gridDimension, transform, unitToCartn, cellDim, texture, volume.grid.stats, false, axisOrder, directVolume);
 }
 
 // 3d volume texture
@@ -89,7 +90,8 @@ export function createDirectVolume3d(ctx: RuntimeContext, webgl: WebGLContext, v
     texture.load(textureVolume);
 
     const { unitToCartn, cellDim } = getUnitToCartn(volume.grid);
-    return DirectVolume.create(bbox, gridDimension, transform, unitToCartn, cellDim, texture, volume.grid.stats, false, directVolume);
+    const axisOrder = volume.grid.cells.space.axisOrderSlowToFast as Vec3;
+    return DirectVolume.create(bbox, gridDimension, transform, unitToCartn, cellDim, texture, volume.grid.stats, false, axisOrder, directVolume);
 }
 
 //