FaceControls

.storybook/stories/FaceControls.stories.tsx

@@ -1,3 +1,4 @@
+/* eslint react-hooks/exhaustive-deps: 1 */
 import * as THREE from 'three'
 import * as React from 'react'
 import { withKnobs, number } from '@storybook/addon-knobs'
@@ -13,20 +14,26 @@ export default {
   decorators: [withKnobs, (storyFn) => <Setup cameraFov={60}>{storyFn()}</Setup>],
 }
 
-export const FaceControlsSt = ({ eyes }) => (
-  <>
-    <color attach="background" args={['#303030']} />
-    <axesHelper />
-
-    <FaceLandmarker>
-      <FaceControls eyes={eyes} />
-    </FaceLandmarker>
+function FaceControlsScene({ eyes }) {
+  return (
+    <>
+      <color attach="background" args={['#303030']} />
+      <axesHelper />
+
+      <React.Suspense fallback={null}>
+        <FaceLandmarker>
+          <FaceControls eyes={eyes} />
+        </FaceLandmarker>
+      </React.Suspense>
+
+      <Box args={[0.1, 0.1, 0.1]}>
+        <meshStandardMaterial />
+      </Box>
+    </>
+  )
+}
 
-    <Box args={[0.1, 0.1, 0.1]}>
-      <meshStandardMaterial />
-    </Box>
-  </>
-)
+export const FaceControlsSt = ({ eyes }) => <FaceControlsScene eyes={eyes} />
 FaceControlsSt.args = {
   eyes: undefined,
 }

src/core/FaceControls.tsx

@@ -1,3 +1,4 @@
+/* eslint react-hooks/exhaustive-deps: 1 */
 import * as THREE from 'three'
 import * as React from 'react'
 import {
@@ -300,7 +301,7 @@ export const FaceControls = forwardRef<FaceControlsApi, FaceControlsProps>(
           rotation-z={Math.PI}
           visible={debug}
         >
-          <meshStandardMaterial flatShading={true} side={THREE.DoubleSide} />
+          <meshBasicMaterial side={THREE.DoubleSide} />
         </Facemesh>
       </FaceControlsContext.Provider>
     )

src/core/FaceLandmarker.tsx

@@ -1,6 +1,8 @@
+/* eslint react-hooks/exhaustive-deps: 1 */
 import * as React from 'react'
-import { createContext, ReactNode, useContext, useEffect, useState } from 'react'
+import { createContext, ReactNode, useContext, useEffect } from 'react'
 import { FilesetResolver, FaceLandmarker as FaceLandmarkerImpl, FaceLandmarkerOptions } from '@mediapipe/tasks-vision'
+import { clear, suspend } from 'suspend-react'
 
 const FaceLandmarkerContext = createContext({} as FaceLandmarkerImpl | undefined)
 
@@ -29,17 +31,20 @@ export function FaceLandmarker({
   options = FaceLandmarkerDefaults.options,
   children,
 }: FaceLandmarkerProps) {
-  const [faceLandmarker, setFaceLandmarker] = useState<FaceLandmarkerImpl>()
-  useEffect(() => {
-    let ret: FaceLandmarkerImpl
+  const opts = JSON.stringify(options)
 
-    FilesetResolver.forVisionTasks(basePath)
-      .then((vision) => FaceLandmarkerImpl.createFromOptions(vision, options))
-      .then((faceLandmarker) => setFaceLandmarker(faceLandmarker))
-      .catch((err) => console.error('error while creating faceLandmarker', err))
+  const faceLandmarker = suspend(async () => {
+    return await FilesetResolver.forVisionTasks(basePath).then((vision) =>
+      FaceLandmarkerImpl.createFromOptions(vision, options)
+    )
+  }, [basePath, opts])
 
-    return () => void ret?.close()
-  }, [basePath, options])
+  useEffect(() => {
+    return () => {
+      faceLandmarker?.close()
+      clear([basePath, opts])
+    }
+  }, [faceLandmarker, basePath, opts])
 
   return <FaceLandmarkerContext.Provider value={faceLandmarker}>{children}</FaceLandmarkerContext.Provider>
 }