3D Hybrid Data Model + UI

Been working on a little ThreeJS + Dojo project. Check it out.

I would use the desktop / laptop for now as iOS is not liking my most recent text shader additions.

https://electronnight.netlify.app/

A little more about this project now that it’s up.

  1. It’s a work in progress.
  2. It’s a monumental undertaking and now that it generates content it’s an even bigger job trying to fill up the various use cases with UI’s and demo content.

So please, bare with me if you plan on following with this project. @mrdoob … Thank you. ThreeJS is awesome. It’s ready for prime-time. To the moderators, contributors, Gurus, and people who take their time to spread their knowledge… THANK YOU. @prisoner849 @Mugen87 @donmccurdy Pailhead … and more.

This project is a Hybrid Application. It’s a searchable indexed, instanced, geometry. It’s running about 13 drawCalls with no Post Processing, with ShadowMap, StandardMaterials, Directional and Ambient lighting. Material Emissives and lighting are on. The Hybrid part of the app is when you click on a panel icon. The panel will zoom and spawn a traditional application interface that is designed to match the 3D UI and actually takes its colors from the 3D UI. This is done by injecting colors and properties into the HTML at the time of theme change. I used Dojo for the Hybrid containers as it was fast at creating and destroying containers and it used Tween already for its fx lib so I could synchronize the animation timings with my scenes other Tweens. Dojo also comes with a light XHR container that parses HTML called “ContentPane”. So, I grabbed that too. In the end I just used very small pieces from Dojo.

This model seems to run very well on iOS and other SmartPhone GPUs. iOS does not like one of my materials and appears to have changed their floats again? So, for now, 3D text isnt showing up on iOS devices. I am currently making the mobile experience for about 10 devices so please excuse the mobile experience for the next few days.

Known Issues:
Country Search has an issue when coming from the Grid Data transition, I know why but can’t fix it until I finish the Spherical Grid.

The Raycasting does allow event bleedthrough sometimes, but a new an improved Raycasting with a depth detection should fix the issue as this is a spherical model and all object depths are easily calculated. Currently underway.

I have a lot of bells on in this demo but I have versions of the model running with Basic Materials with 5000+ panels of data at 60FPS with no problem. That’s a lot of potential content managed in a 3D app that runs on a phone GPU. Nice work ThreeJS!!! I can’t wait to see what starts popping up with Three.

Oh and I forgot to shout out @looeee. Def learned a few things from loeeee too.

2 Likes

Nice and shiny :slight_smile:

1 Like

It is. It does stuff too. Type “mode:radial” in the search field. Its an indexed data model. Each index spawns its own UI. Its device agnostic. Touch keyboard or mouse.

To fade to not so shiny, and see light lerping and dynamic css injection in action, type “mode:dark”.

To search a panel for any of its rendered data use pretexts. A panel has a label, a text and an index. All of the fields are searchable.

Examples:
“text:brave”
“label:united states”
“index:13”
“country:brazil”
“coords: lat:lon”

up/down arrows to change modes after you open the data set. So “mode:radial” then up or down.

ctrl + left / right arrows to increment

click a panel icon to generate content and tasking.
The grid transform is coming. Currently its not actionable for content.