NPS*_*NPS 1 video textures webgl
我正在从本教程学习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开发人员栏.)当然,您可以查看页面的源代码以及我在那里使用的所有内容.
知道我能做些什么才能让它发挥作用？我真的很想在我的项目中使用视频纹理,现在我被卡住了.
您的示例的问题是您的视频纹理不是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.
您可以在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'