Fabien Benetou's PIM | Events / JavascriptLabBrusselsMarch2016

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

#HASHTAGUNSET on Twitter, identi.ca, Live Cast, TwitterStreamGraphs, Collecta, flickr

Own objectives

learn about meaningful animation
shared VR knowledge
improve JS skills
challenge own VR ability

Attended activities

Web animations in 2016 by Sakri Rosenstrom
WebVR & 3D by Fabien Benetou

WebVR & 3D by myself

Result : http://vrlab-brussels.info/wiki/Presentations/First

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
    - vAtelier demos (~20) focusing on proof of concepts
    - http://vrlab-brussels.info/wiki/Main/WhatIsVRLabBrussels#Numbers
    - 1st European VRHackathon webVR category winning team
- 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
    - split screen (all)
    - head rotation (all)
    - head tracking (Oculus and Vive)
    - body tracking (Vive)
    - interfaces (all... via Gamepad API or websockets)
    - https://developer.mozilla.org/en-US/docs/Web/API/WebVR_API/WebVR_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)
    - http://caniuse.com/#feat=webgl answer is yes
  - webVR 1.0 with hardware support
    - the specs https://mozvr.github.io/webvr-spec/
  - 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 https://en.wikipedia.org/wiki/List_of_WebGL_frameworks
  - 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
      - price of making own dropped
        400e 360 camera https://theta360.com/en/about/theta/s.html to own results in literally minutes http://vatelier.net/MyDemo/Annotated360Photo/
      - 3D scan in Brussels and elsewhere ~50e http://treedys.com/services/
    - 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
    - gamepad API and interactions
      - from nothing, only head tracking, to my watch to multiple controllers in space like the Vive in the browser in JS (cf https://www.youtube.com/watch?v=5ID7KnJYYzU )
- beyond A-frame (3min)
  - "fullstacked" A-frame
    - Meteor, React, PmWiki, etc cf integration section of https://github.com/aframevr/awesome-aframe
  - physics
  - server-side
    - WebSockets
    - web page rendering with PhantomJS
- 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
  - finding assets being texture, 3D models, sounds, etc
  - more UCD/UX/UI tips http://vatelier.net/Main/LessonsLearned
  - requestAnimationFrame
  - shaders
  - what goes to the GPU(s) and what does not
  - future of assets https://www.reddit.com/r/webgl/comments/4ayq5p/slides_for_the_gltf_ecosystem_update_runtime/
  - future of webVR
  - future od webGL
  - future of the web? https://hacks.mozilla.org/2016/03/a-webassembly-milestone/
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
- VirtualReality
- JavaScript
to do
- presentation https://jsbin.com/baxenaq/edit?html (re-evaluate then if codepen or webpackbin, no output or live reloading so far, is more appropriate https://github.com/christianalfoni/webpack-bin/issues/36#issuecomment-199809603 )
  - consider it in 3D ideally VR mode, ideally relying on
    - TheScienceOfHappinessForLessWrongMeetup?action=slideshow
    - http://vatelier.net/Demos/PDFGenerator
  - ideally transitions from... (basically all steps but the last one could be a VR demo with initial zoom close enough to mimic 2D content)
    - text to 2D e.g. text to rich content, i.e. text, image and video
    - 2D to 3D e.g. slide to slides as slides over 3D path
    - 3D to VR e.g. slides over 3D path to gaze activated slides over 3D path
    - VR to live coded VR gaze activated slides over 3D path that is fixed in real time
    - loop back to plain text with contact details to highlight the fact that not all content is good for VR
    - maybe with https://github.com/ngokevin/aframe-physics-components
  - preparation
    - consider other JSBin for each slide
    - consider listing the slides as external pages then merging and displaying them
      - much harder for live coding (except if using webpack-bin?)
    - rely on http://vatelier.net/Demos/InWikiAframeEmbedding with a template that use Aframe element like http://vrlab-brussels.info/wiki/Hardware/Hardware where items in the list become HTML elements
- live coding
remarks
additional resources to include
- for local personalisation https://www.flickr.com/search/?group_id=44671723@N00&view_all=1&text=brussels
- for ECS visual schema http://ngokevin.com/blog/aframe-vs-3dml/
  - could also be done in 3D
- VR lessons learned on UX with sphere too cf http://vatelier.net/Demos/GoodPracticesUI

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

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

Javascript Lab Brussels March 2016 {Events}

Own objectives

Attended activities

WebVR & 3D by myself

Web animations in 2016 by Sakri Rosenstrom

Overall remarks and conclusions

Other reviews or coverage

To do