向帧中的色度键着色器添加不透明度

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


})

来源

2017-10-19 dianadfonseca

如果您只设置了“a = 0.3”，会发生什么情况？ – gaitat

我认为你是指片段着色器中的'a'。如果是这样，那么我得到不透明但失去了抠像效果。 – dianadfonseca

我只是想看看设置一个常数alpha是否会产生一些不透明性。既然你确实得到了不透明度，那么问题出在你用于'a'的公式上。该函数的极限（即可能的最小值和可能的最大值是多少）是什么，因为它应该接近[0,1]。如果你得到负值或大于1的值，驾驶员就会夹紧它们，这样你就失去了大部分时间想要的效果。 – gaitat

当您更新的制服（function update）的值时，你必须设置value财产和你要设置的通知，需要更新（needsUpdate）材料的制服：

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

而且你必须统一opacity添加到片段着色器。请参见下面的片段着色器它乘该opacity均匀到α通道：

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，则输出将完全消失。

来源

2017-10-20 17:14:48 Rabbid76

我做了你提到的改变，输出没有可见的视频。不透明度设置为0.5。 – dianadfonseca

更新：我确实设法通过手动添加不透明度值到0.2，即在片段着色器中：'gl_FragColor = vec4（tColor，a * 0.2）;' – dianadfonseca

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

试试下面的代码（我没有测试过），看看它的表现如何你想

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

来源

2017-10-20 01:05:30

视频完全消失。 – dianadfonseca

向帧中的色度键着色器添加不透明度

回答

相关问题