Lighting/Texture issues

Hello again. I figured I’d make an issue about two separate issues since they can be explained with the same example, but I’d be happy to split this into two issues if you’d prefer.

Here is a gist of the ModelAnimator component that I’m using which is basically just a stripped down copy of your Animations component in the example: https://gist.github.com/Dylan-at-LION/66b33abab4e222add280d90cf3858465

Here is a GIF demonstrating both issues, note that the GIF is heavily optimized and there are no dots on the sphere in actuality:

Issue 1: Lighting

When I rotate my model, the lighting changes. This doesn’t seem be affected by the props scale or translateZ as I suspected, but it does tend to happen more with spherical models. Ideally there would be consistent ‘global lighting’ like in a studio or something. The orange.obj (linked below) is initialized with a scale of 3:

<ModelAnimator model={ 'orange.obj' } texture={ 'orange2.jpg' } scale={ 3 } />

Issue 2: Texturing

The texture files seem to be applying the entire image instead mapping UV coordinates. Here is the texture file the free model came with (from Turbosquid):

Here is a texture I made from scratch in Photoshop just to see if it would make any difference (no):

What I did notice is that Photoshop maps the texture in basically the same way onto the image, save for the top left part.

I am using strictly .obj files. The only texture I’ve gotten to work properly is the demon.model / demon.png from the example. I don’t have any more .model files to test with yet but I’m trying to get my hands on one, to see if that has anything to do with it. I thought maybe the demon.png texture having the color black as its negative space had something to do with it, but when I made the background black on the orange texture, black simply showed up on the orange with the rest of it.

Here is the .obj of the orange: https://gist.github.com/Dylan-at-LION/aa45c6e16f17a49f993e2dec9f7314b5

The orange.obj in question has this at the top: mtllib Orange.mtl

Could not providing the .mtl have anything to do with this?

Any help would be greatly appreciated even if only a point in the right direction. I don’t really know Objective C but I’m not terribly intimidated by the prospect of poking around in there.

[PatriceVignola]

Hey @Dylan-at-LION! Sorry for the huge delay, I was busy with other projects, but in the meantime I also made a .model to .obj transcoder in order to diagnose the inverted texture problem and fix the consistency problem between the Android and iOS libraries.

Also, since 3D programs have the choice to export the textures in left-handed or right-handed coordinate systems, I added a flipTexture property to RNGLModelView to flip textures vertically. I pushed it to the git repo, and it should be published to npm as soon as @rastapasta green lights it.

Feel free to try it out by temporarily replacing the dependency with the git repo if you want: git+https://github.com/rastapasta/react-native-gl-model-view.git.

Also, thanks for playing around with the light. I might push it as a fix until the light isn’t attached to the model anymore.

[rastapasta]

Already merged with huge thanks to @PatriceVignola!