Randomize avatar color

package.json

@@ -13,6 +13,7 @@
     "easyrtc": "^1.1.0",
     "express": "^4.15.5",
     "networked-aframe": "https://github.com/netpro2k/networked-aframe#dev",
+    "pleasejs": "^0.4.2",
     "socket.io": "^2.0.3"
   },
   "devDependencies": {

public/index.html

@@ -26,7 +26,14 @@
 
       <!-- Templates -->
       <script id="head-template" type="text/html">
-        <a-entity class="head" gltf-model="#dodec-avatar-head" position="0 0 0" networked-audio-source audio-feedback></a-entity>
+        <a-entity
+            class="head"
+            gltf-model="#dodec-avatar-head"
+            position="0 0 0"
+            networked-audio-source
+            audio-feedback
+            avatar-customization
+        ></a-entity>
       </script>
 
       <script id="hand-template" type="text/html">

src/components/avatar-customization.js

+import Please from "pleasejs";
+
+// @TODO this whole thing is a bit of a hack. This should probably just be setting some uniforms on a sharder.
+// @TODO the palate should be indexed by alpha channel instead of the red channel.
+// @TODO color should be multiplied with the texture value to allow for texture to provide surface detail.
+// @TODO texture should be regenerated whenever headColor/LidColor values change to allow for networking, though arguably these will eventually be fetched from a users "profile" anywya, so might not be worth trying to network through NAF.
+AFRAME.registerComponent("avatar-customization", {
+  schema: {
+    headColor: { type: "color", default: null },
+    lidColor: { type: "color", default: null }
+  },
+
+  init: function() {
+    const colors = Please.make_color({
+      format: "rgb-string",
+      colors_returned: 2
+    });
+
+    this.colorMap = new Map();
+    this.colorMap.set(128, this.data.headColor || new THREE.Color(colors[0]));
+    this.colorMap.set(115, this.data.lidColor || new THREE.Color(colors[1]));
+
+    this.el.addEventListener("model-loaded", () => {
+      const map = this.el.object3D.getObjectByName("DodecAvatar_Head_0")
+        .material.map;
+      const img = map.image;
+
+      const canvas = document.createElement("canvas");
+      canvas.width = img.width;
+      canvas.height = img.height;
+      const ctx = canvas.getContext("2d");
+      ctx.drawImage(img, 0, 0, img.width, img.height);
+      const imageData = ctx.getImageData(0, 0, img.width, img.height);
+      const pixelData = imageData.data;
+
+      for (let i = 0; i < pixelData.length; i += 4) {
+        // @TODO check alpha channel and multiply colors to preserver surface detail
+        if (this.colorMap.has(pixelData[i])) {
+          const color = this.colorMap.get(pixelData[i]);
+          pixelData[i] = color.r * 255;
+          pixelData[i + 1] = color.g * 255;
+          pixelData[i + 2] = color.b * 255;
+        }
+      }
+      ctx.putImageData(imageData, 0, 0);
+      map.image = canvas;
+    });
+  }
+});

src/index.js

@@ -6,6 +6,7 @@ import "./components/snap-rotation";
 import "./components/mute-mic";
 import "./components/audio-feedback";
 import "./components/nametag-transform";
+import "./components/avatar-customization";
 
 import { generateName } from "./utils";
 

yarn.lock

@@ -2090,6 +2090,10 @@ pify@^2.0.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/pify/-/pify-2.3.0.tgz#ed141a6ac043a849ea588498e7dca8b15330e90c"
 
+pleasejs@^0.4.2:
+  version "0.4.2"
+  resolved "https://registry.yarnpkg.com/pleasejs/-/pleasejs-0.4.2.tgz#aaaa1a5fa6902518de7e51e3c63b5f537f823164"
+
 preserve@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/preserve/-/preserve-0.2.0.tgz#815ed1f6ebc65926f865b310c0713bcb3315ce4b"