尝试为 AFrame 实现 AlphaVideo 着色器。 material.needsUpdate 的问题答案

【问题标题】：Trying to implement an AlphaVideo Shader for AFrame. Issues with material.needsUpdate尝试为 AFrame 实现 AlphaVideo 着色器。 material.needsUpdate 的问题
【发布时间】：2017-03-29 07:33:56
【问题描述】：

我正在尝试使用 alpha 着色器创建一个视频，我曾在 three.js 中工作过，但我无法将其转换为 AFrame。我看到的是着色器一开始没有正确应用，如果我应用标准着色器然后重新选择 alphaMatte 着色器，它将显示视频帧但不显示视频播放。我应该在哪里设置 material.needsUpdate 或者如何让我的着色器在开始时正确初始化？

这是着色器代码供参考：

AFRAME.registerShader('alphamatte', {
      schema: {
        src: {type: 'map'},
        transparent: {default: true}
      },

      vertexShader: [
        'varying vec2 vUv;',
        'varying float texU;',
        'void main()',
        '{',
        '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()',
        '{',
        'vec2 texcoord = vec2(0.49, 0.0);',
        'vec2 halfTex = vec2(0.5, 1.0);',
        'vec3 tColor = texture2D( texture, ( vUv * halfTex ) ).rgb;',
        'vec3 aColor = texture2D( texture, ( (vUv * halfTex ) + texcoord ) ).rgb;',
        'float a = aColor.g;',
        'gl_FragColor = vec4(tColor, a);',
        '}'
      ].join('\n')
    })


<!doctype html>
    <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
  <title>alphaMatte</title>
    <script src="https://aframe.io/releases/0.5.0/aframe.min.js"></script>

    <link rel="stylesheet" type="text/css" href="style.css">
  <script src="alphamatteShader.js"></script>

 <body style="background-color:rgba(255,255,255,0.7)">
    <a-scene>
        <a-assets>
          <video id="alphavideo" src="gangnam.mp4" loop autoplay muted />
        </a-assets>
        <a-entity id="vidCube" material="shader: alphamatte; src: #alphavideo" geometry="primitive: box" position="0 0.0 -4.0"></a-entity>
    </a-scene>
  </body>

</html>

当我使用应用于立方体的着色器运行 html 时，它会变得不可见。如果我在编辑器中将着色器更改为标准，那么它会显示移动视频。如果我重新应用 alphamatte 着色器，它会显示一帧 alpha 被剔除的视频，但视频无法播放。我猜我需要更新刻度上的纹理？但是在哪里？

【问题讨论】：

标签： aframe

【解决方案1】：

所以在对我的原始threejs 源进行一些探索并意识到我应该使用此处引用的THREE.ShaderMaterial 之后，我让它工作了..threejs.org/docs/api/materials/ShaderMaterial.html

这是工作代码。

AFRAME.registerShader('alphamatte', {
      schema: {
        src: {type: 'map', is: 'uniform'},
        transparent: {default: true, is: 'uniform'}
      },
      init: function (data) {
        var videoTexture = new THREE.VideoTexture(data.src);
            videoTexture.minFilter = THREE.LinearFilter;
            videoTexture.magFilter = THREE.LinearFilter;

        this.material = new THREE.ShaderMaterial( {
        uniforms: {
            texture: {
                type: "t",
                value: videoTexture
            }
        },
        vertexShader: this.vertexShader,
        fragmentShader: this.fragmentShader });
      },

      update: function (data) {
        this.material.src = data.src;
        this.material.transparent = data.transparent;
      },

      vertexShader: [
        'varying vec2 vUv;',
        'varying float texU;',
        'void main()',
        '{',
        '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()',
        '{',
        'vec2 texcoord = vec2(0.49, 0.0);',
        'vec2 halfTex = vec2(0.5, 1.0);',
        'vec3 tColor = texture2D( texture, ( vUv * halfTex ) ).rgb;',
        'vec3 aColor = texture2D( texture, ( (vUv * halfTex ) + texcoord ) ).rgb;',
        'float a = aColor.g;',
        'gl_FragColor = vec4(tColor, a);',
        '}'
      ].join('\n')
    })

但是，现在我收到一些 WebGL 错误提示。 “错误：WebGL：texImage2D：未能命中 GPU 复制快速路径。回退到 CPU 上传。aframe.min.js:107:826 错误：WebGL：texImage2D：转换需要重新格式化像素。 aframe.min.js:107:826

【讨论】：