add osc app example and data format doc

SpookyCorgi · May 4, 2023 · 0c09ae2 · 0c09ae2
1 parent a65b765
commit 0c09ae2
Show file tree

Hide file tree

Showing 10 changed files with 99 additions and 75 deletions.
diff --git a/README.md b/README.md
@@ -92,7 +92,7 @@ Checkout the [PureData example](https://www.phizmocap.dev/docs/osc-app/puredata-
 There are currently 4 channels of data.**
 - **/phiz/blendshapes**
 
-  A float array [52 blendshape values] ranging from 0.0~1.0. **Check [here](https://github.com/SpookyCorgi/phiz/wiki/Blendshapes-Format) for the order of blendshapes**. 
+  A float array [52 blendshape values] ranging from 0.0~1.0. **Check [here](https://www.phizmocap.dev/docs/data-format) for the order of blendshapes**. 
 
 - **/phiz/headRotation**
 

diff --git a/site/src/lib/navigation/DocsNav.svelte b/site/src/lib/navigation/DocsNav.svelte
@@ -35,6 +35,6 @@
 	<a href="/docs/web-playground/how-to-use" on:click={drawerClose}><span>How to use</span></a>
 
 	<hr class="m-4" />
-	<span class="px-4 font-bold text-primary-500">Specs</span>
-	<a href="/docs/specs/blendshapes" on:click={drawerClose}><span>Blendshapes</span></a>
+	<span class="px-4 font-bold text-primary-500">Data Format</span>
+	<a href="/docs/data-format" on:click={drawerClose}><span>Data Format</span></a>
 </nav>
diff --git a/site/src/routes/docs/+page.md b/site/src/routes/docs/+page.md
@@ -20,7 +20,7 @@ Phiz is an open-source tool that gives you the power to do facial motion capture
 
 - **ARKit Support**
 
-    Phiz uses the same blendshapes as ARKit. Check out the [Blendshapes page](https://www.phizmocap.dev/docs/specs/blendshapes) for more information about the blendshape names and orders.
+    Phiz uses the same blendshapes as ARKit. Check out the [data format page](https://www.phizmocap.dev/docs/data-format) for more information about the blendshape names and orders.
 
 
 ## How do I use it?

diff --git a/site/src/routes/docs/data-format/+page.md b/site/src/routes/docs/data-format/+page.md
@@ -0,0 +1,86 @@
+## Data format
+**All data follows the OSC format.
+There are currently 5 channels of data.**
+- **/phiz/blendshapes**
+
+  A float array [52 blendshape values] ranging from 0.0~1.0. 
+
+- **/phiz/headRotation**
+
+   A float array [x,y,z,w] ranging from -1.0 ~ 1.0. 
+
+These are extra eye rotation roughly estimated from the eyeLookAt blendshapes. It's usually not needed since common avatar has eye rotation build in their blendshapes.
+- **/phiz/leftEyeRotation**
+
+   A float array [x,y,z,w] ranging from -1.0 ~ 1.0.
+
+- **/phiz/rightEyeRotation**
+
+    A float array [x,y,z,w] ranging from -1.0 ~ 1.0.
+
+All rotations are **quaternions in right-handed, Y-Up, Z-Forward** coordinate system.
+
+<img class="dark:hidden" src="https://github.com/SpookyCorgi/phiz/blob/main/assets/coordinate-axes-light.png?raw=true" alt="Coordinate axis">
+<img class="hidden dark:block" src="https://github.com/SpookyCorgi/phiz/blob/main/assets/coordinate-axes-dark.png?raw=true" alt="Coordinate axis">
+
+- **/phiz/version**
+
+    A string of the current version of Phiz website.
+
+
+## Blendshapes
+Easy to copy format :) in order of the data array
+```
+browInnerUp
+browDownLeft
+browDownRight
+browOuterUpLeft
+browOuterUpRight
+eyeLookUpLeft
+eyeLookUpRight
+eyeLookDownLeft
+eyeLookDownRight
+eyeLookInLeft
+eyeLookInRight
+eyeLookOutLeft
+eyeLookOutRight
+eyeBlinkLeft
+eyeBlinkRight
+eyeSquintLeft
+eyeSquintRight
+eyeWideLeft
+eyeWideRight
+cheekPuff
+cheekSquintLeft
+cheekSquintRight
+noseSneerLeft
+noseSneerRight
+mouthFunnel
+mouthPucker
+mouthRollUpper
+mouthRollLower
+mouthShrugUpper
+mouthShrugLower
+mouthClose
+mouthSmileLeft
+mouthSmileRight
+mouthFrownLeft
+mouthFrownRight
+mouthDimpleLeft
+mouthDimpleRight
+mouthUpperUpLeft
+mouthUpperUpRight
+mouthLowerDownLeft
+mouthLowerDownRight
+mouthPressLeft
+mouthPressRight
+mouthStretchLeft
+mouthStretchRight
+mouthLeft
+mouthRight
+jawOpen
+jawForward
+jawLeft
+jawRight
+tongueOut
+```
diff --git a/site/src/routes/docs/layout.svelte b/site/src/routes/docs/layout.svelte
@@ -9,6 +9,8 @@
 		>
 			<slot class="" />
 		</div>
+		<div class="dark:hidden" id="tailwind-trigger-dark-hidden" />
+		<div class="dark:block" id="tailwind-trigger-dark-block" />
 	</div>
 	<hr class="w-full mt-12" />
 	<div class="w-full px-4 lg:px-8">

diff --git a/site/src/routes/docs/osc-app/puredata-example/+page.md b/site/src/routes/docs/osc-app/puredata-example/+page.md
@@ -0,0 +1,7 @@
+Watch the video below to see how the 52 blendshape values are used as a music synthesizer:
+
+[![Synthesizer controlled with facial mocap data from Phiz OSC App](http://img.youtube.com/vi/RIscBs1DQkk/0.jpg)](http://www.youtube.com/watch?v=RIscBs1DQkk "Synthesizer controlled with facial mocap data from Phiz OSC App")
+
+In this example, Pure Data is used to receive OSC data, which then controls various sine waves to play or shift their pitch.
+
+Find the Pure Data code in the [example folder of the GitHub repo](https://github.com/SpookyCorgi/phiz/blob/main/examples/OSC/face-oscillator.pd).
diff --git a/site/src/routes/docs/osc-app/puredata-example/+page.svelte b/site/src/routes/docs/osc-app/puredata-example/+page.svelte
diff --git a/site/src/routes/docs/osc-app/puredata-example/+page.ts b/site/src/routes/docs/osc-app/puredata-example/+page.ts
diff --git a/site/src/routes/docs/specs/blendshapes/+page.svelte b/site/src/routes/docs/specs/blendshapes/+page.svelte
diff --git a/site/src/routes/docs/specs/blendshapes/+page.ts b/site/src/routes/docs/specs/blendshapes/+page.ts