lore-engine - npm Package Compare versions

Comparing version 1.0.16 to 1.0.17

example/flybrain1.js

@@ -1,77 +0,83 @@
-(function() {
-    let lore = Lore.init('lore', {
-        clearColor: '#222222'
-    });
-    
-    let fileReader = new Lore.IO.CsvFileReader('input-upload', {
-        cols: [0, 1, 2, 3],
-        types: ['Uint16Array', 'Uint16Array', 'Uint16Array', 'Float32Array']
-    });
-    
-    let pointHelper = null;
-    let octreeHelper = null;
-    let original_data = null;
+(function () {
+  let lore = Lore.init('lore', {
+    clearColor: '#222222'
+  });
 
-    fileReader.addEventListener('loaded', function(data) {
-        original_data = data;
-        pointHelper = new Lore.Helpers.PointHelper(lore, 'Seppli', 'simpleSphere');
-        pointHelper.setPositionsXYZHSS(data['x'], data['y'], data['z'], data['c'], 1.0, 1.0)
-        pointHelper.setPointScale(1.0);
-        pointHelper.setFog([0.05, 0.05, 0.05, 1.0], 6.0);
-        pointHelper.addFilter('hueRange', new Lore.Filters.InRangeFilter('color', 0, 0.22, 0.25));
-        
-        lore.controls.setLookAt(pointHelper.getCenter());
-        lore.controls.setRadius(pointHelper.getMaxRadius());
+  let fileReader = new Lore.IO.CsvFileReader('input-upload', {
+    cols: [0, 1, 2, 3],
+    types: ['Uint16Array', 'Uint16Array', 'Uint16Array', 'Float32Array']
+  });
 
-        octreeHelper = new Lore.Helpers.OctreeHelper(lore, 'OctreeGeometry', 'tree', pointHelper, {
-            visualize: false
-        });
+  let pointHelper = null;
+  let octreeHelper = null;
+  let original_data = null;
+
+  // let hsl = Lore.Core.Color.rgbToHsl(122, 22, 255);
+  // let hsl_enc = Lore.Core.Color.hslToFloat(hsl[0], hsl[1], hsl[2]);
+  // let hsl_back = Lore.Core.Color.floatToHsl(hsl_enc);
+  // console.log(hsl, hsl_enc, hsl_back);
+
+  fileReader.addEventListener('loaded', function (data) {
+    original_data = data;
+
+    pointHelper = new Lore.Helpers.PointHelper(lore, 'Seppli', 'simpleSphere');
+    pointHelper.setPositionsXYZHSS(data['x'], data['y'], data['z'], data['c'], 1.0, 1.0)
+    pointHelper.setPointScale(1.0);
+    pointHelper.setFog([0.05, 0.05, 0.05, 1.0], 6.0);
+    pointHelper.addFilter('hueRange', new Lore.Filters.InRangeFilter('color', 0, 0.22, 0.25));
+
+    lore.controls.setLookAt(pointHelper.getCenter());
+    lore.controls.setRadius(pointHelper.getMaxRadius());
+
+    octreeHelper = new Lore.Helpers.OctreeHelper(lore, 'OctreeGeometry', 'tree', pointHelper, {
+      visualize: false
     });
+  });
 
-    document.addEventListener('keydown', function(e) {
-        if (e.keyCode === 48) {
-            let filter = pointHelper.getFilter('hueRange');
-            filter.reset();
-        } else if (e.keyCode === 49) {
-            let filter = pointHelper.getFilter('hueRange');
-            filter.setMin(0.0);
-            filter.setMax(0.05);
-            filter.filter();
-        } else if (e.keyCode == 50) {
-            let filter = pointHelper.getFilter('hueRange');
-            filter.setMin(0.1);
-            filter.setMax(0.15);
-            filter.filter();
-        } else if (e.keyCode == 51) {
-            let filter = pointHelper.getFilter('hueRange');
-            filter.setMin(0.2);
-            filter.setMax(0.25);
-            filter.filter();
-        } else if (e.keyCode == 52) {
-            let filter = pointHelper.getFilter('hueRange');
-            filter.setMin(0.4);
-            filter.setMax(0.45);
-            filter.filter();
-        } else if (e.keyCode == 53) {
-            let filter = pointHelper.getFilter('hueRange');
-            filter.setMin(0.6);
-            filter.setMax(0.65);
-            filter.filter();
-        } else if (e.keyCode == 54) {
-            let filter = pointHelper.getFilter('hueRange');
-            filter.setMin(0.8);
-            filter.setMax(0.85);
-            filter.filter();
-        } else if (e.keyCode == 55) {
-            
-        } else if (e.keyCode == 56) {
-            
-        } else if (e.keyCode == 57) {
-            
-        } else if (e.keyCode == 58) {
-            
-        } else if (e.keyCode == 59) {
-            
-        }
-    });
+  document.addEventListener('keydown', function (e) {
+    if (e.keyCode === 48) {
+      let filter = pointHelper.getFilter('hueRange');
+      filter.reset();
+    } else if (e.keyCode === 49) {
+      let filter = pointHelper.getFilter('hueRange');
+      filter.setMin(0.0);
+      filter.setMax(0.05);
+      filter.filter();
+    } else if (e.keyCode == 50) {
+      let filter = pointHelper.getFilter('hueRange');
+      filter.setMin(0.05);
+      filter.setMax(0.15);
+      filter.filter();
+    } else if (e.keyCode == 51) {
+      let filter = pointHelper.getFilter('hueRange');
+      filter.setMin(0.15);
+      filter.setMax(0.25);
+      filter.filter();
+    } else if (e.keyCode == 52) {
+      let filter = pointHelper.getFilter('hueRange');
+      filter.setMin(0.35);
+      filter.setMax(0.45);
+      filter.filter();
+    } else if (e.keyCode == 53) {
+      let filter = pointHelper.getFilter('hueRange');
+      filter.setMin(0.55);
+      filter.setMax(0.65);
+      filter.filter();
+    } else if (e.keyCode == 54) {
+      let filter = pointHelper.getFilter('hueRange');
+      filter.setMin(0.75);
+      filter.setMax(0.85);
+      filter.filter();
+    } else if (e.keyCode == 55) {
+
+    } else if (e.keyCode == 56) {
+
+    } else if (e.keyCode == 57) {
+
+    } else if (e.keyCode == 58) {
+
+    } else if (e.keyCode == 59) {
+
+    }
+  });
 })();

example/flybrain2.js

@@ -1,91 +0,91 @@
-(function() {
-    let lore = Lore.init('lore', {
-        clearColor: '#222222'
+(function () {
+  let lore = Lore.init('lore', {
+    clearColor: '#222222'
+  });
+
+  let fileReader = new Lore.IO.CsvFileReader('input-upload', {
+    cols: [0, 1, 2, 3],
+    types: ['Uint16Array', 'Uint16Array', 'Uint16Array', 'Float32Array']
+  });
+  let pointHelper = null;
+  let octreeHelper = null;
+  let original_data = null;
+
+  fileReader.addEventListener('loaded', function (data) {
+    original_data = data;
+    pointHelper = new Lore.Helpers.PointHelper(lore, 'Seppli', 'defaultSquare');
+    pointHelper.setPositionsXYZHSS(data['x'], data['y'], data['z'], data['c'], 1.0, 1.0)
+    pointHelper.setPointScale(1.0);
+    pointHelper.setFog([0.05, 0.05, 0.05, 1.0], 6.0);
+    pointHelper.addFilter('hueRange', new Lore.Filters.InRangeFilter('color', 0, 0.22, 0.25));
+
+    lore.controls.setLookAt(pointHelper.getCenter());
+    lore.controls.setRadius(pointHelper.getMaxRadius());
+
+    octreeHelper = new Lore.Helpers.OctreeHelper(lore, 'OctreeGeometry', 'tree', pointHelper, {
+      visualize: 'cubes'
     });
-    
-    let fileReader = new Lore.IO.CsvFileReader('input-upload', {
-        cols: [0, 1, 2, 3],
-        types: ['Uint16Array', 'Uint16Array', 'Uint16Array', 'Float32Array']
+
+    octreeHelper.addEventListener('hoveredchanged', function (e) {
+      let indicator = document.getElementById('indicator');
+      let data = document.getElementById('data');
+
+      if (e.e) {
+        indicator.style.opacity = 1.0;
+        indicator.style.left = (e.e.screenPosition[0] - 2) + 'px';
+        indicator.style.top = (e.e.screenPosition[1] - 10) + 'px';
+        data.innerHTML = '(' + original_data['x'][e.e.index] + ',' + original_data['y'][e.e.index] + ',' + original_data['z'][e.e.index] + ')';
+      } else {
+        indicator.style.opacity = 0.0;
+        data.innerHTML = '';
+      }
     });
-    let pointHelper = null;
-    let octreeHelper = null;
-    let original_data = null;
+  });
 
-    fileReader.addEventListener('loaded', function(data) {
-        original_data = data;
-        pointHelper = new Lore.Helpers.PointHelper(lore, 'Seppli', 'defaultSquare');
-        pointHelper.setPositionsXYZHSS(data['x'], data['y'], data['z'], data['c'], 1.0, 1.0)
-        pointHelper.setPointScale(1.0);
-        pointHelper.setFog([0.05, 0.05, 0.05, 1.0], 6.0);
-        pointHelper.addFilter('hueRange', new Lore.Filters.InRangeFilter('color', 0, 0.22, 0.25));
-        
-        lore.controls.setLookAt(pointHelper.getCenter());
-        lore.controls.setRadius(pointHelper.getMaxRadius());
+  document.addEventListener('keydown', function (e) {
+    if (e.keyCode === 48) {
+      let filter = pointHelper.getFilter('hueRange');
+      filter.reset();
+    } else if (e.keyCode === 49) {
+      let filter = pointHelper.getFilter('hueRange');
+      filter.setMin(0.0);
+      filter.setMax(0.05);
+      filter.filter();
+    } else if (e.keyCode == 50) {
+      let filter = pointHelper.getFilter('hueRange');
+      filter.setMin(0.05);
+      filter.setMax(0.15);
+      filter.filter();
+    } else if (e.keyCode == 51) {
+      let filter = pointHelper.getFilter('hueRange');
+      filter.setMin(0.15);
+      filter.setMax(0.25);
+      filter.filter();
+    } else if (e.keyCode == 52) {
+      let filter = pointHelper.getFilter('hueRange');
+      filter.setMin(0.35);
+      filter.setMax(0.45);
+      filter.filter();
+    } else if (e.keyCode == 53) {
+      let filter = pointHelper.getFilter('hueRange');
+      filter.setMin(0.55);
+      filter.setMax(0.65);
+      filter.filter();
+    } else if (e.keyCode == 54) {
+      let filter = pointHelper.getFilter('hueRange');
+      filter.setMin(0.75);
+      filter.setMax(0.85);
+      filter.filter();
+    } else if (e.keyCode == 55) {
 
-        octreeHelper = new Lore.Helpers.OctreeHelper(lore, 'OctreeGeometry', 'tree', pointHelper, {
-            visualize: 'cubes'
-        });
+    } else if (e.keyCode == 56) {
 
-        octreeHelper.addEventListener('hoveredchanged', function(e) {
-            let indicator = document.getElementById('indicator');
-            let data = document.getElementById('data');
+    } else if (e.keyCode == 57) {
 
-            if (e.e) {
-                indicator.style.opacity = 1.0;
-                indicator.style.left = (e.e.screenPosition[0] - 2) + 'px';
-                indicator.style.top = (e.e.screenPosition[1] - 10) + 'px';
-                data.innerHTML = '(' + original_data['x'][e.e.index] + ',' + original_data['y'][e.e.index] + ',' + original_data['z'][e.e.index] + ')';
-            } else {
-                indicator.style.opacity = 0.0;
-                data.innerHTML = '';
-            }
-        });
-    });
+    } else if (e.keyCode == 58) {
 
-    document.addEventListener('keydown', function(e) {
-        if (e.keyCode === 48) {
-            let filter = pointHelper.getFilter('hueRange');
-            filter.reset();
-        } else if (e.keyCode === 49) {
-            let filter = pointHelper.getFilter('hueRange');
-            filter.setMin(0.0);
-            filter.setMax(0.05);
-            filter.filter();
-        } else if (e.keyCode == 50) {
-            let filter = pointHelper.getFilter('hueRange');
-            filter.setMin(0.1);
-            filter.setMax(0.15);
-            filter.filter();
-        } else if (e.keyCode == 51) {
-            let filter = pointHelper.getFilter('hueRange');
-            filter.setMin(0.2);
-            filter.setMax(0.25);
-            filter.filter();
-        } else if (e.keyCode == 52) {
-            let filter = pointHelper.getFilter('hueRange');
-            filter.setMin(0.4);
-            filter.setMax(0.45);
-            filter.filter();
-        } else if (e.keyCode == 53) {
-            let filter = pointHelper.getFilter('hueRange');
-            filter.setMin(0.6);
-            filter.setMax(0.65);
-            filter.filter();
-        } else if (e.keyCode == 54) {
-            let filter = pointHelper.getFilter('hueRange');
-            filter.setMin(0.8);
-            filter.setMax(0.85);
-            filter.filter();
-        } else if (e.keyCode == 55) {
-            
-        } else if (e.keyCode == 56) {
-            
-        } else if (e.keyCode == 57) {
-            
-        } else if (e.keyCode == 58) {
-            
-        } else if (e.keyCode == 59) {
-            
-        }
-    });
+    } else if (e.keyCode == 59) {
+
+    }
+  });
 })();

package.json

 {
   "name": "lore-engine",
-  "version": "1.0.16",
+  "version": "1.0.17",
   "description": "A WebGL based 3D data visualization engine.",
@@ -5,0 +5,0 @@ "main": "./app.js",

README.md

@@ -6,3 +6,3 @@ ![Lore](https://github.com/reymond-group/lore/blob/master/logo.png?raw=true)
 # Lore
-Current Version: 1.0.16 ([Godzilla](https://youtu.be/RTzb-sduiWc))
+Current Version: 1.0.17 ([Godzilla](https://youtu.be/RTzb-sduiWc))
 
@@ -9,0 +9,0 @@ ### Teasers

src/Core/Color.js

@@ -9,248 +9,330 @@ //@ts-check
 class Color {
-    /**
-     * Creates an instance of Color.
-     * @param {Number} r The red component (0.0 - 1.0).
-     * @param {Number} g The green component (0.0 - 1.0).
-     * @param {Number} b The blue component (0.0 - 1.0).
-     * @param {Number} [a=1.0] The alpha component (0.0 - 1.0).
-     */
-    constructor(r, g, b, a = 1.0) {
-        if (arguments.length === 1) {
-            this.components = new Float32Array(r);
-        } else {
-            this.components = new Float32Array(4);
-            this.components[0] = r || 0.0;
-            this.components[1] = g || 0.0;
-            this.components[2] = b || 0.0;
-            this.components[3] = a || 1.0;
-        }
+  /**
+   * Creates an instance of Color.
+   * @param {Number} r The red component (0.0 - 1.0).
+   * @param {Number} g The green component (0.0 - 1.0).
+   * @param {Number} b The blue component (0.0 - 1.0).
+   * @param {Number} [a=1.0] The alpha component (0.0 - 1.0).
+   */
+  constructor(r, g, b, a = 1.0) {
+    if (arguments.length === 1) {
+      this.components = new Float32Array(r);
+    } else {
+      this.components = new Float32Array(4);
+      this.components[0] = r || 0.0;
+      this.components[1] = g || 0.0;
+      this.components[2] = b || 0.0;
+      this.components[3] = a || 1.0;
     }
+  }
 
-    /**
-     * Set the red, green, blue and alpha components of the color.
-     * 
-     * @param {Number} r The red component (0.0 - 1.0).
-     * @param {Number} g The green component (0.0 - 1.0).
-     * @param {Number} b The blue component (0.0 - 1.0).
-     * @param {Number} a The alpha component (0.0 - 1.0).
-     * @returns {Color} Returns itself.
-     */
-    set(r, g, b, a) {
-        this.components[0] = r;
-        this.components[1] = g;
-        this.components[2] = b;
+  /**
+   * Set the red, green, blue and alpha components of the color.
+   * 
+   * @param {Number} r The red component (0.0 - 1.0).
+   * @param {Number} g The green component (0.0 - 1.0).
+   * @param {Number} b The blue component (0.0 - 1.0).
+   * @param {Number} a The alpha component (0.0 - 1.0).
+   * @returns {Color} Returns itself.
+   */
+  set(r, g, b, a) {
+    this.components[0] = r;
+    this.components[1] = g;
+    this.components[2] = b;
 
-        if (arguments.length == 4) {
-            this.components[3] = a;
-        }
-
-        return this;
+    if (arguments.length == 4) {
+      this.components[3] = a;
     }
 
-    /**
-     * Get the red component of the color.
-     * 
-     * @returns {Number} The red component of the color.
-     */
-    getR() {
-      return this.components[0];
-    }
+    return this;
+  }
 
-    /**
-     * Get the green component of the color.
-     * 
-     * @returns {Number} The green component of the color.
-     */
-    getG() {
-      return this.components[0];
-    }
+  /**
+   * Get the red component of the color.
+   * 
+   * @returns {Number} The red component of the color.
+   */
+  getR() {
+    return this.components[0];
+  }
 
-    /**
-     * Get the blue component of the color.
-     * 
-     * @returns {Number} The blue component of the color.
-     */
-    getB() {
-      return this.components[0];
-    }
+  /**
+   * Get the green component of the color.
+   * 
+   * @returns {Number} The green component of the color.
+   */
+  getG() {
+    return this.components[0];
+  }
 
-    /**
-     * Get the alpha component of the color.
-     * 
-     * @returns {Number} The alpha component of the color.
-     */
-    getA() {
-      return this.components[0];
-    }
+  /**
+   * Get the blue component of the color.
+   * 
+   * @returns {Number} The blue component of the color.
+   */
+  getB() {
+    return this.components[0];
+  }
 
-    /**
-     * Set the r,g,b,a components from a hex string.
-     * 
-     * @static
-     * @param {String} hex A hex string in the form of #ABCDEF or #ABC.
-     * @returns {Color} A color representing the hex string.
-     */
-    static fromHex(hex) {
-        // Thanks to Tim Down
-        // http://stackoverflow.com/questions/5623838/rgb-to-hex-and-hex-to-rgb
+  /**
+   * Get the alpha component of the color.
+   * 
+   * @returns {Number} The alpha component of the color.
+   */
+  getA() {
+    return this.components[0];
+  }
 
-        let shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
-        
-        hex = hex.replace(shorthandRegex, function (m, r, g, b) {
-            return r + r + g + g + b + b;
-        });
+  /**
+   * Convert this colour to a float.
+   * 
+   * @returns {Number} A float representing this colour.
+   */
+  toFloat() {
+    return Color.rgbToFloat(this.getR() * 255.0, this.getG() * 255.0, this.getB() * 255.0);
+  }
 
-        let result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
-        let r = parseInt(result[1], 16);
-        let g = parseInt(result[2], 16);
-        let b = parseInt(result[3], 16);
+  /**
+   * Set the r,g,b components from a hex string.
+   * 
+   * @static
+   * @param {String} hex A hex string in the form of #ABCDEF or #ABC.
+   * @returns {Color} A color representing the hex string.
+   */
+  static fromHex(hex) {
+    let rgb = Color.hexToRgb(hex);
+    return new Color(rgb[0] / 255.0, rgb[1] / 255.0, rgb[2] / 255.0, 1.0);
+  }
 
-        return result ? new Color(r / 255.0, g / 255.0, b / 255.0, 1.0) : null;
-    }
+  /**
+   * Create an rgb array from the r,g,b components from a hex string.
+   * 
+   * @static
+   * @param {String} hex A hex string in the form of #ABCDEF or #ABC.
+   * @returns {Array} Returns an array containing rgb values.
+   */
+  static hexToRgb(hex) {
+    // Thanks to Tim Down
+    // http://stackoverflow.com/questions/5623838/rgb-to-hex-and-hex-to-rgb
 
-    
+    let shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
 
-    /**
-     * Get the r, g or b value from a hue component.
-     * 
-     * @static
-     * @param {Number} p 
-     * @param {Number} q 
-     * @param {Number} t 
-     * @returns {Number} The r, g or b component value.
-     */
-    static hueToRgb(p, q, t) {
-        if (t < 0) {
-            t += 1;
-        } else if (t > 1) {
-            t -= 1;
-        } else if (t < 0.1667) {
-            return p + (q - p) * 6 * t;
-        } else if (t < 0.5) {
-            return q;
-        } else if (t < 0.6667) {
-            return p + (q - p) * (0.6667 - t) * 6;
-        }
+    hex = hex.replace(shorthandRegex, function (m, r, g, b) {
+      return r + r + g + g + b + b;
+    });
 
-        return p;
+    let result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+    let r = parseInt(result[1], 16);
+    let g = parseInt(result[2], 16);
+    let b = parseInt(result[3], 16);
+
+    return [r, g, b];
+  }
+
+  /**
+   * Get the r, g or b value from a hue component.
+   * 
+   * @static
+   * @param {Number} p 
+   * @param {Number} q 
+   * @param {Number} t 
+   * @returns {Number} The r, g or b component value.
+   */
+  static hueToRgb(p, q, t) {
+    if (t < 0) {
+      t += 1;
+    } else if (t > 1) {
+      t -= 1;
+    } else if (t < 0.1667) {
+      return p + (q - p) * 6 * t;
+    } else if (t < 0.5) {
+      return q;
+    } else if (t < 0.6667) {
+      return p + (q - p) * (0.6667 - t) * 6;
     }
 
-    /**
-     * Converts HSL to RGB.
-     * 
-     * @static
-     * @param {Number} h The hue component.
-     * @param {Number} s The saturation component.
-     * @param {Number} l The lightness component.
-     * @returns {Number[]} An array containing the r, g and b values ([r, g, b]).
-     */
-    static hslToRgb(h, s, l) {
-        let r, g, b;
+    return p;
+  }
 
-        if (s == 0) {
-            r = g = b = l;
-        } else {
-            let q = l < 0.5 ? l * (1 + s) : l + s - l * s;
-            let p = 2 * l - q;
-            
-            r = Color.hueToRgb(p, q, h + 0.3333);
-            g = Color.hueToRgb(p, q, h);
-            b = Color.hueToRgb(p, q, h - 0.3333);
-        }
+  /**
+   * Converts HSL to RGB.
+   * 
+   * @static
+   * @param {Number} h The hue component.
+   * @param {Number} s The saturation component.
+   * @param {Number} l The lightness component.
+   * @returns {Number[]} An array containing the r, g and b values ([r, g, b]).
+   */
+  static hslToRgb(h, s, l) {
+    let r, g, b;
 
-        return [r, g, b];
+    if (s == 0) {
+      r = g = b = l;
+    } else {
+      let q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+      let p = 2 * l - q;
+      r = Color._hue2rgb(p, q, h + 1 / 3);
+      g = Color._hue2rgb(p, q, h);
+      b = Color._hue2rgb(p, q, h - 1 / 3);
     }
 
-    /**
-     * Converts HSL to RGB.
-     * 
-     * @static
-     * @param {Number} h The hue component.
-     * @param {Number} s The saturation component.
-     * @param {Number} l The lightness component.
-     * @returns {String} A hex string representing the color (#RRGGBB).
-     */
-    static hslToHex(h, s, l) {
-      let [r, g, b] = Color.hslToRgb(h, s, l);
-      return '#' + [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)].map(e => {
-        const hex = e.toString(16);
-        return hex.length === 1 ? '0' + hex : hex
-      }).join('')
-    }
+    return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)];
+  }
 
-    /**
-     * Converts RGB to HSL.
-     * 
-     * @static
-     * @param {Number} r The red component.
-     * @param {Number} g The green component.
-     * @param {Number} b The blue component.
-     * @returns {Number[]} An array containing the h, s and l values ([h, s, l]).
-     */
-    static rgbToHsl(r, g, b) {
-        r /= 255, g /= 255, b /= 255;
-        let max = Math.max(r, g, b),
-            min = Math.min(r, g, b);
-        let h, s, l = (max + min) / 2;
+  /**
+   * Helper for HSL to RGB converter.
+   */
+  static _hue2rgb(p, q, t) {
+    if (t < 0) t += 1;
+    if (t > 1) t -= 1;
+    if (t < 0.16666666666) return p + (q - p) * 6 * t;
+    if (t < 0.5) return q;
+    if (t < 0.66666666666) return p + (q - p) * (0.66666666666 - t) * 6;
+    return p;
+  }
 
-        if (max == min) {
-            h = s = 0; // achromatic
-        } else {
-            let d = max - min;
-            s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
-            switch (max) {
-            case r:
-                h = (g - b) / d + (g < b ? 6 : 0);
-                break;
-            case g:
-                h = (b - r) / d + 2;
-                break;
-            case b:
-                h = (r - g) / d + 4;
-                break;
-            }
-            h /= 6;
-        }
+  /**
+   * Converts HSL to RGB.
+   * 
+   * @static
+   * @param {Number} h The hue component.
+   * @param {Number} s The saturation component.
+   * @param {Number} l The lightness component.
+   * @returns {String} A hex string representing the color (#RRGGBB).
+   */
+  static hslToHex(h, s, l) {
+    let [r, g, b] = Color.hslToRgb(h, s, l);
+    return '#' + [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)].map(e => {
+      const hex = e.toString(16);
+      return hex.length === 1 ? '0' + hex : hex
+    }).join('')
+  }
 
-        return [h, s, l];
+  /**
+   * Converts RGB to HSL.
+   * 
+   * @static
+   * @param {Number} r The red component.
+   * @param {Number} g The green component.
+   * @param {Number} b The blue component.
+   * @returns {Number[]} An array containing the h, s and l values ([h, s, l]).
+   */
+  static rgbToHsl(r, g, b) {
+    r /= 255, g /= 255, b /= 255;
+
+    let max = Math.max(r, g, b);
+    let min = Math.min(r, g, b);
+    let h, s, l = (max + min) / 2;
+
+    if (max == min) {
+      h = s = 0; // achromatic
+    } else {
+      var d = max - min;
+      s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+
+      switch (max) {
+        case r: h = (g - b) / d + (g < b ? 6 : 0); break;
+        case g: h = (b - r) / d + 2; break;
+        case b: h = (r - g) / d + 4; break;
+      }
+
+      h /= 6;
     }
 
-    /**
-     * Encode rgba colour values as a 32-bit float.
-     * 
-     * @static
-     * @param {Number} r 
-     * @param {Number} g 
-     * @param {Number} b
-     * @param {Number} a
-     * @returns {number} A 32-bit colour encoded as a float.
-     */
-    static rgbaToFloat(r, g, b, a) {
-        return r + g * 256.0 + b * 65536.0 + a * 16777216.0;
+    return [ h, s, l ];
+  }
+
+  /**
+   * Transform hsl to rgb colour values and then encode them as a 24-bit (highp) float.
+   * 
+   * @static
+   * @param {Number} h 
+   * @param {Number} [s=1.0] 
+   * @param {Number} [l=0.5]
+   * @returns {number} A RGB colour (NOT hsl) encoded as a float.
+   */
+  static hslToFloat(h, s = 1.0, l = 0.5) {
+    let rgb = Color.hslToRgb(h, s, l);
+    return Math.floor(rgb[0] + rgb[1] * 256.0 + rgb[2] * 256.0 * 256.0);
+  }
+
+  /**
+   * Encode rgb colour values as a 24-bit (highp) float.
+   * 
+   * @static
+   * @param {Number} r 
+   * @param {Number} g 
+   * @param {Number} b
+   * @returns {number} A RGB colour encoded as a float.
+   */
+  static rgbToFloat(r, g, b) {
+    return Math.floor(r + g * 256.0 + b * 256.0 * 256.0);
+  }
+
+  /**
+   * Encode a hex colour values as a 24-bit (highp) float.
+   * 
+   * @static
+   * @param {String} hex A hex value encoding a colour. 
+   * @returns {number} A RGB colour encoded as a float.
+   */
+  static hexToFloat(hex) {
+    let rgb = Color.hexToRgb(hex);
+    return Color.rgbToFloat(rgb[0], rgb[1], rgb[2]);
+  }
+
+  /**
+   * Decode rgb colour values from a 24-bit (highp) float.
+   * 
+   * @static
+   * @param {Number} n 
+   * @returns {*} An array containing rgb values. 
+   */
+  static floatToRgb(n) {
+    let b = Math.floor(n / (256.0 * 256.0));
+    let g = Math.floor((n - b * (256.0 * 256.0)) / 256.0);
+    let r = Math.floor(n - b * (256.0 * 256.0) - g * 256.0);
+
+    return [r, g, b]
+  }
+
+  /**
+   * Decode hsl colour values from a 24-bit (highp) float.
+   * 
+   * @static
+   * @param {Number} n 
+   * @returns {*} An array containing hsl values. 
+   */
+  static floatToHsl(n) {
+    let b = Math.floor(n / (256.0 * 256.0));
+    let g = Math.floor((n - b * (256.0 * 256.0)) / 256.0);
+    let r = Math.floor(n - b * (256.0 * 256.0) - g * 256.0);
+
+    return Color.rgbToHsl(r, g, b);
+  }
+
+  /**
+   * Shifts the hue so that 0.0 represents blue and 1.0 represents magenta.
+   * 
+   * @static
+   * @param {Number} hue A hue component.
+   * @returns {Number} The hue component shifted so that 0.0 is blue and 1.0 is magenta.
+   */
+  static gdbHueShift(hue) {
+    hue = 0.85 * hue + 0.66;
+
+    if (hue > 1.0) {
+      hue = hue - 1.0;
     }
 
-    /**
-     * Shifts the hue so that 0.0 represents blue and 1.0 represents magenta.
-     * 
-     * @static
-     * @param {Number} hue A hue component.
-     * @returns {Number} The hue component shifted so that 0.0 is blue and 1.0 is magenta.
-     */
-    static gdbHueShift(hue) {
-        hue = 0.85 * hue + 0.66;
-        
-        if (hue > 1.0) {
-            hue = hue - 1.0;
-        }
+    hue = (1 - hue) + 0.33
 
-        hue = (1 - hue) + 0.33
-        
-        if (hue > 1.0) {
-            hue = hue - 1.0
-        }
+    if (hue > 1.0) {
+      hue = hue - 1.0
+    }
 
-        return hue;
-    }
+    return hue;
+  }
 }
 
 module.exports = Color

src/Filters/InRangeFilter.js

 //@ts-check
 
 const FilterBase = require('./FilterBase');
+const Color = require('../Core/Color');
 
@@ -11,86 +12,92 @@ /**
 class InRangeFilter extends FilterBase {
-    /**
-     * Creates an instance of InRangeFilter.
-     * @param {string} attribute The name of the attribute to filter on.
-     * @param {number} attributeIndex The attribute-index to filter on.
-     * @param {number} min The minum value.
-     * @param {number} max The maximum value.
-     */
-    constructor(attribute, attributeIndex, min, max) {
-        super(attribute, attributeIndex);
+  /**
+   * Creates an instance of InRangeFilter.
+   * @param {string} attribute The name of the attribute to filter on.
+   * @param {number} attributeIndex The attribute-index to filter on.
+   * @param {number} min The minum value.
+   * @param {number} max The maximum value.
+   */
+  constructor(attribute, attributeIndex, min, max) {
+    super(attribute, attributeIndex);
 
-        this.min = min;
-        this.max = max;
-    }
+    this.min = min;
+    this.max = max;
+  }
 
-    /**
-     * Get the minimum.
-     * 
-     * @returns {number} The minimum.
-     */
-    getMin() {
-        return this.min;
-    }
+  /**
+   * Get the minimum.
+   * 
+   * @returns {number} The minimum.
+   */
+  getMin() {
+    return this.min;
+  }
 
-    /**
-     * Set the minimum.
-     * 
-     * @param {number} value The minimum.
-     */
-    setMin(value) {
-        this.min = value;
-    }
+  /**
+   * Set the minimum.
+   * 
+   * @param {number} value The minimum.
+   */
+  setMin(value) {
+    this.min = value;
+  }
 
-    /**
-     * Get the maximum.
-     * 
-     * @returns {number} The maximum.
-     */
-    getMax() {
-        return this.max;
-    }
+  /**
+   * Get the maximum.
+   * 
+   * @returns {number} The maximum.
+   */
+  getMax() {
+    return this.max;
+  }
 
-    /**
-     * Set the maximum.
-     * 
-     * @param {number} value The maximum.
-     */
-    setMax(value) {
-        this.max = value;
-    }
+  /**
+   * Set the maximum.
+   * 
+   * @param {number} value The maximum.
+   */
+  setMax(value) {
+    this.max = value;
+  }
 
-    /**
-     * Execute the filter operation on the specified attribute and attribute-index. In order to filter, the HSS size value (attribute-index 2 of the color attribute) is set to its negative (1.0 -> -1.0, 2.5 -> -2.5).
-     */
-    filter() {
-        let attribute = this.geometry.attributes[this.attribute];
+  /**
+   * Execute the filter operation on the specified attribute and attribute-index. In order to filter, the HSS size value (attribute-index 2 of the color attribute) is set to its negative (1.0 -> -1.0, 2.5 -> -2.5).
+   */
+  filter() {
+    let attribute = this.geometry.attributes[this.attribute];
+    let isHue = (this.attribute === 'color') && (this.attributeIndex === 0);
 
-        for (let i = 0; i < attribute.data.length; i += attribute.attributeLength) {
-            let value = attribute.data[i + this.attributeIndex];
-            let size = this.geometry.attributes['color'].data[i + 2];
-            if(value > this.max || value < this.min) {
-                this.geometry.attributes['color'].data[i + 2] = -Math.abs(size);
-            } else {
-                this.geometry.attributes['color'].data[i + 2] = Math.abs(size);
-            }
-        }
+    for (let i = 0; i < attribute.data.length; i += attribute.attributeLength) {
+      let value = attribute.data[i + this.attributeIndex];
 
-        this.geometry.updateAttribute('color');
+      if (isHue) {
+        value = Color.floatToHsl(value)[0];
+      }
+
+      let size = this.geometry.attributes['color'].data[i + 2];
+      if (value > this.max || value < this.min) {
+        this.geometry.attributes['color'].data[i + 2] = -Math.abs(size);
+      } else {
+        this.geometry.attributes['color'].data[i + 2] = Math.abs(size);
+      }
     }
 
-    /**
-     * Resets the filter ("removes" it). The HSS size value is set back to its original value (-1.0 -> 1.0, -2.5 -> 2.5). 
-     */
-    reset() {
-        let attribute = this.geometry.attributes[this.attribute];
+    this.geometry.updateAttribute('color');
+  }
 
-        for (let i = 0; i < attribute.data.length; i += attribute.attributeLength) {
-            let size = this.geometry.attributes['color'].data[i + 2];
-            this.geometry.attributes['color'].data[i + 2] = Math.abs(size);
-        }
+  /**
+   * Resets the filter ("removes" it). The HSS size value is set back to its original value (-1.0 -> 1.0, -2.5 -> 2.5). 
+   */
+  reset() {
+    let attribute = this.geometry.attributes[this.attribute];
 
-        this.geometry.updateAttribute('color');
-    } 
+    for (let i = 0; i < attribute.data.length; i += attribute.attributeLength) {
+      let size = this.geometry.attributes['color'].data[i + 2];
+      this.geometry.attributes['color'].data[i + 2] = Math.abs(size);
+    }
+
+    this.geometry.updateAttribute('color');
+  }
 }
 
 module.exports = InRangeFilter

src/Helpers/OctreeHelper.js

@@ -412,3 +412,3 @@ //@ts-check
     for (let i = 0; i < c.length; i++) {
-      c[i] = 1;
+      c[i] = 255.0;
     }
@@ -415,0 +415,0 @@

src/Helpers/PointHelper.js

@@ -122,6 +122,6 @@ //@ts-check
    * @param {Number[]|Array|Float32Array} z An array containing the z components.
-   * @param {Number} length The length of the arrays.
    * @returns {PointHelper} Itself.
    */
-  setPositionsXYZ(x, y, z, length) {
+  setPositionsXYZ(x, y, z) {
+    const length = x.length;
     let positions = new Float32Array(length * 3);
@@ -179,2 +179,82 @@
   /**
+   * Set the positions (XYZ), the color (RGB) and size (S) of the points.
+   * 
+   * @param {Number[]|Array|Float32Array} x An array containing the x components.
+   * @param {Number[]|Array|Float32Array} y An array containing the y components.
+   * @param {Number[]|Array|Float32Array} z An array containing the z components.
+   * @param {Number[]|Array|Float32Array} r An array containing the r components.
+   * @param {Number[]|Array|Float32Array} g An array containing the g components.
+   * @param {Number[]|Array|Float32Array} b An array containing the b components.
+   * @param {Number} [s=1.0] The size of the points.
+   * @returns {PointHelper} Itself.
+   */
+  setXYZRGBS(x, y, z, r, g, b, s = 1.0) {
+    const length = r.length;
+    let c = new Float32Array(length);
+
+    for (var i = 0; i < length; i++) {
+      c[i] = Color.rgbToFloat(r[i], g[i], b[i]);
+    }
+
+    this._setValues(x, y, z, c, s);
+    return this;
+  }
+
+  /**
+   * Set the positions (XYZ), the hue (H) and size (S) of the points.
+   * 
+   * @param {Number[]|Array|Float32Array} x An array containing the x components.
+   * @param {Number[]|Array|Float32Array} y An array containing the y components.
+   * @param {Number[]|Array|Float32Array} z An array containing the z components.
+   * @param {Number[]|Array|Float32Array|Number} [h=1.0] The hue as a number or an array.
+   * @param {Number[]|Array|Float32Array|Number} [s=1.0] The size of the points.
+   * @returns {PointHelper} Itself.
+   */
+  setXYZHS(x, y, z, h = 1.0, s = 1.0) {
+    const length = x.length;
+    let c = new Float32Array(length);
+    
+    if (typeof h !== 'number') {
+      for (var i = 0; i < length; i++) {
+        c[i] = Color.hslToFloat(h[i]);
+      }
+    } else if (typeof h) {
+      h = Color.hslToFloat(h);
+      for (var i = 0; i < length; i++) {
+        c[i] = Color.hslToFloat(h);
+      }
+    }
+
+    this._setValues(x, y, z, c, s);
+    return this;
+  }
+
+  // TODO: Get rid of saturation
+  _setValues(x, y, z, c, s) {
+    let length = this.getMaxLength(x, y, z);
+    let saturation = new Float32Array(length);
+
+    for (var i = 0; i < length; i++) {
+      saturation[i] = 0.0;
+    }
+
+    if (typeof s === 'number') {
+      let tmpSize = new Float32Array(length);
+      for (var i = 0; i < length; i++) {
+        tmpSize[i] = s;
+      }
+      s = tmpSize;
+    }
+
+    this.setPositionsXYZ(x, y, z);
+    this.setHSSFromArrays(c, saturation, s);
+
+    // TODO: Check why the projection matrix update is needed
+    this.renderer.camera.updateProjectionMatrix();
+    this.renderer.camera.updateViewMatrix();
+
+    return this;
+  }
+
+  /**
    * Set the positions and the HSS (Hue, Saturation, Size) values of the points in the point cloud.
@@ -185,21 +265,47 @@ *
    * @param {Number[]|Array|Float32Array} z An array containing the z components.
-   * @param {Number[]|Array|Float32Array} hue An array containing the hues of the data points.
-   * @param {Number[]|Array|Float32Array} saturation An array containing the saturations of the data points.
-   * @param {Number[]|Array|Float32Array} size An array containing the sizes of the data points.
+   * @param {Number[]|Array|Float32Array|Number} hue An array containing the hues of the data points.
+   * @param {Number[]|Array|Float32Array|Number} saturation An array containing the saturations of the data points.
+   * @param {Number[]|Array|Float32Array|Number} size An array containing the sizes of the data points.
    * @returns {PointHelper} Itself.
    */
   setPositionsXYZHSS(x, y, z, hue, saturation, size) {
+    console.warn('The method "setPositionsXYZHSS" is marked as deprecated.');
     let length = this.getMaxLength(x, y, z);
+    saturation = new Float32Array(length);
 
-    this.setPositionsXYZ(x, y, z, length);
+    for (var i = 0; i < length; i++) {
+      saturation[i] = 0.0;
+    }
 
+    if (typeof size === 'number') {
+      let tmpSize = new Float32Array(length);
+      for (var i = 0; i < length; i++) {
+        tmpSize[i] = size;
+      }
+      size = tmpSize;
+    }
+
+    this.setPositionsXYZ(x, y, z);
+
     if (typeof hue === 'number' && typeof saturation === 'number' && typeof size === 'number') {
-      this.setHSS(hue, saturation, size, length);
+      let rgb = Color.hslToRgb(hue, 1.0, 0.5);
+      this.setHSS(Color.rgbToFloat(rgb[0], rgb[1], rgb[2]), saturation, size, length);
     } else if (typeof hue !== 'number' && typeof saturation !== 'number' && typeof size !== 'number') {
-      this.setHSSFromArrays(hue, saturation, size, length);
+      for (var i = 0; i < hue.length; i++) {
+        let rgb = Color.hslToRgb(hue[i], 1.0, 0.5);
+        hue[i] = Color.rgbToFloat(rgb[0], rgb[1], rgb[2]);
+      }
+      this.setHSSFromArrays(hue, saturation, size);
     } else {
       if (typeof hue === 'number') {
         let hueTmp = new Float32Array(length);
-        hueTmp.fill(hue);
+        let rgb = Color.hslToRgb(hue, 1.0, 0.5);
+        hueTmp.fill(Color.rgbToFloat(rgb[0], rgb[1], rgb[2]));
         hue = hueTmp;
+      } else if (typeof hue !== 'number') {
+        for (var i = 0; i < hue.length; i++) {
+          let rgb = Color.hslToRgb(hue[i], 1.0, 0.5);
+          hue[i] = Color.rgbToFloat(rgb[0], rgb[1], rgb[2]);
+        }
+        this.setHSSFromArrays(hue, saturation, size);
       }
@@ -219,3 +325,3 @@
 
-      this.setHSSFromArrays(hue, saturation, size, length);
+      this.setHSSFromArrays(hue, saturation, size);
     }
@@ -231,38 +337,2 @@
   /**
-   * Set the hue from an rgb values.
-   * 
-   * @param {Number[]|Array|Float32Array} r An array containing the red components of the colors.
-   * @param {Number[]|Array|Float32Array} g An array containing the green components of the colors.
-   * @param {Number[]|Array|Float32Array} b An array containing the blue components of the colors.
-   * @returns {PointHelper} Itself.
-   */
-  setRGB(r, g, b) {
-    let c = new Float32Array(r.length * 3);
-    let colors = this.getAttribute('color');
-
-    for (let i = 0; i < r.length; i++) {
-      let j = 3 * i;
-
-      c[j] = r[i];
-      c[j + 1] = g[i];
-      c[j + 2] = b[i];
-    }
-
-    // Convert to HOS (Hue, Saturation, Size)
-    for (let i = 0; i < c.length; i += 3) {
-      let r = c[i];
-      let g = c[i + 1];
-      let b = c[i + 2];
-
-      c[i] = Color.rgbToHsl(r, g, b)[0];
-      c[i + 1] = colors[i + 1];
-      c[i + 2] = colors[i + 2];
-    }
-
-    this.updateColors(c);
-
-    return this;
-  }
-
-  /**
    * Set the colors (HSS) for the points.
@@ -482,4 +552,4 @@ *
       let length = colors.length;
-
       c = new Float32Array(length * 3);
+      hue = Color.hslToFloat(hue);
 
@@ -507,42 +577,2 @@ for (let i = 0; i < length * 3; i += 3) {
   /**
-   * Update the hue of the points.
-   * 
-   * @param {Number[]|Array|Float32Array|Number} hue The hue to be set. If a number is supplied, all hues are set to its value.
-   * @param {Number|Array|Number[]} index The index or the indices of vertices to be set to a hue.
-   */
-  updateHue(hue, index) {
-    let colors = this.getAttribute('color');
-    let c = null;
-
-    if (index > colors.length - 1) {
-      console.warn('The color index is out of range.');
-      return;
-    }
-    
-    if (typeof index === 'number') {
-      if (typeof hue !== 'number') {
-        console.warn('The hue value cannot be an array if index is a number.')
-      } else {
-        this.updateColor(index, new Color(hue, colors[index + 1], colors[index + 2]));
-      }
-    } else if (Array.isArray(index)) {
-      if (Array.isArray(hue)) {
-        if (hue.length !== index.length) {
-          console.warn('Hue and index arrays have to be of the same length.');
-        } else {
-          for (var i = 0; i < index.length; i++) {
-            this.updateColor(index[i], new Color(hue[i], colors[index[i] + 1], colors[index[i] + 2]));
-          }
-        }
-      } else if (typeof hue === 'number') {
-        for (var i = 0; i < index.length; i++) {
-          this.updateColor(index[i], new Color(hue, colors[index[i] + 1], colors[index[i] + 2]));
-        }
-      }
-    } else {
-      console.warn('The type of index is not supported: ' + (typeof index));
-    }
-  }
-
-  /**
    * Set the saturation. If a number is supplied, all the saturations are set to the supplied number.
@@ -636,4 +666,39 @@ *
   }
+  
+  /**
+   * Set the color from RGB values. Sets all indices to the same values.
+   * 
+   * @param {Number} r The red colour component.
+   * @param {Number} g The green colour component.
+   * @param {Number} b The blue colour component.
+   */
+  setRGB(r, g, b) {
+    let c = new Float32Array(length * 3);
 
+    for (let i = 0; i < length * 3; i += 3) {
+      c[i] = Color.rgbToFloat(r, g, b);
+    }
+
+    this.setColors(c);
+  }
+
   /**
+   * Set the color from RGB values. Sets all indices to the same values.
+   * 
+   * @param {Number[]|Array|Float32Array} r The red colour component.
+   * @param {Number[]|Array|Float32Array} g The green colour component.
+   * @param {Number[]|Array|Float32Array} b The blue colour component.
+   */
+  setRGBFromArrays(r, g, b) {
+    const length = r.length;
+    let c = new Float32Array(length * 3);
+
+    for (let i = 0; i < length; i++) {
+      c[i * 3] = Color.rgbToFloat(r[i], g[i], b[i]);
+    }
+
+    this.setColors(c);
+  }
+
+  /**
    * Set the HSS values.
@@ -644,5 +709,5 @@ *
    * @param {Number[]|Array|Float32Array} size An array of size values.
-   * @param {Number} length The length of the arrays.
    */
-  setHSSFromArrays(hue, saturation, size, length) {
+  setHSSFromArrays(hue, saturation, size) {
+    let length = hue.length;
     let c = new Float32Array(length * 3);
@@ -649,0 +714,0 @@ let index = 0;

src/Shaders/Circle.js

@@ -14,19 +14,9 @@ const Shader = require('../Core/Shader')
     'varying float vDiscard;',
-    'vec3 rgb2hsv(vec3 c) {',
-        'vec4 K = vec4(0.0, -1.0 / 3.0, 2.0 / 3.0, -1.0);',
-        'vec4 p = mix(vec4(c.bg, K.wz), vec4(c.gb, K.xy), step(c.b, c.g));',
-        'vec4 q = mix(vec4(p.xyw, c.r), vec4(c.r, p.yzx), step(p.x, c.r));',
-
-        'float d = q.x - min(q.w, q.y);',
-        'float e = 1.0e-10;',
-        'return vec3(abs(q.z + (q.w - q.y) / (6.0 * d + e)), d / (q.x + e), q.x);',
+    'vec3 floatToRgb(float n) {',
+        'float b = floor(n / 65536.0);',
+        'float g = floor((n - b * 65536.0) / 256.0);',
+        'float r = floor(n - b * 65536.0 - g * 256.0);',
+        'return vec3(r / 255.0, g / 255.0, b / 255.0);',
     '}',
-    'vec3 hsv2rgb(vec3 c) {',
-        'vec4 K = vec4(1.0, 2.0 / 3.0, 1.0 / 3.0, 3.0);',
-        'vec3 p = abs(fract(c.xxx + K.xyz) * 6.0 - K.www);',
-        'return c.z * mix(K.xxx, clamp(p - K.xxx, 0.0, 1.0), c.y);',
-    '}',
     'void main() {',
-        'vec3 hsv = vec3(color.r, color.g, 1.0);',
-        'float saturation = color.g;',
         'float point_size = color.b;',
@@ -41,3 +31,3 @@ 'gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);',
         'gl_PointSize = point_size * size;',
-        'vColor = hsv2rgb(hsv);',
+        'vColor = floatToRgb(color.r);',
     '}'
@@ -44,0 +34,0 @@ ], [

src/Shaders/Default.js

@@ -15,16 +15,8 @@ const Shader = require('../Core/Shader')
     'varying float vDiscard;',
-    'vec3 rgb2hsv(vec3 c) {',
-        'vec4 K = vec4(0.0, -1.0 / 3.0, 2.0 / 3.0, -1.0);',
-        'vec4 p = mix(vec4(c.bg, K.wz), vec4(c.gb, K.xy), step(c.b, c.g));',
-        'vec4 q = mix(vec4(p.xyw, c.r), vec4(c.r, p.yzx), step(p.x, c.r));',
-
-        'float d = q.x - min(q.w, q.y);',
-        'float e = 1.0e-10;',
-        'return vec3(abs(q.z + (q.w - q.y) / (6.0 * d + e)), d / (q.x + e), q.x);',
+    'vec3 floatToRgb(float n) {',
+        'float b = floor(n / 65536.0);',
+        'float g = floor((n - b * 65536.0) / 256.0);',
+        'float r = floor(n - b * 65536.0 - g * 256.0);',
+        'return vec3(r / 255.0, g / 255.0, b / 255.0);',
     '}',
-    'vec3 hsv2rgb(vec3 c) {',
-        'vec4 K = vec4(1.0, 2.0 / 3.0, 1.0 / 3.0, 3.0);',
-        'vec3 p = abs(fract(c.xxx + K.xyz) * 6.0 - K.www);',
-        'return c.z * mix(K.xxx, clamp(p - K.xxx, 0.0, 1.0), c.y);',
-    '}',
     'float rand(vec2 co) {',
@@ -34,4 +26,2 @@ 'return fract(sin(dot(co.xy ,vec2(12.9898,78.233))) * 43758.5453);',
     'void main() {',
-        'vec3 hsv = vec3(color.r, color.g, 1.0);',
-        'float saturation = color.g;',
         'float point_size = color.b;',
@@ -46,3 +36,3 @@ 'gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);',
         'gl_PointSize = point_size * size;',
-        'vColor = hsv2rgb(hsv);',
+        'vColor = floatToRgb(color.r);',
     '}'
@@ -49,0 +39,0 @@ ], [

src/Shaders/SimpleSphere.js

@@ -14,19 +14,9 @@ const Shader = require('../Core/Shader')
     'varying float vDiscard;',
-    'vec3 rgb2hsv(vec3 c) {',
-        'vec4 K = vec4(0.0, -1.0 / 3.0, 2.0 / 3.0, -1.0);',
-        'vec4 p = mix(vec4(c.bg, K.wz), vec4(c.gb, K.xy), step(c.b, c.g));',
-        'vec4 q = mix(vec4(p.xyw, c.r), vec4(c.r, p.yzx), step(p.x, c.r));',
-
-        'float d = q.x - min(q.w, q.y);',
-        'float e = 1.0e-10;',
-        'return vec3(abs(q.z + (q.w - q.y) / (6.0 * d + e)), d / (q.x + e), q.x);',
+    'vec3 floatToRgb(float n) {',
+        'float b = floor(n / 65536.0);',
+        'float g = floor((n - b * 65536.0) / 256.0);',
+        'float r = floor(n - b * 65536.0 - g * 256.0);',
+        'return vec3(r / 255.0, g / 255.0, b / 255.0);',
     '}',
-    'vec3 hsv2rgb(vec3 c) {',
-        'vec4 K = vec4(1.0, 2.0 / 3.0, 1.0 / 3.0, 3.0);',
-        'vec3 p = abs(fract(c.xxx + K.xyz) * 6.0 - K.www);',
-        'return c.z * mix(K.xxx, clamp(p - K.xxx, 0.0, 1.0), c.y);',
-    '}',
     'void main() {',
-        'vec3 hsv = vec3(color.r, color.g, 1.0);',
-        'float saturation = color.g;',
         'float point_size = color.b;',
@@ -41,3 +31,3 @@ 'gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);',
         'gl_PointSize = point_size * size;',
-        'vColor = hsv2rgb(hsv);',
+        'vColor = floatToRgb(color.r);',
     '}'
@@ -44,0 +34,0 @@ ], [

src/Shaders/SmoothCircle.js

@@ -14,19 +14,9 @@ const Shader = require('../Core/Shader')
     'out float vDiscard;',
-    'vec3 rgb2hsv(vec3 c) {',
-        'vec4 K = vec4(0.0, -1.0 / 3.0, 2.0 / 3.0, -1.0);',
-        'vec4 p = mix(vec4(c.bg, K.wz), vec4(c.gb, K.xy), step(c.b, c.g));',
-        'vec4 q = mix(vec4(p.xyw, c.r), vec4(c.r, p.yzx), step(p.x, c.r));',
-
-        'float d = q.x - min(q.w, q.y);',
-        'float e = 1.0e-10;',
-        'return vec3(abs(q.z + (q.w - q.y) / (6.0 * d + e)), d / (q.x + e), q.x);',
+    'vec3 floatToRgb(float n) {',
+        'float b = floor(n / 65536.0);',
+        'float g = floor((n - b * 65536.0) / 256.0);',
+        'float r = floor(n - b * 65536.0 - g * 256.0);',
+        'return vec3(r / 255.0, g / 255.0, b / 255.0);',
     '}',
-    'vec3 hsv2rgb(vec3 c) {',
-        'vec4 K = vec4(1.0, 2.0 / 3.0, 1.0 / 3.0, 3.0);',
-        'vec3 p = abs(fract(c.xxx + K.xyz) * 6.0 - K.www);',
-        'return c.z * mix(K.xxx, clamp(p - K.xxx, 0.0, 1.0), c.y);',
-    '}',
     'void main() {',
-        'vec3 hsv = vec3(color.r, color.g, 1.0);',
-        'float saturation = color.g;',
         'float point_size = color.b;',
@@ -41,3 +31,3 @@ 'gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);',
         'gl_PointSize = point_size * size;',
-        'vColor = hsv2rgb(hsv);',
+        'vColor = floatToRgb(color.r);',
     '}'
@@ -44,0 +34,0 @@ ], [

src/Shaders/Sphere.js

@@ -14,19 +14,9 @@ const Shader = require('../Core/Shader')
     'varying float vDiscard;',
-    'vec3 rgb2hsv(vec3 c) {',
-        'vec4 K = vec4(0.0, -1.0 / 3.0, 2.0 / 3.0, -1.0);',
-        'vec4 p = mix(vec4(c.bg, K.wz), vec4(c.gb, K.xy), step(c.b, c.g));',
-        'vec4 q = mix(vec4(p.xyw, c.r), vec4(c.r, p.yzx), step(p.x, c.r));',
-
-        'float d = q.x - min(q.w, q.y);',
-        'float e = 1.0e-10;',
-        'return vec3(abs(q.z + (q.w - q.y) / (6.0 * d + e)), d / (q.x + e), q.x);',
+    'vec3 floatToRgb(float n) {',
+        'float b = floor(n / 65536.0);',
+        'float g = floor((n - b * 65536.0) / 256.0);',
+        'float r = floor(n - b * 65536.0 - g * 256.0);',
+        'return vec3(r / 255.0, g / 255.0, b / 255.0);',
     '}',
-    'vec3 hsv2rgb(vec3 c) {',
-        'vec4 K = vec4(1.0, 2.0 / 3.0, 1.0 / 3.0, 3.0);',
-        'vec3 p = abs(fract(c.xxx + K.xyz) * 6.0 - K.www);',
-        'return c.z * mix(K.xxx, clamp(p - K.xxx, 0.0, 1.0), c.y);',
-    '}',
     'void main() {',
-        'vec3 hsv = vec3(color.r, color.g, 1.0);',
-        'float saturation = color.g;',
         'float point_size = color.b;',
@@ -41,3 +31,3 @@ 'gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);',
         'gl_PointSize = point_size * size;',
-        'vColor = hsv2rgb(hsv);',
+        'vColor = floatToRgb(color.r);',
     '}'
@@ -44,0 +34,0 @@ ], [

src/Shaders/Tree.js

@@ -14,19 +14,9 @@ const Shader = require('../Core/Shader')
     'varying float vDiscard;',
-    'vec3 rgb2hsv(vec3 c) {',
-        'vec4 K = vec4(0.0, -1.0 / 3.0, 2.0 / 3.0, -1.0);',
-        'vec4 p = mix(vec4(c.bg, K.wz), vec4(c.gb, K.xy), step(c.b, c.g));',
-        'vec4 q = mix(vec4(p.xyw, c.r), vec4(c.r, p.yzx), step(p.x, c.r));',
-
-        'float d = q.x - min(q.w, q.y);',
-        'float e = 1.0e-10;',
-        'return vec3(abs(q.z + (q.w - q.y) / (6.0 * d + e)), d / (q.x + e), q.x);',
+    'vec3 floatToRgb(float n) {',
+        'float b = floor(n / 65536.0);',
+        'float g = floor((n - b * 65536.0) / 256.0);',
+        'float r = floor(n - b * 65536.0 - g * 256.0);',
+        'return vec3(r / 255.0, g / 255.0, b / 255.0);',
     '}',
-    'vec3 hsv2rgb(vec3 c) {',
-        'vec4 K = vec4(1.0, 2.0 / 3.0, 1.0 / 3.0, 3.0);',
-        'vec3 p = abs(fract(c.xxx + K.xyz) * 6.0 - K.www);',
-        'return c.z * mix(K.xxx, clamp(p - K.xxx, 0.0, 1.0), c.y);',
-    '}',
     'void main() {',
-        'vec3 hsv = vec3(color.r, color.g, 0.75);',
-        'float saturation = color.g;',
         'float point_size = color.b;',
@@ -40,4 +30,3 @@ 'gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);',
         '}',
-        'gl_PointSize = size;',
-        'vColor = hsv2rgb(hsv);',
+        'vColor = floatToRgb(color.r);',
     '}'
@@ -44,0 +33,0 @@ ], [

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

43827791

decreased by-0.86%

Number of package files

182

decreased by-3.19%

Lines of code

19722

decreased by-39.22%

No dependency changes