Skip to content

Model Not Rendering Correctly on Android – Works Fine on iOSΒ #349

@shoaibarif244

Description

@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):
iOS Screenshot 1 - iOS Screenshot 2

πŸ€– Android (Incorrect):
Android Screenshot 1 - Android Screenshot 2


πŸ“‚ 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 (

<ViroLightingEnvironment source={require("./res/tesla/garage_1k.hdr")} />

<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 πŸ™


Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions