1.
Warren Seine
aerys
warren@aerys.in
@warrenseine
2015/04/09
École 42
React.js Paris
React in native apps

2.
Your 3D models.
Everywhere.

3.
 Network drive, web or native apps
 Versioning
 Access control & encryption
Upload to the cloud

4.
Optimize
 100% automated
 50+ supported formats
 Optimize for mobile, web…

5.
Stream
 Up to 200x faster delivery
 Progressive level of detail
 Enterprise-ready

6.
Visualize & Collaborate
 Mobile, web & desktop
 Instant share
 Web embeds

7.
3D Annotations
 Formatted text & links
 Audio, photos & videos
 PDF
 Web / iframes

8.
3D Annotations
 IntegratedWord-like editor
 100% real-time & collaborative

9.
Software Development Kit
 100% x-platform native code
 Free & open source
 Open source 3D file format
 Web, desktop, mobile & server
 Business-ready

10.
3D 2D

11.
Bridge
Why React?

12.
 Platform-specific DOM wrap
 Two-way sendMessage()
 Safe eval()

13.
Let’s see some code
 How do we place annotations over the 3D model?

14.
0. Stack
 Meteor (to sync data)
 Reflux (for data flow/store)
 React (for UI rendering)
 Minko (for 3D rendering and bridge)

15.
1. Retrieving data (JS)
 AnnotationStore subscribes to Meteor
 Meteor sends data in JSON (id, node, position)
 AnnotationStore receives annotations
 AnnotationStore forwards « addAnnotations » to Minko

16.
2. Updating data (C++)
 AnnotationsScript listens to the overlay
 AnnotationsScript receives a message « addAnnotations »
 AnnotationsScript updates the local list
 Annotations are projected on screen space if changed
 Discarding if out of viewport
 Minko sends a message to the overlay
« annotationUpdatePositions »

17.
3. Positionning annotations (JS)
 React components listens to Reflux stores
 AnnotationStore listens to « annotationUpdatePositions »
 AnnotationStore updates positions
 Triggering only if changed
 Annotation listens to AnnotationStore
 Updating state (React magic!)

18.
4. Ordering annotations (JS)
 Re-ordering annotations in Z
 Triggering if changed (rare)
 Annotations sorts DOM tree
 No z-index
 Sorting does not imply re-rendering the annotation
 Components have unique React keys

19.
So that’s why.

20.
Questions ?!
 warren@aerys.in
 @warrenseine