Sunday, May 12, 2013

three.js/WebGL: Go Big or Go Home

I've decided to experiment a little bit with three.js, which seems to be one of the cool ways to get at WebGL functionality without going crazy.

Erm, well...

I decided to start off with the typical spinning box code, but my box textures kept looking like this:
instead of this:
I spent a fair amount of time experimenting with different file formats, inserting debugging code in the texture loader, playing with material parameters, and eventually copying and pasting code from the examples, which worked into my own code. Turns out, and I don't know where the problem lies, between my graphics card, the drivers, WebGL, or three.js, but if your canvas is too small - like 320x240, your textures will have corruption.

OK, now I know.

1 comment:

  1. I'm now beginning to suspect that something is wrong with the automatically generated MIP maps. I could spend time trying to diagnose it... Or I could ditch three.js altogether.

    I found a fairly glaring bug in the OBJ loader - it generates a bounding sphere as it loads meshes, but not a very tight bounding sphere, as the center of the sphere is always the origin. Whoops. I could take the AABB, which looks plausibly generated, take the center of that, and regenerate the bounding sphere... or I could just ditch three.js.

    I'm trying to make games, not debug somebody else's library. Gr.

    ReplyDelete