diff --git a/package.json b/package.json index 64f916b..6c2ffde 100644 --- a/package.json +++ b/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" diff --git a/src/App.tsx b/src/App.tsx index 254658f..867b9bc 100644 --- a/src/App.tsx +++ b/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 ( <> - + {/* */} + {/* Camera */} + + + - + diff --git a/src/components/VideoPlane/VideoPlane.tsx b/src/components/VideoPlane/VideoPlane.tsx index 88505dc..9d82041 100644 --- a/src/components/VideoPlane/VideoPlane.tsx +++ b/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 ( - @@ -29,4 +29,4 @@ export const VideoPlane = ({ userMedia }: { ); -}; \ No newline at end of file +}; diff --git a/src/components/WebCamVideoPlane/WebCamVideoPlane.tsx b/src/components/WebCamVideoPlane/WebCamVideoPlane.tsx index 0cb4067..7a3e58c 100644 --- a/src/components/WebCamVideoPlane/WebCamVideoPlane.tsx +++ b/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(); // Gets user webcam useEffect(() => { @@ -15,7 +14,6 @@ export const WebCamVideoPlane = () => { }); }, []); - - if(!userMedia) return null; + if (!userMedia) return null; return ; }; diff --git a/src/main.tsx b/src/main.tsx index 91c03f3..8914ebd 100644 --- a/src/main.tsx +++ b/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( - , -) + +); diff --git a/src/materials/FilterMaterialVideoChroma.tsx b/src/materials/FilterMaterialVideoChroma.tsx index de9eb65..30e4d89 100644 --- a/src/materials/FilterMaterialVideoChroma.tsx +++ b/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: { diff --git a/src/materials/FilterMaterialVideoEdge.tsx b/src/materials/FilterMaterialVideoEdge.tsx index f8e5bb2..b3897af 100644 --- a/src/materials/FilterMaterialVideoEdge.tsx +++ b/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(); const texture = useVideoTexture(userMedia); const mediaTrackSettings = userMedia.getVideoTracks()[0].getSettings(); - const resolution = [mediaTrackSettings.width, mediaTrackSettings.height]; const materialRef = useRef(); - + 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 ( ; 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 >; } -} \ No newline at end of file +}