Interactive-3D-Graphics-For-FileMaker

This repository contains several small projects that demonstrate ways to use 3D graphics in FileMaker. These demos were created using Babylon JS, a JavaScript library for 3D graphics.

Note: these demos were prepared on macOS. There may be some edge cases in Windows that I haven't accounted for yet.

Instructions

Open the ExampleWidgets file in FileMaker Pro 19 or later. Each widget record contains a production-ready version of the widget. Press the "Refresh" button to load the widget into the web viewer, then run the script related to the demo (see the scripts menu).
To serve the demos yourself, navigate to one of the demo folders and run npm install to install the dependencies. Then, run npm run start to start the development server. You can then open the demo in a browser using the URL shown in the terminal.

Demos

These demos are provided as a means to spark some ideas and build excitement for using 3D in FileMaker.

FMPlayground is a basic scene with a box and a text label, intended as a starting point.
BoxChart is a multi-series bar chart based on the Categories export from FMComparison.
Timeline is an orthographic scene with a timeline of events.
Map3D converts an SVG map to BabylonJS meshes and colors each segment to create a 3D choropleth.
Layers3D will convert layout objects (using clipboard data) into 3D meshes arranged in layers based on their containment and z-order.

These demos are not intended to be production-ready. While you are welcome to use them as-is, you will likely need to modify them to suit your needs.

Resources & Notes

Babylon JS

Babylon JS is a powerful library with many features. It's the best place to start for FileMaker devs learning to add 3D to their toolbox. Here are some resources to help you get started:

Babylon JS documentation - Extensive documentation and tutorials
Babylon JS Playground - Get started with your own scenes
Babylon JS Forum Active community with many of the core team posting there daily. You can find me there as @vrhermit
Babylon JS Community Demos - Get inspired and see what others are doing with Babylon JS

Other Frameworks and Tools

Three JS - Another popular 3D library
- A-Frame - A-Frame is a web framework for building virtual reality experiences. It is built on Three JS.
- React Three Fiber - A React renderer for Three JS with a vibrant and creative community.
PlayCanvas - A 3D game engine with a visual editor
Blender - Free 3D modeling software

Shameless Plugs

Work with me Radical App Dev.
Canvatorium - An experimental design lab for spatial computing
Where to find me vrhermit.com/links