Three-VRM and 3D avatars on the web

Slide 1

Slide 1 text

Intro to Three-VRM Live 3D avatars…in the browser! ViennaJS meetup November 2023 Daniils Petrovs @danirukun

Slide 2

Slide 2 text

Cat Warning!🐱

Slide 3

Slide 3 text

Overview - Very quick overview of 3DCG - Introduction to 3D assets and gLTF - Introduction to VRM - Basic overview of three.js - Demo time!

Slide 4

Slide 4 text

About me Full-stack engineer Make web apps in free time Big XR and 3D tech nerd Part-time vtuber (streamer)

Slide 5

Slide 5 text

Intro to 3DCG

Slide 6

Slide 6 text

Mesh - Edges - Vertices - Faces Deﬁnes the “shape” of a 3D object.

Slide 7

Slide 7 text

Texture An image mapped to the surface of a 3D object.

Slide 8

Slide 8 text

Shader An “implementation” of a material.

Slide 9

Slide 9 text

3D object Mesh Material Shader Texture

Slide 10

Slide 10 text

Exchanging 3D is hard - You have to keep mesh and textures together - Other things like shaders, skins, cameras, animations etc. - Extra metadata - Be easy to work with and implement in end applications - Often not designed for loading at runtime

Slide 11

Slide 11 text

But! There is a solution! Introducing gLTF!

Slide 12

Slide 12 text

But what is it?

Slide 13

Slide 13 text

A standardized delivery format for 3DCG Audio Video Images 3D MP3 H.264 JPEG ?!

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

What about 3D avatars?

Slide 17

Slide 17 text

Introducing: VRM Based on gLTF 2.0

Slide 18

Slide 18 text

A file format for handling 3D humanoid avatars Designed specifically for humanoid avatars. Free to use, single file. Standardised in 2018 by the VRM Consortium.

Slide 19

Slide 19 text

VRM Expressions Materials Metadata Visemes Blendshapes Gaze Shaders

Slide 20

Slide 20 text

3D creation apps VRM Avatar Game engines, 3D apps

Slide 21

Slide 21 text

You vs the avatar she tells you not to worry about

Slide 22

Slide 22 text

Tons of avatars on VRoid Hub

Slide 23

Slide 23 text

Three.js

Slide 24

Slide 24 text

What is it? A 3D library that tries to make it as easy as possible to get 3D content on a webpage. Most often than not uses WebGL to draw 3D. Handles a lot of the hard stuﬀ like scenes, lights, shadows, materials etc.

Slide 25

Slide 25 text

Scene graph

Slide 26

Slide 26 text

Three-VRM

Slide 27

Slide 27 text

Library for Three.js Implements a VRM loader and other utilities for working with VRMs.

Slide 28

Slide 28 text

Demo time!

Slide 29

Slide 29 text

Special ViennaJS demo https://danirukun.com.viennajsdemo

Slide 30

Slide 30 text

Thank you!

Slide 31

Slide 31 text

Find me everywhere danirukun.com

Slide 32

Slide 32 text

Links - https://docs.google.com/presentation/d/1BRdEGqJFIWk3QOehOxJqM9dIE4kIBNQhIm7UeBaVse0 - https://vrm.dev/en/index.html - https://threejs.org/ - https://github.com/pixiv/three-vrm - https://www.w3.org/2019/09/Meetup/YutakaObuchi_VRM.pdf - https://poly.pizza/ - https://www.mixamo.com/ - https://vroid.com/en