[bump npm] merge fake glow, save 6 draw calls

package-lock.json

@@ -97,9 +97,9 @@
       "integrity": "sha512-DejvmaP+1Em660oMEPU8C4SYmiRkn7bpq0ttBwqw/N3In8/QODI2S1RYuJHEkZWde6XCfAiSuBpOBcRTnbSn/w=="
     },
     "aframe-atlas-uvs-component": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/aframe-atlas-uvs-component/-/aframe-atlas-uvs-component-2.0.0.tgz",
-      "integrity": "sha512-2Zm07u163vwzT7VLE7y9h9oL1e3RH8CNQGIUvdE+wgl2Yo6iSZwGhIpcYRFODthEdb0vHrCyFMOATZfniq7yhw=="
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/aframe-atlas-uvs-component/-/aframe-atlas-uvs-component-2.1.0.tgz",
+      "integrity": "sha512-+zUnGMcj20Lkbth1/nWJjJoKsoc3jOTj8tuD3vy5BjWDha3cpQhBslxekvFL8LcAl88yv0WwD1kfkmLKQKcdvw=="
     },
     "aframe-audioanalyser-component": {
       "version": "5.2.0",

package.json

@@ -9,7 +9,7 @@
   },
   "dependencies": {
     "aframe-aabb-collider-component": "^2.2.1",
-    "aframe-atlas-uvs-component": "^2.0.0",
+    "aframe-atlas-uvs-component": "^2.1.0",
     "aframe-audioanalyser-component": "^5.2.0",
     "aframe-event-decorators": "^1.0.2",
     "aframe-event-set-component": "^4.0.1",

src/components/fake-glow.js

@@ -0,0 +1,98 @@
+import {getGridUvs} from 'aframe-atlas-uvs-component';
+require('../../vendor/BufferGeometryUtils');
+
+const colorHelper = new THREE.Color();
+
+const geometry = createGeometry();
+const material = new THREE.MeshBasicMaterial({
+  alphaMap: createAlphaMap(),
+  transparent: true,
+  vertexColors: THREE.VertexColors
+});
+
+/**
+ * Fake glow using merged overlayed cylinders with alpha map.
+ * Requires THREE.BufferGeometryUtils.
+ */
+AFRAME.registerComponent('fake-glow', {
+  schema: {
+    color: {default: '#FFF'}
+  },
+
+  play: function () {
+    this.el.setObject3D('mesh', new THREE.Mesh(createGeometry(this.data.color), material));
+  }
+});
+
+function createAlphaMap () {
+  const alphaCanvas = document.createElement('canvas');
+  alphaCanvas.height = 1;
+  alphaCanvas.width = 4;
+
+  const ctx = alphaCanvas.getContext('2d');
+
+  // For first color.
+  ctx.fillStyle = 'rgb(10, 10, 10)';
+  ctx.fillRect(0, 0, 1, 1);
+  ctx.fillStyle = 'rgb(15, 15, 15)';
+  ctx.fillRect(1, 0, 1, 1);
+  ctx.fillStyle = 'rgb(23, 23 ,23)';
+  ctx.fillRect(2, 0, 1, 1);
+  ctx.fillStyle = 'rgb(28, 28, 28)';
+  ctx.fillRect(3, 0, 1, 1);
+
+  setTimeout(() => {
+    alphaCanvas.style.position = 'fixed';
+    alphaCanvas.style.zIndex = 999999999999;
+    alphaCanvas.style.left = 0;
+    alphaCanvas.style.top = 0;
+    document.body.appendChild(alphaCanvas);
+  }, 1000);
+  return new THREE.CanvasTexture(alphaCanvas);
+}
+
+function createGeometry (color) {
+  colorHelper.set(color);
+
+  const cylinders = [
+    {height: 0.1831, radius: 0.0055},
+    {height: 0.1832, radius: 0.0065},
+    {height: 0.1833, radius: 0.0075},
+    {height: 0.1834, radius: 0.0085}
+  ];
+
+  const geometries = cylinders.map((cylinderData, i) => {
+    const cylinder = new THREE.CylinderBufferGeometry(
+      cylinderData.radius,
+      cylinderData.radius,
+      cylinderData.height
+    );
+
+    const colorArray = [];
+    for (let i = 0; i < cylinder.attributes.position.array.length; i += 3) {
+      colorArray[i] = colorHelper.r;
+      colorArray[i + 1] = colorHelper.g;
+      colorArray[i + 2] = colorHelper.b;
+    }
+    cylinder.addAttribute('color', new THREE.Float32BufferAttribute(colorArray, 3));
+
+    const alphaUvs = getGridUvs(0, i, 1, 4);
+    const uvs = cylinder.attributes.uv.array;
+    for (let i = 0; i < uvs.length; i += 6) {
+      uvs[i] = alphaUvs[0].x;
+      uvs[i + 1] = alphaUvs[0].y;
+
+      uvs[i + 2] = alphaUvs[1].x;
+      uvs[i + 3] = alphaUvs[1].y;
+
+      uvs[i + 4] = alphaUvs[2].x;
+      uvs[i + 5] = alphaUvs[2].y;
+    }
+    cylinder.attributes.uv.needsUpdate = true;
+
+    return cylinder;
+  });
+
+  const geometry = THREE.BufferGeometryUtils.mergeBufferGeometries(geometries);
+  return geometry
+}

src/index.html

@@ -211,11 +211,12 @@
               </a-entity>
             </a-entity>
 
-            <a-entity class="fakeGlow" rotation="90 0 0" position="0 0.01 0" bind__visible="!isPlaying">
-              <a-entity geometry="primitive: cylinder; height: 0.1831; radius: 0.0055" material="color: {{ beamColor }}; shader: flat; opacity: 0.11"></a-entity>
-              <a-entity geometry="primitive: cylinder; height: 0.1832; radius: 0.0065" material="color: {{ beamColor }}; shader: flat; opacity: 0.09"></a-entity>
-              <a-entity geometry="primitive: cylinder; height: 0.1833; radius: 0.0075" material="color: {{ beamColor }}; shader: flat; opacity: 0.06"></a-entity>
-              <a-entity geometry="primitive: cylinder; height: 0.1834; radius: 0.0085" material="color: {{ beamColor }}; shader: flat; opacity: 0.04"></a-entity>
+            <a-entity
+              class="fakeGlow"
+              fake-glow="color: {{ beamColor }}"
+              position="0 0.01 0"
+              rotation="90 0 0"
+              bind__visible="!isPlaying">
             </a-entity>
           </a-entity>