Textures loaded but not applied

[GoogleCodeExporter]

What steps will reproduce the problem?
1. Store obj/mtl/textures on Amazon S3 
2. Load files with JSC3D
3.

What is the expected output? What do you see instead?
I expect to see the model rendered with textures, however despite seeing the 
GET request successful no textures are applied and the model is white.

What version of the product are you using? On what operating system?
This issue occurs with the latest release on Chrome and Firefox on Windows.

Please provide any additional information below.

Original issue reported on code.google.com by e.lobeto...@gmail.com on 22 Jul 2014 at 3:01

[GoogleCodeExporter]

Did you initialize the viewer instance with the startup parameter 'RenderMode' 
set properly? It should be set to either 'texture', 'textureflat' or 
'texturesmooth' to show textured objects.

If this is not the problem, try to check the mtl file to see whether the 
textures are included with correct path and case.

Besides, if you are using Chrome or other Webkit based browsers, it is very 
convenient to examine whether all resources are loaded correctly via the 
'Network' tool in console.

Original comment by Humu2...@gmail.com on 23 Jul 2014 at 1:05

[GoogleCodeExporter]

This is the code we have, it works with a local file path. However when the url 
is being passed in from amazon s3, the textures do not get applied.
This is our code:
var container = document.getElementById( 'modelView' );
            var viewer = new JSC3D.Viewer(container);
            viewer.setParameter('SceneUrl', url);
            viewer.setParameter('InitRotationX', 0);
            viewer.setParameter('InitRotationY', 0);
            viewer.setParameter('InitRotationZ', 0);
            viewer.setParameter('ModelColor', '#57524C');
            viewer.setParameter('BackgroundColor1', '#383840');
            viewer.setParameter('RenderMode', 'texturesmooth');
            viewer.setParameter('MipMapping', JSC3D.PlatformInfo.supportWebGL ? 'off' : 'on');
            viewer.setParameter('Renderer', 'webgl');
            viewer.setParameter('Definition', 'high');
            viewer.update();
            viewer.init();

Attached is the correct output vs what I get as well as the network tool 
showing the successful get requests

Original comment by e.lobeto...@gmail.com on 23 Jul 2014 at 2:23

Attachments:

• currentModel.PNG
• goal.PNG
• getRequests.PNG

[GoogleCodeExporter]

Just strange. Since the image files are loaded successfully as reported by the 
console, the model should have been rendered in the expected way.

I noticed the version may not be the latest. Can you download the latest code 
from the svn repository and try it again? Currently, the svn version is under 
publishing but rather stable.

If it still does not work. Then if your page can be accessed from the public 
domain, could you send me the url of this demo? I'll check it as soon as 
possible.

Original comment by Humu2...@gmail.com on 23 Jul 2014 at 4:25

[GoogleCodeExporter]

Here is the link to a demo page I have set up, the model on the left is loaded 
locally, the one on the right comes from amazon s3. Thanks for your time.

http://dev.virtualu.co/

Original comment by e.lobeto...@gmail.com on 24 Jul 2014 at 3:27

[GoogleCodeExporter]

Thanks! I tested your demo and I got this error message in my browser console: 
'Unable to get image data from canvas because the canvas has been tainted by 
cross-origin data'. Obviously, this is a cross-domain resource requesting issue.

As in your demo, the page and scripts are deployed on one domain and the 
resources on another domain. When accessing this page, a browser has to request 
the models and images from a remote domain. These requests are completed 
successfully but the browser's security policy prohibits to extract data from 
the images via canvas. As the result, Jsc3d fails to generate textures thus no 
textures will be applied for the model.

There are two solutions for this problem:

1. Rather straightforward, redeploy the page, the scripts and the resources 
under a same domain. Merge one with the other to avoid cross-domain issues.

2. Modify the implementation of Jsc3d manually to explicitly allow using images 
from cross-domain. Open jsc3d.js and go to line 4104 
http://code.google.com/p/jsc3d/source/browse/trunk/jsc3d/jsc3d.js#4104, add a 
single line of code next to it:

  img.crossOrigin = 'anonymous';

And it will be ok.  Since similar issues have been reported several times, I'm 
considering adding support for this in next release formally.

For the concept of cross-domain security issue, the technique of cross-domain 
resource sharing and browser compatibility for this new technique, see 
http://en.wikipedia.org/wiki/Cross-origin_resource_sharing and 
http://enable-cors.org/client.html for details.

Original comment by Humu2...@gmail.com on 25 Jul 2014 at 3:35

[GoogleCodeExporter]

I tried both of your suggestions, I moved over the site/scripts/etc to be 
hosted from Amazon but the textures still didn't show up. Also when I added the 
line into the jsc3d.js file nothing showed up at all and I didn't see any GET 
requests in the network log.

Original comment by e.lobeto...@gmail.com on 4 Aug 2014 at 6:43

[GoogleCodeExporter]

Nevermind, I got it working! Thanks for your help again.

Original comment by e.lobeto...@gmail.com on 6 Aug 2014 at 3:36