osg on Web的一种实现 -- emscripten & SDL & webAssembly

0 整体参照

0.0 从（本节为第0大节）第2大节开始的所有命令要位于一个命令行内执行
0.1 参照原因：首先调查到可以使用webAssembly来完成osg on web这件事情，然后寻找资料，合适的如下：
https://github.com/OGStudio/openscenegraph-cross-platform-guide/tree/master/1.10.SampleWeb
0.2 该博客目的：github上提供了具体的流程，但是具体部署过程较为复杂，而且对于一些不必要的安装不了解就会走弯路，这里介绍整个走通流程以及各个部分需要注意的部分；

1 osg和样例应用下载

1.0.1 目录组织

OpenSceneGraph的目录和openscenegraph-cross-platform-guide-application的目录位于同一个子目录之下

[nash5 prjs]# pwd
/home/ld/prjs
[nash5 prjs]# tree -d -L 1
.
├── OpenSceneGraph
└── openscenegraph-cross-platform-guide-application

1.0.2 下载方式

1 下载osg注意是3.6.3版本（其他版本不能保证成功）

git clone --branch OpenSceneGraph-3.6.3 https://github.com/openscenegraph/OpenSceneGraph.git

2 下载osg on web样例应用

git clone https://github.com/OGStudio/openscenegraph-cross-platform-guide.git

2 emscripten安装

参考地址：
https://emscripten.org/docs/getting_started/downloads.html#sdk-download-and-install

2.1 获取emsdk

git clone https://github.com/emscripten-core/emsdk.git

2.2 安装指定版本1.39.16然后激活其环境变量（最新版本不能保证可以成功编译osg）

cd emsdk
ls
./emsdk install 1.39.16
./emsdk activate 1.39.16
source ./emsdk_env.sh
em++ --version

3 编译项目

3.0 对于编译的过程理解

1 该样例项目的CMakeLists.txt首先下载了sdl2然后编译osg，然后再编译连接项目文件
2 常见的坑如下:
https://github.com/OGStudio/openscenegraph-cross-platform-guide/issues/8
3 遇到的巨坑，编译的时候就报这个错误日志如下：

[ 52%] Building CXX object /home/ld/prjs/OpenSceneGraph/build/Emscripten/src/osgPlugins/bsp/CMakeFiles/osgdb_bsp.dir/Q3BSPLoad.cpp.o
In file included from /home/ld/prjs/OpenSceneGraph/src/osgPlugins/svg/ReaderWriterSVG.cpp:25:
In file included from /usr/include/librsvg-2.0/librsvg/rsvg.h:30:
In file included from /usr/include/glib-2.0/glib-object.h:22:
In file included from /usr/include/glib-2.0/gobject/gbinding.h:28:
In file included from /usr/include/glib-2.0/glib.h:30:
In file included from /usr/include/glib-2.0/glib/galloca.h:32::463:3: error: static_assert failed due to requirement ‘sizeof(unsigned long long) == sizeof(unsigned long)’ “Expression evaluates to false”
G_STATIC_ASSERT(sizeof (unsigned long long) == sizeof (guint64));
^ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
/usr/include/glib-2.0/glib/gmacros.h:742:31: note: expanded from macro ‘G_STATIC_ASSERT’
#define G_STATIC_ASSERT(expr) static_assert (expr, “Expression evaluates to false”)
^ ~~~~
/home/ld/prjs/OpenSceneGraph/src/osgPlugins/svg/ReaderWriterSVG.cpp:137:17: warning: ‘rsvg_cleanup’ is deprecated [-Wdeprecated-declarations]
rsvg_cleanup();
^
/usr/include/librsvg-2.0/librsvg/rsvg.h:169:1: note: ‘rsvg_cleanup’ has been explicitly marked deprecated here
RSVG_DEPRECATED
^
/usr/include/librsvg-2.0/librsvg/rsvg.h:49:25: note: expanded from macro ‘RSVG_DEPRECATED’
#define RSVG_DEPRECATED G_DEPRECATED RSVG_API
^
/usr/include/glib-2.0/glib/gmacros.h:942:37: note: expanded from macro ‘G_DEPRECATED’
#define G_DEPRECATED attribute((deprecated))
^
[ 52%] Building CXX object /home/ld/prjs/OpenSceneGraph/build/Emscripten/src/osgPlugins/bsp/CMakeFiles/osgdb_bsp.dir/VBSPData.cpp.o
1 warning and 1 error generated.
em++: error: ‘/home/ld/BASE_ENV/emsdk/upstream/bin/clang++ -target wasm32-unknown-emscripten -D__EMSCRIPTEN_major__=1 -D__EMSCRIPTEN_minor__=39 -D__EMSCRIPTEN_tiny__=16 -D_LIBCPP_ABI_VERSION=2 -Dunix -D__unix -D__unix__ -Werror=implicit-function-declaration -Xclang -nostdsysteminc -Xclang -isystem/home/ld/BASE_ENV/emsdk/upstream/emscripten/system/include/libcxx -Xclang -isystem/home/ld/BASE_ENV/emsdk/upstream/emscripten/system/lib/libcxxabi/include -Xclang -isystem/home/ld/BASE_ENV/emsdk/upstream/emscripten/system/lib/libunwind/include -Xclang -isystem/home/ld/BASE_ENV/emsdk/upstream/emscripten/system/include/compat -Xclang -isystem/home/ld/BASE_ENV/emsdk/upstream/emscripten/system/include -Xclang -isystem/home/ld/BASE_ENV/emsdk/upstream/emscripten/system/include/libc -Xclang -isystem/home/ld/BASE_ENV/emsdk/upstream/emscripten/system/lib/libc/musl/arch/emscripten -Xclang -isystem/home/ld/BASE_ENV/emsdk/upstream/emscripten/system/local/include -Xclang -isystem/home/ld/BASE_ENV/emsdk/upstream/emscripten/cache/wasm/include -DEMSCRIPTEN -fignore-exceptions -DOSG_LIBRARY_STATIC -I/home/ld/prjs/OpenSceneGraph/build/Emscripten/include -I/home/ld/prjs/OpenSceneGraph/include -I/usr/include/librsvg-2.0 -I/usr/include/glib-2.0 -I/usr/lib/glib-2.0/include -I/usr/include/libmount -I/usr/include/blkid -I/usr/include/gdk-pixbuf-2.0 -I/usr/include/cairo -I/usr/include/pixman-1 -I/usr/include/freetype2 -I/usr/include/libpng16 -I/usr/include/harfbuzz -isystem /home/ld/BASE_ENV/emsdk/upstream/emscripten/system/include -Wall -Wparentheses -Wno-long-long -Wno-import -Wreturn-type -Wmissing-braces -Wunknown-pragmas -Wunused -Wno-overloaded-virtual -DNDEBUG -O2 -c /home/ld/prjs/OpenSceneGraph/src/osgPlugins/svg/ReaderWriterSVG.cpp -Xclang -isystem/home/ld/BASE_ENV/emsdk/upstream/emscripten/cache/wasm/include/SDL2 -c -o CMakeFiles/osgdb_svg.dir/ReaderWriterSVG.cpp.o -mllvm -combiner-global-alias-analysis=false -mllvm -enable-emscripten-sjlj -mllvm -disable-lsr’ failed (1)
make[2]: *** [/home/ld/prjs/OpenSceneGraph/build/Emscripten/src/osgPlugins/svg/CMakeFiles/osgdb_svg.dir/build.make:83: /home/ld/prjs/OpenSceneGraph/build/Emscripten/src/osgPlugins/svg/CMakeFiles/osgdb_svg.dir/ReaderWriterSVG.cpp.o] Error 1

是一个底层库的版本太老，另一种就是应该使用emcmake而不是cmake导致我失败
解决方案：更新该库

pacman -Syu glib2

3.1 使用emcmake制作Makefile然后编译

3.1.1 修改makefile

3.1.2 cmake产生makefile然后修改

[nash5 openscenegraph-cross-platform-guide-application]# pwd
/home/ld/prjs/openscenegraph-cross-platform-guide-application
[nash5 openscenegraph-cross-platform-guide-application]# cd web/
[nash5 web]# pacman -Suy glib2
[nash5 web]# mkdir build
[nash5 web]# cd build/
# 若这里emcmake过不了，试着换成cmake，我的是emcmake可以，cmake不可以
[nash5 web]# emcmake  -DCMAKE_TOOLCHAIN_FILE=/home/ld/BASE_ENV/emsdk/upstream/emscripten/cmake/Modules/Platform/Emscripten.cmake ../
[nash5 build]# ls
box.osgt  CMakeCache.txt  CMakeFiles  cmake_install.cmake  Makefile 
# 注意联网（sdl就是在这个阶段使用python安装的，如果是sock问题： pip install pysock会解决）

3.1.3 修改cmake产生的文件

去掉wasm-ld将会连接的库: -lnul（该库不存在）

vim CMakeFiles/sample-ems.dir/linklibs.rsp

3.1.4 执行编译

# 这一步正常编译完（40min 最少）
[nash5 build]# make -j4
...
[ 99%] Building CXX object /home/ld/prjs/onceMore/OpenSceneGraph/build/Emscripten/src/osgWrappers/serializers/osgAnimation/CMakeFiles/osgdb_serializers_osganimation.dir/UpdateMorphGeometry.cpp.o
[ 99%] Building CXX object /home/ld/prjs/onceMore/OpenSceneGraph/build/Emscripten/src/osgWrappers/serializers/osgManipulator/CMakeFiles/osgdb_serializers_osgmanipulator.dir/TranslatePlaneDragger.cpp.o
[ 99%] Building CXX object /home/ld/prjs/onceMore/OpenSceneGraph/build/Emscripten/src/osgWrappers/serializers/osgAnimation/CMakeFiles/osgdb_serializers_osganimation.dir/UpdateRigGeometry.cpp.o
[ 99%] Building CXX object /home/ld/prjs/onceMore/OpenSceneGraph/build/Emscripten/src/osgWrappers/serializers/osgAnimation/CMakeFiles/osgdb_serializers_osganimation.dir/UpdateSkeleton.cpp.o
[100%] Building CXX object /home/ld/prjs/onceMore/OpenSceneGraph/build/Emscripten/src/osgWrappers/serializers/osgAnimation/CMakeFiles/osgdb_serializers_osganimation.dir/UpdateVec2fUniform.cpp.o
[100%] Linking CXX static library ../../../../lib/libosgdb_serializers_osgmanipulator.a
[100%] Built target osgdb_serializers_osgmanipulator
[100%] Building CXX object /home/ld/prjs/onceMore/OpenSceneGraph/build/Emscripten/src/osgWrappers/serializers/osgAnimation/CMakeFiles/osgdb_serializers_osganimation.dir/UpdateVec3fUniform.cpp.o
[100%] Building CXX object /home/ld/prjs/onceMore/OpenSceneGraph/build/Emscripten/src/osgWrappers/serializers/osgAnimation/CMakeFiles/osgdb_serializers_osganimation.dir/UpdateVec4fUniform.cpp.o
[100%] Linking CXX static library ../../../../lib/libosgdb_serializers_osganimation.a
[100%] Built target osgdb_serializers_osganimation
[root@nash5 build]#

3.2 在build目录中运行网页：

使用python起一个简单server来访问sample-ems.html，主要是因为edge和chrome不支持XHR请求:https://emscripten.org/docs/getting_started/Tutorial.html

Unfortunately several browsers (including Chrome, Safari, and Internet Explorer) do not support file:// XHR requests, and can’t load extra files needed by the HTML (like a .wasm file, or packaged file data as mentioned lower down). For these browsers you’ll need to serve the files using a local webserver and then open http://localhost:8000/hello.html).

[nash5 build]# ls
box.osgt  CMakeCache.txt  CMakeFiles  cmake_install.cmake  Makefile  sample-ems.data  sample-ems.html  sample-ems.js  sample-ems.wasm

# 默认端口8080，可能会出现端口错误，所以使用如下端口：
python -m http.server 30216