Fresnel shader not working with ZapparCanvas + ZapparCamera


#1

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. https://codepen.io/Fyrestar/pen/WNjXqXv.

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,

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

It looks as expected.

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

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

It somehow already looks different (Screenshot under reply).

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

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

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!


#2

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

Here is the screenshot for No.2:


#3

Screenshot for No.3:


#4

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 support@zappar.com?

George


#5

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