WebGL/WebVR Meetup at SVVR HQ

7:00pm: Browser team update
7:30pm: You got web in my GL
8:00pm: Auteurist
8:30pm: Filament
9:00pm: HelloChar
9:12pm: community announcement

Browser Team

  • new compressed texture
  • multidraw
  • multithread webassembly -> epic games, unreal
    • working with google chrome team
    • unreal game 15min to rebuild unreal engine
  • webgl2, webgpu
  • multiview extension
    • it’s happening
  • webgpu
    • volcan, d312, metal
    • webgpu is spec work
    • WWWC from apple ->
    • webgpu => read wikipedia page.
    • not khronos group. not apples proposal
    • spec work sometime next year. enable with flag
    • intel -> webgl compute
    • chrome canary -> compute context, glsl compute context
    • compute shader -> can do now. webgl developer list
    • will be forward compatible with webgpu
  • shared array buffer -> workers
    • chunk of array can be accessed to work with workers in thread
    • spectre bug
    • very precise timer
    • spectre bug -> removed shared array buffer
    • chrome: sideisolation
    • everyone has announced to

You got web in my GL

  • Brandel Zachernuk (New Zealand)
    • using canvas 3D, SVG and CSS for WebGL, fun and profit
  • Canvas
    • Less HW accelerated
    • iterative / no GLSL etc
    • but simple to integrate!
  • Options -> use three.js and barbel
    • ShaerMaterials
      • threejs.org/docs/api/en/materials/shadermaterials
      • can’t integrate with other materials easily
      • can only do GLSL-ey things
    • ShaderTexture
      • github.com/sprithe/three.shadertexture
      • requires an additional render pass
      • can still do only GLSL-ey things
  • Uses
    • simple gradients, masks
      • The Mighty Stranbeest, A pen by branden Zachernuk
    • Progressively-rendered images
      • Parametric Roundbox in three.js
      • color and bump map is
  • SVG
    • simpler than including full surface geo
    • contains useful functions for sampling
      • chills
      • revolved and lofted table
      • awesome digger
  • CSS/DOM
    • can’t be rendered directly into webgl yet
    • can get into canvas via SVG, but can’t go into GL because of CORS
    • but it can be probed
  • What?
    • probed!
      • use getComputed
  • WebGLizer!
    • basks computed CSS
    • create a per-glyph, computes metrics
      • samples
    • download as glb file
    • zachernuk.neocities.org/VRWiki
    • load -> glb file into ???
  • Why?
    • the future of the web is 3D
    • still going to be rooted in document
    • need a viable design/prototyping plan
    • blender/maya export
      • building an editor sucks
  • next steps
    • browser extensions?
    • processing wikipedia timeline
    • google earth from knowledge
    • fast company article
      • exclusive: Lisa Straus
  • contacts
  • DOM to canvas
    • rasterizing document

Auteurist

  • Gregor Lakner (Axum Graphics)
    • a groundbreaking cloud native 3D content creation tool that is democratizing computer animation. We will be also discussing how Auteurist combines WebGL, WebXR, and ray traced production rendering to deliver unique features on mobile and desktop browsers
  • Axum Graphics
    • build tools for webgl
    • previz more democratically
    • solving the problem with previz
  • Axum view and Axum view
  • http://axumgfx.com/

Flament

  • Romain Guy and Philip Rideout (Filament) - the Filament team have built a new physically-based rendering engine, and brought it to the web via WebAssembly and WebGL 2.0.
  • https://github.com/google/filament
  • https://github.com/google/filament/blob/master/web/docs/tutorial_redball.md
  • What is Filament?
    • c++ lib for physically based renderer
    • small:
    • opengl es 3.0 (webgl 2.0) and vulkan backend
  • Why I love Filament
    • API sweet spot
      • lights and materials
      • camera and view
    • mobile friendly
    • flat scene
    • entity component system
  • Filament materials
    materials {
    mame: Lit,
    shadingModel : lit,
    parameters: [
    ]
    }
    
  • first demo: susan monkey with image based lighting
    • ktx file -> sky box
  • What is webassembly
    • defines a binary intermediate language
      • module/instance/memory/table
  • What are the tools
    • emscripten is a complete c++ => JS?WASM toolcahain(python)
      • encludes emcc, drop-in replacement for gcc/clang
    • fastcomp converts LLVM-IR to JS
    • binaryen library /toolset (C++)
      • includes asm2wasm
      • also wasm-opt, wasm-dis, wasm-shell
    • LLVM 6 includes wasm-ld
    • currently (Nov 2018 emcc uses fastcomp
  • Why I love WebAssembly
    • no garbage collection
    • simple linear memory
    • no dynamic types or eval
  • Further reading

Hellochar.com


8th wall web

COMMENTS
Related Post