added alpha support

sasakiassociates · Sep 14, 2018 · 314ed47 · 314ed47
1 parent 4790f1d
commit 314ed47
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 3 deletions.
diff --git a/src/AnimatedPoints.js b/src/AnimatedPoints.js
@@ -15,12 +15,14 @@ export default class AnimatedPoints {
             r: new Float32Array(this.numberOfPoints),
             g: new Float32Array(this.numberOfPoints),
             b: new Float32Array(this.numberOfPoints),
+            a: new Float32Array(this.numberOfPoints),
             size: new Float32Array(this.numberOfPoints),
         };
         this.toProperties = {
             r: new Float32Array(this.numberOfPoints),
             g: new Float32Array(this.numberOfPoints),
             b: new Float32Array(this.numberOfPoints),
+            a: new Float32Array(this.numberOfPoints),
             size: new Float32Array(this.numberOfPoints),
         };
 
@@ -55,6 +57,7 @@ export default class AnimatedPoints {
             uniforms: {
                 animationPos: {value: this.animationPos}
             },
+            transparent: true,
             vertexShader: ShaderIndex.animated_points_vertex,
             fragmentShader: ShaderIndex.animated_points_fragment
 
@@ -111,6 +114,7 @@ export default class AnimatedPoints {
                     }
                 }
             });
+            AnimatedParticles._clamp(obj, ['r', 'g', 'b', 'a'], 0, 1);
             if (obj.x !== undefined) {
                 if (this.toPositions[i * 3] !== obj.x) {
                     this.toPositions[i * 3] = obj.x;
@@ -212,17 +216,28 @@ export default class AnimatedPoints {
         } : null;
     }
 
+    static _clamp(obj, props, min, max) {
+        for (let prop of props) {
+            obj[prop] = Math.min(Math.max(obj[prop], min), max);
+        }
+    }
+
     static _injectRGB(obj, color) {
         var rgb = AnimatedPoints._hexToRgb(color);
         if (!rgb) {
             obj.r = 0;
             obj.g = 0;
             obj.b = 0;
+            obj.a = 0;
             return;
         }
         obj.r = rgb.r / 255;
         obj.g = rgb.g / 255;
         obj.b = rgb.b / 255;
 
+        if (!obj.a) {
+            obj.a = 1;
+        }
+
     }
 }
diff --git a/src/glsl/animated-points-vertex.glsl b/src/glsl/animated-points-vertex.glsl
@@ -4,21 +4,24 @@ attribute float size_to;
 attribute float r_from;
 attribute float g_from;
 attribute float b_from;
+attribute float a_from;
 
 attribute float r_to;
 attribute float g_to;
 attribute float b_to;
+attribute float a_to;
 
 attribute vec3 position_to;
 
-varying vec3 vColor;
+varying vec4 vColor;
 uniform float animationPos;
 
 void main() {
-    vColor = vec3(
+    vColor = vec4(
         r_from * (1.0 - animationPos) + r_to * animationPos,
         g_from * (1.0 - animationPos) + g_to * animationPos,
-        b_from * (1.0 - animationPos) + b_to * animationPos
+        b_from * (1.0 - animationPos) + b_to * animationPos,
+        a_from * (1.0 - animationPos) + a_to * animationPos
     );
     gl_Position = projectionMatrix * modelViewMatrix * vec4(position * (1.0 - animationPos) + position_to * animationPos, 1.0);
     gl_PointSize = size_from * (1.0 - animationPos) + size_to * animationPos;