FME is a great tool when we need to generate 3D models using all kinds of source data. Visualization part, however, is less exciting. It provides invaluable information about the geometries and attributes, but it is lacking many interesting effects other visualization software have. ThreeJS is a powerful JavaScript library for 3D visualization, which supports 3D geometries, scenes, materials, lights, different navigation modes, and a lot more. It works in any WebGL browser on all platforms. By using FME and ThreeJS together, we can easily create very interesting, visually appealing, easily shareable output. Using a traditional FME approach, we don't need to write JavaScript code for each scene. We write it once, and then use short snippets of it within FME transformers to create an HTML file with 3D model and stream it directly to a browser. The presentations tells how to make a simple Flight Simulator by using free satellite and DEM data, assembling JavaScript code with FME, and opening the output directly from Workbench.

1. FME+ThreeJS=Freedom to Fly
Dmitri Bagh

2. Dmitri Bagh
Scenario Creation and
Testing Analyst
at Safe Software

3. “There is an art, it says, or rather, a knack to
flying. The knack lies in learning how to throw
yourself at the ground and miss.”
Douglas Adams
“Hitchhiker’s Guide to the Galaxy”

4. Jump up and fly?
How to get better
experience with
FME-created 3D
models
ThreeJS
Wouldn’t it be nice just to…

5. How about all the data?
Earth on AWS
• Satellite imagery
• DEM
• Weather
• And more
Wait a minute!

6. Sentinel + Mapzen DEM
First, generate a 3D model…

7. Sentinel + Mapzen DEM
First, generate a 3D model…

8. Lights! Camera! Geometry!
Then, set up the stage…

9. SOLUTION
The bad news:
JavaScript code is needed
The good news:
Only once!
FME takes care afterwards
(if you are developer,
swap “bad” and “good”)

10. SOLUTION
JSONTemplater to make
ThreeJS geometry+texture:

11. SOLUTION
AttributeCreator to
make snippets for each
component:

12. SOLUTION
Aggregator to make
a single HTML

13. SOLUTION
SystemCaller to open
HTML

14. Action!
And finally…

15. Place your screenshot here
The output goes to your browser
All your
browsers
On all your
devices

16. Place your screenshot here
The World Premiere

17. More
Examples

18. More
Examples

19. More
Examples
Safe office photospheres
Safe office 3D
Point cloud visualization

20. More Examples. UC Game

21. Do you want to see
this as a standard FME
feature? Vote for it!
https://knowledge.safe.com/idea/18914/threejs.htm
l

22. THANK YOU!
safe.com | dmitri@safe.com