- Date: May 10 2017
- Venue: San Jose Convention Center
meet up starts
webgl 2.0 overview
- Kai, Zhenyao Mo
- powered by playcanvas
- webgl 2.0 is here
- Opengl es 3.0 features
- WebGL2.0 + WebVR
- PlayCanvas: After flood demo
- webgl 2.0 webniar -> google it and check iti out
- floating point textures
- srgb format
- tec2/eac compressed texture via extension
- 3d textures
- immutable textures => flatwave, simple demo
- instancing -> 10000 solider, 1 draw call
- demos
- three.js demos: instancing demo, single triangle, indexed instanccing
- multiple rendertarget -> deferred rendering
- allow rendeirng
- critical for deferred shading.astrofra via wikipedia
- webgl2 -> core fetures
- deferred shding
- transform feeding
- save output of vertex shader into vbo
- caching resuing gpu computation : crowd demo
- stateful particle systems
- non-web opengl examples
- oepngl 4.0 review
- integer vertex data
- interger texture support
- can send multiple
- multisamle renderbuffers
- antializsed offscreen rendering
- performant gpu-side copy/compute operations
- uniform buffers
- vertex array objects
- occlusion queries
- sampler objects -> texture atlas
- gles 3.00 #version 300 es
- sample s pack:
- terrain rendering with geometry clipmaps
- webgl 2.0 spec
- in the future
- compute shader extension
- new web graphisc api
- vulcan? metal?
- webassembly -> performant web content
- webgl 2.0 webinar (45 min in youtube)
Microsoft
- babylon.js, spector.js
- Saurabh Bhatia, program manager, 3D for everyone - microsoft
- babylon.js -> 3d engine on top of webgl 1 and 2
- ease of use, performance
- opensource, typescript
- spector.js -> debug your webgl (chrome extension)
- doc.babylonjs.com/playground
dassault demo: webgl
- dassault systems -> catia company, french company
- 15000 employee, 4000 developers
- http://home.by.me, 4 years ago
- 이거 nest3d랑 똑같은데?
- training,
- 3 million scenes, 1.2 million registered users,
- retailer -> buy additional project
- $15 dollars to read the pdf to generate the building
- no custom model,
profiling and optimizing webgl
- webgl vs native application
- profiling with chrome
- chrome://tracing *** very powerful
- categories
- blink
- blink.console
- v8
- ipc
- gpu
- devtools.timeline
- chrome frame rate
- case study 1, case study 2
- objects per arms: 501, num arms: 26
- 10fps => fps meter in the rendering panel
- use tracing
- Gareth Morgan, [email protected], @griffin1977
- GPUZEN book
glTF 2.0: PBR Material
-
3d format
-
sandbox.babylonjs.com
- dragdop gltf file
- gltf-viewer.
- sketchfab.com/ gltf samples
- view 3d preview -> opengl viewer, directx viewer
-
glTF Ecosystems
- gltf.autodesk.io
- PBR(Physically based rendering) material definitions
- Graphics API neutral
- GLSL materials moved to extension
- gltf -> json, node hierarchy, pbr material textures, cameraas
- .bin -> gemoetry, animation, skinning
- pngs -> textures
- pbr material -> in core: metallic-roughness material model, [basecolor, metallic, roughness]
- extension: specular-glossiness material model: [diffusse, specular, glossiness]
-
PBR texture maps
- metallic map
- roughness map
- base color map
- occlusion map
- emmission map
-
Intro to PBR
- github.com/moneimne/glTF-Tutorials/tree/master/PBR
-
BRDF Lighting equation f(lvh)=diff(l,n) + F(lh)G(lvh) brdf diffuse brdf specular
-
BRDF diffuse
- diff(l,n) = (1 - F(v*h))Cdiff /pi
const dielectricSpecular = rgb(0.04, 0.04, 0.04)
const black = rgb(0, 0, 0)
Cdiff = lerp(basecolor.rgb * (1 -dielectricSpecular.r), black, metallic)
-
BRDF specular
- Cook Torrance
const dielectricSpecular = rgb(0.04, 0.04, 0.04) F0 = lerp(dielectricSpecular, baseColor.rgb, metallic)
- Cook Torrance
-
bghgary.github.io/gltf/add-specular-glossiness-workflow
-
sbtron.github.io/WebGL-PBR/index.html
-
pbr-frag.glsl
-
links for the everything
