A帧A文本蒙版

Question

i can not find any answer about masking a picture with an a-text primitive or other possibilities with a-frame or threejs behind. The bitmap text should be a mask for an underlying image. Somebody told me, it could be solved via shaders https://aframe.io/docs/0.8.0/primitives/a-text.html#attributes_shader and advised me to read the book of shaders https://thebookofshaders.com with 155 pages foreknowledge! I am not sure if this is the right hint anyway!?

Here you can see the illustrated task position as grafic view:

https://photos.app.goo.gl/MLZjcucfpuqmtinH7

Codepen: http://codepen.w3x.de

Answer 1

Copy and paste the A-Frame text shader code (remove the module.exports) and register a text shader. Here's the current MSDF shader:

AFRAME.registerShader('yourtextshader', {
      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;',
        'uniform bool negate;',
        'uniform float alphaTest;',
        'uniform float opacity;',
        'uniform sampler2D map;',
        'uniform vec3 color;',
        'varying vec2 vUV;',

        'float median(float r, float g, float b) {',
        '  return max(min(r, g), min(max(r, g), b));',
        '}',

        // FIXME: Experimentally determined constants.
        '#define BIG_ENOUGH 0.001',
        '#define MODIFIED_ALPHATEST (0.02 * isBigEnough / BIG_ENOUGH)',

        '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));',

        '  // Do modified alpha test.',
        '  if (alpha < alphaTest * MODIFIED_ALPHATEST) { discard; return; }',
        '  gl_FragColor = vec4(color.xyz, alpha * opacity);',
        '}'
      ].join('\n')
    });

The fragment shader is what computes the color of the text. You get vUV which is the UV map for that fragment, telling where to sample in the texture.

What you would need to do to modify this shader. Don't have time to do a full example yet, but...:

1. Accept another parameter of your texture, add to the schema.
2. Pass that texture into the shader ( <a-entity text="shader: yourTextShader; yourTexture: #texture ).
3. Add a uniform for that texture in the fragment shader uniform sampler2D yourTexture ).
4. Modify the fragment shader to use the texture color instead of the color gl_FragColor = vec4(texture2D(yourTexture, vUv), alpha * opacity)