Fresnel shader not working with ZapparCanvas + ZapparCamera


Hi ZapWorks,

Here is a bit of context.
I’ve been trying to develop an image tracking AR application that will display a 3D holographic model. To make it look better, I’m trying to add the Fresnel effect to the shader material, here is the reference to the said effect and implementation.

However, it doesn’t seem to work well somehow with the @zappar/zappar-react-three-fiber. Here are some screenshots I took.

  1. Vannila Threejs Canvas + default camera:
    If I use the vannila canvas with the default camera settings,

         <Suspense fallback={null}>
             <Scene></Scene> //The model

It looks as expected.

  1. ZapparCanvas + default camera:
    If I use ZapparCanvas component without ZapparCamera

         <Suspense fallback={null}>
             <Scene></Scene>//The model

It somehow already looks different (Screenshot under reply).

  1. ZapparCanvas + ZapparCamera
    If I use both ZapparCanvas and ZapparCamera

         <Suspense fallback={null}>
           <ZapparCamera userCameraMirrorMode="poses" rearCameraMirrorMode="none" />
           <Scene></Scene>//The model

Only the colour (blue) I set for the Fresnel effect remains, the diffuse colour (black) is completely gone. The material seems just broken. (Screenshot under reply)

I’m not an expert in shader, but I suspect it is because the way ZapparCamera works is different from the default Threejs PerspectiveCamera? Please help, thank you very much!


Since I’m a new user I can only post one screenshot when posting.

Here is the screenshot for No.2:


Screenshot for No.3:


Hi @hol.experiences,

Thanks for the detailed post. We have an inkling that it might be that the canvas has a linear prop rather than sRGB although we’ve not investigated this yet.

We’d love to take a look at the project so we can do some testing and work out what’s going on here.

Would it be possible to send a version of this build to us at



NP, I will extract this part of the project and send it to you soon.