feat(camera): aspectRatio for mobile cam

package.json

@@ -5,6 +5,7 @@
   "type": "module",
   "scripts": {
     "dev": "vite",
+    "dev:host": "vite --host",
     "build": "tsc && vite build",
     "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview"

src/App.tsx

@@ -1,7 +1,7 @@
 import { Canvas } from "@react-three/fiber";
 import { Perf } from "r3f-perf";
 import "./App.css";
-import { OrbitControls } from "@react-three/drei";
+import { OrbitControls, PerspectiveCamera } from "@react-three/drei";
 import { ProjectInfo } from "./components/ProjectInfo/ProjectInfo";
 import { useControls } from "leva";
 import { WebCamVideoPlane } from "./components/WebCamVideoPlane/WebCamVideoPlane";
@@ -17,13 +17,7 @@ function App() {
 
   return (
     <>
-      <Canvas
-        camera={{
-          position: [0, 0, -10],
-          near: 0.001,
-          far: 100000,
-        }}
-      >
+      <Canvas>
         {/* <Environment 
           background={true}
           files={'./hdr/orbital_sunset.hdr'}
@@ -34,8 +28,19 @@ function App() {
         {/* <group position={[0, 0, 0]}>
           <VegasPlane />
         </group> */}
+        {/* Camera */}
+
+        <PerspectiveCamera
+          makeDefault
+          position={[0, 0, -1]}
+          fov={75}
+          zoom={8}
+          near={0.000001}
+          far={1000}
+        />
+
         <ambientLight intensity={0.5} />
-        <group position={[0, 0, 2]}>
+        <group position={[0, 0, 0]}>
           <WebCamVideoPlane />
         </group>
 

src/components/VideoPlane/VideoPlane.tsx

@@ -4,9 +4,7 @@ import { FilterMaterialVideoChroma } from "../../materials/FilterMaterialVideoCh
 import { FilterMaterialVideoEdge } from "../../materials/FilterMaterialVideoEdge";
 import { useControls } from "leva";
 
-export const VideoPlane = ({ userMedia }: {
-  userMedia: MediaStream
-}) => {
+export const VideoPlane = ({ userMedia }: { userMedia: MediaStream }) => {
   // shaders options on leva: Chroma, Edge
   const { shader } = useControls({
     shader: {
@@ -15,9 +13,11 @@ export const VideoPlane = ({ userMedia }: {
     },
   });
 
-  const size = useAspect(4,3);
+  const mediaWidth = userMedia.getVideoTracks()[0].getSettings().width || 1;
+  const mediaHeight = userMedia.getVideoTracks()[0].getSettings().height || 1;
+  const mediaAspect = mediaWidth / mediaHeight;
+  const size = useAspect(mediaAspect, 1, 0.1);
   return (
-
     <mesh scale={size} position={[0, 0, 0]}>
       <planeGeometry />
 
@@ -29,4 +29,4 @@ export const VideoPlane = ({ userMedia }: {
       </Suspense>
     </mesh>
   );
-};
+};

src/components/WebCamVideoPlane/WebCamVideoPlane.tsx

@@ -2,7 +2,6 @@ import { useEffect, useState } from "react";
 import { VideoPlane } from "../VideoPlane/VideoPlane";
 
 export const WebCamVideoPlane = () => {
-
   const [userMedia, setUserMedia] = useState<MediaStream>();
   // Gets user webcam
   useEffect(() => {
@@ -15,7 +14,6 @@ export const WebCamVideoPlane = () => {
     });
   }, []);
 
-
-  if(!userMedia) return null;
+  if (!userMedia) return null;
   return <VideoPlane userMedia={userMedia} />;
 };

src/main.tsx

@@ -1,10 +1,10 @@
-import React from 'react'
-import ReactDOM from 'react-dom/client'
-import App from './App.tsx'
-import './index.css'
+import React from "react";
+import ReactDOM from "react-dom/client";
+import App from "./App.tsx";
+import "./index.css";
 
-ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
+ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
   <React.StrictMode>
     <App />
-  </React.StrictMode>,
-)
+  </React.StrictMode>
+);

src/materials/FilterMaterialVideoChroma.tsx

@@ -22,7 +22,7 @@ export const FilterMaterialVideoChroma
 }) => {
   const { chromaKey, threshold, tolerance } = useControls({
     chromaKey: {
-      value: "#00ff00",
+      value: "#b1541d",
       label: "Chroma Key",
     },
     threshold: {

src/materials/FilterMaterialVideoEdge.tsx

@@ -7,19 +7,18 @@ import { ShaderMaterialEdge } from "./ShaderMaterialEdge";
 
 extend({ ShaderMaterialEdge });
 
-export const FilterMaterialVideoEdge
- = ({
+export const FilterMaterialVideoEdge = ({
   userMedia,
 }: {
   userMedia: MediaStream;
 }) => {
-  const { distH, intensity  } = useControls({
+  const { distH, intensity } = useControls({
     distH: {
       value: 1.0,
       min: 0.0,
       max: 10.0,
     },
-   intensity: {
+    intensity: {
       value: 5.0,
       min: 0.0,
       max: 20.0,
@@ -29,9 +28,8 @@ export const FilterMaterialVideoEdge
   const [videoTexture, setVideoTexture] = useState<VideoTexture>();
   const texture = useVideoTexture(userMedia);
   const mediaTrackSettings = userMedia.getVideoTracks()[0].getSettings();
-  const resolution = [mediaTrackSettings.width, mediaTrackSettings.height];
   const materialRef = useRef<ShaderMaterial>();
-  
+
   useEffect(() => {
     if (materialRef.current === undefined) return;
     materialRef.current.uniforms.map.value = texture;
@@ -40,20 +38,18 @@ export const FilterMaterialVideoEdge
 
   useEffect(() => {
     if (materialRef.current === undefined) return;
+    const resolution = [mediaTrackSettings.width, mediaTrackSettings.height];
     materialRef.current.uniforms.iResolution.value = resolution;
-  }
-  , [resolution]);
+  }, [mediaTrackSettings]);
 
   useEffect(() => {
     if (materialRef.current === undefined) return;
     materialRef.current.uniforms.distH.value = distH;
-  }
-  , [distH]);
+  }, [distH]);
   useEffect(() => {
     if (materialRef.current === undefined) return;
     materialRef.current.uniforms.intensity.value = intensity;
-  }
-  , [intensity]);
+  }, [intensity]);
 
   return (
     <shaderMaterialEdge

src/materials/ShaderMaterialChroma.tsx

@@ -7,10 +7,10 @@ export const ShaderMaterialChroma = shaderMaterial(
     map: null,
     iTime: 0,
     iResolution: [0, 0],
-    chromaKey: [0.0, 1.0, 0.0],
+    chromaKey: [0.692, 0.329, 0.114], // #b1541d
     threshold: 0.3,
     tolerance: 0.1,
   },
   vertexShader,
   fragmentShader
-);
+);

src/three-elements.ts

@@ -6,19 +6,19 @@ import { ShaderMaterialEdge } from "./materials/ShaderMaterialEdge";
 declare module "@react-three/fiber" {
   interface ThreeElements {
     vegasMaterial: ReactThreeFiber.Object3DNode<
-      // @ts-expect-error
+      // @ts-expect-error Material type
       VegasMaterial,
       typeof VegasMaterial
     >;
     shaderMaterialChroma: ReactThreeFiber.Object3DNode<
-      // @ts-expect-error
+      // @ts-expect-error Material type
       ShaderMaterialChroma,
       typeof ShaderMaterialChroma
     >;
     shaderMaterialEdge: ReactThreeFiber.Object3DNode<
-      // @ts-expect-error
+      // @ts-expect-error Material type
       ShaderMaterialEdge,
       typeof ShaderMaterialEdge
     >;
   }
-}
+}