Why won't image texture load in X3DOM?
I'm working with X3DOM for the 1st time (although I did a lot of VRML back in the day.
I'm trying a simple example with a image file for a texture, but the image never loads. Here's what I see (using Chrome Version 43.0.2357.130 m):
The circle spins forever and the Loading: 1 stays. I have the same problem on another file (except it has 7 images, and the message reads "Loading: 7".
Here's my code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html;charset=utf-8'></meta>
<link rel='stylesheet' type='text/css' href='http://www.x3dom.org/x3dom/release/x3dom.css'></link>
<script type='text/javascript' src='http://www.x3dom.org/x3dom/release/x3dom.js'></script>
</head>
<body>
<x3d width='500px' height='400px'>
<scene>
<shape>
<appearance>
<ImageTexture url="wood11.png"><ImageTexture/>
</appearance>
<box> </box>
</shape>
</scene>
</x3d>
</body>
</html>
The image is present and stored in the same directory. Why won't images load for me?
It works in Mozilla Firefox so you can test it there.
Chrome throws a security exception because the image is not served by a server.
Uncaught SecurityError: Failed to execute 'texImage2D' on 'WebGLRenderingContext':
Tainted canvases may not be loaded.image.onload @ x3dom.js:377
You can find the explanation here.
And some other pertinent information here.
Loading of WebGL textures is subject to cross-domain access controls. In order for your content to load a texture from another domain, CORS approval needs to be be obtained. See HTTP access control for details on CORS.