Minko is a platform to display, share and interact with 3D content from anywhere, whether you're on a web browser, a workstation, or a device that fits in your pocket. In order to reach those targets with the team we have, we had to go with a cross-platform, hybrid solution that would enable fast UI development with native 3D performances. So we built one, on top of many open source projects, using C++. This talk will discuss our approach for building cross-platform HTML5 interfaces, with a C++/JS bridge to bind DOM APIs, and the tricks we use to make them responsive (spoiler: React is one of them).

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

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

11. 3D 2D

12. Bridge
Why React?

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

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

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

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

17. 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 »

18. 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!)

19. 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

20. So that’s why.

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