Embedded previewer

[macumber]

Initial build of OpenStudio FloorspaceJS -> ThreeJS conversion is available at:

https://github.com/macumber/emscripten-test/releases/tag/0.1

See test script to run this at:

https://github.com/macumber/emscripten-test/blob/master/test.js

Example html which displays a ThreeJS component is available at:

https://github.com/macumber/openstudio-vA3C/blob/master/ViewModel/resources/report.html.in#L69

[macumber]

@shorowit FYI

[macumber]

Running the example with node:

[macumber]

https://github.com/macumber/emscripten-test/blob/master/index.html

[macumber]

Initial proof of concept would be a button to export a ThreeJS JSON. That file can be loaded into existing viewers like https://codepen.io/MrGlox/pen/EyaLXN and https://threejs.org/editor/

[macumber]

[benfen]

@macumber How can I get the libtest_lib_release.zip file referenced in the emscripten-test repo?

[macumber]

It’s an asset on this release https://github.com/macumber/emscripten-test/releases/tag/0.2.0

[benfen]

ThreeJS deprecated and stop handling the JSON format that the emscripten code is putting out. It looks to be fairly recent - https://github.com/mrdoob/three.js/wiki/Migration-Guide#r124--r125. I assume that updating the libraries for c++ should resolve much of that problem.

The UI for things is partially figured out at https://benfen.github.io/floorspace.js/ (gh-pages is having some trouble picking up changes, so it might fail to generate the json for a short time), but without a translator, it's not going to be very useful to export to that format.

[benfen]

Do you have a reproducible build process for the C++, automated or otherwise?

[macumber]

I updated my emscripten-test repo to build with Docker: https://github.com/macumber/emscripten-test/pull/2

The instructions to build it are in the Readme.md on the docker branch

[macumber]

I found a new bug in the FloorspaceJS to ThreeJS translator in the OpenStudio repo: https://github.com/NREL/OpenStudio/issues/4384

If there is interest on the NREL side, I could help to factor out a small bit of the OpenStudio SDK into separate OS Core and OS Geometry libraries that we could wrap with Emscripten.

Right now keeping https://github.com/macumber/emscripten-test up to date with the main NREL OS repo is not simple.

[benfen]

What version(s) of threeJS does the previewer/JSON need to support? How much of the code here for converting a floorspace to threeJS is from OpenStudio?

[macumber]

https://github.com/NREL/openstudio-common-measures-gem/pull/81/files updates the ThreeJS version from 71 to 98. I'd like to go further but I don't think we can unless there is a change in OpenStudio. All of the code in the https://github.com/macumber/emscripten-test repo which converts FloorspaceJS to ThreeJS is from the OpenStudio utility/geometry subdirectory, it's just modified slightly to be built separate from OpenStudioin emscripten-test .

Ideally, OpenStudio would add a new version of the ThreeJS translation. Then I could update the previewer measure to use the new translation/JSON format while the old preview measure would keep working.

[macumber]

I tried your fork of FloorspaceJS but couldn't figure out how to activate the 3D preview, is there a button or something?

[macumber]

Actually, looking at it, the OpenStudio exporter exports v4 ThreeJS JSON. This should be the same as the more recent versions of ThreeJS use. I'll try updating the geometry previewer.

On the other hand though, why would you need to use a more recent version of ThreeJS? If you are embedding the geometry previewer in FloorspaceJS couldn't you use an old version of ThreeJS? I'm assuming the newer versions are more performant, but are there other reasons you need to use a newer version? I'm just trying to understand the issues here.

[benfen]

The main reason for upgrading is that https://threejs.org/editor/ doesn't accept the 3D JSON because the format is too old. Hence, the export could be a bit of a pitfall for any users trying to export it elsewhere, since any JSON we generate won't work with newer versions of three.js. If that's not a relevant use case, then I don't see any real concerns about using a compatible version of three.js.

In terms of the UI for generating the 3D JSON, I attached it to the save floorplan button in the top left. A user can select what format they want to export the data in now. I haven't hooked up the previewer yet, so it just spits out the JSON for now.

[macumber]

Ok cool thanks for the explanation, as far as I know OS is still exporting the most recent ThreeJS JSON schema. I’ll take a look at it and see if I can figure out what the issues are.

[macumber]

However I will say that the previewer code has a lot of OpenStudio specific markup in it that the editor would not support. So it’s more useful if the built in preview uses the openstudio previewer than the generic ThreeJS editor

[benfen]

I connected the 3D viewer to floorspace - https://benfen.github.io/floorspace.js/. If you click the globe icon in the top left, you can open the 3D previewer in a separate tab.

For now, I've copied over the relevant contents of the emscripten-test repo into floorspace.js - https://github.com/NREL/floorspace.js/compare/develop...benfen:feat/embedded-previewer?expand=1. I need to tweak a couple of things and then I'll open up a PR for it.

[macumber]

That is super cool Ben. It looks like the ThreeJS loader for the JSON format we are using was removed after r98 (https://github.com/mrdoob/three.js/wiki/Migration-Guide#r98--r99). To be compatible with the newer versions of ThreeJS, OpenStudio would have to change its ThreeJS export to the BufferGeometry version compatible with the new ObjectLoader or another format such as GLTF. I think a GLTF export would be the best path forward, added https://github.com/NREL/OpenStudio/issues/4387.

[macumber]

You should get NREL to review and merge https://github.com/NREL/openstudio-common-measures-gem/pull/81, then you could use the updated previewer that includes surface and space searching.

[macumber]

Also, can we make an option to turn off the geometry preview in https://github.com/NREL/floorspace.js/blob/develop/src/api.js ? We would not want to use that in the OS App since we have our own preview.

[jmarrec]

@macumber wrote:

That is super cool Ben. It looks like the ThreeJS loader for the JSON format we are using was removed after r98 (https://github.com/mrdoob/three.js/wiki/Migration-Guide#r98--r99). To be compatible with the newer versions of ThreeJS, OpenStudio would have to change its ThreeJS export to the BufferGeometry version compatible with the new ObjectLoader or another format such as GLTF. I think a GLTF export would be the best path forward, added NREL/OpenStudio#4387.

My initial question was: Why do you think GLTF is better than "just" upgrading Geometryto BufferGeometry?

https://threejs.org/docs/index.html#manual/en/introduction/Loading-3D-models

Recommended workflow Where possible, we recommend using glTF (GL Transmission Format). Both .GLB and .GLTF versions of the format are well supported. Because glTF is focused on runtime asset delivery, it is compact to transmit and fast to load. Features include meshes, materials, textures, skins, skeletons, morph targets, animations, lights, and cameras

[benfen]

I added an option to disable the geometry preview - does the export option also need to be feature toggled and if so, does it need a separate flag?

[macumber]

I would disable export if not needed and one flag can disable both. Ideally, that could even be a build time option so users that don't want the editor wouldn't have to get all the exporter WASM.