first part of the VRChat for gmeets writeup

Signed-off-by: Christine Dodrill <me@christine.website>
2021-02-24 09:43:40 -05:00 · 2021-02-24 09:43:40 -05:00 · f09331323d
parent c6482fe2fc
commit f09331323d
3 changed files with 145 additions and 0 deletions
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@ -0,0 +1,10 @@
+{
+    "editor.wordWrap": "wordWrapColumn",
+    "editor.wordWrapColumn": 80,
+    "editor.wordBasedSuggestions": false,
+    "[markdown]":{
+        "editor.wordWrap": "wordWrapColumn",
+        "editor.wordWrapColumn": 80,
+        "vim.textwidth": 80,
+    },
+}
--- a/blog/convoluted-vrchat-gchat-setup-2021-02-24.markdown
+++ b/blog/convoluted-vrchat-gchat-setup-2021-02-24.markdown
@ -0,0 +1,62 @@
+---
+title: "My Convoluted VRChat Google Meet Setup"
+date: 2021-02-24
+tags:
+ - oculusquest2
+ - vr
+ - vrchat
+---
+
+# My Convoluted VRChat Google Meet Setup
+
+Recently the place I work for sent us all VR headsets. I decided to see what it
+would take to use that headset to make my camera show a virtual avatar instead
+of my meat body face. This is the story of my journey through chaining things
+together to make work meetings a bit more fun by using a 3D avatar instead of
+myself in some of them.
+
+[This post uses SVG for diagrams to help explain what's going on here. You may
+need to use a browser with SVG support in order to get the best experience with
+this article. All the diagrams will be explained after the fact so that people
+using screen readers are not left out.](conversation://Mara/hacker)
+
+<blockquote class="twitter-tweet"><p lang="en" dir="ltr">Working at <a href="https://twitter.com/Tailscale?ref_src=twsrc%5Etfw">@Tailscale</a> is great. They sent us all an Oculus Quest 2! <a href="https://t.co/dDhbwO9cFd">pic.twitter.com/dDhbwO9cFd</a></p>&mdash; Cadey A. Ratio (@theprincessxena) <a href="https://twitter.com/theprincessxena/status/1362871906597224456?ref_src=twsrc%5Etfw">February 19, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
+
+So, let's cover the basics from a high level. At a high level a webcam is just
+a video source that may or may not have a microphone attached to it. So in 
+order to get my avatar to show up in a video call, I need some way to make some 
+window on my computer act as a webcam. This will make the overall dependency
+list look like this (for those of you using screen readers I will describe
+this diagram below):
+
+![](/static/blog/vrchat/simple_graph.svg)
+
+VRChat renders to the Desktop which is picked up by OBS which has the ability
+to pretend to be a webcam, which is finally picked up by Google Meet.
+
+If the VR headset that I got from work was a tethered to the PC kind of VR
+headset like the Valve Index or HTC Vive, the next steps would involve full 
+body tracking or something so that I could have my movements in real life 
+transfer into movements that my avatar makes.
+
+However, the VR headset we got sent was an Oculus Quest 2. This is a 
+_standalone_ VR headset that is basically an Android tablet that you strap
+to your face. This makes things a bit more technically challenging because
+now you need some way to get the video to the headset and the motion tracking 
+data from the headset and to the computer at 90 times per second. This requires
+a bit more cleverness.
+
+The Oculus desktop software ships with a feature called Oculus Link that allows
+you to use a gaming PC to render the VR data to your headset by sending the 
+video streams over USB. I had to dig around for a compatible cable (It needs to 
+be a specific kind of USB-3 to USB-C-3 cable with at least 5 gigabits per 
+second of transfer capacity) since the ones that
+[Oculus sells](https://www.oculus.com/accessories/oculus-link/) are both at 
+least CAD$110 and out of stock anywhere I can find them in Canada. The 0.75 
+meter long cable I had been using was good enough to get me through the first
+couple days of experimenting with VR, but it was clear that a better solution 
+was needed.
+
+I did some digging and found a bit of software called 
+[ALVR](https://github.com/alvr-org/alvr#readme) that claimed to let me do VR
+from my computer wirelessly.
--- a/static/blog/vrchat/simple_graph.svg
+++ b/static/blog/vrchat/simple_graph.svg
@ -0,0 +1,73 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+ "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<!-- Generated by graphviz version 2.40.1 (20161225.0304)
+ -->
+<!-- Title: G Pages: 1 -->
+<svg width="610pt" height="123pt"
+ viewBox="0.00 0.00 609.61 123.00" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<g id="graph0" class="graph" transform="scale(1 1) rotate(0) translate(4 119)">
+<title>G</title>
+<polygon fill="#ffffff" stroke="transparent" points="-4,4 -4,-119 605.611,-119 605.611,4 -4,4"/>
+<g id="clust1" class="cluster">
+<title>cluster_1</title>
+<polygon fill="#d3d3d3" stroke="#d3d3d3" points="8,-8 8,-107 593.611,-107 593.611,-8 8,-8"/>
+<text text-anchor="middle" x="300.8055" y="-90.4" font-family="Times,serif" font-size="14.00" fill="#000000">PC</text>
+</g>
+<!-- VRC -->
+<g id="node1" class="node">
+<title>VRC</title>
+<ellipse fill="#ffffff" stroke="#ffffff" cx="58.6871" cy="-45" rx="42.8751" ry="18"/>
+<text text-anchor="middle" x="58.6871" y="-40.8" font-family="Times,serif" font-size="14.00" fill="#000000">VRChat</text>
+</g>
+<!-- DESK -->
+<g id="node5" class="node">
+<title>DESK</title>
+<ellipse fill="#ffffff" stroke="#ffffff" cx="180.5935" cy="-45" rx="43.4396" ry="18"/>
+<text text-anchor="middle" x="180.5935" y="-40.8" font-family="Times,serif" font-size="14.00" fill="#000000">Desktop</text>
+</g>
+<!-- VRC&#45;&gt;DESK -->
+<g id="edge3" class="edge">
+<title>VRC&#45;&gt;DESK</title>
+<path fill="none" stroke="#000000" d="M101.6668,-45C109.8542,-45 118.5168,-45 126.9873,-45"/>
+<polygon fill="#000000" stroke="#000000" points="127.1794,-48.5001 137.1794,-45 127.1793,-41.5001 127.1794,-48.5001"/>
+</g>
+<!-- OBS -->
+<g id="node2" class="node">
+<title>OBS</title>
+<ellipse fill="#ffffff" stroke="#ffffff" cx="289.6291" cy="-45" rx="29.6339" ry="18"/>
+<text text-anchor="middle" x="289.6291" y="-40.8" font-family="Times,serif" font-size="14.00" fill="#000000">OBS</text>
+</g>
+<!-- VIRC -->
+<g id="node3" class="node">
+<title>VIRC</title>
+<ellipse fill="#ffffff" stroke="#ffffff" cx="412.0734" cy="-45" rx="56.7561" ry="18"/>
+<text text-anchor="middle" x="412.0734" y="-40.8" font-family="Times,serif" font-size="14.00" fill="#000000">VirtualCam</text>
+</g>
+<!-- OBS&#45;&gt;VIRC -->
+<g id="edge1" class="edge">
+<title>OBS&#45;&gt;VIRC</title>
+<path fill="none" stroke="#000000" d="M319.5824,-45C327.4013,-45 336.1504,-45 345.0646,-45"/>
+<polygon fill="#000000" stroke="#000000" points="345.1584,-48.5001 355.1584,-45 345.1584,-41.5001 345.1584,-48.5001"/>
+</g>
+<!-- GM -->
+<g id="node4" class="node">
+<title>GM</title>
+<ellipse fill="#ffffff" stroke="#ffffff" cx="545.1562" cy="-45" rx="40.4098" ry="29.3315"/>
+<text text-anchor="middle" x="545.1562" y="-49.2" font-family="Times,serif" font-size="14.00" fill="#000000">Google</text>
+<text text-anchor="middle" x="545.1562" y="-32.4" font-family="Times,serif" font-size="14.00" fill="#000000">Meet</text>
+</g>
+<!-- VIRC&#45;&gt;GM -->
+<g id="edge2" class="edge">
+<title>VIRC&#45;&gt;GM</title>
+<path fill="none" stroke="#000000" d="M468.8985,-45C477.4369,-45 486.1935,-45 494.5894,-45"/>
+<polygon fill="#000000" stroke="#000000" points="494.6128,-48.5001 504.6128,-45 494.6128,-41.5001 494.6128,-48.5001"/>
+</g>
+<!-- DESK&#45;&gt;OBS -->
+<g id="edge4" class="edge">
+<title>DESK&#45;&gt;OBS</title>
+<path fill="none" stroke="#000000" d="M224.0006,-45C232.4355,-45 241.241,-45 249.5623,-45"/>
+<polygon fill="#000000" stroke="#000000" points="249.7795,-48.5001 259.7795,-45 249.7795,-41.5001 249.7795,-48.5001"/>
+</g>
+</g>
+</svg>