When I try to add an image to a 3d sphere using Babylon.js, I get the error Uncaught SecurityError: Failed to execute 'texImage2D' on 'WebGLRenderingContext': Tainted canvases may not be loaded.

This is how I've written my code. I've followed the tutorial here and everything has worked prefectly until I try to change the textures.

//Creation of spheres
var sphere1 = BABYLON.Mesh.CreateSphere("Sphere1", 10.0, 6.0, scene);
var sphere2 = BABYLON.Mesh.CreateSphere("Sphere2", 2.0, 7.0, scene);
var sphere3 = BABYLON.Mesh.CreateSphere("Sphere3", 10.0, 8.0, scene);

//Positioning the meshes
sphere1.position.x = 10;
sphere3.position.x = -10;

//Textures
var sphere1texture = new BABYLON.StandardMaterial("sphere1texture", scene);
var sphere2texture = new BABYLON.StandardMaterial("sphere2texture", scene);
var sphere3texture = new BABYLON.StandardMaterial("sphere3texture", scene);
sphere1texture.alpha = 0.75
sphere2texture.diffuseTexture = new BABYLON.Texture("./texture1.jpg", scene); 

sphere2 (the one I tried to load the image to) doesn't show up in the program, but everything else works fine.

Also, I tried downloading the source code for the lesson and the same thing happened, so I'm guessing its something to do with my browser (Google Chrome).

When I try to add an image to a 3d sphere using Babylon.js, I get the error Uncaught SecurityError: Failed to execute 'texImage2D' on 'WebGLRenderingContext': Tainted canvases may not be loaded.

This is how I've written my code. I've followed the tutorial here and everything has worked prefectly until I try to change the textures.

//Creation of spheres
var sphere1 = BABYLON.Mesh.CreateSphere("Sphere1", 10.0, 6.0, scene);
var sphere2 = BABYLON.Mesh.CreateSphere("Sphere2", 2.0, 7.0, scene);
var sphere3 = BABYLON.Mesh.CreateSphere("Sphere3", 10.0, 8.0, scene);

//Positioning the meshes
sphere1.position.x = 10;
sphere3.position.x = -10;

//Textures
var sphere1texture = new BABYLON.StandardMaterial("sphere1texture", scene);
var sphere2texture = new BABYLON.StandardMaterial("sphere2texture", scene);
var sphere3texture = new BABYLON.StandardMaterial("sphere3texture", scene);
sphere1texture.alpha = 0.75
sphere2texture.diffuseTexture = new BABYLON.Texture("./texture1.jpg", scene); 

sphere2 (the one I tried to load the image to) doesn't show up in the program, but everything else works fine.

Also, I tried downloading the source code for the lesson and the same thing happened, so I'm guessing its something to do with my browser (Google Chrome).

• javascript
• google-chrome
• textures
• assets
• babylonjs

Share Improve this question Follow edited Nov 28, 2014 at 14:16 user719662 asked Jun 2, 2014 at 17:31 alexanderd5398alexanderd5398 32711 gold badge44 silver badges1818 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

You have to use your files on a webserver and not locally to ensure there is no security issues

You can load assets only if your app runned on the local or global server. If not, http request cant be pleted.