代码之家 › 专栏 › 技术社区 › dianadf

在帧中向chromakey着色器添加不透明度

blending aframe shader three.js

dianadf · 技术社区 · 8 年前

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


})

2 回复 | 直到 8 年前

Rabbid76 8 年前

更新统一的值时( function update ),您必须设置 value 属性,您必须设置通知,即需要更新材料的制服( needsUpdate ):

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

此外,您还必须添加制服 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);
}

注意,如果 不透明度 设置为0.0时,输出将完全消失。

Rabbid76 8 年前

您需要将不透明度均匀添加到着色器中,以使其支持您想要的内容。

试试下面的代码(我还没有测试过),看看它是否符合您的要求

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