material.test.js

/* global assert, setup, suite, test, sinon, AFRAME */
import { entityFactory } from '../helpers.js';
import { shaders } from 'core/shader.js';
import THREE from 'lib/three.js';

var IMG_SRC = '/base/tests/assets/test.png';

suite('material', function () {
  var el;

  setup(function (done) {
    el = entityFactory();
    this.sinon = sinon.createSandbox();
    el.setAttribute('geometry', '');
    el.setAttribute('material', 'shader: flat');
    if (el.hasLoaded) { done(); }
    el.addEventListener('loaded', function (evt) {
      done();
    });
  });

  suite('update', function () {
    test('creates material', function () {
      assert.ok(el.getObject3D('mesh').material);
    });

    test('updates material', function () {
      el.setAttribute('material', 'color: #F0F; side: double');
      assert.shallowDeepEqual(el.getObject3D('mesh').material.color,
                              {r: 1, g: 0, b: 1});
      assert.shallowDeepEqual(el.getObject3D('mesh').material.side, THREE.DoubleSide);
    });

    test('updates material shader', function () {
      assert.equal(el.getObject3D('mesh').material.type, 'MeshBasicMaterial');
      el.setAttribute('material', 'shader', 'standard');
      assert.equal(el.getObject3D('mesh').material.type, 'MeshStandardMaterial');
    });

    test('disposes material when changing to new material', function () {
      var material = el.getObject3D('mesh').material;
      var disposeSpy = this.sinon.spy(material, 'dispose');
      el.setAttribute('material', 'shader', 'standard');
      assert.ok(disposeSpy.called);
    });

    test('disposes material when removing material', function () {
      var material = el.getObject3D('mesh').material;
      var disposeSpy = this.sinon.spy(material, 'dispose');
      el.removeAttribute('material');
      assert.ok(disposeSpy.called);
    });

    test('disposes textures when removing material', function () {
      var material = el.getObject3D('mesh').material;
      var texture1 = {uuid: 'tex1', isTexture: true, dispose: sinon.spy()};
      var texture2 = {uuid: 'tex2', isTexture: true, dispose: sinon.spy()};
      material.map = texture1;
      material.normalMap = texture2;
      el.removeAttribute('material');
      assert.ok(texture1.dispose.called);
      assert.ok(texture2.dispose.called);
    });

    test('disposes texture when removing texture', function (done) {
      var imageUrl = 'base/tests/assets/test.png';
      el.setAttribute('material', 'src: url(' + imageUrl + ')');
      el.addEventListener('materialtextureloaded', function (evt) {
        var loadedTexture = evt.detail.texture;
        var disposeSpy = sinon.spy(loadedTexture, 'dispose');
        el.setAttribute('material', 'src', '');
        assert.ok(disposeSpy.called);
        done();
      });
    });

    test('defaults to standard material', function () {
      el.removeAttribute('material'); // setup creates a non-default component
      el.setAttribute('material', '');
      assert.equal(el.getObject3D('mesh').material.type, 'MeshStandardMaterial');
    });

    test('does not recreate material for basic updates', function () {
      var uuid = el.getObject3D('mesh').material.uuid;
      el.setAttribute('material', 'color', '#F0F');
      assert.equal(el.getObject3D('mesh').material.uuid, uuid);
    });

    test('can toggle material to flat shading', function () {
      el.setAttribute('material', 'shader: flat');
      el.setAttribute('material', 'shader: standard');
      assert.equal(el.getObject3D('mesh').material.type, 'MeshStandardMaterial');
    });

    test('can unset fog', function () {
      assert.ok(el.getObject3D('mesh').material.fog);
      el.setAttribute('material', 'fog', false);
      assert.notOk(el.getObject3D('mesh').material.fog);
    });

    test('emits event when loading texture', function (done) {
      var imageUrl = 'base/tests/assets/test.png';
      el.setAttribute('material', '');
      assert.notOk(el.components.material.material.texture);
      el.setAttribute('material', 'src: url(' + imageUrl + ')');
      el.addEventListener('materialtextureloaded', function (evt) {
        var loadedTexture = evt.detail.texture;
        assert.ok(el.components.material.material.map === loadedTexture);
        done();
      });
    });

    test('can load canvas texture', function (done) {
      var canvas = document.createElement('canvas');
      canvas.setAttribute('id', 'canvas');
      el.sceneEl.appendChild(canvas);
      el.addEventListener('materialtextureloaded', function (evt) {
        assert.equal(el.components.material.material.map.image, canvas);
        done();
      });
      setTimeout(() => {
        el.setAttribute('material', {src: '#canvas'});
      });
    });

    test('updates texture when repeat changes', function (done) {
      var imageUrl = 'base/tests/assets/test.png';
      el.setAttribute('material', '');
      assert.notOk(el.components.material.material.texture);
      el.setAttribute('material', 'src: url(' + imageUrl + ')');
      el.addEventListener('materialtextureloaded', function (evt) {
        var loadedTexture = evt.detail.texture;
        assert.ok(el.components.material.material.map === loadedTexture);
        var version = loadedTexture.version;
        el.setAttribute('material', 'repeat', '2 2');
        assert.ok(el.components.material.material.map.version > version);
        done();
      });
    });

    test('removes texture when src attribute removed', function (done) {
      var imageUrl = 'base/tests/assets/test.png';
      el.setAttribute('material', '');
      assert.notOk(el.components.material.material.texture);
      el.setAttribute('material', 'src: url(' + imageUrl + ')');
      el.addEventListener('materialtextureloaded', function (evt) {
        var loadedTexture = evt.detail.texture;
        assert.ok(el.components.material.material.map === loadedTexture);
        el.removeAttribute('material', 'src');
        assert.notOk(el.components.material.material.map);
        done();
      });
    });

    test('removes texture when src attribute is empty string', function (done) {
      var imageUrl = 'base/tests/assets/test.png';
      el.setAttribute('material', '');
      assert.notOk(el.components.material.material.texture);
      el.setAttribute('material', 'src: url(' + imageUrl + ')');
      el.addEventListener('materialtextureloaded', function (evt) {
        var loadedTexture = evt.detail.texture;
        assert.ok(el.components.material.material.map === loadedTexture);
        el.setAttribute('material', 'src', '');
        assert.notOk(el.components.material.material.map);
        done();
      });
    });

    test('does not invoke XHR if passing <img>', function (done) {
      var assetsEl = document.createElement('a-assets');
      var img = document.createElement('img');
      var imageLoaderSpy = this.sinon.spy(THREE.ImageLoader.prototype, 'load');
      var textureLoaderSpy = this.sinon.spy(THREE.TextureLoader.prototype, 'load');
      img.setAttribute('src', IMG_SRC);
      img.setAttribute('id', 'foo');
      THREE.Cache.clear();
      assetsEl.appendChild(img);
      el.sceneEl.appendChild(assetsEl);
      // Adding the asset will add image:${IMG_SRC} in THREE.Cache when the img
      // loading is complete with img.onload, without going through THREE.ImageLoader
      assert.notOk(!!THREE.Cache.get(`image:${IMG_SRC}`));
      el.addEventListener('materialtextureloaded', function () {
        assert.notOk(imageLoaderSpy.called);
        assert.notOk(textureLoaderSpy.called);
        THREE.ImageLoader.prototype.load.restore();
        THREE.TextureLoader.prototype.load.restore();
        // load event is triggered after this materialtextureloaded callback
        img.addEventListener('load', function () {
          assert.equal(THREE.Cache.get(`image:${IMG_SRC}`), img);
          THREE.Cache.clear();
          done();
        }, {once: true});
      });
      el.setAttribute('material', 'src', '#foo');
    });

    test('invokes XHR if <img> not cached', function (done) {
      var imageLoaderSpy = this.sinon.spy(THREE.ImageLoader.prototype, 'load');
      el.addEventListener('materialtextureloaded', function () {
        assert.ok(imageLoaderSpy.called);
        assert.ok(!!THREE.Cache.get(`image:${IMG_SRC}`));
        THREE.ImageLoader.prototype.load.restore();
        done();
      });
      // The image is loaded via the material system using THREE.ImageLoader
      el.setAttribute('material', 'src', IMG_SRC);
    });

    test('sets material to MeshShaderMaterial for custom shaders', function () {
      delete shaders.test;
      AFRAME.registerShader('test', {});
      assert.equal(el.getObject3D('mesh').material.type, 'MeshBasicMaterial');
      el.setAttribute('material', 'shader', 'test');
      assert.equal(el.getObject3D('mesh').material.type, 'ShaderMaterial');
    });
  });

  suite('updateSchema', function () {
    test('updates schema for flat shader', function () {
      el.components.material.updateSchema({shader: 'flat'});
      assert.ok(el.components.material.schema.color);
      assert.ok(el.components.material.schema.fog);
      assert.ok(el.components.material.schema.repeat);
      assert.ok(el.components.material.schema.src);
      assert.notOk(el.components.material.schema.metalness);
      assert.notOk(el.components.material.schema.roughness);
      assert.notOk(el.components.material.schema.envMap);
    });

    test('updates schema for custom shader', function () {
      delete shaders.test;
      AFRAME.registerShader('test', {
        schema: {
          color: {type: 'color'},
          luminance: {default: 1}
        }
      });
      el.setAttribute('material', 'shader', 'test');
      assert.ok(el.components.material.schema.opacity);
      assert.ok(el.components.material.schema.color);
      assert.ok(el.components.material.schema.luminance);
      assert.notOk(el.components.material.schema.src);
    });
  });

  suite('remove', function () {
    test('removes material', function () {
      assert.ok(el.getObject3D('mesh').material);
      el.removeAttribute('material');
      assert.equal(el.getObject3D('mesh').material.type, 'MeshBasicMaterial');
    });

    test('disposes material', function () {
      var material = el.getObject3D('mesh').material;
      var disposeSpy = this.sinon.spy(material, 'dispose');
      el.removeAttribute('material');
      assert.ok(disposeSpy.called);
    });
  });

  suite('side', function () {
    test('can be set with initial material', function (done) {
      var el = entityFactory();
      el.setAttribute('geometry', '');
      el.setAttribute('material', 'side: double');
      el.addEventListener('loaded', function () {
        assert.ok(el.getObject3D('mesh').material.side, THREE.DoubleSide);
        done();
      });
    });

    test('defaults to front side', function () {
      assert.equal(el.getObject3D('mesh').material.side, THREE.FrontSide);
    });

    test('can be set to back', function () {
      el.setAttribute('material', 'side: back');
      assert.equal(el.getObject3D('mesh').material.side, THREE.BackSide);
    });

    test('can be set to double', function () {
      el.setAttribute('material', 'side: double');
      assert.equal(el.getObject3D('mesh').material.side, THREE.DoubleSide);
    });

    test('sets material.needsUpdate true if side switches from/to double', function () {
      var oldMaterialVersion = el.getObject3D('mesh').material.version;
      el.setAttribute('material', 'side: front');
      assert.equal(el.getObject3D('mesh').material.version, oldMaterialVersion);
      el.setAttribute('material', 'side: double');
      assert.equal(el.getObject3D('mesh').material.version, oldMaterialVersion + 1);
      el.setAttribute('material', 'side: front');
      assert.equal(el.getObject3D('mesh').material.version, oldMaterialVersion + 2);
    });
  });

  suite('transparent', function () {
    test('can set transparent', function () {
      assert.notOk(el.getObject3D('mesh').material.transparent);
      el.setAttribute('material', 'opacity: 1; transparent: true');
      assert.equal(el.getObject3D('mesh').material.opacity, 1);
      assert.ok(el.getObject3D('mesh').material.transparent);
    });

    test('can be set to false', function () {
      el.setAttribute('material', 'opacity: 1; transparent: false');
      assert.equal(el.getObject3D('mesh').material.opacity, 1);
      assert.notOk(el.getObject3D('mesh').material.transparent);
    });

    test('is inferred if opacity is less than 1', function () {
      assert.notOk(el.getObject3D('mesh').material.transparent);
      el.setAttribute('material', 'opacity: 0.75');
      assert.equal(el.getObject3D('mesh').material.opacity, 0.75);
      assert.ok(el.getObject3D('mesh').material.transparent);
    });
  });

  suite('depthTest', function () {
    test('can be set to false', function () {
      assert.ok(el.getObject3D('mesh').material.depthTest);
      el.setAttribute('material', 'depthTest: false');
      assert.equal(el.getObject3D('mesh').material.depthTest, 0);
    });
  });

  suite('depthWrite', function () {
    test('can be set to false', function () {
      assert.ok(el.getObject3D('mesh').material.depthWrite);
      el.setAttribute('material', 'depthWrite: false');
      assert.equal(el.getObject3D('mesh').material.depthWrite, 0);
    });
  });

  suite('alphaTest', function () {
    test('can be updated', function () {
      assert.equal(el.getObject3D('mesh').material.alphaTest, 0);
      el.setAttribute('material', 'alphaTest: 1.0');
      assert.equal(el.getObject3D('mesh').material.alphaTest, 1);
    });

    test('sets material.needsUpdate true if alphaTest is updated', function () {
      var oldMaterialVersion = el.getObject3D('mesh').material.version;
      el.setAttribute('material', 'alphaTest: 0.0');
      assert.equal(el.getObject3D('mesh').material.version, oldMaterialVersion);
      el.setAttribute('material', 'alphaTest: 1.0');
      // A-Frame sets needsUpdate once and THREE one more internally when setting alphaTest.
      assert.equal(el.getObject3D('mesh').material.version, oldMaterialVersion + 2);
    });
  });

  suite('vertexColors', function () {
    test('defaults to no color', function () {
      assert.equal(el.getAttribute('material').vertexColorsEnabled, false);
      assert.equal(el.components.material.material.vertexColors, false);
    });

    test('can set vertex colors using vertexColorsEnabled property', function () {
      var oldMaterialVersion = el.getObject3D('mesh').material.version;
      el.setAttribute('material', 'vertexColorsEnabled', true);
      assert.equal(el.components.material.material.vertexColors, true);
      assert.equal(el.components.material.material.version, oldMaterialVersion + 1);
    });
  });

  test('can set visible to false', function () {
    assert.ok(el.getObject3D('mesh').material.visible);
    el.setAttribute('material', 'visible: false');
    assert.notOk(el.getObject3D('mesh').material.visible);
  });

  suite('blending', function () {
    test('defaults to normal', function () {
      assert.equal(el.getAttribute('material').blending, 'normal');
      assert.equal(el.components.material.material.blending, THREE.NormalBlending);
    });

    test('can set to no blending', function () {
      el.setAttribute('material', 'blending', 'none');
      assert.equal(el.components.material.material.blending, THREE.NoBlending);
    });

    test('can set to additive', function () {
      el.setAttribute('material', 'blending', 'additive');
      assert.equal(el.components.material.material.blending, THREE.AdditiveBlending);
    });

    test('can set to subtractive', function () {
      el.setAttribute('material', 'blending', 'subtractive');
      assert.equal(el.components.material.material.blending, THREE.SubtractiveBlending);
    });

    test('can set to multiply', function () {
      el.setAttribute('material', 'blending', 'multiply');
      assert.equal(el.components.material.material.blending, THREE.MultiplyBlending);
    });
  });

  suite('anisotropy', function () {
    test('defaults to THREE.Texture.DEFAULT_ANISOTROPY', function (done) {
      var imageUrl = 'base/tests/assets/test.png';
      el.setAttribute('material', '');
      assert.notOk(el.components.material.material.texture);
      el.setAttribute('material', 'src: url(' + imageUrl + ')');
      el.addEventListener('materialtextureloaded', function (evt) {
        var loadedTexture = evt.detail.texture;
        assert.ok(el.components.material.material.map === loadedTexture);
        assert.strictEqual(loadedTexture.anisotropy, THREE.Texture.DEFAULT_ANISOTROPY);
        done();
      });
    });

    test('can set specific anisotropic filtering sample rate', function (done) {
      var imageUrl = 'base/tests/assets/test.png';
      el.setAttribute('material', '');
      assert.notOk(el.components.material.material.texture);
      el.setAttribute('material', 'src: url(' + imageUrl + '); anisotropy: 8');
      el.addEventListener('materialtextureloaded', function (evt) {
        var loadedTexture = evt.detail.texture;
        assert.ok(el.components.material.material.map === loadedTexture);
        assert.strictEqual(loadedTexture.anisotropy, 8);
        done();
      });
    });
  });
});