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).
10. Software Development Kit
100% x-platform native code
Free & open source
Open source 3D file format
Web, desktop, mobile & server
Business-ready
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