将不透明度添加到框架中的色键着色器

Question

我正在使用 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')


})

Answer 1

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

试试下面的代码（我还没有测试过）看看它的行为是否如你所愿

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

Answer 2

当您更新制服的值 (function update) 时，您必须设置 value 属性并且您必须设置通知，即material 需要更新 (needsUpdate):

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

此外，您必须将统一 opacity 添加到片段着色器。请参阅以下片段着色器，它将 opacity uniform 乘以 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，输出将完全消失。

将不透明度添加到框架中的色键着色器

Add opacity to chromakey shader in aframe

shader

blending

three.js

aframe