WebGL 中的视频纹理不起作用答案

【问题标题】：Video texture in WebGL not workingWebGL 中的视频纹理不起作用
【发布时间】：2012-11-26 20:07:38
【问题描述】：

我正在通过本教程学习 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: 操作不安全。

第 351 行是：

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

Firefox 开发者工具栏还说：

错误：WebGL：禁止从未经 CORS 验证的跨域元素加载 WebGL 纹理。见https://developer.mozilla.org/en/WebGL/Cross-Domain_Textures

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

知道我可以做些什么来让它工作吗？我真的很想在我的项目中添加视频纹理，但现在我陷入了困境。

【问题讨论】：

标签： video webgl textures

【解决方案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 中的一个 bug 早已修复。

注意：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'

【讨论】：

非常感谢，这行得通！不过，我有 2 个后续问题：(1) 为什么即使没有您提出的修复，MDN 示例也能正常工作？ (2) 在我的电脑上，我仍然收到安全问题消息，并且通过不断将其上传到服务器来测试代码很烦人 - 有没有办法在我的电脑上运行它？
它在 FF 中工作，因为他们的视频解码器中存在错误。直接播放视频 (developer.mozilla.org/samples/webgl/sample8/Firefox.ogv) 在 FF 中注意它只是一个正方形（2 的幂）并且缺少视频的左右两侧。在 Chrome 中播放它会显示整个视频（不是 2 的幂）。至于在本地运行它，对于视频我使用了 node.js。安装 node.js (nodejs.org) 然后安装 http-server (stackoverflow.com/questions/12905426/…)
实际上应该说“差异”而不是“错误”。 FF 仅解码该视频的一部分显然不是错误。但是 WebGL 示例仍然很糟糕，因为它仅适用于 2 次幂视频。我修复了 mdn wiki。希望有人能修复真正的示例代码。
上面的例子还有更多的 NPOT 问题。将：gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR) 更改为：gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST) 和：gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR) 到 gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST)

【解决方案2】：

对于 Chrome，您可以尝试使用参数“chrome.exe --allow-file-access-from-files”的快捷方式

【讨论】：

在 Chrome 上，无论有没有你建议的，我都会得到一个几乎一切正常的场景......除了模型（盒子）是黑色的。但我能听到视频中的声音。
@NPS chrome 支持你的视频编码吗？还要添加此参数“--disable-web-security”（它将禁用同源策略）以防万一:)
我的 chrome 说它甚至不知道那个参数。 :P 此外，伙计们，我正在寻找一个通用的解决方案（顺便说一句，我认为我的问题与浏览器无关）。