Model Not Rendering Correctly on Android – Works Fine on iOS

[shoaibarif244]

🚨 Model Not Rendering Correctly on Android – Works Fine on iOS

Hi team, thank you for your amazing work on Viro. I'm running into an issue with PBR material rendering in AR mode. The same code and assets render perfectly on iOS, but on Android (both debug and release builds), the model appears black or flat white, with no texture or PBR effect.

🔗 Example Used

I used this exact demo from the official repo:
https://github.com/viromedia/viro/tree/master/code-samples/js/ARCarDemo

🧪 Test Summary

Platform	Result
✅ iOS	Model renders with full PBR texture (metal/roughness visible)
❌ Android (debug)	Model appears black
❌ Android (release)	Model appears white or black, no texture or PBR effect

---

🖼️ Screenshots

📱 iOS (Correct):
-

🤖 Android (Incorrect):
-

---

📂 Assets Used

All model and texture files are from the ARCarDemo:

• .obj and .mtl are loaded like in the example

• Using textures:

  • object_car_main_Base_Color_red.png

  • object_car_main_Metallic.png

  • object_car_main_Roughness.png

---

⚙️ Code Snippet

import React, { useState, useCallback } from "react";
import {
  ViroARScene,
  ViroMaterials,
  ViroAnimations,
  Viro3DObject,
  ViroLightingEnvironment,
  ViroARImageMarker,
  ViroARTrackingTargets,
  ViroSpotLight,
  ViroQuad,
} from "@reactvision/react-viro";
// 🔁 Register tracking targets
ViroARTrackingTargets.createTargets({
logo: {
source: require("./res/logo.png"),
orientation: "Up",
physicalWidth: 0.1, // meters
},
});
// 🎨 Register materials
ViroMaterials.createMaterials({
red: {
lightingModel: "PBR",
diffuseTexture: require("./res/tesla/object_car_main_Base_Color_red.png"),
metalnessTexture: require("./res/tesla/object_car_main_Metallic.png"),
roughnessTexture: require("./res/tesla/object_car_main_Roughness.png"),
},
});
// 🎬 Register animations
ViroAnimations.registerAnimations({
scaleCar: {
properties: { scaleX: 0.09, scaleY: 0.09, scaleZ: 0.09 },
duration: 500,
easing: "bounce",
},
});
const ARCarDemo = () => {
const [animateCar, setAnimateCar] = useState(false);
const _onAnchorFound = useCallback(() => {
setAnimateCar(true);
}, []);
return (
<ViroARScene>
<ViroLightingEnvironment source={require("./res/tesla/garage_1k.hdr")} />
<ViroARImageMarker target="logo" onAnchorFound={_onAnchorFound}>
<Viro3DObject
scale={[0, 0, 0]}
source={require("./res/tesla/object_car_obj.obj")}
resources={[require("./res/tesla/object_car_mtl.mtl")]}
type="OBJ"
materials={"red"}
animation={{ name: "scaleCar", run: animateCar }}
/>
    <ViroSpotLight
      innerAngle={5}
      outerAngle={25}
      direction={[0, -1, 0]}
      position={[0, 5, 1]}
      color="#ffffff"
      castsShadow
      shadowMapSize={2048}
      shadowNearZ={2}
      shadowFarZ={7}
      shadowOpacity={0.7}
    />

    <ViroQuad
      rotation={[-90, 0, 0]}
      position={[0, -0.001, 0]}
      width={2.5}
      height={2.5}
      arShadowReceiver
    />
  </ViroARImageMarker>
</ViroARScene>

);
};
export default ARCarDemo;

---

🧪 What I Tried

• Confirmed all textures load via <Image /> in React Native ✅

• Tried with and without .mtl file ✅

---

📱 Device Info

• React Native: 0.73.3

• React-Viro: "@reactvision/react-viro": "^2.41.4"

• Android: Xiaomi-Redmi Note 9S (Android 12, API 31)

• Android: TECNO - Camon 30S/CLA5 (Android 15, API 35)

• iOS: iPhone 15 Pro Max (iOS 18.5)

• ARCore/ARKit compatible

---

❓ Help Needed

Is this a known issue with PBR textures or OBJ rendering on Android?
Any workaround or fix would be much appreciated.

Thank you 🙏

---