Expose premultipliedAlpha on material component

docs/components/material.md

@@ -64,6 +64,7 @@ depending on the material type applied.
 | flatShading  | Use `THREE.FlatShading` rather than `THREE.StandardShading`.                                                                                      | false         |
 | offset       | Texture offset to be used.                                                                                                                        | {x: 0, y: 0}  |
 | opacity      | Extent of transparency. If the `transparent` property is not `true`, then the material will remain opaque and `opacity` will only affect color.   | 1.0           |
+| premultipliedAlpha | Whether the material's RGB channels are premultiplied by its alpha channel. Automatically forced to `true` when `blending` is `multiply`.   | false         |
 | repeat       | Texture repeat to be used.                                                                                                                        | {x: 1, y: 1}  |
 | magFilter    | Which magnifying filter to use when sampling textures. Can be one of `linear` or `nearest`.                                                       | `linear`      |
 | minFilter    | Which minifying filter to use when sampling textures. Can be one of `linear`, `linear-mipmap-nearest`, `linear-mipmap-linear`, `nearest`, `nearest-mipmap-nearest` or `nearest-mipmap-linear`. | `linear-mipmap-linear` |

src/components/material.js

@@ -20,6 +20,7 @@ export var Component = registerComponent('material', {
     flatShading: {default: false},
     offset: {type: 'vec2', default: {x: 0, y: 0}},
     opacity: {default: 1.0, min: 0.0, max: 1.0},
+    premultipliedAlpha: {default: false},
     repeat: {type: 'vec2', default: {x: 1, y: 1}},
     magFilter: {default: 'linear', oneOf: ['nearest', 'linear']},
     minFilter: {
@@ -139,6 +140,9 @@ export var Component = registerComponent('material', {
     material.vertexColors = data.vertexColorsEnabled;
     material.visible = data.visible;
     material.blending = parseBlending(data.blending);
+    // three.js r178+ requires premultipliedAlpha for MultiplyBlending,
+    // so force it on regardless of the user-supplied value.
+    material.premultipliedAlpha = data.blending === 'multiply' ? true : data.premultipliedAlpha;
     material.dithering = data.dithering;
 
     // Check if material needs update.

tests/components/material.test.js

@@ -394,6 +394,26 @@ suite('material', function () {
       el.setAttribute('material', 'blending', 'multiply');
       assert.equal(el.components.material.material.blending, THREE.MultiplyBlending);
     });
+
+    test('forces premultipliedAlpha when blending is multiply', function () {
+      el.setAttribute('material', 'blending: multiply; transparent: true');
+      assert.strictEqual(el.components.material.material.premultipliedAlpha, true);
+    });
+
+    test('forces premultipliedAlpha even if user sets it to false with multiply', function () {
+      el.setAttribute('material', 'blending: multiply; transparent: true; premultipliedAlpha: false');
+      assert.strictEqual(el.components.material.material.premultipliedAlpha, true);
+    });
+
+    test('premultipliedAlpha defaults to false for other blending modes', function () {
+      el.setAttribute('material', 'blending: additive; transparent: true');
+      assert.strictEqual(el.components.material.material.premultipliedAlpha, false);
+    });
+
+    test('respects user-supplied premultipliedAlpha for non-multiply blending', function () {
+      el.setAttribute('material', 'blending: additive; transparent: true; premultipliedAlpha: true');
+      assert.strictEqual(el.components.material.material.premultipliedAlpha, true);
+    });
   });
 
   suite('anisotropy', function () {