OSG 编译WebAssembly

一、说明

WebAssembly或称wasm是一个实验性的低级编程语言，应用于浏览器内的客户端。WebAssembly 于 2019 年 12 月 5 日成为万维网联盟（W3C）的推荐，与 HTML，CSS 和 JavaScript 一起，成为 Web 的第四种语言。

现在想把OSG 编译成web项目记录编译过程遇到的问题。

二、Emscripten 环境安装

基础环境

1. 操作系统这里使用的是centos7

2. git 安装 ，gcc 升级到6.5版本(仅供参考，若已经安装跳过，gcc版本可以暂不升级使用默认的4.8 若遇到问题还是升级吧)

3. cmake 的安装至少是2.8版本以上

4. bzip2 的安装（主要是安装Emscripten 过程解压用的命令）

 yum install bzip2

5. Python 升级到2.7.12 以上

centos python 升级网址参考地址

6. glibc 升级到2.18,这个底层api 升级，升级有风险慎重(使用emsdk 1.39.14需要升级glibc)

参考Centos7 glibc库升级到2.23

emscripten 环境安装

这里主要是参考官网教程安装（安装过程需梯子）

下面是把最新版本安装到/home/emsdk/emsdk路径下的方法（当时安装的是1.39.14版本）。

mkdir /home/emsdk
cd /home/emsdk
# Get the emsdk repo
git clone https://github.com/emscripten-core/emsdk.git

# Enter that directory
cd emsdk

# Download and install the latest SDK tools.
./emsdk install latest

# Make the "latest" SDK "active" for the current user. (writes ~/.emscripten file)
./emsdk activate latest

# Activate PATH and other environment variables in the current terminal
source ./emsdk_env.sh

• 安装指定版本1.38.40

由于sdk 更新频繁在下面编译OSG时使用1.38.40版本是成功编译通过的。

安装完成后最好测试编译一个hellworld ，环境是否正常。

./emsdk install 1.38.40

./emsdk activate 1.38.40
source ./emsdk_env.sh

三、OSG 编译构建

此编译主要是参照

1. 下载OSG3.6.3 版本

解压到/home/osg/OpenSceneGraph/

2. 下载osg web 项目

cd /home/osg/

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

下载完成之后需要修改web的CMakeList.txt。原因是作者使用的emsdk 版本较早，需要修改部分配置。

在/home/osg/openscenegraph-cross-platform-guide-application/web/CMakeList.txt修改为

CMAKE_MINIMUM_REQUIRED(VERSION 2.8)

# Path to OpenSceneGraph
SET(EXT_PROJ_DIR "${CMAKE_SOURCE_DIR}/../..")

# Specify critical OpenSceneGraph build variables.
SET(BUILD_OSG_APPLICATIONS NO CACHE BOOL "Do not build applications")
SET(EGL_LIBRARY "GL" CACHE STRING "Suppress linkage error")
SET(OSG_GL1_AVAILABLE OFF CACHE BOOL "Unavailable under Emscripten")
SET(OSG_GL2_AVAILABLE OFF CACHE BOOL "Unavailable under Emscripten")
SET(OSG_GLES2_AVAILABLE ON CACHE BOOL "GLES2 is what Emscripten uses")
SET(OSG_WINDOWING_SYSTEM "None" CACHE STRING "Since we use SDL2 for OpenGL context creation, we don't have a windowing system")
SET(DYNAMIC_OPENTHREADS OFF CACHE BOOL "Link OpenThreads statically")
SET(DYNAMIC_OPENSCENEGRAPH OFF CACHE BOOL "Link OpenSceneGraph statically")
# Prevent CMake error during configuration.
SET(_OPENTHREADS_ATOMIC_USE_GCC_BUILTINS_EXITCODE "0" CACHE STRING "Prevent cfg error")

# Reference SDL2 during build process.
# We use SDL2 to do the following:
# * OpenGL functions' address retrieval
# * OpenGL graphics context creation
SET(FLAGS "-s USE_SDL=2 -s ERROR_ON_MISSING_LIBRARIES=0 -s ERROR_ON_UNDEFINED_SYMBOLS=0")
SET(CMAKE_CXX_FLAGS_RELEASE "${CMAKE_CXX_FLAGS_RELEASE} ${FLAGS}" CACHE STRING "Use SDL2" FORCE)
# Build and reference OpenSceneGraph.
SET(OSG_SOURCE_DIR "${EXT_PROJ_DIR}/OpenSceneGraph")
SET(OSG_BUILD_DIR "${EXT_PROJ_DIR}/OpenSceneGraph/build/Emscripten")
FILE(MAKE_DIRECTORY ${OSG_BUILD_DIR})
ADD_SUBDIRECTORY(${OSG_SOURCE_DIR} ${OSG_BUILD_DIR})
INCLUDE_DIRECTORIES(${OSG_SOURCE_DIR}/include)
INCLUDE_DIRECTORIES(${OSG_BUILD_DIR}/include)
LINK_DIRECTORIES(${OSG_BUILD_DIR}/lib)

# Build sample.
INCLUDE_DIRECTORIES(src-gen)
ADD_EXECUTABLE(sample-ems src/main.cpp)
# Make Emscripten generate ready-to-open HTML page.
SET(CMAKE_EXECUTABLE_SUFFIX ".html")
# Make Emscripten preload the resource.
SET_TARGET_PROPERTIES(sample-ems PROPERTIES LINK_FLAGS "--preload-file box.osgt")
# Copy the resource to the build directory.
CONFIGURE_FILE(box.osgt box.osgt COPYONLY)
# Libraries must be linked in the specified order.
# Otherwise you may get unsatisified linker errors.
TARGET_LINK_LIBRARIES(
    sample-ems
    osgViewer
    osgDB
    # osgDB plugins start.
    osgdb_osg
    osgdb_serializers_osg
    # osgDB plugins end.
    osgGA
    osgText
    osgUtil
    osg
    OpenThreads
)

4. 构建编译

mkdir /home/osg/webbuild
cd /home/osg/webbuild
cmake -DCMAKE_TOOLCHAIN_FILE=/home/emsdk/emsdk/fastcomp/emscripten/cmake/Modules/Platform/Emscripten.cmake /home/osg/openscenegraph-cross-platform-guide-application/web

make -j6

正常情况下编译完成之后就有下面文件，恭喜你就编译OSG WASM 成功了

四 、总结

• 遇到的各种问题可以说都是版本不对导致的，所以一定要把环境做好。
• 希望WebAssembly 技术能越来越成熟，c++ 项目也可以运行在web上面。
• 这个是OSG的简单编译过程，第三方依赖库都没有配置。