Question

我现在正致力于一个使用WebGL在图像上应用噪声抖动的项目。现在，我想让它适应视频，使用视频作为纹理而不是旧图像 - 开关工作完美。 Firefox（https://developer.mozilla.org/en-US/docs/Web/WebGL/Animating_textures_in_WebGL）给出的教程示例也像魅力一样。

但是，必须发生的事情总是发生：当你自己尝试时，它永远不会起作用 - 视频在第一帧停留，而音频开始正常播放。我试图修复它从Firefox的WebGL视频演示中获取更多代码，然后卷起Web以找到与我的问题类似的东西。所以我认为这不是视频的问题，但是当WebGL处理帧时是的。它看起来很结构化，因为我在Firefox控制台上运行它时没有出错。我还尝试了不同的设备（MacOSX，Ubuntu，Windows 8），包括Firefox和Chrome。

var videoElement;

function load() {
    clearInterval(timer);
    var canvas = document.getElementById("canvas");

    videoElement = document.getElementById("video");

... load（）函数结束......

        drawScene();

        initTexture();

        updateTexture();


        timer = setInterval(fr, 500);
        time = new Date().getTime();
        animation = "animate";
        anim();
    }

...声明纹理变量和函数......

var my_texture;

  function initTexture() {
  my_texture = gl.createTexture();
  gl.bindTexture(gl.TEXTURE_2D, my_texture);
  gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);

  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);

  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);

  gl.bindTexture(gl.TEXTURE_2D, null);
}


  function startVideo() {
  videoElement.play();
  intervalID = setInterval(drawScene, 15);
}

function videoDone() {
  clearInterval(intervalID);
}    

  function updateTexture() {
  gl.bindTexture(gl.TEXTURE_2D, my_texture);
  gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, videoElement);
}

我觉得advance()和composite()函数必须是问题的一部分。当然，您可以在此GitHub存储库中检查整个项目：https://github.com/crocuta/thequietworld/blob/master/videoshading-0-6.html

有谁知道什么是错的？视频是我项目的重要组成部分，我就像视频一样被卡住了。

Answer 1

尝试在每次抽奖开始时调用updateTexture

WebGl - 视频纹理在第一帧停留

1 个答案: