DataURI image texture in three.js doesn't work in Firefox

Question

I am using three.js to do some online interactive modelling of geology, and have been creating image URI using the Canvas Element (output would be: data:image/png;base64,).

The image creation works fine in Chrome,Firefox, and Safari, but using the images in three.js as a texture doesn't show up in Firefox.

The simplest demonstration I can show is by changing one line of a three.js example, to substitue an image URL for a dataURI, and use that as a texture.

http://visiblegeology.com/renderingProblem/

This works fine for me in Chrome and Safari, but just doesn't show up in Firefox.

I was wondering if anyone had any advice, work-arounds, or thoughts.

Thanks for any help,

Rowan

Answer 1

I've checked using a regular img tag. It works that way in Firefox. So the problem would seem to be the combination of three.js and the data uri.

This example by mrdoob doesn't work in Firefox either: http://mrdoob.github.com/three.js/examples/webgl_particles_shapes.html

A few suggestions:

• check if you are using the latest three code.

• try removing the final equals sign of the data uri. It is used for padding and may not be necessary.

• try disabling your add ons one by one, as they may interfere as well