mrdoob/three.js — Issue #1120: Question: "overlapping" alpha transparency
Author: plopidou
Created: 2012-01-16 21:21:49+00:00
State: open

Hello all :)

I finally managed to display textures with alpha transparency after reading alteredq's latest comment on #1089.

* the "native" three.js exporter will not do what I ask it to do.
* so back to the blend -> obj -> js solution.

Obj export with the following options (partly thanks to http://dev.opera.com/articles/view/porting-3d-graphics-to-the-web-webgl-intro-part-2/):

* Apply modifiers
* Include edges
* Include normals
* Include UVs
* Write materials
* Objects as OBJ objects
* Material groups

The .obj->.js step is using only the -i -o arguments.

In the final .js:

* add - "transparent" : true - in the material object definition.

Pray, press f5. Enjoy :-)

Sorry for being so verbose, as some others might run into the issues I had.

Now all is good, except for a series of artifacts on the transparent leaves material - that is defined thanks to a PNG with alpha transparency. As in the following image:

http://imageupload.org/?d=F9F6A64E1

Again, it's probably all on me .. so any pointers would be greatly appreciated. :)

Cheers!