[Question] Bump Map Support

[ericseaton-avatar]

I am attempting to assign a bump map to a model using materialParameters but cannot see the bump map in the scene, are bump maps a supported feature? Example below - Thanks!

<GazeButton duration={1000} onClick={onClick}> <AmbientLight intensity={1} style={{ layoutOrigin: [0.5, 0.5] }} /> <Model lit={true} source={{ obj: asset('models/coin/coin.obj'), mtl: asset('models/coin/coin.mtl'), }} style={{ layoutOrigin: [0.5, 0.5], transform: [ {rotateX: '90deg'} ] }} materialParameters={{ bumpMap: asset('models/coin/coin-texture-bump.jpg'), bumpScale: 1000, }} /> </GazeButton>

[mikearmstrong001]

It is not something that we have tried. It is likely that the model you are loading does not have the necessary vertex attributes (tangent and bitangent) so it might be worth looking into the gltf model format.

[ericseaton-avatar]

Thanks for the info. I found this GLTF loader in your repo:

https://github.com/facebook/react-vr/blob/master/ReactVR/js/Loaders/GLTF2ModelLoader.js

But I wasn't sure how to implement - are GLTF models currently supported?

[mikearmstrong001]

They are indeed but you will need master. An example of use

        <Model
          source={{
            gltf2: asset('duck.gltf'),
            animations: this.state.animations,
          }}
          style={{
            transform: [{translate: [0, 2, -5]}],
          }}
        />

One thing to watch out for is performance with bumpmapping on low spec GPUs, the extra texture data you need to pull and also bump maps can sometime be difficult to 'read' in VR because they don't show a consistent difference in depth between the two eyes

[jgwinner]

I have a general question about materials to include bump maps.

I'm looking to do something simple like assign a specular map, a metallic map, and a bump or displacement map. Three.js allows this, for example see:

https://threejs.org/examples/webgl_materials_displacementmap.html

It would be really nice to just be able to give the asset of the desired maps. (I was building some simple deck plates out of plane geometry for a 3D model, and wanted to specify specularity and metalicity, possibly displacement or bump. Good point about VR and bump maps).

I looked at the Three.JS example, and it seems to use MeshStandardMaterial and most of the primitives seem to use MeshPhoneMaterial (lit) or MeshBasicMaterial? I've looked at the code and it seems like a lot of the MaterialParams are assigned, other than the shaders.

What is the right way to do this? Do I need to just abandon the primitives, fire up Blender, and export a 4 vertex cube with proper materials assigned via gltf or obj? Seems like using a shotgun to kill a fly. Not nit picking, just trying to figure out the right, ReactVR way of doing this :)

== John ==

[mikearmstrong001]

I would treat this as an asset. Blender and other editors will have the authoring controls which allow the level of changes you want, twiddling numbers via React properties is not visual enough. While it may seem simple because it is a cube soon it will expand from there :)

[jgwinner]

There is a bug in the .OBJ file format material import; if you have a -bm statement it will be ignored. You need the -bm statement (bump strength) to give 'depth' to the bumps, otherwise they are flat.

You do get 'sparkles' due to anti-aliasing issues which are a little worse with bump mapping, and of course it's not parallax corrected, but can look good for some textures.

See bug #349 where I posted some sample code, but I don't know the React coding standards. Hope the code looks OK.

A quick fix is to write the bump statement in the .MTL file as:

bump -bm 0.01 1_New_Graph_Height.jpg

for example - the extra spaces will fix it.

I also noticed similar bugs for some of the other texture maps. Haven't written those up yet.

== John ==

[jgwinner]

By the way - if you run the GearVR browser, then Chrome, then GearVR, it switches the display to some type of anti-aliasing. Bump mapping looks really good.

Any comments? This is clearly a bug.

[ericseaton-avatar]

Big thanks to both of you guys this helped really helped me sort out a good approach here (and discover GLTF!) and I now have bump maps looking decent in 1.4.0.

[jgwinner]

Bump maps work great in .OBJ too, if the bug is fixed :)

[ericseaton-avatar]

I did end up using your space hack to get this working so thanks for posting that as a potential solution.

[jgwinner]

I posted an actual fix too :) ... guess I need to do a pull request

[jgwinner]

Any attention to this? There are other bugs in that file. Someone copied the string compare parsing line but didn't update the string length for different keywords.

[mikearmstrong001]

Thanks for the patience and we appreciate the comments. We dropped the ball on this

[jgwinner]

No worries Mike - you don't know if I can code well yet :) Thanks for taking a look. See #349 where I post some pseudo code for a fix. I think there was another area in that file where it was reading 6 but the label was shorter.