implementation of vrm on three · w3c developer meetup 2019 pixiv inc. obuchi yutaka 2018.6.5. 2540...
TRANSCRIPT
![Page 1: Implementation of VRM on Three · W3C Developer Meetup 2019 pixiv Inc. OBUCHI Yutaka 2018.6.5. 2540 2 OBUCHI Yutaka ... actual code of MToon of our implementation ... to perform adaptive](https://reader036.vdocuments.mx/reader036/viewer/2022081607/5ee37b29ad6a402d666d517e/html5/thumbnails/1.jpg)
2540
Implementation ofVRM on Three.js
W3C Developer Meetup 2019
pixiv Inc.OBUCHI Yutaka
2018.6.5
![Page 2: Implementation of VRM on Three · W3C Developer Meetup 2019 pixiv Inc. OBUCHI Yutaka 2018.6.5. 2540 2 OBUCHI Yutaka ... actual code of MToon of our implementation ... to perform adaptive](https://reader036.vdocuments.mx/reader036/viewer/2022081607/5ee37b29ad6a402d666d517e/html5/thumbnails/2.jpg)
2540
2
OBUCHI Yutaka
Engineer at pixiv Inc.Specializing in CG
Twitter: @FMS_Cat
![Page 3: Implementation of VRM on Three · W3C Developer Meetup 2019 pixiv Inc. OBUCHI Yutaka 2018.6.5. 2540 2 OBUCHI Yutaka ... actual code of MToon of our implementation ... to perform adaptive](https://reader036.vdocuments.mx/reader036/viewer/2022081607/5ee37b29ad6a402d666d517e/html5/thumbnails/3.jpg)
2540
3
OBUCHI YutakaWorking on 3D character platform
called VRoid Hub
![Page 4: Implementation of VRM on Three · W3C Developer Meetup 2019 pixiv Inc. OBUCHI Yutaka 2018.6.5. 2540 2 OBUCHI Yutaka ... actual code of MToon of our implementation ... to perform adaptive](https://reader036.vdocuments.mx/reader036/viewer/2022081607/5ee37b29ad6a402d666d517e/html5/thumbnails/4.jpg)
2540
OBUCHI YutakaI’m also a hobbyist demoscener!
Do 3D graphics experience on Web
![Page 5: Implementation of VRM on Three · W3C Developer Meetup 2019 pixiv Inc. OBUCHI Yutaka 2018.6.5. 2540 2 OBUCHI Yutaka ... actual code of MToon of our implementation ... to perform adaptive](https://reader036.vdocuments.mx/reader036/viewer/2022081607/5ee37b29ad6a402d666d517e/html5/thumbnails/5.jpg)
2540
Today I’m gonna talk about...
![Page 6: Implementation of VRM on Three · W3C Developer Meetup 2019 pixiv Inc. OBUCHI Yutaka 2018.6.5. 2540 2 OBUCHI Yutaka ... actual code of MToon of our implementation ... to perform adaptive](https://reader036.vdocuments.mx/reader036/viewer/2022081607/5ee37b29ad6a402d666d517e/html5/thumbnails/6.jpg)
2540
Implementation of 3D characterviewer on Web browser
Today I’m gonna talk about...
![Page 7: Implementation of VRM on Three · W3C Developer Meetup 2019 pixiv Inc. OBUCHI Yutaka 2018.6.5. 2540 2 OBUCHI Yutaka ... actual code of MToon of our implementation ... to perform adaptive](https://reader036.vdocuments.mx/reader036/viewer/2022081607/5ee37b29ad6a402d666d517e/html5/thumbnails/7.jpg)
2540
Especially, I’m gonna focus on:
Today I’m gonna talk about...
- Overview of VRM, A format for 3D avatar- VRM Implementation on Web, especially materials- Performance / Security issues we encountered
![Page 8: Implementation of VRM on Three · W3C Developer Meetup 2019 pixiv Inc. OBUCHI Yutaka 2018.6.5. 2540 2 OBUCHI Yutaka ... actual code of MToon of our implementation ... to perform adaptive](https://reader036.vdocuments.mx/reader036/viewer/2022081607/5ee37b29ad6a402d666d517e/html5/thumbnails/8.jpg)
2540
VRoid Hub?
![Page 9: Implementation of VRM on Three · W3C Developer Meetup 2019 pixiv Inc. OBUCHI Yutaka 2018.6.5. 2540 2 OBUCHI Yutaka ... actual code of MToon of our implementation ... to perform adaptive](https://reader036.vdocuments.mx/reader036/viewer/2022081607/5ee37b29ad6a402d666d517e/html5/thumbnails/9.jpg)
2540
VRoid Hub?
First let me talk aboutour Web service VRoid Hub and its motivation
![Page 10: Implementation of VRM on Three · W3C Developer Meetup 2019 pixiv Inc. OBUCHI Yutaka 2018.6.5. 2540 2 OBUCHI Yutaka ... actual code of MToon of our implementation ... to perform adaptive](https://reader036.vdocuments.mx/reader036/viewer/2022081607/5ee37b29ad6a402d666d517e/html5/thumbnails/10.jpg)
2540
VRoid Hub?
Nowadays it becomes easierto make your own 3D character
![Page 11: Implementation of VRM on Three · W3C Developer Meetup 2019 pixiv Inc. OBUCHI Yutaka 2018.6.5. 2540 2 OBUCHI Yutaka ... actual code of MToon of our implementation ... to perform adaptive](https://reader036.vdocuments.mx/reader036/viewer/2022081607/5ee37b29ad6a402d666d517e/html5/thumbnails/11.jpg)
2540
A “Hub” for 3D characters
Author
UploadGames
Live Streaming (VTuber)
Metaverses
Use
User
VRoid Hub?
![Page 12: Implementation of VRM on Three · W3C Developer Meetup 2019 pixiv Inc. OBUCHI Yutaka 2018.6.5. 2540 2 OBUCHI Yutaka ... actual code of MToon of our implementation ... to perform adaptive](https://reader036.vdocuments.mx/reader036/viewer/2022081607/5ee37b29ad6a402d666d517e/html5/thumbnails/12.jpg)
2540
VRoid Hub?We must present artists’ character on Web browser
utilizing full potential of its expression
![Page 13: Implementation of VRM on Three · W3C Developer Meetup 2019 pixiv Inc. OBUCHI Yutaka 2018.6.5. 2540 2 OBUCHI Yutaka ... actual code of MToon of our implementation ... to perform adaptive](https://reader036.vdocuments.mx/reader036/viewer/2022081607/5ee37b29ad6a402d666d517e/html5/thumbnails/13.jpg)
2540
VRM: A format for 3D avatarWe use a 3D model format called VRM
that specializes in 3D character expression
https://github.com/vrm-c/vrm-specification
![Page 14: Implementation of VRM on Three · W3C Developer Meetup 2019 pixiv Inc. OBUCHI Yutaka 2018.6.5. 2540 2 OBUCHI Yutaka ... actual code of MToon of our implementation ... to perform adaptive](https://reader036.vdocuments.mx/reader036/viewer/2022081607/5ee37b29ad6a402d666d517e/html5/thumbnails/14.jpg)
2540
VRM: A format for 3D avatarVRM is implemented as
a domain-specific extension of glTF
https://www.khronos.org/gltf/
![Page 15: Implementation of VRM on Three · W3C Developer Meetup 2019 pixiv Inc. OBUCHI Yutaka 2018.6.5. 2540 2 OBUCHI Yutaka ... actual code of MToon of our implementation ... to perform adaptive](https://reader036.vdocuments.mx/reader036/viewer/2022081607/5ee37b29ad6a402d666d517e/html5/thumbnails/15.jpg)
2540
VRM: A format for 3D avatar
Humanoidinterfaces
Facial expressions
Toon materials
Features forFirst person view
Dynamic bones
Metafielde.g. licenses
VRM has various features to deal withHumanoid avatars
![Page 16: Implementation of VRM on Three · W3C Developer Meetup 2019 pixiv Inc. OBUCHI Yutaka 2018.6.5. 2540 2 OBUCHI Yutaka ... actual code of MToon of our implementation ... to perform adaptive](https://reader036.vdocuments.mx/reader036/viewer/2022081607/5ee37b29ad6a402d666d517e/html5/thumbnails/16.jpg)
2540
VRM: A format for 3D avatarHumanoidinterfaces
basically, map of {bone key: node}
![Page 17: Implementation of VRM on Three · W3C Developer Meetup 2019 pixiv Inc. OBUCHI Yutaka 2018.6.5. 2540 2 OBUCHI Yutaka ... actual code of MToon of our implementation ... to perform adaptive](https://reader036.vdocuments.mx/reader036/viewer/2022081607/5ee37b29ad6a402d666d517e/html5/thumbnails/17.jpg)
2540
VRM: A format for 3D avatar
Most of these specs are meant to beused by modern game engines
→ We, Web developers, had to adoptthese game engine oriented spec into
how we deal with 3D stuff on Web
e.g. certain Humanoid specs completely relies onimplementation of Humanoid component in game engines
![Page 18: Implementation of VRM on Three · W3C Developer Meetup 2019 pixiv Inc. OBUCHI Yutaka 2018.6.5. 2540 2 OBUCHI Yutaka ... actual code of MToon of our implementation ... to perform adaptive](https://reader036.vdocuments.mx/reader036/viewer/2022081607/5ee37b29ad6a402d666d517e/html5/thumbnails/18.jpg)
2540
VRM: A format for 3D avatar
VRM Consortium:An org to define the spec of VRM
https://vrm-consortium.org/
![Page 19: Implementation of VRM on Three · W3C Developer Meetup 2019 pixiv Inc. OBUCHI Yutaka 2018.6.5. 2540 2 OBUCHI Yutaka ... actual code of MToon of our implementation ... to perform adaptive](https://reader036.vdocuments.mx/reader036/viewer/2022081607/5ee37b29ad6a402d666d517e/html5/thumbnails/19.jpg)
2540
Implementation
![Page 20: Implementation of VRM on Three · W3C Developer Meetup 2019 pixiv Inc. OBUCHI Yutaka 2018.6.5. 2540 2 OBUCHI Yutaka ... actual code of MToon of our implementation ... to perform adaptive](https://reader036.vdocuments.mx/reader036/viewer/2022081607/5ee37b29ad6a402d666d517e/html5/thumbnails/20.jpg)
2540
Implementation
We implementedVRM importer as
a module of Three.js
https://threejs.org/
Three.js already hasa glTF implementation!
![Page 21: Implementation of VRM on Three · W3C Developer Meetup 2019 pixiv Inc. OBUCHI Yutaka 2018.6.5. 2540 2 OBUCHI Yutaka ... actual code of MToon of our implementation ... to perform adaptive](https://reader036.vdocuments.mx/reader036/viewer/2022081607/5ee37b29ad6a402d666d517e/html5/thumbnails/21.jpg)
2540
Implementation
https://github.com/pixiv/three-vrm
The implementation is availableunder MIT License
Releasedlast week!
![Page 22: Implementation of VRM on Three · W3C Developer Meetup 2019 pixiv Inc. OBUCHI Yutaka 2018.6.5. 2540 2 OBUCHI Yutaka ... actual code of MToon of our implementation ... to perform adaptive](https://reader036.vdocuments.mx/reader036/viewer/2022081607/5ee37b29ad6a402d666d517e/html5/thumbnails/22.jpg)
2540
Implementation
I’m gonna talk especially about
Materials
![Page 23: Implementation of VRM on Three · W3C Developer Meetup 2019 pixiv Inc. OBUCHI Yutaka 2018.6.5. 2540 2 OBUCHI Yutaka ... actual code of MToon of our implementation ... to perform adaptive](https://reader036.vdocuments.mx/reader036/viewer/2022081607/5ee37b29ad6a402d666d517e/html5/thumbnails/23.jpg)
2540
Implementation: MaterialToon material spec used in VRM: MToon
- Minimal, efficient lightings that can be adopted to various situation
- From cell animation like to character art like
- Pseudo specular expression using matcap textures
- Line drawing like expression using outlines
![Page 24: Implementation of VRM on Three · W3C Developer Meetup 2019 pixiv Inc. OBUCHI Yutaka 2018.6.5. 2540 2 OBUCHI Yutaka ... actual code of MToon of our implementation ... to perform adaptive](https://reader036.vdocuments.mx/reader036/viewer/2022081607/5ee37b29ad6a402d666d517e/html5/thumbnails/24.jpg)
2540
Implementation: Material
Unlit(no lightings) MToon
![Page 25: Implementation of VRM on Three · W3C Developer Meetup 2019 pixiv Inc. OBUCHI Yutaka 2018.6.5. 2540 2 OBUCHI Yutaka ... actual code of MToon of our implementation ... to perform adaptive](https://reader036.vdocuments.mx/reader036/viewer/2022081607/5ee37b29ad6a402d666d517e/html5/thumbnails/25.jpg)
2540
Implementation: Material
In 3DCG realm, we do programhow 3D objects should be rendered using shaders
A shader = An implementation of a material
![Page 26: Implementation of VRM on Three · W3C Developer Meetup 2019 pixiv Inc. OBUCHI Yutaka 2018.6.5. 2540 2 OBUCHI Yutaka ... actual code of MToon of our implementation ... to perform adaptive](https://reader036.vdocuments.mx/reader036/viewer/2022081607/5ee37b29ad6a402d666d517e/html5/thumbnails/26.jpg)
2540
Implementation: Material
How shader programs looks like:
“Simply output the input color”
![Page 27: Implementation of VRM on Three · W3C Developer Meetup 2019 pixiv Inc. OBUCHI Yutaka 2018.6.5. 2540 2 OBUCHI Yutaka ... actual code of MToon of our implementation ... to perform adaptive](https://reader036.vdocuments.mx/reader036/viewer/2022081607/5ee37b29ad6a402d666d517e/html5/thumbnails/27.jpg)
2540
Implementation: Material
plus “Do a texture mapping”
![Page 28: Implementation of VRM on Three · W3C Developer Meetup 2019 pixiv Inc. OBUCHI Yutaka 2018.6.5. 2540 2 OBUCHI Yutaka ... actual code of MToon of our implementation ... to perform adaptive](https://reader036.vdocuments.mx/reader036/viewer/2022081607/5ee37b29ad6a402d666d517e/html5/thumbnails/28.jpg)
2540
Implementation: Material
Since shaders are described in a programit lacks portability
Well-described material specification is requiredto use certain material in arbitrary context
![Page 29: Implementation of VRM on Three · W3C Developer Meetup 2019 pixiv Inc. OBUCHI Yutaka 2018.6.5. 2540 2 OBUCHI Yutaka ... actual code of MToon of our implementation ... to perform adaptive](https://reader036.vdocuments.mx/reader036/viewer/2022081607/5ee37b29ad6a402d666d517e/html5/thumbnails/29.jpg)
2540
Implementation: MaterialTo resolve this problem,
glTF uses an interface of PBR material
https://sketchfab.com/3d-models/battle-damaged-sci-fi-helmet-pbr-b81008d513954189a063ff901f7abfe4
Color
MetallicRoughness
Emissive
![Page 30: Implementation of VRM on Three · W3C Developer Meetup 2019 pixiv Inc. OBUCHI Yutaka 2018.6.5. 2540 2 OBUCHI Yutaka ... actual code of MToon of our implementation ... to perform adaptive](https://reader036.vdocuments.mx/reader036/viewer/2022081607/5ee37b29ad6a402d666d517e/html5/thumbnails/30.jpg)
2540
The specification of MToon iscompletely aside from ordinary PBR materials
Implementation: Material
We had to convert Unity shader implementationinto GLSL that Three.js uses
![Page 31: Implementation of VRM on Three · W3C Developer Meetup 2019 pixiv Inc. OBUCHI Yutaka 2018.6.5. 2540 2 OBUCHI Yutaka ... actual code of MToon of our implementation ... to perform adaptive](https://reader036.vdocuments.mx/reader036/viewer/2022081607/5ee37b29ad6a402d666d517e/html5/thumbnails/31.jpg)
2540
Implementation: MaterialToon material spec used in VRM: MToon
- Minimal, efficient lightings that can be adopted to various situation
- From cell animation like to character art like
- Pseudo specular expression using matcap textures
- Line drawing like expression using outlines
so many features
![Page 32: Implementation of VRM on Three · W3C Developer Meetup 2019 pixiv Inc. OBUCHI Yutaka 2018.6.5. 2540 2 OBUCHI Yutaka ... actual code of MToon of our implementation ... to perform adaptive](https://reader036.vdocuments.mx/reader036/viewer/2022081607/5ee37b29ad6a402d666d517e/html5/thumbnails/32.jpg)
2540
Implementation: Material
actual code of MToon of our implementation
💪🙄
![Page 33: Implementation of VRM on Three · W3C Developer Meetup 2019 pixiv Inc. OBUCHI Yutaka 2018.6.5. 2540 2 OBUCHI Yutaka ... actual code of MToon of our implementation ... to perform adaptive](https://reader036.vdocuments.mx/reader036/viewer/2022081607/5ee37b29ad6a402d666d517e/html5/thumbnails/33.jpg)
2540
Implementation: Material
opinion: Make it nodable!
Blender
![Page 34: Implementation of VRM on Three · W3C Developer Meetup 2019 pixiv Inc. OBUCHI Yutaka 2018.6.5. 2540 2 OBUCHI Yutaka ... actual code of MToon of our implementation ... to perform adaptive](https://reader036.vdocuments.mx/reader036/viewer/2022081607/5ee37b29ad6a402d666d517e/html5/thumbnails/34.jpg)
2540
Implementation: MaterialThree.js : NodeMaterial
Can be converted into a JSON
https://www.donmccurdy.com/2019/03/17/three-nodematerial-introduction/
![Page 35: Implementation of VRM on Three · W3C Developer Meetup 2019 pixiv Inc. OBUCHI Yutaka 2018.6.5. 2540 2 OBUCHI Yutaka ... actual code of MToon of our implementation ... to perform adaptive](https://reader036.vdocuments.mx/reader036/viewer/2022081607/5ee37b29ad6a402d666d517e/html5/thumbnails/35.jpg)
2540
Performance issues
![Page 36: Implementation of VRM on Three · W3C Developer Meetup 2019 pixiv Inc. OBUCHI Yutaka 2018.6.5. 2540 2 OBUCHI Yutaka ... actual code of MToon of our implementation ... to perform adaptive](https://reader036.vdocuments.mx/reader036/viewer/2022081607/5ee37b29ad6a402d666d517e/html5/thumbnails/36.jpg)
2540
Performance issues
VRoid Hub is meant to be visitedfrom both PC and mobile
Make our experience tolerable on mobile isour primary challenge on VRoid Hub
![Page 37: Implementation of VRM on Three · W3C Developer Meetup 2019 pixiv Inc. OBUCHI Yutaka 2018.6.5. 2540 2 OBUCHI Yutaka ... actual code of MToon of our implementation ... to perform adaptive](https://reader036.vdocuments.mx/reader036/viewer/2022081607/5ee37b29ad6a402d666d517e/html5/thumbnails/37.jpg)
2540
Performance issues
Outlines looks pretty grisly without antialias!
(with AA)
![Page 38: Implementation of VRM on Three · W3C Developer Meetup 2019 pixiv Inc. OBUCHI Yutaka 2018.6.5. 2540 2 OBUCHI Yutaka ... actual code of MToon of our implementation ... to perform adaptive](https://reader036.vdocuments.mx/reader036/viewer/2022081607/5ee37b29ad6a402d666d517e/html5/thumbnails/38.jpg)
2540
Performance issues
We cannot use multisample AA on WebGL(can use in WebGL2 though)
→ We’re rendering our entire thingon 2x resolution + using post process FXAA
→ 🔥 on mobile devices 😩
![Page 39: Implementation of VRM on Three · W3C Developer Meetup 2019 pixiv Inc. OBUCHI Yutaka 2018.6.5. 2540 2 OBUCHI Yutaka ... actual code of MToon of our implementation ... to perform adaptive](https://reader036.vdocuments.mx/reader036/viewer/2022081607/5ee37b29ad6a402d666d517e/html5/thumbnails/39.jpg)
2540
Performance issues
We wanted to implementadaptive quality control on our 3D renderer
PCs w/decent GPU
poor mobiledevices(yes, this it exaggerated a bit)
![Page 40: Implementation of VRM on Three · W3C Developer Meetup 2019 pixiv Inc. OBUCHI Yutaka 2018.6.5. 2540 2 OBUCHI Yutaka ... actual code of MToon of our implementation ... to perform adaptive](https://reader036.vdocuments.mx/reader036/viewer/2022081607/5ee37b29ad6a402d666d517e/html5/thumbnails/40.jpg)
2540
Performance issues
We wanted to implementadaptive quality control on our 3D renderer
PCs w/decent GPU
poor mobiledevices
Since we’re Web app thenWe don’t want to let users
takes one extra step of quality settings
![Page 41: Implementation of VRM on Three · W3C Developer Meetup 2019 pixiv Inc. OBUCHI Yutaka 2018.6.5. 2540 2 OBUCHI Yutaka ... actual code of MToon of our implementation ... to perform adaptive](https://reader036.vdocuments.mx/reader036/viewer/2022081607/5ee37b29ad6a402d666d517e/html5/thumbnails/41.jpg)
2540
Performance issues
Inspecting performance on user end is hard!
An option: See an actual FPS on the end
→ FPS can be subject ofvarious condition other than actual performancee.g. orientation changes, spikes of other apps...
![Page 42: Implementation of VRM on Three · W3C Developer Meetup 2019 pixiv Inc. OBUCHI Yutaka 2018.6.5. 2540 2 OBUCHI Yutaka ... actual code of MToon of our implementation ... to perform adaptive](https://reader036.vdocuments.mx/reader036/viewer/2022081607/5ee37b29ad6a402d666d517e/html5/thumbnails/42.jpg)
2540
Performance issues
60FPS(1ms)
60FPS(16ms)
📱🔥💻😙
![Page 43: Implementation of VRM on Three · W3C Developer Meetup 2019 pixiv Inc. OBUCHI Yutaka 2018.6.5. 2540 2 OBUCHI Yutaka ... actual code of MToon of our implementation ... to perform adaptive](https://reader036.vdocuments.mx/reader036/viewer/2022081607/5ee37b29ad6a402d666d517e/html5/thumbnails/43.jpg)
2540
Performance issues
60FPS(1ms)
60FPS(16ms)
📱🔥💻😙We can measure CPU timebut CANNOT measure GPU time
![Page 44: Implementation of VRM on Three · W3C Developer Meetup 2019 pixiv Inc. OBUCHI Yutaka 2018.6.5. 2540 2 OBUCHI Yutaka ... actual code of MToon of our implementation ... to perform adaptive](https://reader036.vdocuments.mx/reader036/viewer/2022081607/5ee37b29ad6a402d666d517e/html5/thumbnails/44.jpg)
2540
Performance issues
There is a WebGL extension calledEXT_disjoint_timer_query but...
http://webglstats.com/webgl/extension/EXT_disjoint_timer_query
![Page 45: Implementation of VRM on Three · W3C Developer Meetup 2019 pixiv Inc. OBUCHI Yutaka 2018.6.5. 2540 2 OBUCHI Yutaka ... actual code of MToon of our implementation ... to perform adaptive](https://reader036.vdocuments.mx/reader036/viewer/2022081607/5ee37b29ad6a402d666d517e/html5/thumbnails/45.jpg)
2540
Performance issues
We are currently seeing FPSto perform adaptive quality regression
with extremely low threshold (30FPS) 😩
![Page 46: Implementation of VRM on Three · W3C Developer Meetup 2019 pixiv Inc. OBUCHI Yutaka 2018.6.5. 2540 2 OBUCHI Yutaka ... actual code of MToon of our implementation ... to perform adaptive](https://reader036.vdocuments.mx/reader036/viewer/2022081607/5ee37b29ad6a402d666d517e/html5/thumbnails/46.jpg)
2540
Security issues
![Page 47: Implementation of VRM on Three · W3C Developer Meetup 2019 pixiv Inc. OBUCHI Yutaka 2018.6.5. 2540 2 OBUCHI Yutaka ... actual code of MToon of our implementation ... to perform adaptive](https://reader036.vdocuments.mx/reader036/viewer/2022081607/5ee37b29ad6a402d666d517e/html5/thumbnails/47.jpg)
2540
Security issues
It’s relatively harder than Native applicationsto protect users creation on Web
We are trying to protectcreators stuff at all costs!
![Page 48: Implementation of VRM on Three · W3C Developer Meetup 2019 pixiv Inc. OBUCHI Yutaka 2018.6.5. 2540 2 OBUCHI Yutaka ... actual code of MToon of our implementation ... to perform adaptive](https://reader036.vdocuments.mx/reader036/viewer/2022081607/5ee37b29ad6a402d666d517e/html5/thumbnails/48.jpg)
2540
Security issues
Example: We have to deal with modelsthat is on sale / has paid texture
There are cultures that artists sellsthose own texture on store
since textures are sometimes compatiblebetween same authoring tool (e.g. VRoid Studio)
![Page 49: Implementation of VRM on Three · W3C Developer Meetup 2019 pixiv Inc. OBUCHI Yutaka 2018.6.5. 2540 2 OBUCHI Yutaka ... actual code of MToon of our implementation ... to perform adaptive](https://reader036.vdocuments.mx/reader036/viewer/2022081607/5ee37b29ad6a402d666d517e/html5/thumbnails/49.jpg)
2540
Security issues
We’re using .glb instead of .gltf+ it’s encrypted
https://www.khronos.org/gltf/
![Page 50: Implementation of VRM on Three · W3C Developer Meetup 2019 pixiv Inc. OBUCHI Yutaka 2018.6.5. 2540 2 OBUCHI Yutaka ... actual code of MToon of our implementation ... to perform adaptive](https://reader036.vdocuments.mx/reader036/viewer/2022081607/5ee37b29ad6a402d666d517e/html5/thumbnails/50.jpg)
2540
Security issues
What we need to doto load a texture from glTF (glb):
- Fetch the glTF binary from server- Extract PNG/JPEG chunk- Set the image to a texture
![Page 51: Implementation of VRM on Three · W3C Developer Meetup 2019 pixiv Inc. OBUCHI Yutaka 2018.6.5. 2540 2 OBUCHI Yutaka ... actual code of MToon of our implementation ... to perform adaptive](https://reader036.vdocuments.mx/reader036/viewer/2022081607/5ee37b29ad6a402d666d517e/html5/thumbnails/51.jpg)
2540
Security issuesWe don’t want to expose
texture request on DevTools!
Image requestsare exposed on it
even if it wasloaded as a blob
(via TextureLoader of Three.js)
![Page 52: Implementation of VRM on Three · W3C Developer Meetup 2019 pixiv Inc. OBUCHI Yutaka 2018.6.5. 2540 2 OBUCHI Yutaka ... actual code of MToon of our implementation ... to perform adaptive](https://reader036.vdocuments.mx/reader036/viewer/2022081607/5ee37b29ad6a402d666d517e/html5/thumbnails/52.jpg)
2540
Security issuesWe don’t want to expose
texture request on DevTools!
→ We decodedthese texturesby ourselves
![Page 53: Implementation of VRM on Three · W3C Developer Meetup 2019 pixiv Inc. OBUCHI Yutaka 2018.6.5. 2540 2 OBUCHI Yutaka ... actual code of MToon of our implementation ... to perform adaptive](https://reader036.vdocuments.mx/reader036/viewer/2022081607/5ee37b29ad6a402d666d517e/html5/thumbnails/53.jpg)
2540
Security issues
WebCodecs API has been proposedseveral months ago
https://github.com/pthatcherg/web-codecs
It would be nice if we can havethe image decoder as an API
{Audio, Video}{TrackReader, TrackWriter, Encoder, Decoder}
![Page 54: Implementation of VRM on Three · W3C Developer Meetup 2019 pixiv Inc. OBUCHI Yutaka 2018.6.5. 2540 2 OBUCHI Yutaka ... actual code of MToon of our implementation ... to perform adaptive](https://reader036.vdocuments.mx/reader036/viewer/2022081607/5ee37b29ad6a402d666d517e/html5/thumbnails/54.jpg)
2540
Wrap Up
- We are doing the Web service VRoid Huband promoting use of 3D avatars on Web
- Implementation of materials are hardand it needs more portability
- There are still many issues to do3D platform as a Web application
![Page 55: Implementation of VRM on Three · W3C Developer Meetup 2019 pixiv Inc. OBUCHI Yutaka 2018.6.5. 2540 2 OBUCHI Yutaka ... actual code of MToon of our implementation ... to perform adaptive](https://reader036.vdocuments.mx/reader036/viewer/2022081607/5ee37b29ad6a402d666d517e/html5/thumbnails/55.jpg)
2540