zappar-xr/zappar-react-three-fiber-instant-tracking-webpack-bootstrap

Dark Materials/Wrong Color Encoding on GLB import

Opened this issue · 0 comments

Describe the bug
A clear and concise description of what the bug is.

This issue happens in my project and also when I fork this repo

When loading in a glb into a zappar react three js scene. The materials are much darker than when exported from blender and viewed in a regular three.js browser via local server, gltf viewer, babylonjs viewer, and gltf.pmnd.rs. In all these viewers colors are correct.

I have tried:
changing the output encoding of the renderer to THREE.sRGBEncoding
changing the backgroundTexture encoding of the zappar camera to THREE.sRGBEncoding
adding in a Drei Environment map preset like "city"
adding in the Environment map boolean to the zappar camera

To Reproduce
Steps to reproduce the behavior:

Fork this repo
load in a gltf with code from https://gltf.pmnd.rs/
viewer in AR
Expected behavior
A clear and concise description of what you expected to happen.
The expected behavior is for the materials in the scene to be color correct

Screenshots
If applicable, add screenshots to help explain your problem
Viewed in Zappar studio (Correct color)
studio

viewed in zappar react SDK (incorrect color)

SDK

Desktop (please complete the following information):
not applicable

Smartphone (please complete the following information):

Device: Iphone 13
OS: 15.4
Browser: safari
Version: latest
Additional context
Add any other context about the problem here
happens when using both InstantTracker and ImageTracker

This is urgent so if you have any insight on how to alleviate or any kind of temporary solution, please let me know