Silcon Valley WebVR Meetup

  • 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)
  • bghgary.github.io/gltf/add-specular-glossiness-workflow

  • sbtron.github.io/WebGL-PBR/index.html

  • pbr-frag.glsl

  • links for the everything
COMMENTS
Related Post