Question

因此，此问题与之前在https://gamedev.stackexchange.com/questions/38829/webgl-texture-appears-as-black

发布的帖子有关

我在渲染纹理http://www.html5canvastutorials.com/cookbook/ch9/1369_09_06/crate.jpg时出现问题，这是2的偶数幂（尽管前一篇文章中建议进行更改）

我在JSFiddle上放了一个叉子，在玩了几张图片之后，似乎有些纹理渲染，有些则没有。具体来说，这在代码

中有详细说明

image.src = 'https://lh4.googleusercontent.com/-Y2gO2Ex8Q10/T588LBJKq7I/AAAAAAAAgzc/XKpph-vQWiw/s686/_DSC4127+-+Version+2.jpg';   
// The original texture runs fine

image.src = 'http://webglfundamentals.org/webgl/resources/f-texture.png'
// As does this texure from WebGLFundamentals

image.src = 'http://www.html5canvastutorials.com/cookbook/ch9/1369_09_06/crate.jpg';
// But the crate texture does not want to show

image.src = 'https://dev.opera.com/articles/raw-webgl-part-2-simple-shader/figure3.png'
// Neither does this Red-Green-Yellow gradient

在JSFiddle代码术语中我能够正确渲染纹理的内容是什么？

我知道这不是图片的问题，因为它在位于http://www.html5canvastutorials.com/cookbook/ch9/1369_09_06/

的页面上正常工作，所以它必须是某个地方的设置

非常感谢任何帮助!!

感谢。

Answer 1

您遇到跨源资源共享的问题。

在dev-tools控制台输出中，您可以看到：

Image from origin 'http://www.html5canvastutorials.com' has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://fiddle.jshell.net' is therefore not allowed access.

对于安全性reasongs，您只能通过设置Access-Control-Allow-Origin标题来加载来自您自己的域或专门允许它的用户的图像。

只有lh4.googleusercontent.com和dev.opera.com上的图片会返回标题Access-Control-Allow-Origin: *，并且是唯一有效的图片。

您需要在自己的服务器上托管图像，或者如果您需要从任意URL加载，您需要在服务器上使用图像代理。

如果您只是在玩WebGL，可以使用crossorigin.me并将图片用作：

http://crossorigin.me/http://www.html5canvastutorials.com/cookbook/ch9/1369_09_06/crate.jpg

您可以详细了解CORS here和here。

WebGL texParami设置导致Textures呈现为黑色

1 个答案: