3

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): enter image description here 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?

ViennaMike
  • 2,207
  • 1
  • 24
  • 38

2 Answers2

2

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.

Community
  • 1
  • 1
Traian
  • 2,915
  • 1
  • 24
  • 32
  • Here's the strange thing. If I put it on a webserver, it works great from Chrome, BUT, while I can view several of the simple examples at examples.x3dom.org in Firefox on the same machine, I CAN'T view the above example in Firefox. If I just try locally without a server, I get just an empty white bounding box for the scene, while from a webserver, I get a filled in black bounding box. So the core problem of viewing in Chrome is solved, something funny is still going on (hence why a +1, not yet an accepted answer). – ViennaMike Jul 05 '15 at 04:14
  • you need to use a debugger (e.g. Firebug: https://getfirebug.com/downloads) to find out which is the error in a case or another. Otherwise it would be just a guess... – Traian Jul 05 '15 at 14:40
  • Got it. Apparently some of my browsers are using the swf viewer, which I hadn't installed on my server, so the cross-domain issue popped up with them for a different reason (swf file and textures were on different hosts) when I viewed them from my hosting site. I'll fix that tonight. P.S.: what's REALLY weird now is that my home IE browser loads the textures for a scene I'm working on (more complex then the one above) BUT some objects are out of place. I don't get that with IE at work, with Chrome, with Firefox, or with Safari on my iPhone. – ViennaMike Jul 06 '15 at 14:07
1

You can base64 encode your texture. 

<ImageTexture url="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAPCAMAAAAMCGV4AAAAA3NCSVQICAjb4U/gAAADAFBMVEUAAAAAADMAAGYAAJkAAMwAAP8AMwAAMzMAM2YAM5kAM8wAM/8AZgAAZjMAZmYAZpkAZswAZv8AmQAAmTMAmWYAmZkAmcwAmf8AzAAAzDMAzGYAzJkAzMwAzP8A/wAA/zMA/2YA/5kA/8wA//8zAAAzADMzAGYzAJkzAMwzAP8zMwAzMzMzM2YzM5kzM8wzM/8zZgAzZjMzZmYzZpkzZswzZv8zmQAzmTMzmWYzmZkzmcwzmf8zzAAzzDMzzGYzzJkzzMwzzP8z/wAz/zMz/2Yz/5kz/8wz//9mAABmADNmAGZmAJlmAMxmAP9mMwBmMzNmM2ZmM5lmM8xmM/9mZgBmZjNmZmZmZplmZsxmZv9mmQBmmTNmmWZmmZlmmcxmmf9mzABmzDNmzGZmzJlmzMxmzP9m/wBm/zNm/2Zm/5lm/8xm//+ZAACZADOZAGaZAJmZAMyZAP+ZMwCZMzOZM2aZM5mZM8yZM/+ZZgCZZjOZZmaZZpmZZsyZZv+ZmQCZmTOZmWaZmZmZmcyZmf+ZzACZzDOZzGaZzJmZzMyZzP+Z/wCZ/zOZ/2aZ/5mZ/8yZ///MAADMADPMAGbMAJnMAMzMAP/MMwDMMzPMM2bMM5nMM8zMM//MZgDMZjPMZmbMZpnMZszMZv/MmQDMmTPMmWbMmZnMmczMmf/MzADMzDPMzGbMzJnMzMzMzP/M/wDM/zPM/2bM/5nM/8zM////AAD/ADP/AGb/AJn/AMz/AP//MwD/MzP/M2b/M5n/M8z/M///ZgD/ZjP/Zmb/Zpn/Zsz/Zv//mQD/mTP/mWb/mZn/mcz/mf//zAD/zDP/zGb/zJn/zMz/zP///wD//zP//2b//5n//8z///8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABlenwdAAABAHRSTlP///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAG8mZagAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAEZJREFUCJljuA4CDCAAYYF5l0AALALEEB5YBMRHcEECYD5YA4hguA5nwghk5UTyYUJgk6/DBRjg9l0CuxdqP7r7MNyP4j8Akf+KwQMQ//UAAAAASUVORK5CYII="></ImageTexture>
Anon
  • 117
  • 1
  • 3