Three.js JSONLoader; Textures not loading

Question

Using the blender exporter packaged with Three.js I exported the .blend file from this tutorial. I'm a huge noob when it comes to blender so what I did was simple:

Open the file, and export it with the exporter
Open the UV/Image Editor
Save a copy of each texture next to the exported JSON (using the correct names)
Modify the images to have dimensions that are a power of 2

So I just wanted to see if I could load this object as the level to walk around on in an experiment I am working on. The mesh loads fine, but there are no textures. I modified the Three.js source to do a console.log when it creates the texture images (in Loader source) to make sure the URL is right and that the images do actually load, which they do.

Here is the code:

var jLoader = new THREE.JSONLoader();
jLoader.createModel(map.data, function(geometry) {
    var material = new THREE.MeshFaceMaterial(),
    mesh = new THREE.Mesh(geometry, material);

    mesh.scale.set(50, 50, 50);

    scene.add(mesh);
}, map.texturePath);

I use createModel since I load the JSON data myself using my own loader. map.data contains the exported JSON, map.texturePath contains the path (no trailing slash) to the directory with the textures; specifically 'js/game/maps/subway'. The JSON is 30MB so I will not post it here, but I can tell you that the materials are listed, as well as the uvs. Here is the metadata:

"metadata" :
{
    "formatVersion" : 3.1,
    "generatedBy"   : "Blender 2.63 Exporter",
    "vertices"      : 474135,
    "faces"         : 236963,
    "normals"       : 168623,
    "colors"        : 0,
    "uvs"           : [3117],
    "materials"     : 1,
    "morphTargets"  : 0,
    "bones"         : 0
},

"scale" : 1.000000,

I do notice that it says "materials": 1 when the materials array is actually length 74. I don't know enough about the format to know if this is an issue or not.

Now when rendered you can see places there should be textures are just blank.

_{(source: pantherdev.com)}

I tried waiting to ensure they didn't just take a long time to load, tried changing the material I instantiate, tried not scaling the mesh, tried putting logs in three.js to ensure the images are loading (they are).

Looking closer I can see that at least 1 texture does show up:

_{(source: pantherdev.com)}

I'm not sure what I am doing wrong, or what to try next.

If it would help to see a live demo, you can try it here though it may take a minute or two to load the subway JSON as my server is just a box in my living room; not exactly a network speed demon.

Any help is appreciated, sorry for such a long post; just wanted to give all the information I had.

Edit

I tried to use absolute paths to the textures, and even went so far as to modify the mapDifuse properties of the materials in the JSON to try and fix the issue, to no avail.

Edit 2

After doing some more debugging with WebGL-Inspector I found the following errors in my Web Console:

[18:36:35.395] Error: WebGL: DrawElements: bound vertex attribute buffers do not have sufficient size for given indices from the bound element array @ http://static.pantherdev.com/dev/arena/client/lib/gli.all.js:1933
[18:36:35.751] Error: WebGL: No further warnings will be reported for this WebGL context (already reported 32 warnings) @ http://static.pantherdev.com/dev/arena/client/lib/gli.all.js:1933

When I capture a frame, I get even more information:

[18:38:12.349] Frame 791 errors: @ http://static.pantherdev.com/dev/arena/client/lib/gli.all.js:9780
[18:38:12.349] ---------------------- @ http://static.pantherdev.com/dev/arena/client/lib/gli.all.js:9781
[18:38:12.349]  INVALID_OPERATION <= drawElements(TRIANGLES, 306, UNSIGNED_SHORT, 0) @ http://static.pantherdev.com/dev/arena/client/lib/gli.all.js:9787
[18:38:12.349]    - @http://static.pantherdev.com/dev/arena/client/lib/gli.all.js:4155 @ http://static.pantherdev.com/dev/arena/client/lib/gli.all.js:9792
[18:38:12.349]    - @http://static.pantherdev.com/dev/arena/client/js/game/vendor/three/three.min.js:403 @ http://static.pantherdev.com/dev/arena/client/lib/gli.all.js:9792
[18:38:12.350]    - n@http://static.pantherdev.com/dev/arena/client/js/game/vendor/three/three.min.js:346 @ http://static.pantherdev.com/dev/arena/client/lib/gli.all.js:9792
[18:38:12.350]    - @http://static.pantherdev.com/dev/arena/client/js/game/vendor/three/three.min.js:408 @ http://static.pantherdev.com/dev/arena/client/lib/gli.all.js:9792
[18:38:12.350]    - animate@http://static.pantherdev.com/dev/arena/client/isolate.html:108 @ http://static.pantherdev.com/dev/arena/client/lib/gli.all.js:9792
[18:38:12.350]    - @http://static.pantherdev.com/dev/arena/client/lib/gli.all.js:2307 @ http://static.pantherdev.com/dev/arena/client/lib/gli.all.js:9792
  ... A WHOLE LOT OF THIS ...
[18:38:12.358]  INVALID_OPERATION <= drawElements(TRIANGLES, 6, UNSIGNED_SHORT, 0) @ http://static.pantherdev.com/dev/arena/client/lib/gli.all.js:9787
[18:38:12.358]    - @http://static.pantherdev.com/dev/arena/client/lib/gli.all.js:4155 @ http://static.pantherdev.com/dev/arena/client/lib/gli.all.js:9792
[18:38:12.358]    - @http://static.pantherdev.com/dev/arena/client/js/game/vendor/three/three.min.js:403 @ http://static.pantherdev.com/dev/arena/client/lib/gli.all.js:9792
[18:38:12.358]    - n@http://static.pantherdev.com/dev/arena/client/js/game/vendor/three/three.min.js:346 @ http://static.pantherdev.com/dev/arena/client/lib/gli.all.js:9792
[18:38:12.358]    - @http://static.pantherdev.com/dev/arena/client/js/game/vendor/three/three.min.js:408 @ http://static.pantherdev.com/dev/arena/client/lib/gli.all.js:9792
[18:38:12.358]    - animate@http://static.pantherdev.com/dev/arena/client/isolate.html:108 @ http://static.pantherdev.com/dev/arena/client/lib/gli.all.js:9792
[18:38:12.358]    - @http://static.pantherdev.com/dev/arena/client/lib/gli.all.js:2307 @ http://static.pantherdev.com/dev/arena/client/lib/gli.all.js:9792
[18:38:12.359]   @ http://static.pantherdev.com/dev/arena/client/lib/gli.all.js:9796

[18:38:12.126] Error: WebGL: bindBuffer: target: invalid enum value 0x0 @ http://static.pantherdev.com/dev/arena/client/lib/gli.all.js:4163
[18:38:12.133] Error: WebGL: generateMipmap: Level zero of texture is not defined. @ http://static.pantherdev.com/dev/arena/client/lib/gli.all.js:3668
[18:38:12.927] Error: WebGL: bindBuffer: target: invalid enum value 0x0 @ http://static.pantherdev.com/dev/arena/client/lib/gli.all.js:4163
[18:38:14.156] Error: WebGL: DrawElements: bound vertex attribute buffers do not have sufficient size for given indices from the bound element array @ http://static.pantherdev.com/dev/arena/client/lib/gli.all.js:2745

I think it is right to assume that my JSON has some incorrect or missing values, however I am not sure how to remedy the situation. Like I mentioned in a comment (and at the start of this post), I exported the .blend file using the exporter packaged with Three.js; what else would I need to do?

Edit 3

Using the WebGL-Inspector I have pulled a little more info about the actual calls that are failing. Here is the debug info for the working "649" texture and the broken "rust" texture though the texture doesn't show on the linked pages the data is all there if it helps someone (the textures do show on the WebGL-Inspector on the isolate page, just not on the exported pages I linked).

Could you create an isolated test? It's hard to dive into what you have currently setup. — mrdoob
@mrdoob I copied the example from here: aerotwist.com/tutorials/getting-started-with-three-js and added my code to the very bottom of the page (also removed the sphere and made the demo bigger). The isolated test can be seen here: static.pantherdev.com/dev/arena/client/isolate.html make sure to give the JSON a good minute or two to load (slow server). — Chad

Gero3 Gero3 · Accepted Answer · 2012-09-27T17:06:40

It seems like your uvs aren't complete for some of your materials because webgl inspector throws errors when some materials are used. I still need to examine of what exactly happened but that seem what your problem is. The problem is probably the JSON file.

Three.js JSONLoader; Textures not loading

3 Answers