Aframe: Text antialiasing in version 0.9.0

Created on 26 Feb 2019 · 9Comments · Source: aframevr/aframe

Description:

Text antialiasing is not as good in 0.9.0 as it was in version 0.8.2.
Text is barely readable and jagged on non-retina displays.

A-Frame Version: 0.9.0
Platform / Device: macOS High Sierra, Macbook Pro non-retina
URL(0.9.0): http://www.pirosca.com/a-frame-example/0.9.0.html
URL(0.8.2): http://www.pirosca.com/a-frame-example/0.8.2.html

Source

marcelpi

👍1

Most helpful comment

Restored, thanks!

ngokevin on 16 Apr 2019

👍2

All 9 comments

We had the same issue, with texts becoming unreadable after upgrading to 0.9.0

Looks like it is related to this commit: https://github.com/ngokevin/aframe/commit/8d3f32b93633e82025b4061deb148059757a4a0f
Fixed it for now on our side by defining a custom shader which is the version of the msdf shader before this commit.

olivier-wondavr on 29 Mar 2019

👍2

Can you show me how I can define this shader?
Any kind example would be welcome.

marcelpi on 29 Mar 2019

@marcelpi Here is the shader definition we use (the msdf shader version that was in v0.8.2):

AFRAME.registerShader('custom-sdf', {
  schema: {
    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 }
  },

  raw: true,

  vertexShader: [
    'attribute vec2 uv;',
    'attribute vec3 position;',
    'uniform mat4 projectionMatrix;',
    'uniform mat4 modelViewMatrix;',
    'varying vec2 vUV;',
    'void main(void) {',
    '  gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);',
    '  vUV = uv;',
    '}'
  ].join('\n'),

  fragmentShader: [
    '#ifdef GL_OES_standard_derivatives',
    '#extension GL_OES_standard_derivatives: enable',
    '#endif',

    'precision highp float;',
    // FIXME: Experimentally determined constants.
    '#define BIG_ENOUGH 0.001',
    '#define MODIFIED_ALPHATEST (0.02 * isBigEnough / BIG_ENOUGH)',
    '#define ALL_SMOOTH 0.4',
    '#define ALL_ROUGH 0.02',
    '#define DISCARD_ALPHA (alphaTest / (2.2 - 1.2 * ratio))',
    'uniform sampler2D map;',
    '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 = 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;',
    '  vec2 duv = dscale * (dFdx(vUV) + dFdy(vUV));',
    '  float isBigEnough = max(abs(duv.x), abs(duv.y));',
    // When texel is too small, blend raw alpha value rather than supersampling.
    // FIXME: Experimentally determined constant.
    '  if (isBigEnough > BIG_ENOUGH) {',
    '    float ratio = BIG_ENOUGH / isBigEnough;',
    '    alpha = ratio * alpha + (1.0 - ratio) * (sigDist + 0.5);',
    '  }',
    // When texel is big enough, do standard alpha test.
    // FIXME: Experimentally determined constant.
    // Looks much better if we *don't* do this, but do we get Z fighting?
    '  if (isBigEnough <= BIG_ENOUGH && alpha < alphaTest) { discard; return; }',
    // Else, do modified alpha test.
    // FIXME: Experimentally determined constant.
    '  if (alpha < alphaTest * MODIFIED_ALPHATEST) { discard; return; }',
    '  gl_FragColor = vec4(color.xyz, alpha * opacity);',
    '}'
  ].join('\n')
});

Then when defining a text entity:

element.setAttribute('text',{
shader: 'custom-sdf'
})

We also tried to modify the new shader version, but without success, so we decided to rollback to old version for now but there should be a better way of achieving this

olivier-wondavr on 29 Mar 2019

Thanks so much for this. I'll use it until this gets officially fixed.

marcelpi on 29 Mar 2019

Not sure if this code works though. I just tried using that shader on a text and it looks the same as before. No antialiasing.

Link: http://www.pirosca.com/a-frame-example/0.9.0-2.html
The shader is found here: http://www.pirosca.com/a-frame-example/js/components.js

Any ideas why it doesn't work?

marcelpi on 29 Mar 2019

FWIW, I've also noticed this regression as of 0.9.0.