New OMR WebGL Render Engine

[Orion Pobursky]

As some may know, we're in the process of switching the WebGL engine from brigl to Lasse's buildinginstructions.js (or, as I have dubbed it, LDBI).

Since that last thread became a bit of a monster, here's a summary:

Here's a link to the test page:
https://www.ldraw.org/hidden-content/omr-render.html

If you want to see it in action on the OMR simply find an OMR file page and add "_ldbi" after files in the URL
Example:
http://omr.ldraw.org/files/1182
would change to:
http://omr.ldraw.org/files_ldbi/1182

Here's Lasse's stated priorities:

A progress bar would be a great idea, but my attempts to create one have failed as it has decreased the loading speed significantly. I will have to check StackOverflow for some pointers.

There may be an issue due to the depth buffer issue mentioned earlier. I have also observed it with other large models which are not on wheels.

How is the general feeling of prioritization? Right now my list is:

1) Fix rendering issues (this includes what you mention here, but also the UV calculation as you can see there are still many warnings generated in the log)
2) Stud logos (while studs can easily be enabled by setting a parameter, my experience is that the file size doubles and rendering time doubles as well. I am working on a light-weight alternative)
3) Control buttons to set up camera, lights, etc.
4) Progress bar
5) Better support of transparency.
6) Support of illumination parts (such as glow-in-the-dark ghosts, etc.)
7) Distance-based blur for a more realistic rendering
8) Textures
9) Geometry culling (such as removing studs that cannot be seen)


And of course, everyone is welcome to take up a task and create pull requests - it is all open source / license free

[Willy Tschager]

The result looks spectacular but I also vote for a progress bar ... it takes quite some time to load even a small model and in the meantime all I get is a black screen. I'm happy with the simplest hourglass if a progress bar is not doable. Everything telling me something's going on in the background is fine.

w.

[Orion Pobursky]

The result looks spectacular but I also vote for a progress bar ... it takes quite some time to load even a small model and in the meantime all I get is a black screen. I'm happy with the simplest hourglass if a progress bar is not doable. Everything telling me something's going on in the background is fine.

w.

Yes, I'm sure I can put a spinny loading widget in there until a progress bar is implemented.

[Orion Pobursky]

The result looks spectacular but I also vote for a progress bar ... it takes quite some time to load even a small model and in the meantime all I get is a black screen. I'm happy with the simplest hourglass if a progress bar is not doable. Everything telling me something's going on in the background is fine.

w.

I added a logarea that tells you what part the renderer is loading.

[Merlijn Wissink]

It looks nice, but I personally prefer the lined style (as it currently is) more. It makes the parts much clearer instead of it looking like a giant blob of plastic.
But, that's just personal preference.

[Orion Pobursky]

It looks nice, but I personally prefer the lined style (as it currently is) more. It makes the parts much clearer instead of it looking like a giant blob of plastic.
But, that's just personal preference.

It’s getting there but not quite yet. There is a lined style that you like and I think we should offer both options. Also Lasse is actively working on this software as opposed to Brigl which isn’t actively developed.

[Lasse Deleuran]

It looks nice, but I personally prefer the lined style (as it currently is) more. It makes the parts much clearer instead of it looking like a giant blob of plastic.
But, that's just personal preference.

Do you have a screenshot of where it looks bad? I am aware of issues with black and transparent parts, but if you see other things that do not look right, then please highlight it and I can look into it. And don’t hold back. I don’t always see the mistakes that others discover.

[Lasse Deleuran]

I have made a change to the materials used for the various colors. Standard (ABS) colors are now using MeshPhong material from three.js and I am adding some reflection to black parts. Rendering of a normal LEGO model with some black now looks like this:



The loading screen has now also been minimized by introducing animated construction similar to how you see it in LDD and Studio. Check it out here: https://brickhub.org/i/492 by clicking "3D". Hopefully this gets to the OMR render soon as well. 

I am still working on all the other topics. This was just a post to show you that I am not lying dormant on this.

[Philippe Hurbain]

Check it out here: https://brickhub.org/i/492 by clicking "3D".

...all I get is an infinite "loading..." (Chrome).

This was just a post to show you that I am not lying dormant on this.

I'm sure you don't

[Lasse Deleuran]

...all I get is an infinite "loading..." (Chrome).
I'm sure you don't

That's no good! I think you might have been unlucky and hit the server right as I was having an epic battle with FileZilla. However. Just to be sure, I have bumped the .js file revisions so that this should happen now.

[Philippe Hurbain]

That's no good! I think you might have been unlucky and hit the server right as I was having an epic battle with FileZilla. However. Just to be sure, I have bumped the .js file revisions so that this should happen now.

Yes, it works great now

[Lasse Deleuran]

This took a couple of weeks more than expected, but I have finally finished first version of stud rendering without geometry. The studs shown here are made using auto-generated textures. The number of vertices required for generating studs with logos has been roughly halved, so the rendering performance (FPS and geometry constructions) is not degraded - it just takes a little longer to generate the textures. 



To enable this for OMR, simply set:

ldrOptions.studs = 2;

Now on to the new shader for transparent materials. I have studied volumetric rendering and ray casting for this, but I am no where near a solution. I will keep you updated.

Also. The LEGO logos can be made prettier. Right now the transitions between lines are a bit rough. I hope the current results are alright for now

[Orion Pobursky]

I'm not getting the stud logos to work. I'm sure there something wrong but not sure what:
https://www.ldraw.org/hidden-content/omr-render.html

[Orion Pobursky]

I'm not getting the stud logos to work. I'm sure there something wrong but not sure what:
https://www.ldraw.org/hidden-content/omr-render.html

Also, can we get a better algorithm for setting the initial zoom level? The current method is, in my opinion, too far out and the model jumps when I first use the mouse to move it.

[Lasse Deleuran]

Also, can we get a better algorithm for setting the initial zoom level? The current method is, in my opinion, too far out and the model jumps when I first use the mouse to move it.

I can see you have made the stud logos work.

I am currently looking into the zoom issue. The "OrbitControls" which handles mouse input makes a jump when it is first used, which is what you experience. I am looking into why it behaves like this, but have not yet found the cause, nor a solution. I will post a fix once I have it.

The initial zoom will also be fixed - that part is not as difficult.

[Orion Pobursky]

I can see you have made the stud logos work.

That’s odd. Works on my phone but not my work machine. I guess I’ll have to clear the cache is try again.

[Orion Pobursky]

That’s odd. Works on my phone but not my work machine. I guess I’ll have to clear the cache is try again.

So logo were working on my work computer, they were just too light to see until I zoomed way in.

[Lasse Deleuran]

So logo were working on my work computer, they were just too light to see until I zoomed way in.

Yeah, this is one of the issues of using textures this way. You need light to reflect on the surface to make the "fake bumps" appear, but it also can't be too much light as that overshines the bumps.

The other issue is that the studs are flat when you see them directly from the side.


... and I still have not fixed the OrbitControls issue.

[Lasse Deleuran]

I give up trying to make OrbitControls bend the knee. Instead I am moving the whole world to ensure that a camera looking at (0,0,0) looks on the middle of the model. Also. Default zoom is closer now.

Latest push to master branch on github has these changes all in js/Scene.js, so only this file has to be updated.

[Magnus Forsberg]

Why can't I see anything of the internal structure of the trans-blue cockpit, when I can see the internals if the trans-red part?

[Lasse Deleuran]

Why can't I see anything of the internal structure of the trans-blue cockpit, when I can see the internals if the trans-red part?

Do you mean some parts appear as they have internal structure, while others do not? That is currently up to chance given there is no sorting happening on transparent parts. I am currently looking into realistic rendering of transparent parts, so hopefully I will find a solution.

[Travis Cobbs]

I give up trying to make OrbitControls bend the knee. Instead I am moving the whole world to ensure that a camera looking at (0,0,0) looks on the middle of the model. Also. Default zoom is closer now.

Latest push to master branch on github has these changes all in js/Scene.js, so only this file has to be updated.

This breaks panning (Command drag on a Mac, probably Control Drag on Windows). As far as I can tell, panning is now in global coordinates, instead of view coordinates.

[Travis Cobbs]

Do you mean some parts appear as they have internal structure, while others do not? That is currently up to chance given there is no sorting happening on transparent parts. I am currently looking into realistic rendering of transparent parts, so hopefully I will find a solution.

It also looks like you are not drawing the back faces of transparent geometry. I think this affects the cockpit canopy more than most other parts, since it is mostly flat. Drawing the back faces without sorting might make things look worse, but it might also make things look better; it's hard to say for sure.

[Lasse Deleuran]

This breaks panning (Command drag on a Mac, probably Control Drag on Windows). As far as I can tell, panning is now in global coordinates, instead of view coordinates.

I have compared the latest and previous revision. Both have panning work on the floor plane.

This is opposed to how panning works in Orthographic mode (See sample_view.htm). If you know how to switch between the panning modes without changing the camera type, then I can implement the switch in the UI.

[Travis Cobbs]

I have compared the latest and previous revision. Both have panning work on the floor plane.

This is opposed to how panning works in Orthographic mode (See sample_view.htm). If you know how to switch between the panning modes without changing the camera type, then I can implement the switch in the UI.

Sorry. I could have sworn that panning worked right in the past. I don't know anything about the JS tools you are using, so I don't know how to make it work right. Ideally you want to have it move the camera (in the opposite direction) instead of moving the model.

[Lasse Deleuran]

Sorry. I could have sworn that panning worked right in the past. I don't know anything about the JS tools you are using, so I don't know how to make it work right. Ideally you want to have it move the camera (in the opposite direction) instead of moving the model.

I agree with you wholeheartedly... and I found the solution:

controls.screenSpacePanning = true

This has been added to the latest push to master and now the panning moves the camera up/down instead of forward/backward. Zoom is still enabled, so you get full control of where the camera is.

This is standard in the other sample files I have made - it just seems to not be standard for stuff that uses perspective camera. Strange...

[Michael Horvath]

The test page is a 404.

Can this renderer only display in orthographic perspective? How about shading/lighting? Thanks.

[Orion Pobursky]

The test page is a 404.

Can this renderer only display in orthographic perspective? How about shading/lighting? Thanks.

This is a super old thread. Lasse's renderer is now renderer for both the PT and the LDraw Model viewer on the main site and will be the renderer for the OMR as soon as I get off my butt and finish the OMR rewrite.

[Michael Horvath]

This is a super old thread. Lasse's renderer is now renderer for both the PT and the LDraw Model viewer on the main site and will be the renderer for the OMR as soon as I get off my butt and finish the OMR rewrite.

Yeah, I know. Can I use it on my own site? Does it support perspective projection?

[Orion Pobursky]

Yeah, I know. Can I use it on my own site? Does it support perspective projection?

The code is public domain and can be found here:
https://github.com/LasseD/buildinginstructions.js

Since it uses Three.js as the rendering engine, it can do perspective and ortho depending on the camera you set up.

[Michael Horvath]

The code is public domain and can be found here:
https://github.com/LasseD/buildinginstructions.js

Since it uses Three.js as the rendering engine, it can do perspective and ortho depending on the camera you set up.

Do any sites other than LDraw.org and Brickhub use this library? I don't have time to create buildings instructions right now, or I would use Brickhub.

[Lasse Deleuran]

Do any sites other than LDraw.org and Brickhub use this library? I don't have time to create buildings instructions right now, or I would use Brickhub.

Rebrickable, as well as some sites that sell building instructions - mostly for Mindstorms kits.

Right now I'm working on improving performance even further. All the low hanging fruit has been picked, hence the abnormal long time between updates.

Ideally even the largest models should render quickly on a low end phone. That's when I know it will run nicely on all other devices.