https://github.com/ReactVision/viro
1. 유저가 앱에 접속함과 동시에 카메라 오픈(react-native-vision-camera)
2. 유저가 카메라를 사과 객체에 비추면 객체 인식(해당 객체가 사과인지 아닌지에 대한 판단만 1차적으로 진행)
3. 당도 측정 버튼이 활성화됨 -> 해당 버튼을 누르면 실시간 카메라가 정지하고 BE에 정지 직전의 이미지를 전송
4. BE측에선 해당 이미지를 분석해 사과 객체의 정확한 바운딩박스 좌표와 당도 측정 연산 결과를 RESPONSE로 전달
5. BE측에서 전달받은 바운딩박스 좌표를 바탕으로 정지된 사과 이미지 위에 3D 사과 오브젝트 띄우기
먼저, 몇 개의 사과가 인식되었는지 확인해.
그리고 미리 만들어 둔 3D 사과 오브젝트를 화면 중앙에 모달 형식으로 띄울거야.
예를들어 9개의 사과가 인식되었다면 9개의 사과를 우측으로 스와이프해서 그 특성과 당도를 볼 수 있도록 말이야.
그리고 9개의 사과 중 가장 특성과 당도가 좋은 사과는 특히 웃는 얼굴을 가진 3D 사과 오브젝트로 보여줄거야.
<aside> 💡
expo-gl + expo-three
</aside>
https://app.spline.design/library
https://www.youtube.com/watch?v=trCpbpA_8gk&t=230s
https://www.aircards.co/blog/2d-vs-3d-augmented-reality
첫번째 레이어는 캡처한 실제 이미지
그 위에 우측 스와이프가 가능한 캐러셀 형태의 모달
3개의 사과가 인식되었다고 가정 → 3D 또는 2D 이쁘게 디자인된 사과 오브젝트 3개를 배치
그 중 가장 당도가 높은 사과 오브젝트에 적절한 효과 부여(ex, 웃는 표정 또는 반질거리는 질감 표현 등)
유저가 해당 사과 오브젝트를 터치하면 모달이 닫히고 실제 이미지에서 터치한 사과 오브젝트의 실제 사과 부분 강조 표시