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

【问题标题】：WebGl - Video Texturing stays stucked at first frameWebGl - 视频纹理停留在第一帧
【发布时间】：2014-12-28 23:30:41
【问题描述】：

我现在正在做一个项目，该项目使用 WebGL 在图像上应用噪声抖动。现在，我想把它改编成视频，使用视频作为纹理而不是旧图像——witch 工作得很好。 Firefox (https://developer.mozilla.org/en-US/docs/Web/WebGL/Animating_textures_in_WebGL) 提供的教程示例也很有魅力。

但是，必须发生的事情总是会发生：当您尝试自己时，它永远不会起作用 - 视频停留在第一帧，而音频开始正常播放。我尝试从 Firefox 的 WebGL Video Demo 中获取更多代码来修复它，然后在网上查找与我的问题类似的内容。所以我认为这不是视频的真正问题，但是当 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

有没有人知道什么是错的？视频是我项目的重要组成部分，我和上面的视频一样卡住了。

【问题讨论】：

标签： video canvas textures html5-video webgl

【解决方案1】：

尝试在每次绘制开始时调用 updateTexture

【讨论】：