make shaders handle setting textures (#1399)

Author: ngokevin

docs/components/material.md

@@ -46,8 +46,8 @@ The material component has only a few base properties, but more properties will
 
 | Event Name              | Description                                                                                |
 |-------------------------|--------------------------------------------------------------------------------------------|
-| material-texture-loaded | Texture loaded onto material. Or when the first frame is playing for video textures.       |
-| material-video-ended    | For video textures, emitted when the video has reached its end (may not work with `loop`). |
+| materialtextureloaded | Texture loaded onto material. Or when the first frame is playing for video textures.       |
+| materialvideoended    | For video textures, emitted when the video has reached its end (may not work with `loop`). |
 
 ## Textures
 

src/systems/material.js

@@ -2,9 +2,6 @@ var registerSystem = require('../core/system').registerSystem;
 var THREE = require('../lib/three');
 var utils = require('../utils/');
 
-var EVENTS = {
-  TEXTURE_LOADED: 'material-texture-loaded'
-};
 var debug = utils.debug;
 var error = debug('components:texture:error');
 var TextureLoader = new THREE.TextureLoader();
@@ -30,58 +27,69 @@ module.exports.System = registerSystem('material', {
   },
 
   /**
-   * High-level function for loading image textures. Meat of logic is in `loadImageTexture`.
+   * Determine whether `src` is a image or video. Then try to load the asset, then call back.
    *
-   * @param {Element} el - Entity, used to emit event.
-   * @param {object} material - three.js material, bound by the A-Frame shader.
-   * @param {object} data - Shader data, bound by the A-Frame shader.
-   * @param {Element|string} src - Texture source, bound by `src-loader` utils.
+   * @param {string} src - Texture URL.
+   * @param {string} data - Relevant texture data used for caching.
+   * @param {function} cb - Callback to pass texture to.
    */
-  loadImage: function (el, material, data, src) {
-    var repeat = data.repeat || '1 1';
-    var srcString = src;
-    var textureCache = this.textureCache;
+  loadTexture: function (src, data, cb) {
+    var self = this;
+    utils.srcLoader.validateSrc(src, loadImageCb, loadVideoCb);
+    function loadImageCb (src) { self.loadImage(src, data, cb); }
+    function loadVideoCb (src) { self.loadVideo(src, data, cb); }
+  },
 
-    if (typeof src !== 'string') { srcString = src.getAttribute('src'); }
+  /**
+   * High-level function for loading image textures (THREE.Texture).
+   *
+   * @param {Element|string} src - Texture source.
+   * @param {object} data - Texture data.
+   * @param {function} cb - Callback to pass texture to.
+   */
+  loadImage: function (src, data, cb) {
+    var hash = this.hash(data);
+    var handleImageTextureLoaded = cb;
+    var textureCache = this.textureCache;
 
-    // Another material is already loading this texture. Wait on promise.
-    if (textureCache[src] && textureCache[src][repeat]) {
-      textureCache[src][repeat].then(handleImageTextureLoaded);
+    // Texture already being loaded or already loaded. Wait on promise.
+    if (textureCache[hash]) {
+      textureCache[hash].then(handleImageTextureLoaded);
       return;
     }
 
-    // Material instance is first to try to load this texture. Load it.
-    textureCache[srcString] = textureCache[srcString] || {};
-    textureCache[srcString][repeat] = textureCache[srcString][repeat] || {};
-    textureCache[srcString][repeat] = loadImageTexture(material, src, repeat);
-    textureCache[srcString][repeat].then(handleImageTextureLoaded);
-
-    function handleImageTextureLoaded (texture) {
-      utils.material.updateMaterialTexture(material, texture);
-      el.emit(EVENTS.TEXTURE_LOADED, { src: src, texture: texture });
-    }
+    // Texture not yet being loaded. Start loading it.
+    textureCache[hash] = loadImageTexture(src, data);
+    textureCache[hash].then(handleImageTextureLoaded);
   },
 
-  /**
-   * Load video texture.
-   * Note that creating a video texture is more synchronous than creating an image texture.
+    /**
+   * Load video texture (THREE.VideoTexture).
+   * Which is just an image texture that RAFs + needsUpdate.
+   * Note that creating a video texture is synchronous unlike loading an image texture.
+   * Made asynchronous to be consistent with image textures.
    *
-   * @param {Element} el - Entity, used to emit event.
-   * @param {object} material - three.js material.
-   * @param data {object} - Shader data, bound by the A-Frame shader.
-   * @param src {Element|string} - Texture source, bound by `src-loader` utils.
+   * @param {Element|string} src - Texture source.
+   * @param {object} data - Texture data.
+   * @param {function} cb - Callback to pass texture to.
    */
-  loadVideo: function (el, material, data, src) {
+  loadVideo: function (src, data, cb) {
     var hash;
     var texture;
     var textureCache = this.textureCache;
     var videoEl;
     var videoTextureResult;
 
+    function handleVideoTextureLoaded (result) {
+      result.texture.needsUpdate = true;
+      cb(result.texture, result.videoEl);
+    }
+
+    // Video element provided.
     if (typeof src !== 'string') {
       // Check cache before creating texture.
       videoEl = src;
-      hash = calculateVideoCacheHash(videoEl);
+      hash = this.hashVideo(data, videoEl);
       if (textureCache[hash]) {
         textureCache[hash].then(handleVideoTextureLoaded);
         return;
@@ -90,11 +98,11 @@ module.exports.System = registerSystem('material', {
       fixVideoAttributes(videoEl);
     }
 
-    // Use video element to create texture.
-    videoEl = videoEl || createVideoEl(material, src, data.width, data.height);
+    // Only URL provided. Use video element to create texture.
+    videoEl = videoEl || createVideoEl(src, data.width, data.height);
 
     // Generated video element already cached. Use that.
-    hash = calculateVideoCacheHash(videoEl);
+    hash = this.hashVideo(data, videoEl);
     if (textureCache[hash]) {
       textureCache[hash].then(handleVideoTextureLoaded);
       return;
@@ -103,28 +111,20 @@ module.exports.System = registerSystem('material', {
     // Create new video texture.
     texture = new THREE.VideoTexture(videoEl);
     texture.minFilter = THREE.LinearFilter;
+    setTextureProperties(texture, data);
 
     // Cache as promise to be consistent with image texture caching.
-    videoTextureResult = {
-      texture: texture,
-      videoEl: videoEl
-    };
+    videoTextureResult = {texture: texture, videoEl: videoEl};
     textureCache[hash] = Promise.resolve(videoTextureResult);
     handleVideoTextureLoaded(videoTextureResult);
+  },
 
-    function handleVideoTextureLoaded (res) {
-      texture = res.texture;
-      videoEl = res.videoEl;
-      utils.material.updateMaterialTexture(material, texture);
-      el.emit(EVENTS.TEXTURE_LOADED, { element: videoEl, src: src });
-      videoEl.addEventListener('loadeddata', function () {
-        el.emit('material-video-loadeddata', { element: videoEl, src: src });
-      });
-      videoEl.addEventListener('ended', function () {
-        // Works for non-looping videos only.
-        el.emit('material-video-ended', { element: videoEl, src: src });
-      });
-    }
+  hash: function (data) {
+    return JSON.stringify(data);
+  },
+
+  hashVideo: function (data, videoEl) {
+    return calculateVideoCacheHash(data, videoEl);
   },
 
   /**
@@ -161,10 +161,11 @@ module.exports.System = registerSystem('material', {
  * If the video element has an ID, use that.
  * Else build a hash that looks like `src:myvideo.mp4;height:200;width:400;`.
  *
+ * @param data {object} - Texture data such as repeat.
  * @param videoEl {Element} - Video element.
  * @returns {string}
  */
-function calculateVideoCacheHash (videoEl) {
+function calculateVideoCacheHash (data, videoEl) {
   var i;
   var id = videoEl.getAttribute('id');
   var hash;
@@ -174,7 +175,7 @@ function calculateVideoCacheHash (videoEl) {
 
   // Calculate hash using sorted video attributes.
   hash = '';
-  videoAttributes = {};
+  videoAttributes = data || {};
   for (i = 0; i < videoEl.attributes.length; i++) {
     videoAttributes[videoEl.attributes[i].name] = videoEl.attributes[i].value;
   }
@@ -186,84 +187,84 @@ function calculateVideoCacheHash (videoEl) {
 }
 
 /**
- * Set image texture on material as `map`.
+ * Load image texture.
  *
  * @private
- * @param {object} el - Entity element.
- * @param {object} material - three.js material.
  * @param {string|object} src - An <img> element or url to an image file.
- * @param {string} repeat - X and Y value for size of texture repeating (in UV units).
+ * @param {object} data - Data to set texture properties like `repeat`.
  * @returns {Promise} Resolves once texture is loaded.
  */
-function loadImageTexture (material, src, repeat) {
+function loadImageTexture (src, data) {
   return new Promise(doLoadImageTexture);
 
   function doLoadImageTexture (resolve, reject) {
     var isEl = typeof src !== 'string';
 
+    function resolveTexture (texture) {
+      setTextureProperties(texture, data);
+      texture.needsUpdate = true;
+      resolve(texture);
+    }
+
     // Create texture from an element.
     if (isEl) {
-      createTexture(src);
+      resolveTexture(new THREE.Texture(src));
       return;
     }
 
     // Load texture from src string. THREE will create underlying element.
     // Use THREE.TextureLoader (src, onLoad, onProgress, onError) to load texture.
     TextureLoader.load(
       src,
-      createTexture,
+      resolveTexture,
       function () { /* no-op */ },
       function (xhr) {
         error('`$s` could not be fetched (Error code: %s; Response: %s)', xhr.status,
               xhr.statusText);
       }
     );
+  }
+}
 
-    /**
-     * Texture loaded. Set it.
-     */
-    function createTexture (texture) {
-      var repeatXY;
-      if (!(texture instanceof THREE.Texture)) { texture = new THREE.Texture(texture); }
-
-      // Handle UV repeat.
-      repeatXY = repeat.split(' ');
-      if (repeatXY.length === 2) {
-        texture.wrapS = THREE.RepeatWrapping;
-        texture.wrapT = THREE.RepeatWrapping;
-        texture.repeat.set(parseInt(repeatXY[0], 10), parseInt(repeatXY[1], 10));
-      }
+/**
+ * Set texture properties such as repeat.
+ *
+ * @param {object} data - With keys like `repeat`.
+ */
+function setTextureProperties (texture, data) {
+  // Handle UV repeat.
+  var repeat = data.repeat || '1 1';
+  var repeatXY = repeat.split(' ');
 
-      resolve(texture);
-    }
-  }
+  // Don't bother setting repeat if it is 1/1. Power-of-two is required to repeat.
+  if (repeat === '1 1' || repeatXY.length !== 2) { return; }
+
+  texture.wrapS = THREE.RepeatWrapping;
+  texture.wrapT = THREE.RepeatWrapping;
+  texture.repeat.set(parseInt(repeatXY[0], 10), parseInt(repeatXY[1], 10));
 }
 
 /**
  * Create video element to be used as a texture.
  *
- * @param {object} material - three.js material.
  * @param {string} src - Url to a video file.
  * @param {number} width - Width of the video.
  * @param {number} height - Height of the video.
  * @returns {Element} Video element.
  */
-function createVideoEl (material, src, width, height) {
-  var el = material.videoEl || document.createElement('video');
-  el.width = width;
-  el.height = height;
-  if (el !== this.videoEl) {
-    el.setAttribute('webkit-playsinline', '');  // To support inline videos in iOS webviews.
-    el.autoplay = true;
-    el.loop = true;
-    el.crossOrigin = true;
-    el.addEventListener('error', function () {
-      warn('`$s` is not a valid video', src);
-    }, true);
-    material.videoEl = el;
-  }
-  el.src = src;
-  return el;
+function createVideoEl (src, width, height) {
+  var videoEl = document.createElement('video');
+  videoEl.width = width;
+  videoEl.height = height;
+  videoEl.setAttribute('webkit-playsinline', '');  // Support inline videos for iOS webviews.
+  videoEl.autoplay = true;
+  videoEl.loop = true;
+  videoEl.crossOrigin = true;
+  videoEl.addEventListener('error', function () {
+    warn('`$s` is not a valid video', src);
+  }, true);
+  videoEl.src = src;
+  return videoEl;
 }
 
 /**
@@ -280,10 +281,8 @@ function createVideoEl (material, src, width, height) {
  * @returns {Element} Video element with the correct properties updated.
  */
 function fixVideoAttributes (videoEl) {
+  videoEl.autoplay = videoEl.getAttribute('autoplay') !== 'false';
   videoEl.controls = videoEl.getAttribute('controls') !== 'false';
-  if (videoEl.getAttribute('autoplay') === 'false') {
-    videoEl.removeAttribute('autoplay');
-  }
   if (videoEl.getAttribute('loop') === 'false') {
     videoEl.removeAttribute('loop');
   }