Displaying .earth file in web using osgearth and emscripten

[CaglaNurYuva]

I want to display an .earth file in web environment by using emscripten as well as osgEarth and open scene graph libraries. Can I achieve this by using osgverse library?

[xarray]

To make osgearth work with emscripten, you have to download a modified version from: https://gitee.com/xarray/osgearth-wasm And configure it with the Setup.sh in osgverse. But you have to compile thirdparty libraries of osgEarth by yourself first as I haven't upload them yet. At present the entire process is still a pain but at least it works.

[CaglaNurYuva]

Thanks a lot for your help. I did not use Setup.sh file. I used CMake GUI to build/configurate and install osgverse, osgearth-wasm, osgearth, open scene graph and all the other necessary libraries. I installed osgverse without changing anything but as far as I understand, this is not enough to display .earth file in web with emscripten.

Could you please explain what kind of changes has to be done in osgverse library to be able to display .earth file in web?

[xarray]

Have you already compiled and tested examples in osgverse/wasm? They should be generated automatically while compiling with emscripten. The Setup.sh is used to maintain the emscripten toolchain and declare related macros. If you choose to compile the libraries directly with cmake-gui, you may have to configure CMAKE_CXX_COMPILER by yourself and will still miss some of the options because not all of them are exposed to the GUI.

You may have a look at my live-streamed tutorial if you could read Chinese. I will consider upload a detailed tutorial in English if I could have some more time. https://www.bilibili.com/video/BV14b41197DL?p=12&vd_source=50f19e3b2f9e3022c448a050d10c34e4

[CaglaNurYuva]

Thanks. I'm sorry for my late reply, I was trying hard to make things work.

Yes, I compiled and tested examples by using the 3. option in Setup.sh and by building osgverse with cmake-gui. They both gave me the same results, osgVerse_JsCallerWASM.html and osgVerse_ViewerWASM.html were created, I just copied assets folder of osgverse directory to the build folder to get some data to display on web and it worked, I get some results on web.

Now, I have the problems below:

1) Using cmake-gui by using emscripten toolchain is equivalent of the 3.option in Setup.sh file. However, I need to build osgverse as in 4.option in Setup.sh file.

2) When I run Setup.sh for 4.option, it finishes without error but dependency libraries cannot be found. Therefore as in 3.option, only osgVerse_JsCallerWASM.html and osgVerse_ViewerWASM.html are created. My operating system is Ubuntu and I cross-compiled those dependency libraries with Emscripten toolchain and those libraries in this path: /home/cagla/emsdk/upstream/emscripten/cache/sysroot/lib

3) When I use Setup.sh file to build 4.option, I build and install open scene graph successfully, after that, I get the messages below. The thing is, I have osgearth-wasm directory in this path: /home/cagla/osgearth-wasm but still osgearth-wasm directory cannot be found as seen in the messages below. I also have Draco, SDL2, ZLMediaKit libraries but somehow they cannot be found. Additionally, when I build open scene graph once and I run Setup.sh file again, open scene graph is built/installed again and again, it is not asking me "Would you like to use current OSG built? (y/n)" I think things related to dependency libraries in Ubuntu 22.04 is not going as smooth as in your videos:(

(More installing stuff above...) -- Installing: /home/cagla/osgverse/build/sdk_wasm2/lib/osgPlugins-3.7.0/libosgdb_deprecated_osgshadow.a -- Installing: /home/cagla/osgverse/build/sdk_wasm2/lib/osgPlugins-3.7.0/libosgdb_deprecated_osgterrain.a -- Installing: /home/cagla/osgverse/build/sdk_wasm2/lib/osgPlugins-3.7.0/libosgdb_deprecated_osgvolume.a -- Installing: /home/cagla/osgverse/build/sdk_wasm2/lib/osgPlugins-3.7.0/libosgdb_deprecated_osgwidget.a osgEarth-WASM not found. Please download it and unzip in ../osgearth-wasm if you wish. *** Building osgVerse... [osgVerse] WebAssembly Porting. Features: sse;sse2;sse3;avx -- Could NOT find OpenMP_C (missing: OpenMP_C_FLAGS OpenMP_C_LIB_NAMES)  -- Could NOT find OpenMP_CXX (missing: OpenMP_CXX_FLAGS OpenMP_CXX_LIB_NAMES)  -- Could NOT find OpenMP (missing: OpenMP_C_FOUND OpenMP_CXX_FOUND)  [osgVerse] Dependency Draco not found. Some modules and functionalities will be ignored. [osgVerse] Dependency SDL2 not found. Some modules and functionalities will be ignored. -- [osgVerse] OSG is built with GLES3 support. Make sure to configure osgVerse to use GLES3, too. -- [osgVerse] OpenSceneGraph version: 3.7.0 [osgVerse] Dependency libWebP not found. osgdb_verse_webp will be ignored. [osgVerse] Dependency ZLMediaKit not found. osgdb_verse_ms will be ignored. [osgVerse] C++ 17 standard is disabled at present. osgdb_verse_vdb will be ignored. -- [osgVerse] Emscripten / WebAssembly toolchain is used. (WebGL2 = ON) [osgVerse] Dependency osgEarth not found. osgVerse_EarthWASM will be ignored. -- Configuring done -- Generating done CMake Warning: Manually-specified variables were not used by the project:    OSG_BUILD_DIR    OSG_SOURCE_DIR

4) I use Ubuntu 22.04, I checked the playlist you sent me, I saw you used WSL and you write CMakeLists.txt file for mainly WSL. I don't think dependency paths work for ubuntu, at least with emscripten. I tried to change dependency paths in CMakeLists.txt file in osgverse directory, even if I write the correct paths in CMakeLists.txt file for those dependency libraries (for Bullet, Draco and SDL2), they cannot be found, I get the same messages given above.

5) I think you did not compile dependency libraries with emscripten toolchain in your videos but I compile those libraries with emscripten toolchain file.

This is my directory tree:

projects   - bullet3   - bullet3_build_emscripten (files are installed in Dependencies/wasm directory)   - Dependencies     - wasm       - bin         - Some .js files related to draco, geos, osgEarth...       - include         - bullet         - draco         - geos         - geos.h         - geos_c.h         - osgEarth         - osgEarthAnnotation         - osgEarthDrivers         - osgEarthFeatures         - osgEarthSplat         - osgEarthSymbology         - osgEarthUtil       - lib         - cmake         - libBullet.a stuff...         - libgeos.a         - libdraco.a         - libLinearMath.a         - libosgEarthSymbology.a         - libosgEarthUtil.a         - osgPlugins-3.7.0         - pkgconfig       - share         - cmake           - draco             - draco-config.cmake             - draco-config-version.cmake             - draco-targets.cmake             - draco-targets-release.cmake   - draco   - draco_build_emscripten (files are installed in Dependencies/wasm directory)   - geos   - geos_build_emscripten (files are installed in Dependencies/wasm directory)   - OpenSceneGraph   - osgearth-wasm   - osgearth-wasm_build_emscripten (files are installed in Dependencies/wasm directory)   - osgverse   

If you have any suggestions or comments related to the five points above, I will definitely check them out.

PS: I get the same messages given above even if I use the directory tree I gave above or not.

---

Some update: I modify Setup.sh file to give the exact path of osgearth-wasm directory and I manage to start building osgearth-wasm. But still, those dependency libraries are not found.

[xarray]

Thanks, I will try to find a Ubuntu PC and test the script. At present only WSL is tested.

All osgearth dependencies should be compiled first outside. They are not included in the osgverse project nor the Setup.sh script. You may try https://github.com/bugra9/gdal3.js to compile them by yourselves.

After thirdparties are compiled, please create Dependencies/wasm/include and Dependencies/wasm/lib folders and place headers and libraries there. The 'Dependencies' folder should be created sibling to osgverse.

Sorry for the inconvience at present. Please feel free to pull issues and merge requests as you wish.

[CaglaNurYuva]

Thanks a lot for your help, and I'm sorry to make you busy a lot.

I added USE_WASM_OPTIONS and USE_WASM_OSGEARTH in cmake-gui and activate their ticks. In this way, I think I manage to build osgverse like in the 4.option in Setup.sh file.

I successfully build and install osgverse in this way but I did not give directory path for osgearth in cmake-gui because when I did so, I get duplicate symbol errors for osg and osgearth.

As a result, I successfully manage to create osgVerse_EarthWASM.html file. However, I get the error message given below:

Failed to load resource: the server responded with a status of 404 (File not found)

How should I load .earth file so that I can display it by using osgVerse_EarthWASM.html file?

[xarray]

"I successfully build and install osgverse in this way but I did not give directory path for osgearth in cmake-gui because when I did so, I get duplicate symbol errors for osg and osgearth."

Please provide error information in detail or screenshots, and I could try to check why compile or link errors happen.

[CaglaNurYuva]

Thank you. I solve the errors by removing osgearth directory path information in cmake-gui panel but I did not remove my message to leave it as reference for future users. (I still use osgearth-wasm library, but I did not use osgearth library)

I add the screenshots of the cmake-gui panel and error messages below.

Additionally, my current problem is, I couldn't understand how should I load my local .earth file so as to display it when I serve osgVerse_EarthWASM.html page.

Currently, in osgverse/wasm/osgearth_demo/osgearth_viewer.cpp file, you use these lines of codes given below to load a map but it did not work for me. I get the error given below when I serve osgVerse_EarthWASM.html file in a chrome page:

Failed to load resource: the server responded with a status of 404 (File not found)

Can I somehow load my local simple.earth file data instead of the code given below? (The code given below is here: osgverse/wasm/osgearth_demo/osgearth_viewer.cpp)

ss << "<map version=\"2\">\n"
   << "<image driver=\"xyz\" enabled=\"true\" name=\"gaode_sat\" profile=\"global-mercator\""
   << "       url=\"http://webst0[1234].is.autonavi.com/appmaptile?style=6&amp;x={x}&amp;y={y}&amp;z={z}\">"
   << "<cache_policy min_time=\"0\" usage=\"no_cache\"/></image></map>";

[xarray]

"Can I somehow load my local simple.earth file data instead of the code given below"

I think it is not possible because you are running a Web based application now. Web browsers (Chrome, and so on) prevent you from loading any local files as they think it is unsafe to do so.

The only way to load local files is to submit it to the server and then read uploaded file from the server, which can be done by an AJAX function on the JS side or the osgdb_verse_web plugin. Of course you need to improve your file server as well. Current python script is only for demonstration.

[CaglaNurYuva]

Thank you for your reply. Lastly, I want to ask this:

Actually, I want to achieve this as a result: Displaying Qt window in web and in Qt window, displaying an .earth file in web environment by using web assembly and emscripten. And the contents of .earth file should be read locally from my computer when I only write "simple.earth" in the viewer script (it might not be necessary to give the name of earth file, for example, if I give the name of earth file in any way such as using --preload-file in cmake etc.). I also do not want to use any additional server to serve my .earth file or related tiles etc.

I heard it is not completely impossible but a complex task. I also heard this can be achieved by using plugins, shared libraries (main module=1, side module=1 etc. stuff in emscripten).

I think currently there is no one that accomplished this before and there is no attempt related to this.

I would like to hear your suggestions related to this task. How can I implement this kind of functionality step by step? Could you please clearly provide as much detail as possible?

[xarray]

Hi, you actually started a server when you run 'run_webserver.py', after which you can load HTML pages by typing http://127.0.0.1:8000/xxx.html. You may directly double-click and open some simple HTML pages and view its contents, but that is not available for WebGL.

The best way I would suggest is to place your .earth file besides the .html pages, and try to load them from the URL 'http://127.0.0.1:8000/xxx.earth' in your web browsers. If it works, you may consider loading the same file with osgEarth readerwriters. Don't forget to link related static libraries to the project first.