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：操作不安全。

第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，你可以在这里查看：{{3 （我正在使用firefox开发人员栏。）当然，您可以查看页面的源代码以及我在那里使用的所有内容。

知道我能做些什么才能让它发挥作用？我真的很喜欢在我的项目中使用视频纹理，现在我被卡住了。

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次幂纹理生成mips。

您可以阅读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'

Answer 2

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

的快捷方式

WebGL中的视频纹理无法正常工作

2 个答案: