为 aframe 中的色键着色器添加不透明度答案

【问题标题】：Add opacity to chromakey shader in aframe为 aframe 中的色键着色器添加不透明度
【发布时间】：2018-04-01 00:20:28
【问题描述】：

我正在使用this shader 对视频进行色键处理。我想为同一视频添加不透明度。我一直在尝试将不透明度组件添加到着色器中，但必须缺少更多内容（不知道是什么）。

我在架构中添加了不透明度：

opacity: {type: 'number', is: 'uniform', default: 0.5}

并且在更新函数中：

this.material.uniforms.opacity = data.opacity

这是所有着色器代码：

AFRAME.registerShader('chromakey', {
  schema: {
    src: {type: 'map'},
    color: {default: {x: 0.1, y: 0.9, z: 0.2}, type: 'vec3', is: 'uniform'},
    transparent: {default: true, is: 'uniform'},
    opacity: {type: 'number', is: 'uniform', default: 0.5}
  },

  init: function (data) {
    var videoTexture = new THREE.VideoTexture(data.src)
    videoTexture.minFilter = THREE.LinearFilter
    this.material = new THREE.ShaderMaterial({
      uniforms: {
        color: {
          type: 'c',
          value: data.color
        },
        texture: {
          type: 't',
          value: videoTexture
        }
      },
      vertexShader: this.vertexShader,
      fragmentShader: this.fragmentShader
    })
  },

  update: function (data) {
    this.material.color = data.color
    this.material.src = data.src
    this.material.transparent = data.transparent
    this.material.uniforms.opacity = data.opacity
  },

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

  fragmentShader: [
    'uniform sampler2D texture;',
    'uniform vec3 color;',
    'varying vec2 vUv;',
    'void main(void)',
    '{',
    'vec3 tColor = texture2D( texture, vUv ).rgb;',
    'float a = (length(tColor - color) - 0.5) * 7.0;',
    'gl_FragColor = vec4(tColor, a);',
    '}'
  ].join('\n')


})

【问题讨论】：

如果你只设置a = 0.3会发生什么？
我想你指的是片段着色器中的“a”。如果是这样，那么我会变得不透明，但会失去色键效果。
我只是想看看设置一个恒定的 alpha 是否会产生一些不透明度。由于您确实获得了不透明度，因此问题在于您用于a 的公式。该函数的限制是什么（即可能的最小值是多少，可能的最大值是多少），因为它应该接近 [0,1]。如果你得到负值或远高于 1 的值，驱动程序会限制它们，所以你大部分时间都失去了你想要的效果。

标签： three.js shader aframe blending

【解决方案1】：

当你更新制服（function update）的值时，你必须设置value属性并且你必须设置通知，即材料的制服需要更新（needsUpdate）：

 this.material.uniforms.opacity.value = data.opacity
 this.material.needsUpdate = true

您还必须将统一的opacity 添加到片段着色器。请参阅以下片段着色器，它将 opacity 统一乘以 alpha 通道：

uniform float     opacity;
uniform sampler2D texture;
uniform vec3      color;
varying vec2      vUv;

void main(void)
{
    vec3 tColor = texture2D( texture, vUv ).rgb;
    float a = (length(tColor - color) - 0.5) * 7.0;
    gl_FragColor = vec4(tColor, a * opacity);
}

注意，如果opacity设置为0.0，输出将完全消失。

【讨论】：

我做了你提到的改变，输出没有可见的视频。并且不透明度设置为 0.5。
更新：我确实设法通过手动将不透明度值添加到 0.2 来获得一些结果，即在片段着色器中：gl_FragColor = vec4(tColor, a * 0.2);

【解决方案2】：

您需要向着色器添加一个不透明统一，以便它支持您想要的。

试试下面的代码（我还没有测试过），看看它的行为是否符合你的要求

fragmentShader: [
    'uniform sampler2D texture;',
    'uniform vec3 color;',
    'uniform float opacity;', // add the uniform to the shader
    'varying vec2 vUv;',
    'void main(void)',
    '{',
        'vec3 tColor = texture2D( texture, vUv ).rgb;',
        'float a = (length(tColor - color) - 0.5) * 7.0;',
        'gl_FragColor = vec4(tColor, a*opacity);', // add the opacity multiplier to the alpha channel
    '}'
].join('\n')

【讨论】：

视频完全消失了。