Proof of Concept: LDD (lxfml) WebGL Viewer

[M2m]

As title, I used my free-time and threw a LDD (lxfml) webvier (WebGL, Three.js based) together.

This is a proof-of-concept and this means I wouldn't even consider this beta-software as it has a log of bugs and room for improvement (meaning it takes ages to load a file).

What works:

• Loading of .lxfml files from LDD (stored somewhere on the internet, no local file loading yet)
• Textures and decals
• The 1st flex part (and only the 1st one)
• Supports some new parts

What is bad:

• Doesn't load .lxf files yet, these are zipped and I can't process zip files properly
• It is painfully slow, even for small builds (don't even think about loading the UCS Millennium Falcon, unless you don't care to wait for hours around 15min and see your browser crash)
• More then one flex part
• No transparent material

Code here: https://github.com/sttng/LDD-Webviewer

Tryout:

• https://sttng.github.io/LDD-Webviewer/ldd.html
• https://sttng.github.io/LDD-Webviewer/ldd.html?scene=https://raw.githubusercontent.com/sttng/LDD-Webviewer/master/Redbeard.lxfml
• https://sttng.github.io/LDD-Webviewer/ldd.html?scene=https://raw.githubusercontent.com/sttng/LDD-Webviewer/master/new_parts.lxfml
• not for the faint hearted - UCS Falcon: https://sttng.github.io/LDD-Webviewer/ldd.html?scene=https://raw.githubusercontent.com/sttng/LDD-Webviewer/master/75192.lxfml

 

 

Edited July 21, 2020 by M2m

[Calabar]

Very interesting!

Maybe a future voice in the ToDo list could be some sort of Live3D thumbnail generator that a third party could add to his/her website to provide a preview of an lxf file (in brief, sort of wrapper that allows to integrate the model inside a webpage). Even better if it activates only on click or mouse over switching from a static image to a 3D model, or loading times could stuck a page with more previews).

[zweifuss]

Love this.... imagine an 'Official LEGO Sets made in LDD' topic with little embeded 3D views of every set. So cool. Thanks for this, will be eagerly watching the progress.

[SylvainLS]

Like there’s for LDraw?

(One on LDraw’s Parts Tracker, one on BL, er make that two on BL as there’s one for the parts and one for the gallery, and I’m sure there are others out there.)

[Lasse D]

1 hour ago, SylvainLS said:

Like there’s for LDraw?

(One on LDraw’s Parts Tracker, one on BL, er make that two on BL as there’s one for the parts and one for the gallery, and I’m sure there are others out there.)

It is a huge project. Getting decent performance was a huge challenge in itself, but now the UCS Millenium Falcon renders fairly quickly on even 3 year old phones. I am posting performance improvements in https://forums.ldraw.org/thread-23012.html  and new features on https://brickhub.org/n/  My plan is to post the library here on Eurobricks once I have proper support for LDCad generated parts, a better step editor and buffer exchange.

This is the renderer that you see on the LDraw parts tracker, LDraw OMR, Rebrickable building instructions renderer and a user has uploaded many Eurobricks instructions to Brickhub with proper credits. Unfortunately many of the Eurobricks LDraw models were lost.

If @M2m gets the LDD renderer to show building instructions steps, then I believe Rebrickable will be interested.

[M2m]

Thanks everyone. My current priority list is as follows:

1. Fix flex parts 
2. support lxf files. 

After everything is processed correctly I certainly want to work on performance. Many thanks to @Lasse D for your link to ldraw and the ‘story’ of your webgl renderer. It’s a good read with very nice ideas. I will certainly have a look at your code 
 

I started with this project 8 days ago and I haven’t done much in JavaScript before and of course never used Three.js either. It has been quite an adventure. So far I process everything sequentially (which is deprecated in JS - you might see the warnings in the browser console) which of course degrades performance quite a lot. But I’m still quite struggling with the ‘new’ concept of everything running asynchronous. 

[M2m]

On 7/22/2020 at 5:08 AM, Lasse D said:

If @M2m gets the LDD renderer to show building instructions steps, then I believe Rebrickable will be interested.

OK I'm now parsing the building instructions (BI) element, too and I think I have it working correctly meaning I get the relevant Camera and Bricks for each step. That means:

Step 1, Brick 1, Cam1

Step2, Brick1, Brick2, Cam1

Step2, Brick1, Brick2, Brick3,....

and so on.

Now I 'just' have to create a function which creates a 'new' lfxml file with the relevant Step data.... let's see

[M2m]

On 7/22/2020 at 5:08 AM, Lasse D said:

If @M2m gets the LDD renderer to show building instructions steps, then I believe Rebrickable will be interested.

Ok I'm indeed parsing building instraction  steps now - if the lxfml file has those of course.

https://sttng.github.io/LDD-Webviewer/ldd.html?scene=https://raw.githubusercontent.com/sttng/LDD-Webviewer/master/Redbeard.lxfml&step=0

EDIT: OK I found out my recursion for generating the steps is crap , so basically quite some steps are omitted and/or place wrongly. Apologies.

Edited July 27, 2020 by M2m

[M2m]

Fixed flexparts. Seems I having a caching issue - or rather a copy by reference issue, so once i turned off caching of parts all flex parts work.

[aronwk-aaron]

Hey, thanks for this POC!
I've used it to implement property viewing via the web for user made models in LEGO Universe.
LU models don't have camera objects, and they have huge transformations, so I had to figure out a system of making the camera position sane based off of the model location.
and loading multiple lxfml files into the same scene, which wasn't that bad.

Thanks for making me finally start learning webgl and threejs