fix(Glyph3DMapper): use correct shift-scale transform

Previous function to apply shift and scale transform to the
existing glyph matrix was incorrect
because it did not account for scaling of rotation components.
The glyph matrices can contain rotation components, which
when combined with a shift-scale operation will get affected by
scaling.

It is therefore, better to use proper matrix multiplications
rather than trying to recreate the effect through manipulation of
individual components of a matrix.

Author: jadh4v

Sources/Rendering/OpenGL/CellArrayBufferObject/helpers.js

@@ -1,3 +1,5 @@
+import { mat4, quat, vec3 } from 'gl-matrix';
+
 export function computeCoordShiftAndScale(points) {
   // Find out if shift scale should be used
   // Compute squares of diagonal size and distance from the origin
@@ -41,4 +43,19 @@ export function computeCoordShiftAndScale(points) {
   };
 }
 
-export default { computeCoordShiftAndScale };
+export function computeInverseShiftAndScaleMatrix(coordShift, coordScale) {
+  const inverseScale = new Float64Array(3);
+  vec3.inverse(inverseScale, coordScale);
+
+  const matrix = new Float64Array(16);
+  mat4.fromRotationTranslationScale(
+    matrix,
+    quat.create(),
+    coordShift,
+    inverseScale
+  );
+
+  return matrix;
+}
+
+export default { computeCoordShiftAndScale, computeInverseShiftAndScaleMatrix };

Sources/Rendering/OpenGL/CellArrayBufferObject/index.js

@@ -1,32 +1,20 @@
-import { mat4, quat, vec3 } from 'gl-matrix';
+import { vec3 } from 'gl-matrix';
 
 import macro from 'vtk.js/Sources/macros';
 import vtkBufferObject from 'vtk.js/Sources/Rendering/OpenGL/BufferObject';
 import { ObjectType } from 'vtk.js/Sources/Rendering/OpenGL/BufferObject/Constants';
 import { Representation } from 'vtk.js/Sources/Rendering/Core/Property/Constants';
-import { computeCoordShiftAndScale } from 'vtk.js/Sources/Rendering/OpenGL/CellArrayBufferObject/helpers';
+import {
+  computeCoordShiftAndScale,
+  computeInverseShiftAndScaleMatrix,
+} from 'vtk.js/Sources/Rendering/OpenGL/CellArrayBufferObject/helpers';
 
 const { vtkErrorMacro } = macro;
 
 // ----------------------------------------------------------------------------
 // Static functions
 // ----------------------------------------------------------------------------
 
-function computeInverseShiftAndScaleMatrix(coordShift, coordScale) {
-  const inverseScale = new Float64Array(3);
-  vec3.inverse(inverseScale, coordScale);
-
-  const matrix = new Float64Array(16);
-  mat4.fromRotationTranslationScale(
-    matrix,
-    quat.create(),
-    coordShift,
-    inverseScale
-  );
-
-  return matrix;
-}
-
 function shouldApplyCoordShiftAndScale(coordShift, coordScale) {
   if (coordShift === null || coordScale === null) {
     return false;

Sources/Rendering/OpenGL/Glyph3DMapper/index.js

@@ -7,7 +7,10 @@ import vtkHardwareSelector from 'vtk.js/Sources/Rendering/OpenGL/HardwareSelecto
 import vtkProperty from 'vtk.js/Sources/Rendering/Core/Property';
 import vtkOpenGLPolyDataMapper from 'vtk.js/Sources/Rendering/OpenGL/PolyDataMapper';
 import vtkShaderProgram from 'vtk.js/Sources/Rendering/OpenGL/ShaderProgram';
-import { computeCoordShiftAndScale } from 'vtk.js/Sources/Rendering/OpenGL/CellArrayBufferObject/helpers';
+import {
+  computeCoordShiftAndScale,
+  computeInverseShiftAndScaleMatrix,
+} from 'vtk.js/Sources/Rendering/OpenGL/CellArrayBufferObject/helpers';
 
 import { registerOverride } from 'vtk.js/Sources/Rendering/OpenGL/ViewNodeFactory';
 import { primTypes } from '../Helper';
@@ -23,16 +26,6 @@ const EndEvent = { type: 'EndEvent' };
 const MAT4_BYTE_SIZE = 64;
 const MAT4_ELEMENT_COUNT = 16;
 
-function applyShiftScaleToMat(mat, shift, scale) {
-  // the translation component of a 4x4 column-major matrix
-  mat[12] = (mat[12] - shift[0]) * scale[0];
-  mat[13] = (mat[13] - shift[1]) * scale[1];
-  mat[14] = (mat[14] - shift[2]) * scale[2];
-  mat[0] *= scale[0];
-  mat[5] *= scale[1];
-  mat[10] *= scale[2];
-}
-
 // ----------------------------------------------------------------------------
 // vtkOpenGLSphereMapper methods
 // ----------------------------------------------------------------------------
@@ -714,13 +707,18 @@ function vtkOpenGLGlyph3DMapper(publicAPI, model) {
 
       if (useShiftAndScale) {
         const buf = garray.buffer;
+        const shiftScaleMat = computeInverseShiftAndScaleMatrix(
+          coordShift,
+          coordScale
+        );
+        mat4.invert(shiftScaleMat, shiftScaleMat);
         for (
           let ptIdx = 0;
           ptIdx < garray.byteLength;
           ptIdx += MAT4_BYTE_SIZE
         ) {
           const mat = new Float32Array(buf, ptIdx, MAT4_ELEMENT_COUNT);
-          applyShiftScaleToMat(mat, coordShift, coordScale);
+          mat4.multiply(mat, shiftScaleMat, mat);
         }
       }