Magnum+WebAssembly——实现网页中显示三维模型（二）_综合

简介

Hoops中的BaseStream模块用于快速读取保存了三维模型数据的HSF文件。所以，本文的工作就是将BaseStream编译为WASM，并试着读取HSF文件，输出部分点和面的数据。

主程序

读取HSF文件，并输出部分点和面数据的源代码如下：

#include "BStream.h"
#include "BOpcodeShell.h"
#include <iostream>
#include "BOpcodeHandler.h"
using namespace std;//自定义一个类，继承至TK_Shell类，并重写TK_Status Execute(BStreamFileToolkit & tk) alter函数
class test : public TK_Shell
{
public:TK_Status Execute(BStreamFileToolkit & tk) alter;
};//实现
TK_Status test::Execute(BStreamFileToolkit & tk) alter
{cout << "Part of the Points Data are:" << endl;const float* points = GetPoints();                     //获取指向存放点数据（位置x,y,z）数组的指针for (int i = 0; i < GetPointCount()/40; i++){cout << points[i] << endl;                        //输出部分点数据}cout << "Part of the Faces Data are:" << endl;const int* faces = GetFaces();                       //获取指向存放索引数据的数组的指针for (int i = 0; i < GetFacesLength()/40;){cout << faces[i] << " " <<faces[i+1] << " " << faces[i + 2] << " " << faces[i + 3] << endl;   //输出i = i + 4;}return TK_Normal;                                   //这里必须返回TK_Normal，否则只会执行一次，无法读取完
}
int main()
{TK_Status status;test* a = new test;BStreamFileToolkit * tk = new BStreamFileToolkit;tk->SetOpcodeHandler(TKE_Shell, a);                //注册自定义的类status = TK_Read_Stream_File("engine.hsf", tk);    //读取文件（会执行重写的Execute函数） return 0;
}

在Visual Studio中的运行效果如下：
在这里插入图片描述

编译为WASM

在Visual Studio中，我们只需要指定头文件包含路径，以及将库文件作为资源添加到项目当中即可完成编译。然而，在将源代码编译为WASM时，则要稍微麻烦一些，共分为两步。

将BaseStream第三方库编译为.bc格式

首先，打开BaseStream工程，可以看到其工程目录结构如下图所示：
在这里插入图片描述
其中Header Files Source Files 以及 utility中的文件在BaseStream的源码包中都能找到，Jpeg以及ZLib是一个第三方库。好消息是，Jpeg以及ZLib是Emcc支持的Ports，如下图，可在编译时直接连接。

所以，我们只需要将Source Files中的cpp文件一起编译成一个.bc文件。首先，将Source Files以及Header Files中的所有文件添加到桌面新建的test文件夹中。然后打开CMD并进入test文件夹，然后执行下面的命令，生成base_stream.bc文件。

emcc BAscii.cpp BCompress.cpp BCompressData.cpp BEdgeBreakerCommon.cpp BEdgeBreakerCompress.cpp BEdgeBreakerDecompress.cpp BOpcodeHandler.cpp BOpcodeShell.cpp BOpcodeShellAscii.cpp BPointCloud.cpp BPolyhedron.cpp BPolyhedronAscii.cpp BPolyPoly.cpp BStreamFileToolkit.cpp vwrapper_stream.cpp vlist.cpp vhash.cpp utf_utils.cpp -o base_stream.bc

随后，将上面读取HSF文件的源代码加上编译成main.bc文件

emcc test.cpp -o main.bc

最后，将上面两个.bc文件一起编译：

emcc base_stream.bc main.bc -s USE_ZLIB=1 -s USE_LIBJPEG=1 -o test.html --preload-file engine.hsf
# 调用Zlib port
-s USE_ZLIB=1
# 调用jpeg port
-s USE_LIBJPEG=1
# 生成test.html文件(同时会生成test.wasm test.js)
-o test.html
# 挂载hsf文件(preload模式,生成test.data供运行时调用)
--preload-file engine.hsf

运行html文件：

emrun --no_browser --port 8080 test.html
http://localhost:8080/test.html

运行效果：
在这里插入图片描述