WebGL 中的视频纹理不起作用

Question

我正在通过本教程学习 WebGL:https://developer.mozilla.org/en-US/docs/WebGL/Animating_textures_in_WebGL在上一节课中，它展示了如何将视频对象用作纹理。这里有一个实例:https://developer.mozilla.org/samples/webgl/sample8/index.html效果很好(我使用的是 Firefox)。问题是当我自己尝试这样做时遇到了问题。更奇怪的是，我的电脑(离线)和主机(在线)上有不同的错误消息。离线错误:

file:///C:/Users/NPS/Desktop/gallery/video.html(351): SecurityError: The operation is insecure.

第 351 行是:

gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, videoElement);

Firefox 开发者工具栏还说:

Error: WebGL: It is forbidden to load a WebGL texture from a cross-domain element that has not been validated with CORS. See https://developer.mozilla.org/en/WebGL/Cross-Domain_Textures

我已经阅读了有关该错误的信息，它不起作用似乎很奇怪，因为 html 和视频文件都在同一个地方。此外，当我打开页面时，实际上会播放视频文件中的声音(仅此而已)。另一方面，在线版本的错误是不同的(但我不能把它放在这里，因为它是波兰语，我不确定确切的英文版本是什么。但是如果你有 Firefox，你可以在这里查看:http://nps.netarteria.pl/gallery/video.html (为此我使用的是 firefox developer bar)。当然，您也可以查看页面的源代码以及我在那里使用的所有内容。

知道我该怎么做才能让它发挥作用吗？我真的很想在我的项目中使用视频纹理，但现在我遇到了困难。

Answer 1

您的示例的问题是您的视频纹理不是 2 的幂并且您没有设置纹理过滤来处理它。

更改第 353 行

gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_NEAREST);

到

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.generateMipmap(GL_TEXTURE_2D) 的调用，因为您无法为非 2 的幂次方纹理生成 mip。

您可以阅读有关 issues with non-power-of-2 textures on the WebGL Wiki 的信息

MDN 站点上的示例已经损坏很长时间了，没有人费心去修复它:-( 它曾经可以工作，因为 Firefox 中的一个错误早已被修复。

注意:Chrome 25 (Chrome Canary) 将打印一些消息来帮助指出这一点。当我在 Chrome 25 上运行您的示例时，我收到以下消息

WebGL: INVALID_OPERATION: generateMipmap: level 0 not power of 2 or not all the same size video.html:1
WebGL: drawElements: texture bound to texture unit 0 is not renderable. It maybe non-power-of-2 and have incompatible texture filtering or is not 'texture complete'