Slide 1
Slide 1 text
Revamping VRoid Hub’s
model processing
pipeline with Rust
yue
Slide 2
Slide 2 text
Frontend & 3D developer
VRoid team since 2021
I enjoy type systems!
yue
Slide 3
Slide 3 text
Overview
Slide 4
Slide 4 text
Introduction
Slide 5
Slide 5 text
5
Slide 6
Slide 6 text
This talk focuses on
Slide 7
Slide 7 text
This talk focuses on
Slide 8
Slide 8 text
This talk focuses on
Slide 9
Slide 9 text
Over 2.8 million 3D avatar models have
been posted to VRoid Hub
Slide 10
Slide 10 text
System architecture
Slide 11
Slide 11 text
VRoid Hub’s Architecture (Before)
Slide 12
Slide 12 text
VRoid Hub’s Architecture (Before)
Slide 13
Slide 13 text
VRoid Hub’s Architecture (Before)
Slide 14
Slide 14 text
VRoid Hub’s Architecture (Before)
Slide 15
Slide 15 text
VRoid Hub’s Architecture (Before)
Slide 16
Slide 16 text
VRoid Hub’s Architecture (Before)
Slide 17
Slide 17 text
server-side components
Slide 18
Slide 18 text
server-side components
Slide 19
Slide 19 text
server-side components
Slide 20
Slide 20 text
server-side components
Slide 21
Slide 21 text
VRoid Hub’s Architecture (Before)
Slide 22
Slide 22 text
How to improve?
Slide 23
Slide 23 text
Our journey
Slide 24
Slide 24 text
How about Rust…?
Slide 25
Slide 25 text
● Performances ✅
● Control and correctness ✅
● Wide range of build targets ✅
● Good variety of libraries with quality ✅
● Team members' skills ✅
Why Rust?
Slide 26
Slide 26 text
The first step
Slide 27
Slide 27 text
● small code base ✅
● easy to POC / prototype ✅
● easy to compare ✅
○ we did the comparison with Node.js / golang..
● easy to try and error (nothing is stored)✅
Why start from the download
server?
Slide 28
Slide 28 text
Transport
Slide 29
Slide 29 text
No content
Slide 30
Slide 30 text
No content
Slide 31
Slide 31 text
VRMFLUX
● Average response time: 4x faster.
● CPU usage: about 1/4. LGTM!
Slide 32
Slide 32 text
Step.1: Convert vrmflux to rust ✅
Slide 33
Slide 33 text
The second step
Slide 34
Slide 34 text
Dev meetup talk 3 years ago...
Slide 35
Slide 35 text
VRoid Hubにおける
3Dモデルの最適化
pixiv Inc.
Isamu Mogi
Slide 36
Slide 36 text
ポータブルな Unityアプリ実行環境の構築
LLVMpipe Mesa Xvfb Unity App GNU C Library Linux Kernel
GPU
エミュレー
ション
OpenGL GUI printf(); 一番偉い
ポータブルにするには
自前で準備する必要あり
セットで存在する
LinuxサーバーでのUnityアプリケーション実行環境の模式図
→ too complex 😣
Slide 37
Slide 37 text
ポータブルな Unityアプリ実行環境の構築
ビルドに必要なライブラリ
https://gitlab.freedesktop.org/xorg/util/modular/-/blob/8cd77d79b12cb802a3eda0fdd6f7ce11662d02
e2/build.sh#L1029
util-macros,font-util,xorgproto,xcb-proto,xtrans,libXau,libXdmcp,libpthread-stubs,libxcb,xcb-util,xcb-
util-image,xcb-util-keysyms,xcb-util-renderutil,xcb-util-wm,libX11,libXext,libdmx,libfontenc,libFS,libI
CE,libSM,libXt,libXmu,libXpm,libXau,libXaw3d,libXfixes,libXcomposite,libXrender,libXdamage,libXc
ursor,libXfont2,libXft,libXi,libXinerama,libxkbfile,libXrandr,libXres,libXScrnSaver,libxshmfence,libXtst
,libXv,libXvMC,libXxf86dga,libXxf86vm,libpciaccess,pixman,libdrm,mesa,xbitmaps,xkbcomp,xorg-s
erver,xkeyboard-config
すごく多い・・・ → cargo build ✅
Slide 38
Slide 38 text
● Prepare for advanced processing
○ perform texture atlas in pure rust context
○ build an importer & exporter for glTF/VRM from
scratch
The challenge
Slide 39
Slide 39 text
with Rust
Slide 40
Slide 40 text
The glTF™ format
● GL Transmission Format
● png for 3D models
● simple: json + binary
● optimized for
transmission/runtime
Slide 41
Slide 41 text
glTF uses indexes to define relationships
Slide 42
Slide 42 text
No content
Slide 43
Slide 43 text
glTF is a property graph
Slide 44
Slide 44 text
If we virtualize the graph..
Slide 45
Slide 45 text
a method for improving rendering cost
Texture atlas
Slide 46
Slide 46 text
Before
Slide 47
Slide 47 text
After
Slide 48
Slide 48 text
Find an edge with the
relationship
Modify the graph in O(1)
time
Slide 49
Slide 49 text
Step2: Convert vrmio/vrm-ruby to rust ✅
Slide 50
Slide 50 text
No content
Slide 51
Slide 51 text
VRMIO
● A stable glTF/VRMimporter/exporter
● Easier to build, test, and maintain
Slide 52
Slide 52 text
Shared Engine
Slide 53
Slide 53 text
● compiled to wasm/wasi targets
○ runs in browser
○ runs in docker WasmEdge Runtime
● compiled as bindings
○ node w/ napi-rs
○ ruby w/ magnus
Some future possibilities
Slide 54
Slide 54 text
DEMO: VRMFLOW
Slide 55
Slide 55 text
Node-based 3D model editor using the same engine
Slide 56
Slide 56 text
Libraries & Testing
Slide 57
Slide 57 text
hyper and AWS SDK for Rust reached v1
Slide 58
Slide 58 text
● gltf_rs / glTF handling
○ used in Bevy engine (game engine)
● petgraph / graph processing
○ the same tool behind swc (js build tool)
● euclid & guillotiere / math & atlas implementation
○ comes from Servo community (browser engine)
Crates we used
Slide 59
Slide 59 text
Powered by game and
browser engines!
Slide 60
Slide 60 text
● salsa / on-demand, incrementalized computation.
○ powers rust-analyzer (Rust LSP)
● KTX-Software / meshoptimizer
○ unlocks the possibility to link with C/C++ code
More dependencies available
Slide 61
Slide 61 text
● distroless / docker base image
● cargo deny / license and security scan
Extra tooling we found useful
Slide 62
Slide 62 text
● insta / snapshot testing
● playwright / E2E testing with WebGL
● Sentry (has an official Rust crate!) / error tracking
● Datadog / performance monitoring
How did we test
Slide 63
Slide 63 text
We even built a
dedicated
real-time
testing tool
Slide 64
Slide 64 text
OSS contributions
Slide 65
Slide 65 text
We contribute back
to the ecosystem
Three.js / @types/three / gltf-Transform / ktx-parse /
basis-universal-rs / vrm-utils-rs / …
Slide 66
Slide 66 text
We maintain OSS projects
● three-vrm
● vrm-utils-rs new!
○ Data structures for the VRM Format.
○ published on GitHub / crates.io
○ https://github.com/pixiv/vrm-utils-rs
Slide 67
Slide 67 text
We are a part of the VRM Consortium
Slide 68
Slide 68 text
Summary
Slide 69
Slide 69 text
To wrap it up
● At VRoid, we will continue to focus on improving existing
systems and user experiences.
● There are more plans and features coming this year to
enhance our services. Please stay tuned!
Slide 70
Slide 70 text
Thanks!