Question

我找不到有关使用a-text原语遮盖图片或其他带有a-frame或threejs的可能性的答案。位图文本应该是基础图像的遮罩。有人告诉我，可以通过着色器https://aframe.io/docs/0.8.0/primitives/a-text.html#attributes_shader解决此问题，并建议我阅读有155页预言的着色器https://thebookofshaders.com书！我不确定这是否是正确的提示！？

在这里您可以看到以图形方式显示的任务位置：

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

Codepen：http://codepen.w3x.de

Answer 1

复制并粘贴A框架文本着色器代码（删除module.exports）并注册一个文本着色器。这是当前的MSDF着色器：

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

片段着色器用于计算文本的颜色。您将得到vUV，它是该片段的UV贴图，告诉您要在纹理中进行采样的位置。

修改该着色器所需执行的操作。还没有时间做一个完整的例子，但是...：

接受纹理的另一个参数，将其添加到架构中。
将该纹理传递到着色器（<a-entity text="shader: yourTextShader; yourTexture: #texture）。
在片段着色器uniform sampler2D yourTexture中为该纹理添加制服。
修改片段着色器以使用纹理颜色而不是颜色gl_FragColor = vec4(texture2D(yourTexture, vUv), alpha * opacity)

A帧A文本蒙版

1 个答案: