Fresnel shader not working with ZapparCanvas + ZapparCamera

Universal AR React for ThreeJS
#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. PNG

  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:PNG

#3

Screenshot for No.3:
PNG

#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

1 Like
#5

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

1 Like