프래임의 chromakey 쉐이더에 불투명도를 추가하십시오.

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

을 방법을 작동하는 경우

다음 코드를보십시오 (내가 그것을 테스트하지 않았습니다)와 참조하면 value을 설정해야 재산 및 당신은 재료의 유니폼 (needsUpdate)를 업데이트 할 필요가 있다는 알림을 설정해야합니다 :

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

은 또한 당신이 조각 쉐이더에 균일 opacity을 추가해야합니다. 알파 채널에 opacity 균일 승산 다음 단편 쉐이더 참조 : opacity 0.0으로 설정하면,

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

참고 출력이 완전히 사라진다.

Answer 2

당신이 필요

셰이더에 불투명 제복을 추가하여 원하는 것을 지원하십시오. 당신이 균일 (function update)의 값을 업데이트 할 때 당신이

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