From a65b765f85f58237ec67f9ba75e13bbb2ebed22a Mon Sep 17 00:00:00 2001 From: SpookyCorgi Date: Thu, 4 May 2023 05:30:04 -0400 Subject: [PATCH] edit app install and main page, fix fustrum in playground --- site/src/routes/+layout.svelte | 1 + site/src/routes/docs/+page.md | 52 +++++ site/src/routes/docs/+page.svelte | 182 ------------------ site/src/routes/docs/+page.ts | 1 - site/src/routes/docs/layout.svelte | 17 ++ .../docs/osc-app/app-installation/+page.md | 25 +++ .../osc-app/app-installation/+page.svelte | 35 ---- .../docs/osc-app/app-installation/+page.ts | 1 - site/src/routes/playground/+page.svelte | 2 + 9 files changed, 97 insertions(+), 219 deletions(-) create mode 100644 site/src/routes/docs/+page.md delete mode 100644 site/src/routes/docs/+page.svelte delete mode 100644 site/src/routes/docs/+page.ts create mode 100644 site/src/routes/docs/layout.svelte create mode 100644 site/src/routes/docs/osc-app/app-installation/+page.md delete mode 100644 site/src/routes/docs/osc-app/app-installation/+page.svelte delete mode 100644 site/src/routes/docs/osc-app/app-installation/+page.ts diff --git a/site/src/routes/+layout.svelte b/site/src/routes/+layout.svelte index 8d56b5a..34c4500 100644 --- a/site/src/routes/+layout.svelte +++ b/site/src/routes/+layout.svelte @@ -1,5 +1,6 @@ - -
-
-
-

Getting Started :D

-
-
- -
-
-

What is Phiz?

-
-

- Phiz is an open-source tool that gives you the power to do facial motion capture right in - your browser, using the webcam on any mobile device or computer. You can then send the - blendshape data, either locally or remotely, to another browser or popular game engines; you - even have the option to broadcast the blendshape data through OSC protocol using Phiz's - cross-platform app. -

-

How does it work?

-
-
    -
  • -
    -

    Facial Motion Capture... in Your Browser

    -

    - Phiz's motion capture system was built using - Mocap4face - and Google mediapipe's machine - learning model. - No iPhone LiDAR or RGBD camera needed! The underlying ML - code is not fixed and will be updated whenever there is a better model. -

    -
    -
    • -
  • -
    -

    Streaming Data: Unreal and Unity Support

    -

    - Phiz includes custom plugins that fire up WebSocket servers within Unreal engine - and Unity, which are used to receive live data - from your browser. The plugins also include convenient presets that you can easily use - with popular 3D avatars, such as Metahumans and ReadyPlayerMe characters. -

    -
    -
    • -
  • -
    -

    Streaming Data: Browser to Browser & Browser to OSC App

    -

    - Phiz uses WebRTC (the protocol used in video calling) to send data from one browser to - another or from a browser to the app. However, no image or video is sent at all. - WebRTC also allows for peer-to-peer secure connection and low latency. -

    -
    -
    • - -
  • -
    -

    ARKit support

    -

    - Phiz uses the same blendshapes as ARKit. Check out the Blendshapes page for more information about the blendshape names and orders. -

    -
    -
    • -
-

How do I use it?

-
-

Disclaimer: Ensure the browser page remains active during recording.

-
    -
  1. -

    - 1. Visit the capture page and allow the website to access your camera. -

    -
    2. -
  2. -

    - 2. Select the correct camera, choose the desired frame smoothing, and decide whether to - use sensitive motion capture or not. -

    -
    3. -
  3. -
    -

    3. Select one of the two methods to send the captured data:

    -
    - - Local: -
      -
    • -

      - - Use Phiz's custom plugin to send data directly to - Unreal engine - or Unity using your defined URL and port. -

      -
      • -
    • -

      - Check out their documentation for more information.

      -
      • -
    - - Remote: -
      -
    • -

      - Click on the 8-character code starting with "p-" (e.g., p-AwCodE) to copy it.

      -
      • -
    • -

      - - To send data to another device (e.g., recording on phone and controlling avatar in - Unreal on PC): -

      -
        -
      1. -

        - 1. Open the receive page on another device. -

        -
        2. -
      2. -

        2. Paste the copied 8-character code.

        -
        3. -
      3. -

        - 3. You should now see live streaming data on your device and be able to share it - locally. -

        -
        4. -
      -
      • -
    • -

      - To send data to the Phiz App for broadcasting OSC data:

      -
        -
      1. -

        - 1. Download and install the Phiz App for your platform. -

        -
        2. -
      2. -

        2. Open the app and paste the 8-character code.

        -
        3. -
      3. -

        3. The data will now be available in OSC format on your chosen port.

        -
        4. -
      -
      • -
    • - If everything is correctly connected but no data is showing up, try refreshing the - page to generate a new code. -
      • -
    -
    4. -
-

Apps & Plugins

-

- Check out other documentation pages. If you are on mobile, press the menu button on the top - left. -

-
-
-
- -
-
-
-
-
- - diff --git a/site/src/routes/docs/+page.ts b/site/src/routes/docs/+page.ts deleted file mode 100644 index df46931..0000000 --- a/site/src/routes/docs/+page.ts +++ /dev/null @@ -1 +0,0 @@ -export const prerender = 'auto'; diff --git a/site/src/routes/docs/layout.svelte b/site/src/routes/docs/layout.svelte new file mode 100644 index 0000000..51d2ae5 --- /dev/null +++ b/site/src/routes/docs/layout.svelte @@ -0,0 +1,17 @@ + + +
+
+
+ +
+
+
+
+
+
+
diff --git a/site/src/routes/docs/osc-app/app-installation/+page.md b/site/src/routes/docs/osc-app/app-installation/+page.md new file mode 100644 index 0000000..d5c15ef --- /dev/null +++ b/site/src/routes/docs/osc-app/app-installation/+page.md @@ -0,0 +1,25 @@ +Phiz includes an app that enables you to receive data from the Phiz website. +Review the [documentation](https://www.phizmocap.dev/docs) to learn how to use the website. + +## Download the App +Download and install the app for your platform [here](https://www.phizmocap.dev/downloads). + +Phiz is a free open-source project without funding. +**Due to the lack of a paid yearly developer license, the app will not be signed, and your OS will display a warning.** +You can still run the app by following the instructions below. + +## Windows +After downloading the app, your browser may display a warning. Simply keep the file. +![windows-download](https://github.com/SpookyCorgi/phiz/blob/main/assets/docs/osc-app/app-installation/windows-download.png?raw=true) + +When you click on the app installer, Windows will show another warning. Click on `More info` and `Run anyway`. +![windows-install](https://github.com/SpookyCorgi/phiz/blob/main/assets/docs/osc-app/app-installation/windows-install.png?raw=true) + +## Mac +During the initial installation attempt on a Mac, you might encounter a warning without an option to proceed. + +![mac-install](https://github.com/SpookyCorgi/phiz/blob/main/assets/docs/osc-app/app-installation/mac-install.png?raw=true) + +To resolve this, go to `System Preferences` -> `Security & Privacy` -> `General` and click on `Open Anyway`. Then, install the app. + +![mac-settings](https://github.com/SpookyCorgi/phiz/blob/main/assets/docs/osc-app/app-installation/mac-settings.png?raw=true) diff --git a/site/src/routes/docs/osc-app/app-installation/+page.svelte b/site/src/routes/docs/osc-app/app-installation/+page.svelte deleted file mode 100644 index 3f3e04f..0000000 --- a/site/src/routes/docs/osc-app/app-installation/+page.svelte +++ /dev/null @@ -1,35 +0,0 @@ - - -
-
-
-

App Installation :D

-
-
-
- -
-
-

Chapter title

-

The AI hasn't figure out the next word to generate yet.

-

- AI thinks there should be a link here -

-
-
-
- -
-
-
-
-
- - diff --git a/site/src/routes/docs/osc-app/app-installation/+page.ts b/site/src/routes/docs/osc-app/app-installation/+page.ts deleted file mode 100644 index df46931..0000000 --- a/site/src/routes/docs/osc-app/app-installation/+page.ts +++ /dev/null @@ -1 +0,0 @@ -export const prerender = 'auto'; diff --git a/site/src/routes/playground/+page.svelte b/site/src/routes/playground/+page.svelte index e048c81..96fa273 100644 --- a/site/src/routes/playground/+page.svelte +++ b/site/src/routes/playground/+page.svelte @@ -142,6 +142,8 @@ model = gltf.scene.children[0]; //make mesh global for mocap model.traverse(function (obj: any) { + //prevent obj disappear at zoom + obj.frustumCulled = false; switch (obj.name) { case 'Wolf3D_Head': head = obj;