WebGL texParami 设置导致纹理呈现为黑色答案

【问题标题】：WebGL texParami setting causing Textures to render to blackWebGL texParami 设置导致纹理呈现为黑色
【发布时间】：2015-10-21 03:32:54
【问题描述】：

所以这个问题与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/ 的页面上正常工作

任何帮助将不胜感激！

谢谢。

【问题讨论】：

标签： javascript opengl-es textures webgl

【解决方案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.

出于安全原因，您只能通过设置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。

【讨论】：