facebookarchive / react-360

Create amazing 360 and VR content using React
https://facebook.github.io/react-360
Other
8.73k stars 1.23k forks source link

[QUESTION] OBJ alpha missing? #367

Open jgwinner opened 7 years ago

jgwinner commented 7 years ago

Description

This is probably a feature request, although it's a pretty important feature.

When I import .OBJ materials, it doesn't seem as if alpha maps are supported. This is pretty debilitating.

Does .MTL import of OBJ files allow transparency? I checked the code and as near as I can tell it never parses the map_d keyword in the .MTL file. The only maps are:

    ambient?: Texture,
    specular?: Texture,
    diffuse?: Texture,
    emissive?: Texture,
    specularExp?: Texture,
    bump?: Texture,
    displacement?: Texture,
    decal?: Texture,

Opacity is an option, but seems to be a scalar.

Work around

I tried gLTF import, but that generates errors :(

I just opened a bug for this ( https://github.com/Kupoman/blendergltf/issues/104 )

Foliage looks absolutely terrible without alpha maps.

jgwinner commented 7 years ago

I got GLTF to load via the other gLTF importer - and transparency maps are supported. Looks like .TGA files are not, but I saved them via .PNG with Alpha and it worked fine.

mikearmstrong001 commented 7 years ago

.TGA files are not particularly web friendly and I would recommend using pngs for most of this style of content.

jgwinner commented 7 years ago

Understood, as I mentioned I already changed that. (One of the exporters was using those as default).

Is there a plan to add transparency for OBJ files?

== John ==

mikearmstrong001 commented 7 years ago

based on https://en.wikipedia.org/wiki/Wavefront_.obj_file#Material_template_library the best way to add transparency is to add support for illum modes 4, 6, 7, 9. I have a change up for that. basing the transparency solely on png is a little frought as it relying on the Three.js tex.format being RGBA (it is based purely on not being a jpg)

jgwinner commented 7 years ago

Those turn on raytracing or reflection (true reflection) though - the thing that 'turns on' transparency is just to read the d (or Tr) keywords, and to supply a map_d

(D is 'dissolve' which is really the alpha).

The map_d can be any texture map. The A channel is explicitly given, not part of the other maps.

I also use this reference: http://paulbourke.net/dataformats/mtl/

From that one, we see an illum 2 showing transparency:

13 Frosted window

This material includes a texture map used to alter the opacity of an object's surface. The material color is set to "ident" to preserve the texture's true color. When applied to an object, the object becomes transparent in certain areas and opaque in others.

The variation between opaque and transparent regions is controlled by scalar information stored in a separate .mps file that is referred to in the material by its name, "window.mps". The "-mm" option is used to shift and compress the range of opacity.

newmtl frost_wind Ka 0.2 0.2 0.2 Kd 0.6 0.6 0.6 Ks 0.1 0.1 0.1 d 1 Ns 200 illum 2 map_d -mm 0.200 0.800 window.mps

jgwinner commented 7 years ago

By the way - I gave up on transparency for the book - the publisher was reminding me of deadlines so had to get it out, so I remodeled all of the hedges as low poly pure green blocks. No alpha. It is needed for moderately complex models though.

jgwinner commented 7 years ago

Note the Illum 2 from the official .obj docs (the mirror at PaulBourke.net)