Three-VRM and 3D avatars on the web

Most web developers already know how to build interactive experiences using plain HTML and CSS with some JS. Some had the chance to do things with the Canvas API, others might've used something more advanced like Three.js to add 3D content to their websites. However, the world of 3D animation and avatars on the web is very new. I want to show and demonstrate how you can do 3D character animation right in the browser with Three.js

Transcript

1. Intro to Three-VRM Live 3D avatars…in the browser! ViennaJS meetup November 2023 Daniils Petrovs @danirukun
2. Cat Warning!🐱
3. Overview - Very quick overview of 3DCG - Introduction to 3D assets and gLTF - Introduction to VRM - Basic overview of three.js - Demo time!
4. About me Full-stack engineer Make web apps in free time Big XR and 3D tech nerd Part-time vtuber (streamer)
5. Intro to 3DCG
6. Mesh - Edges - Vertices - Faces Defines the “shape” of a 3D object.
7. Texture An image mapped to the surface of a 3D object.
8. Shader An “implementation” of a material.
9. 3D object Mesh Material Shader Texture
10. 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
11. But! There is a solution! Introducing gLTF!
12. But what is it?
13. A standardized delivery format for 3DCG Audio Video Images 3D MP3 H.264 JPEG ?!
16. What about 3D avatars?
17. Introducing: VRM Based on gLTF 2.0
18. 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.
19. VRM Expressions Materials Metadata Visemes Blendshapes Gaze Shaders
20. 3D creation apps VRM Avatar Game engines, 3D apps
21. You vs the avatar she tells you not to worry about
22. Tons of avatars on VRoid Hub
23. Three.js
24. 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 stuff like scenes, lights, shadows, materials etc.
25. Scene graph
26. Three-VRM
27. Library for Three.js Implements a VRM loader and other utilities for working with VRMs.
28. Demo time!
29. Special ViennaJS demo https://danirukun.com.viennajsdemo
30. Thank you!
31. Find me everywhere danirukun.com
32. 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