Moire pattern in texture on React Native

[santiagofm]

Hello!

I've been trying to repro this obj example from three.js but there's some weirdness when applying the texture:

My code is pretty much a copy-paste from the three.js example code:

import React, {Suspense, useEffect, useRef, useState} from 'react';
import {Canvas, useThree, useFrame} from 'react-three-fiber';
import {loadAsync, THREE} from 'expo-three';

export const Male = () => {
  const [model, setModel] = useState<any | null>(null);

  useEffect(() => {
    THREE.Texture;

    const loadModel = loadAsync(require('../assets/models/male.obj'));
    const loadTexture = loadAsync(require('../assets/textures/uv_grid.jpg'));

    Promise.all([loadModel, loadTexture]).then(
      ([loadedModel, loadedTexture]) => {
        loadedModel.traverse((o) => {
          if (o.isMesh) {
            o.material.map = loadedTexture;
          }
        });

        loadedModel.position.y = -95;

        setModel(loadedModel);
      },
    );
  }, []);

  return model ? <primitive object={model} dispose={null} /> : null;
};

const Camera = (props) => {
  const ref = useRef();
  const {setDefaultCamera} = useThree();

  useEffect(() => setDefaultCamera(ref.current), []);
  useFrame(() => ref.current.updateMatrixWorld());

  return (
    <perspectiveCamera
      ref={ref}
      fov={45}
      near={1}
      far={2000}
      position={[0, 0, 250]}
      {...props}
    />
  );
};

export const App = () => (
  <Canvas>
    <Camera />
    <ambientLight intensity={0.9} />
    <pointLight position={[10, 10, 10]} />
    <Suspense fallback={null}>
      <Male />
    </Suspense>
  </Canvas>
);

I do see a couple of warnings when running on either iOS simulator/iPhone/Android emulator that may be causing this?

THREE.WebGLRenderer: EXT_texture_filter_anisotropic extension not supported
THREE.WebGLRenderer: OES_texture_float_linear extension not supported

Anyway, if anyone wants to try this out the code is here: https://github.com/santiagofm/react-native-threejs-poc/pull/3

Thank you!

[drcmda]

i think better post this in threes discourse or even open up a bug report. though it could also be expo-gl.

[santiagofm]

Thanks for pointing me in the right direction! I'll post again if I can get an answer.

[santiagofm]

Well, the issue was that expo-three's texture loader is setting it's format to RGBFormat instead of RGBAFormat when the texture file extension is .jpg or .jpeg; setting it to RGBAFormat fixes everything.

kudos to expo/expo-three#138 (comment)

[drcmda]

btw the loadAsync signature is kind of unfortunate. if expo would stick to THREE.Loader().load(url, onLoaded) it would work with useLoader ootb. all the useEffect boilerplate just to load a model. also, RN would then be compatible with this: https://github.com/react-spring/gltfjsx declarative gltf could be a major asset, and it spares you the traversal/mutation.

made a ticket: expo/expo-three#171

[santiagofm]

But useLoader works fine when loading assets from a remote url!
I just couldn't make it work with local assets and found that the expo loader would work.

That said, I don't see why gltfjsx wouldn't work in react-native. I mean, yeah you may need to use your own logic to load assets but you would still be able to use the pretty JSX, right?

[santiagofm]

I have no idea how Suspense works though since I do RN only and last time I checked it wasn't supported yet

[drcmda]

Suspense is part of react itself, it works in all reconcilers, react-dom, react-native, r3f, etc, unless RN is stuck with an ancient react version.

[EvanBacon]

Fixed in [email protected]