Three.js / WebGL for realistic construction simulation

My first post here, apologize for being naive.
Planning a project where we will need to achieve something similar this
https://youtu.be/XykbLnLQZUs
Or this
https://youtu.be/g_3qLUHlTTs
With the goal to achieve the construction simulation in the most parametric way, so just import the assets, configure the simulation parameters in external file such as number of characters, time of day, weather, construction stage and the engine need to push out this kind of video. A second step will be to use the created environment in VR.
Having experience on more traditional realtime 3d engine such as Unreal Engine Im struggling to understand what are the relative limitations of if webGL frameworks such as Three.js.

Three.js itself is very powerful but the browser bottlenecks it’s capabilities because it gives limited access to hardware. Because of this three.js probably won’t be able to run things as smoothly as the videos you showed. In addition, you threejs is kind of low level in comparison to UE4 and Unity (i’m not experienced though so take this with a grain of salt). From my experience so far, threejs is pretty technical but is that way in order to reek the best performance that you can while in a browser.

Can yo please explain what you mean by that?

It’s more correct to say that three.js is an open-source 3D library whereas UE4 and Unity are commercial game engines. Because of this, they provide a much more comprehensive feature set.

1 Like

Sorry if I wrote something incorrect. I’m not sure if this is right but web engines aren’t as powerful as local engines because they have to interface via the browser which makes them slower. I’ll delete my comment if it’s wrong :smile:

1 Like

Not necessary to do that but there are many factors that influence the final performance of a 3D application. In general, I think you can state the following:

Developing web based 3D applications is great since you create platform-independent software. That means you can run your app on many different devices which is not possible with a native approach. However, this comes with a cost. The browser overhead, the characteristics of the platform-independent WebGL API and the usage of web based programming languages mean you never reach the performance of native apps.

4 Likes

Apart speed - at the beginning we will push out videos - how will compare the rendering quality in term of textures, lightening and shadows, day cycle and weather?
I suppose we will need in any case developers since the generation need to be automated as most as possible, so C++/C# dev will needed for DX engines and JS for WebGL one.
The point for me is how much we will loose in term of fidelity, not since we have as requisite ultra realistic simulation but because we didn’t know right now how realistic will need to be, depending from other factors.

I think one problem is that even WebGL 2 does not provide the same feature set compared to latest DirectX, OpenGL or Vulkan versions. This makes it often hard or even impossible to implement comparable solutions you see in recent game engines. Apart from that, commercial engines provide a more sophisticated material system and often specialized rendering functionalities for stuff like atmosphere, sky, skin or vegetation. It’s really hard for Open-Source projects to be competitive in this context^^.

I suggest you have a look at the official three.js examples and the featured projects on the homepage in order to get a better impression of what you can do with the library.

2 Likes

You mean commercial engines also in the JavaScript/WebGL technology can provide more sophisticated instruments VS Three.js?

I’m not sure about rendering but PlayCanvas for example has a more advanced scene editor.

1 Like

The only other option I considered was BabylonJS, not sure how compare with Three.js (maybe made from it?)

BabylonJS has nothing to do with three.js and did not emerge from it. It’s a completely different story. Since I’m from the three.js dev team, I’m a bit biased to do a good comparison :innocent:. I leave this up to others :grin:.

5 Likes