JavascriptLabBrusselsMarch2016 Wednesday, March 30, 2016 at 7:00 PM

#HASHTAGUNSET on Twitter,, Live Cast, TwitterStreamGraphs, Collecta, flickr

Own objectives

  1. learn about meaningful animation
  2. shared VR knowledge
  3. improve JS skills
  4. challenge own VR ability

Attended activities

WebVR & 3D by myself

Reminder : A-frame = entity-component-system-based three.js framework with a DOM interface

  • questions
    • who bought an Oculus CV1? Vive?
    • who tried a Vive? Oculus? Cardboard?
    • who developed anything in 3D? in VR? in webVR?
  • initial plan
    • who am I (cf my quick history with VirtualReality ), credentials as an expert (~5min)
      • personal history (could display just a time line and items)
        • studying cognitive science 2004, VR goes from closing your eyes to Vive and more, it's only 1 thing : Immersion!
        • nothing...
        • applied to Oculus in 2013
        • tried Rift in 2014
        • failed to hire somehow to make my own project in early 2015 own personal project of organizing notes in VR (infinite space and re-configurability, mind maps on steroid)
        • gave several free workshops in late 2015
        • won Hackathon in January 2016, cf DK2 here
        • gave several free workshops in 2016
      • what I made
    • the current state of VR (5min)
      • for quality HTC Vive > Oculus DK2 > Gear VR > Cardboard
        • but also the opposite for price, then popularity
          • to keep in mind as you design your own app for your target segment
      • key concepts
    • the current state of webVR (7min)
      • first what is webVR compared to VR
        • VR for the web, on the web
          • e.g. for the web changing light via local time, connected with others, connected to other worlds
      • webGL support (mention instead Sakri's slide)
      • webVR 1.0 with hardware support
      • what makes webVR special
        • 5min code to demo on device, 0 install, 0 licence fee
        • largest user base and multi-user
        • content widely available
    • A-frame vs the rest
      • the rest (5min)
        • Unity, Unreal, Wikipedia:Blend4Web etc
          • afraid of low poly? beware the uncanny valley
        • BabylonJS
          • no proper VR support as of early March 2016
        • X3DOM
          • haven't been part of a research lab working with VRML for the last 10 years? meh
        • SceneVR, Vizor, etc
          • online GUI to design scene with animations
        • ThreeJS
          • made for 3D on the web, not directly for VR but can be extended
        • comparison matrix
      • A-frame (that I avoided for months!) (7min)
        • what is the sweet spot compared to what was presented before (4min)
          • largest user segment
          • fastest growing community made components
          • lowest barrier to entry for newcomers, even non programmers
          • entirely open, made by Mozilla
        • camera with VR specifics
          • stereo effect
          • head tracking
          • gaze interactions
        • primitives
          • start with a cube but only to start, after moving or scaling a cube or a mountain uses the same principles and even functions
            • possibly show own 3D scan
        • handling assets
        • animation (with reminder of key concepts from Sakri's presentation)
        • but animation with a purpose (as developed earlier, cf also Mike Alger)
        • components
      • quick UX tips (8min)
        • goal is immersion, not technology showcase
          • gentle scene might have a nicer effect to newcomers than going all guns blazing and getting puked on
        • uncanney Valley as good excuse to stick to low poly
          • also to keep up with framerate (30fps cardboard, 90fps Oculus/Vive, 120fps Sony PSVR)
            • actual research by Carmack and others on "tricks" e.g. timewrap but vendor specific
          • own position : trust Moore's law
        • not just FPS but also accelerometer/gyroscope and overall tracking speed
          • has to be fast enough to be transparent
        • do not use small text
          • ideally avoid text
        • add nose
        • comfortable view bubble
        • comfortable hand interaction bubble
        • attention bubble
        • assume sitting person who will not even move his or her head
          • but feel free to give instructions in the experience
    • beyond A-frame (3min)
    • conclusion (2min)
      • in the browser, really
        • 0 installation, neither on desktop or mobile
          • right-click and see the source code
            • learn, modify, make!
              • why the web works and keeps on improving
      • works today, not perfect but WORKS, performances WILL increase tomorrow, no doubt
      • learned how to manipulate the DOM for 2D? Get benefits in 3D and VR
      • web as a rich dataset, both for assets and interactions, possible to leverage in webVR
      • burgeoning framework and community, take part now
    • appendix slides, kept for Q&A
  • review after
    • time
    • what are the key take away
      • what are they key concepts that a newcomer would get stuck on if it was missed
        • Goal : Immersion
        • Recycle your DOM mastery : 3D simply done via Custom elements
        • Recycle your JS mastery : own components, events, webSockets, new libraries, full stack,...
    • video recording to check coherence
  • relying on
  • to do
  • remarks
  • additional resources to include

Back to the Menu

Web animations in 2016 by Sakri Rosenstrom

  • historical review
  • 0..1

Back to the Menu

Overall remarks and conclusions

  • meet him
  • could be improved by doing that
  • see also that other event

Back to the Menu

Other reviews or coverage

  • here

To do

  1. improve Template
  2. add map data (:ola-point lat= lon= text='':)