Strange clipping in new WebGL exporter

Mods Draft, Arch & BIM
1

I’m having some problems exporting a simple building model using the new WebGL exporter. When the exported file is loaded in a web browser, the model is clipped strangely — it looks like the parts furthest away from the camera are being cut off.

The “View Top” and “View Front” buttons do unexpected things, too: in orthographic camera mode “View Top” views the back, and “View Front” views the top, while in perspective camera mode they show the same views but upside-down.

The model is attached, and I’ve put a sample of the export at https://www.assorted.org.uk/steve/stuff/Garage-v2.html. I’ve been using 0.19 revision 24267.
Garage-v2.FCStd (178 KB)

2

After a bit of experimentation, it looks like these are two separate issues.

Clipping: some of the camera frustum parameters are hard-coded rather than derived from the data, and the hard-coded values were too small for my building. I was able to get reasonable behaviour for my export by making the following changes to the generated file:

-                var persCamera = new THREE.PerspectiveCamera( data.camera.focalDistance, window.innerWidth / window.innerHeight, 1, 10000 );
+                var persCamera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 100000 );
-                var orthCamera = new THREE.OrthographicCamera(-aspectRatio * viewSize / 2, aspectRatio * viewSize / 2, viewSize / 2, -viewSize / 2, -10000, 10000);
+                var orthCamera = new THREE.OrthographicCamera(-aspectRatio * viewSize / 2, aspectRatio * viewSize / 2, viewSize / 2, -viewSize / 2, -10000, 100000);

I’m not sure what’s going on with data.camera.focalDistance being passed as the first argument of THREE.PerspectiveCamera; according to the three.js docs that’s “fov — Camera frustum vertical field of view”.

For the OrthographicCamera I just bumped up the value for the far plane from the hard-coded 10000 (10m?) to 100000 (100m?).

I think a proper fix should calculate the far plane from the model data, but that’s a bit beyond my current JavaScript…

View buttons: the code for these needs fixing slightly. The current code positions the camera at max-x for “Right”, max-y for “Top” and max-z for “Front”. It needs to position the camera at min-y for “Front” and max-z for “Top”. I’m fairly confident about this change so I’ll send a pull request.

I’ve put the manually-edited version of the export at https://www.assorted.org.uk/steve/stuff/Garage-v2-fixed.html. There’s still something a bit off with scaling in the perspective view but I can’t quite describe it properly at the moment.

3

The pull request for the view button fix was accepted. I’ve carried on working on the javascript for the WebGL exporter and I’ve made the following improvements:

  • Render on demand rather than continuously
  • Support high-DPI displays
  • Fix the frustum depth for both cameras
  • Deal correctly with the browser window being resized (the perspective camera view got squashed)
  • Only show controls for objects with geometry (the exporter was happy to include eg. a sketch with no vertices)

I also made some changes to make the code easier to understand:

  • Use const and let instead of var, as appropriate: make the scope of variables more obvious
  • Use for…of and .map() instead of iterating over arrays using a loop counter

There are still some issues I haven’t managed to fix:

  • The export defaults to the camera in use in FreeCAD when the file is exported. If the orthographic camera is selected, the defaults for the perspective camera in the export are wrong and the camera is positioned too close to the model.
  • Panning the export by dragging with the right mouse button leads to some strange views!

I’ve put a sample export using the updated javascript at https://www.assorted.org.uk/steve/stuff/Garage-v2-new-template.html — it’s the same model as linked above. There’s a pull request at https://github.com/FreeCAD/FreeCAD/pull/4728.

4

Great! It’s been a few years before I tried the previous WebGL export :slight_smile: