2

我正在从本教程中学习 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开发人员栏）当然，您也可以查看页面的源代码以及我在那里使用的所有内容。

知道我该怎么做才能让它工作吗？我真的很想在我的项目中使用视频纹理，但现在我被卡住了。

4

2 回答 2

7

您的示例的问题是您的视频纹理不是 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。

您可以在 WebGL Wiki 上阅读有关非 2 次幂纹理的问题

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'
于 2012-11-27T08:23:08.353 回答
0

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

于 2012-11-26T20:43:48.683 回答