[text] Add .negate property for msdfgen >1.4

src/components/text.js

@@ -61,6 +61,8 @@ module.exports.Component = registerComponent('text', {
     letterSpacing: {type: 'number', default: 0},
     // `lineHeight` defaults to font's `lineHeight` value.
     lineHeight: {type: 'number'},
+    // `negate` must be true for fonts generated with older versions of msdfgen (white background).
+    negate: {type: 'boolean', default: true},
     opacity: {type: 'number', default: 1.0},
     shader: {default: 'sdf', oneOf: shaders},
     side: {default: 'front', oneOf: ['front', 'back', 'double']},
@@ -160,7 +162,8 @@ module.exports.Component = registerComponent('text', {
       map: this.texture,
       opacity: data.opacity,
       side: parseSide(data.side),
-      transparent: data.transparent
+      transparent: data.transparent,
+      negate: data.negate
     };
 
     // Shader has not changed, do an update.

src/shaders/msdf.js

@@ -9,6 +9,7 @@ module.exports.Shader = registerShader('msdf', {
     alphaTest: {type: 'number', is: 'uniform', default: 0.5},
     color: {type: 'color', is: 'uniform', default: 'white'},
     map: {type: 'map', is: 'uniform'},
+    negate: {type: 'boolean', is: 'uniform', default: true},
     opacity: {type: 'number', is: 'uniform', default: 1.0}
   },
 
@@ -42,13 +43,17 @@ module.exports.Shader = registerShader('msdf', {
     'uniform vec3 color;',
     'uniform float opacity;',
     'uniform float alphaTest;',
+    'uniform bool negate;',
     'varying vec2 vUV;',
 
     'float median(float r, float g, float b) {',
     '  return max(min(r, g), min(max(r, g), b));',
     '}',
     'void main() {',
-    '  vec3 sample = 1.0 - texture2D(map, vUV).rgb;',
+    '  vec3 sample = texture2D(map, vUV).rgb;',
+    '  if (negate) {',
+    '    sample = 1.0 - sample;',
+    '  }',
     '  float sigDist = median(sample.r, sample.g, sample.b) - 0.5;',
     '  float alpha = clamp(sigDist/fwidth(sigDist) + 0.5, 0.0, 1.0);',
     '  float dscale = 0.353505;',

tests/components/text.test.js

@@ -179,6 +179,13 @@ suite('text', function () {
       value = el.getObject3D('text').material.side;
       assert.equal(value, THREE.DoubleSide);
     });
+
+    test('updates material negate', function () {
+      var value;
+      el.setAttribute('text', 'negate', false);
+      value = el.getObject3D('text').material.uniforms.negate.value;
+      assert.equal(value, 0.0);
+    });
   });
 
   suite('updateFont', function () {