How to use the WebAssembly version in JavaScript application?

For example, for modelling.

Kirill Gavrilov's picture

This is a very general question, so I suppose you are expecting very general answer.

OCCT is a C++ framework, and there are two main approaches to use it from the other languages like C#, Java, Python or JavaScript:
- Defining a C++ module exporting a small subset of functionality necessary to application using application-specific API. Currently, OCCT comes with a small WebGL sample illustrating this approach for JavaScript.
- Exposing C++ classes from OCCT directly, by using semiautomated wrapping tools like SWIG. OCCT doesn't come with this solution, but there are some projects available already doing wrapping job.

The first approach requires more work on designing and implementing a dedicated API, but provides the most compact and efficient solution growing smoothly in parallel to development of application functionality (normally, application doesn't use everything from OCCT).

The second approach provides a massive semiautomated wrapping of OCCT C++ classes to be directly available from the other language. The size of such wrapped solution might look enormous, as the entire OCCT libraries are exported and in addition the is a lot of wrapping boilerplate code adding even more size to the final solution. The size is usually fine for desktop and server applications, but 50-70+ MiB of binaries which will be transferred to user and then transated by browser in runtime might be unwelcomed by a compact web-application.

There are will be some nuanses and limitations in final API based on the features of target language.

For instance, JavaScript doesn't provide tools like finalizers for mapping C++ destructors naturally, as do other superior languages like C# and Java. As result, the user will have to fight against memory leaks.

There is a plenty of other nuances using WebAssembly like allocation of memory, 32-bit address space limitations, asynchronous APIs, emulated file system API, and many more, that you will have to learn from Emscripten SDK documentation.

W W's picture

Thanks for the answer.
Is it possible to get the JS/WebAssembly version without writing C ++ code? Using Emscripten. Or with minimal edits like:
export module1;
export module2;

What is needed, for example, to get a fully working version of the drawing (Sketching)?

Also questions about the instruction (https://dev.opencascade.org/doc/overview/html/occt_samples_webgl.html).
"2. Build (using emsdk) or download FreeType static library."
How to do that? What commands in CLI should I use? Download where exactly?

Can you write the commands in CLI started from 2?

Kirill Gavrilov's picture

Is it possible to get the JS/WebAssembly version without writing C ++ code? Using Emscripten.

Emscripten SDK provides two ways for wrapping C++ classes into JavaScript - Embind and WebIDL Binder.
But Emscripten doesn't provide tools for automated wrapping of C++ code - both ways require manual coding of a gluing layer.

If you are not familiar with C++, then you might check existing projects wrapping OCCT into JavaScript like opencascade.js.
According to documentation of this project, it relies on libclang to automate generation of C++ -> JavaScript binding layer.

"2. Build (using emsdk) or download FreeType static library."
How to do that? What commands in CLI should I use? Download where exactly?

For building FreeType using Emscripten you will need reading documentation of FreeType project and Emscripten SDK.
There is no much point sharing FreeType library pre-built by Emscripten SDK, as this SDK regularly breaks binary interface (e.g. you will need re-building FreeType and OCCT after Emscripten update anyway, or there will be weird linker/runtime errors).

What is needed, for example, to get a fully working version of the drawing (Sketching)?

Writing a comprehensive sketcher from the scratch might be quite a big job.

Andy Du's picture

Hi Kirill,
Could you describe more about "2. Build (using emsdk) or download FreeType static library."? I found the project occt-webgl in github under your name. How it get build success? What exactly the steps? OCCT, plus WebGL is really exciting.

Thanks,
Andy

Kirill Gavrilov's picture

Andy,

to build FreeType via Emscripten you basically need reading documentation of FreeType and Emscripten.

Emscripten SDK installation is described within Emscripten site (although instructions for installing Python on Windows platform prior launching Emscripten SDK installing it's own Python are somewhat unclear). On Windows platform you might need also installing mingw-make coming with Emscripten itself ("emsdk install mingw-7.1.0-64bit").

There might be issues with some older or newer Emscripten SDK versions - this project is intensively developed, and has no distinguishable stable / unstable / LTS releases, so that each update might break your project in some way (ABI changes, building issues, new deprecations, runtime logic changes, etc.). If you are new to Emscripten SDK, it might be better installing a version of SDK that has been confirmed to successfully work with current OCCT (like 2.0.11 mentioned in the other Forum thread, "emsdk install 2.0.11", "emsdk activate 2.0.11").

FreeType comes with several building options, and CMake is one of them. CMake scripts coming with FreeType has less options than Makefile, but does the job.
Unfortunately, Emscripten SDK regularly breaks ABI of generated libraries, which makes it useless sharing pre-built libraries (as you might need rebuilding them anyway after upgrading Emscripten).

I don't know how to help here, but maybe the following Windows batch script could be helpful:

@echo OFF

rem Auxiliary script for semi-automated building of FreeType for WASM platform.
rem Script should be placed into root of FreeType repository.

set "aSrcDir=%~dp0"
set aNbJobs=%NUMBER_OF_PROCESSORS%

set "EMSDK_ROOT=c:\emsdk"
set "aCmakeBin="

call "%EMSDK_ROOT%\emsdk_env.bat"
set "aToolchain=%EMSDK%/upstream/emscripten/cmake/Modules/Platform/Emscripten.cmake"
if not ["%aCmakeBin%"] == [""] ( set "PATH=%aCmakeBin%;%PATH%" )

set "aBuildRoot=work"
set "aPlatformAndCompiler=wasm"
set "aWorkDir=%aBuildRoot%\freetype-%aPlatformAndCompiler%-make"
set "aDestDir=%~dp0work\freetype-%aPlatformAndCompiler%"
if not exist "%aWorkDir%" ( mkdir "%aWorkDir%" )

pushd "%aWorkDir%"

cmake -G "MinGW Makefiles" ^
 -D CMAKE_TOOLCHAIN_FILE:FILEPATH="%aToolchain%" ^
 -D CMAKE_BUILD_TYPE:STRING="Release" ^
 -D CMAKE_INSTALL_PREFIX:PATH="%aDestDir%" ^
 "%aSrcDir%"
if errorlevel 1 (
  popd
  pause
  exit /B
  goto :eof
)

mingw32-make clean
mingw32-make -j %aNbJobs%
if errorlevel 1 (
  popd
  pause
  exit /B
  goto :eof
)

mingw32-make install

popd
goto :eof

By the way, FreeType is now an optional library for building OCCT (in development branch), so as alternative you may build OCCT with USE_FREETYPE=OFF option.

OCCT also comes with auxiliary building scripts like "adm\scripts\wasm_build.bat", which might be also helpful to understand how to configure OCCT using CMake for a specific target platform. Although OCCT 7.5.0 release already includes Emscripten compatibility fixes, using development branch ("master" in public git) could be more useful, as it includes some newer fixes.

Andy Du's picture

Hi Kirill,
Thank you! I will take a try.