Opt in the Browser, an interactive optimization globe built with Three.js

Hi everyone,

I built Opt in the Browser, a browser-based workspace for mathematical optimization.

Its landing page uses Three.js to create an interactive globe that connects the visual experience with several optimization and graph algorithms.

The scene includes:

  • a custom Goldberg-style tiled Earth;
  • country regions displayed using a four-coloring process;
  • animated travelling-salesperson routes;
  • A* maritime paths with boats and lighthouses;
  • interactive nodes that explain optimization concepts;
  • adaptive rendering and automatic suspension when the scene is outside the viewport.

Three.js is integrated directly into a Vue application. The optimization solvers are separate from the scene and run locally as WebAssembly inside Web Workers.

You can drag the globe, inspect regions and click the floating concept nodes.

Live demo:

I would especially appreciate feedback about the geometry, visual presentation and performance on different devices.

opt-in-the-browser-threejs-showcase

2 Likes

It looks nice.

It is a matter of personal preference, but in light mode the earth could be with lighter colors too.

I ran few of the examples, it appears their output is only text/number-based. Do you plan to have optimizations that show the result as 3D models (preferably interactive)?

Thanks for your comment. You’re right about the lighting mode; I’ll consider a lighter blue. Regarding the 3D results, the project’s objective is to solve optimization problems from within the browser. Optimizer output is usually console lines. The results should be interpreted according to the user’s preferences. Therefore, creating a 3D representation is nearly impossible considering the infinite number of problems. Perhaps we could select a few and have the user adjust the parameters.

1 Like

Yes, the optimization algorithm is usually unaware of the data meaning. But the user could pick how to present the result - as unstructured text, CSV text, formatted as table, as graph, as 2D coordinates, as field and so on. But all this is off topic – optimization and visualization are separate processes. No need to have both in one app, but with this globe you already made the first step toward a nice visualization, so I thought … huh, nevermind.

As an example, here is a snapshot from Wikidata SPARQL service. See the top-left – users pick how to visualize the result.

I understand your point. It would be great if users could connect their results to all kinds of charts and visualizations. I’m noting that down as a great feature for the future.

1 Like