react-three-fiber and webARRocks related issue

[mohitsavani117]

hi i am work on AR with face filter app in react js. i make two canvas:- 1) for glasses on user face this canvas import from react-three-fiber 2) for video which is from WebARRocks for face canvas now when i override default height and width for better resolution in face canvas then glasses canvas position was affected it doesnt show glasses properly on face.

[xavierjs]

Hi

Please share a runnable GitHub repo ( not code chunks only ) with the issue so that I can work on it. Your explanations are not clear and the best way to debug code is with code.

[mohitsavani117]

please check it out my code:- https://github.com/Design2k/webAR-issue.git

[xavierjs]

I think that you confuse the display size of canvas (CSS size) and the canvas resolution. There are some mistakes in your code, I will fix them. However, in the future, I will have to charge for that since it is custom development and integration.

[xavierjs]

Hi @mohitsavani117

I have fixed the glasses 2D offset issue, updated WebAR.rocks.face to the latest version (less latency, more efficient), and also fixed a bug on how sizing is computed (previously it was zooming on the face). Unfortunately you have deleted your webAR-issue repo so I cannot submit a PR.

So I have created a new private Github repo and sent you an invite: https://github.com/xavierjs/webAR-issue

This commit groups my changes: https://github.com/xavierjs/webAR-issue/commit/cb4418869c088eb19f305e0e3b0f13aa7f77f2a4

Please tell me if it helps to solve your issue or not.

[mohitsavani117]

hi @xavierjs sorry for not replying you and thank you for this i will integrate this code and check if it solve my issue or not.

[xavierjs]

Hi @mohitsavani117 You are welcome. You have the write access to https://github.com/xavierjs/webAR-issue so feel free to push new code on it.

[mohitsavani117]

ohk @xavierjs