Add gltf-model component and system.

Fixes #2261.

examples/assets/models/brainstem/BrainStem0FS.glsl

@@ -0,0 +1,23 @@
+precision highp float;
+varying vec3 v_normal;
+uniform vec4 u_ambient;
+uniform vec4 u_diffuse;
+uniform vec4 u_emission;
+uniform vec4 u_specular;
+void main(void) {
+vec3 normal = normalize(v_normal);
+vec4 color = vec4(0., 0., 0., 0.);
+vec4 diffuse = vec4(0., 0., 0., 1.);
+vec4 emission;
+vec4 ambient;
+vec4 specular;
+ambient = u_ambient;
+diffuse = u_diffuse;
+emission = u_emission;
+specular = u_specular;
+diffuse.xyz *= max(dot(normal,vec3(0.,0.,1.)), 0.);
+color.xyz += diffuse.xyz;
+color.xyz += emission.xyz;
+color = vec4(color.rgb * diffuse.a, diffuse.a);
+gl_FragColor = color;
+}

examples/assets/models/brainstem/BrainStem0VS.glsl

@@ -0,0 +1,19 @@
+precision highp float;
+attribute vec3 a_position;
+attribute vec3 a_normal;
+varying vec3 v_normal;
+attribute vec4 a_joint;
+attribute vec4 a_weight;
+uniform mat4 u_jointMat[18];
+uniform mat3 u_normalMatrix;
+uniform mat4 u_modelViewMatrix;
+uniform mat4 u_projectionMatrix;
+void main(void) {
+mat4 skinMat = a_weight.x * u_jointMat[int(a_joint.x)];
+skinMat += a_weight.y * u_jointMat[int(a_joint.y)];
+skinMat += a_weight.z * u_jointMat[int(a_joint.z)];
+skinMat += a_weight.w * u_jointMat[int(a_joint.w)];
+vec4 pos = u_modelViewMatrix * skinMat * vec4(a_position,1.0);
+v_normal = u_normalMatrix * mat3(skinMat)* a_normal;
+gl_Position = u_projectionMatrix * pos;
+}

examples/test/model/index.html

@@ -11,13 +11,16 @@
       <a-assets>
         <a-asset-item id="crate-obj" src="../../assets/models/crate/crate.obj"></a-asset-item>
         <a-asset-item id="crate-mtl" src="../../assets/models/crate/crate.mtl"></a-asset-item>
+        <a-asset-item id="brainstem" src="../../assets/models/brainstem/BrainStem.gltf"></a-asset-item>
         <a-asset-item id="monster" src="monster/monster.dae"></a-asset-item>
       </a-assets>
 
       <a-entity position="0 0 -12">
         <a-entity collada-model="#monster" material="color: green" scale="0.25 0.25 0.25"
                   position="-10 0 1"></a-entity>
 
+        <a-entity gltf-model="#brainstem" position="10 -1 5" scale="3 3 3"></a-entity>
+
         <a-entity obj-model="obj: #crate-obj; mtl: #crate-mtl" position="5 0 5"></a-entity>
         <a-entity obj-model="obj: #crate-obj; mtl: #crate-mtl" position="5 2 5"></a-entity>
       </a-entity>

src/components/gltf-model.js

@@ -0,0 +1,37 @@
+var registerComponent = require('../core/component').registerComponent;
+var THREE = require('../lib/three');
+
+/**
+ * glTF model loader.
+ */
+module.exports.Component = registerComponent('gltf-model', {
+  schema: {type: 'model'},
+
+  init: function () {
+    this.model = null;
+    this.loader = new THREE.GLTFLoader();
+  },
+
+  update: function () {
+    var self = this;
+    var el = this.el;
+    var src = this.data;
+
+    if (!src) { return; }
+
+    this.remove();
+
+    this.loader.load(src, function (gltfModel) {
+      self.model = gltfModel.scene;
+      self.system.addModel(self.model);
+      el.setObject3D('mesh', self.model);
+      el.emit('model-loaded', {format: 'gltf', model: self.model});
+    });
+  },
+
+  remove: function () {
+    if (!this.model) { return; }
+    this.el.removeObject3D('mesh');
+    this.system.removeModel(this.model);
+  }
+});

src/components/index.js

@@ -3,6 +3,7 @@ require('./camera');
 require('./collada-model');
 require('./cursor');
 require('./geometry');
+require('./gltf-model');
 require('./hand-controls');
 require('./light');
 require('./look-controls');

src/lib/three.js

@@ -19,6 +19,7 @@ if (THREE.Cache) {
 }
 
 // TODO: Eventually include these only if they are needed by a component.
+require('three/examples/js/loaders/GLTFLoader');  // THREE.GLTFLoader
 require('three/examples/js/loaders/OBJLoader');  // THREE.OBJLoader
 require('three/examples/js/loaders/MTLLoader');  // THREE.MTLLoader
 require('three/examples/js/BlendCharacter');  // THREE.BlendCharacter
@@ -27,6 +28,7 @@ require('../../vendor/VRControls');  // THREE.VRControls
 require('../../vendor/VREffect');  // THREE.VREffect
 
 THREE.ColladaLoader.prototype.crossOrigin = 'anonymous';
+THREE.GLTFLoader.prototype.crossOrigin = 'anonymous';
 THREE.MTLLoader.prototype.crossOrigin = 'anonymous';
 THREE.OBJLoader.prototype.crossOrigin = 'anonymous';
 

src/systems/gltf-model.js

@@ -0,0 +1,41 @@
+var registerSystem = require('../core/system').registerSystem;
+var THREE = require('../lib/three');
+
+/**
+ * glTF model system.
+ */
+module.exports.System = registerSystem('gltf-model', {
+  init: function () {
+    this.models = [];
+  },
+
+  /**
+   * Updates shaders for all glTF models in the system.
+   */
+  tick: function () {
+    var sceneEl = this.sceneEl;
+    if (sceneEl.hasLoaded && this.models.length) {
+      THREE.GLTFLoader.Shaders.update(sceneEl.object3D, sceneEl.camera);
+    }
+  },
+
+  /**
+   * Registers a glTF asset.
+   * @param {object} gltf Asset containing a scene and (optional) animations and cameras.
+   */
+  addModel: function (gltf) {
+    this.models.push(gltf);
+  },
+
+  /**
+   * Unregisters a glTF asset.
+   * @param  {object} gltf Asset containing a scene and (optional) animations and cameras.
+   */
+  removeModel: function (gltf) {
+    var models = this.models;
+    var index = models.indexOf(gltf);
+    if (index >= 0) {
+      models.splice(index, 1);
+    }
+  }
+});

src/systems/index.js

@@ -1,5 +1,6 @@
 require('./camera');
 require('./geometry');
+require('./gltf-model');
 require('./light');
 require('./material');
 require('./tracked-controls');