Question

我正在尝试使用alpha Shader创建一个视频，我曾在three.js中工作，但我很难将其翻译成AFrame。我所看到的是，着色器首先没有正确应用，如果我应用标准着色器然后重新选择alphaMatte着色器，它将显示视频帧而不是视频播放。我在哪里设置material.needsUpdate或如何在开始时正确初始化我的着色器？

以下是着色器代码供参考：

SELECT (3,0) > (2,2); # returns 1, whaaaaaat?
SELECT 3 > 2 AND 0 > 2; # returns 0, like expected

当我运行带有应用于多维数据集的着色器的html时，它会变得不可见。如果我在编辑器中将着色器更改为标准，则会显示移动视频。如果我重新应用alphamatte着色器，它会显示一个带有alpha的视频帧被淘汰，但视频无法播放..我猜我需要更新刻度线上的纹理？但在哪里？

Answer 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错误。＆＃34;错误：WebGL：texImage2D：无法点击GPU复制快速路径。回退到CPU上传。 aframe.min.js：107：826 错误：WebGL：texImage2D：转换需要像素重新格式化。 aframe.min.js：107：826

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

1 个答案: