Flickering colours at intermediate time steps #389

K3D-tools · Dec 16, 2022 · 5ec953a · 5ec953a
1 parent 40fabbf
commit 5ec953a
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 15 deletions.
diff --git a/js/src/core/lib/timeSeries.js b/js/src/core/lib/timeSeries.js
@@ -2,7 +2,7 @@
 
 const THREE = require('three');
 const _ = require('../../lodash');
-const { pow10ceil } = require('./helpers/math');
+const {pow10ceil} = require('./helpers/math');
 
 function clone(val) {
     if (typeof (val) === 'object') {
@@ -116,8 +116,25 @@ function interpolate(a, b, f, property) {
         maxLength = Math.max(a.data.length, b.data.length);
         interpolated = new a.data.constructor(maxLength);
 
-        for (i = 0; i < minLength; i++) {
-            interpolated[i] = a.data[i] + f * (b.data[i] - a.data[i]);
+        if (property === 'colors') {
+            for (i = 0; i < minLength; i++) {
+                let r1 = (a.data[i] & 255);
+                let r2 = (b.data[i] & 255);
+                let g1 = ((a.data[i] >> 8) & 255);
+                let g2 = ((b.data[i] >> 8) & 255);
+                let b1 = ((a.data[i] >> 16) & 255);
+                let b2 = ((b.data[i] >> 16) & 255);
+
+                let rf = Math.round(r1 + f * (r2 - r1));
+                let gf = Math.round(g1 + f * (g2 - g1));
+                let bf = Math.round(b1 + f * (b2 - b1));
+
+                interpolated[i] = (bf << 16) | (gf << 8) | rf;
+            }
+        } else {
+            for (i = 0; i < minLength; i++) {
+                interpolated[i] = a.data[i] + f * (b.data[i] - a.data[i]);
+            }
         }
 
         if (minLength !== maxLength) {
@@ -230,7 +247,7 @@ module.exports = {
             if (json[property] && typeof (json[property].timeSeries) !== 'undefined') {
                 keypoints = Object.keys(json[property]).reduce((p, k) => {
                     if (!Number.isNaN(parseFloat(k))) {
-                        p.push({ v: parseFloat(k), k });
+                        p.push({v: parseFloat(k), k});
                     }
 
                     return p;
@@ -271,7 +288,7 @@ module.exports = {
             }
         });
 
-        return { json: interpolatedJson, changes };
+        return {json: interpolatedJson, changes};
     },
 
     getObjectsWithTimeSeriesAndMinMax,

diff --git a/js/src/providers/threejs/objects/PointsBillboard.js b/js/src/providers/threejs/objects/PointsBillboard.js
@@ -3,9 +3,10 @@ const buffer = require('../../../core/lib/helpers/buffer');
 const colorMapHelper = require('../../../core/lib/helpers/colorMap');
 const Fn = require('../helpers/Fn');
 
-const { commonUpdate } = Fn;
-const { areAllChangesResolve } = Fn;
-const { getColorsArray } = Fn;
+const {commonUpdate} = Fn;
+const {areAllChangesResolve} = Fn;
+const {getColorsArray} = Fn;
+const {colorsToFloat32Array} = buffer;
 
 /**
  * Loader strategy to handle Points object
@@ -20,13 +21,12 @@ module.exports = {
         const color = new THREE.Color(config.color);
         const pointPositions = config.positions.data;
         const pointColors = (config.colors && config.colors.data) || null;
-        const { shader } = config;
+        const {shader} = config;
         let colors = null;
         const opacities = (config.opacities && config.opacities.data
             && config.opacities.data.length === pointPositions.length / 3) ? config.opacities.data : null;
         const sizes = (config.point_sizes && config.point_sizes.data
             && config.point_sizes.data.length === pointPositions.length / 3) ? config.point_sizes.data : null;
-        const { colorsToFloat32Array } = buffer;
         const fragmentShaderMap = {
             dot: require('./shaders/Points.dot.fragment.glsl'),
             flat: require('./shaders/Points.flat.fragment.glsl'),
@@ -74,13 +74,13 @@ module.exports = {
             colormap.needsUpdate = true;
 
             uniforms = {
-                low: { value: colorRange[0] },
-                high: { value: colorRange[1] },
-                colormap: { type: 't', value: colormap },
+                low: {value: colorRange[0]},
+                high: {value: colorRange[1]},
+                colormap: {type: 't', value: colormap},
             };
         } else {
             colors = (pointColors && pointColors.length === pointPositions.length / 3
-                ? colorsToFloat32Array(pointColors) : getColorsArray(color, pointPositions.length / 3)
+                    ? colorsToFloat32Array(pointColors) : getColorsArray(color, pointPositions.length / 3)
             );
         }
 
@@ -177,11 +177,18 @@ module.exports = {
             resolvedChanges.attribute = null;
         }
 
+        if (typeof (changes.colors) !== 'undefined' && !changes.colors.timeSeries
+            && changes.colors.data.length === obj.geometry.attributes.color.array.length / 3) {
+            obj.geometry.attributes.color.array.set(colorsToFloat32Array(changes.colors.data));
+            obj.geometry.attributes.color.needsUpdate = true;
+
+            resolvedChanges.colors = null;
+        }
 
         commonUpdate(config, changes, resolvedChanges, obj, K3D);
 
         if (areAllChangesResolve(changes, resolvedChanges)) {
-            return Promise.resolve({ json: config, obj });
+            return Promise.resolve({json: config, obj});
         }
         return false;
     },