-
Notifications
You must be signed in to change notification settings - Fork 198
Description
π¨ 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
π 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 π