Scarfski/filament
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

WebGL: Upgrade emsdk and refactor initialization.

Browse Source 
Since postRun can no longer be set from within the extern post JS, we
now use the promise rather than postRun.

This upgrades emsdk to 1.39.19 (see note in #2800).
This commit is contained in:
Philip Rideout
2020-07-13 11:00:17 -07:00
parent ec533e6047
commit 4fa987c698
5 changed files with 35 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
BUILDING.md
View File

@@ -366,7 +366,7 @@ same version that our continuous builds use.
```
cd <your chosen parent folder for the emscripten SDK>
curl -L https://github.com/emscripten-core/emsdk/archive/f5e21de.zip > emsdk.zip
curl -L https://github.com/emscripten-core/emsdk/archive/1.39.19.zip > emsdk.zip
unzip emsdk.zip ; mv emsdk-* emsdk ; cd emsdk
python ./emsdk.py install latest
python ./emsdk.py activate latest

2
RELEASE_NOTES.md
View File

@@ -5,6 +5,8 @@ A new header is inserted each time a *tag* is created.
## Next release
- Updated the Emscripten SDK to 1.39.19
## v1.8.0
- Improved JavaScript API for SurfaceOrientation and Scene.

2
build/web/ci-common.sh
View File

@@ -9,7 +9,7 @@ export PATH="$PWD:$PATH"
# npm install -g typescript
# Install emscripten.
curl -L https://github.com/emscripten-core/emsdk/archive/f5e21de.zip > emsdk.zip
curl -L https://github.com/emscripten-core/emsdk/archive/1.39.19.zip > emsdk.zip
unzip emsdk.zip ; mv emsdk-* emsdk ; cd emsdk
./emsdk install latest
./emsdk activate latest

2
web/filament-js/CMakeLists.txt
View File

@@ -38,7 +38,7 @@ set(CMAKE_CXX_FLAGS "${CMAKE_CXX_FLAGS} ${COPTS}")
add_executable(filament-js ${CPP_SRC})
set_target_properties(filament-js PROPERTIES
LINK_DEPENDS "${EXTERN_POSTJS_SRC};${POSTJS_SRC}"
LINK_DEPENDS "${EXTERN_POSTJS_SRC}"
OUTPUT_NAME filament)
target_link_libraries(filament-js PRIVATE filament math utils image filameshio gltfio_core stb)

63
web/filament-js/wasmloader.js
View File

@@ -14,16 +14,6 @@
* limitations under the License.
*/
// Emscripten creates a global function called "Filament" but our TypeScript bindings assume that
// Filament is a namespace not a function. Here we replace the function with the namespace.
Filament = Filament();
// Keep a counter of remaining asynchronous tasks (e.g., downloading assets) that must occur before
// allowing the app to initialize. As soon as the counter hits zero, we know it is time to call the
// app's onready callback. There is always at least 1 initialization task for loading the WASM
// module.
Filament.remainingInitializationTasks = 1;
/// init ::function:: Downloads assets, loads the Filament module, and invokes a callback when done.
///
/// All JavaScript clients must call the init function, passing in a list of asset URL's and a
@@ -32,14 +22,13 @@ Filament.remainingInitializationTasks = 1;
/// be ready at initialization time.
///
/// When the callback is called, each downloaded asset is available in the `Filament.assets` global
/// object, which contains a mapping from URL's to Uint8Array objects and DOM images.
/// object, which contains a mapping from URL's to Uint8Array objects.
///
/// assets ::argument:: Array of strings containing URL's of required assets.
/// onready ::argument:: callback that gets invoked after all assets have been downloaded and the \
/// Filament WebAssembly module has been loaded.
Filament.init = function(assets, onready) {
Filament.onReady = onready;
Filament.remainingInitializationTasks += assets.length;
Filament.init = (assets, onready) => {
onready = onready || (() => {});
Filament.assets = {};
// Usage of glmatrix is optional. If it exists, then go ahead and augment it with some
@@ -48,22 +37,30 @@ Filament.init = function(assets, onready) {
Filament.loadMathExtensions();
}
// Issue a fetch for each asset. After the last asset is downloaded, trigger the callback.
Filament.fetch(assets, null, function(name) {
if (--Filament.remainingInitializationTasks == 0 && Filament.onReady) {
Filament.onReady();
// One task for compiling & loading the wasm file, plus one task for each asset.
let remainingTasks = 1 + assets.length;
const taskFinished = () => {
if (--remainingTasks == 0) {
onready();
}
});
};
};
// The postRun method is called by emscripten after it finishes compiling and instancing the
// WebAssembly module. The JS classes that correspond to core Filament classes (e.g., Engine)
// are not guaranteed to exist until this function is called.
Filament.postRun = function() {
Filament.loadClassExtensions();
if (--Filament.remainingInitializationTasks == 0 && Filament.onReady) {
Filament.onReady();
}
// Issue a fetch for each asset.
Filament.fetch(assets, null, taskFinished);
// Emscripten creates a global function called "Filament" that returns a promise that
// resolves to a module. Here we replace the function with the module. Note that our
// TypeScript bindings assume that Filament is a namespace, not a function.
Filament().then(module => {
Filament = Object.assign(module, Filament);
// At this point, emscripten has finished compiling and instancing the WebAssembly module.
// The JS classes that correspond to core Filament classes (e.g., Engine) are not guaranteed
// to exist until now.
Filament.loadClassExtensions();
taskFinished();
});
};
/// fetch ::function:: Downloads assets and invokes a callback when done.
@@ -78,10 +75,10 @@ Filament.postRun = function() {
///
/// assets ::argument:: Array of strings containing URL's of required assets.
/// onDone ::argument:: callback that gets invoked after all assets have been downloaded.
/// onFetch ::argument:: optional callback that's invoked after each asset is downloaded.
Filament.fetch = function(assets, onDone, onFetched) {
/// onFetched ::argument:: optional callback that's invoked after each asset is downloaded.
Filament.fetch = (assets, onDone, onFetched) => {
let remainingAssets = assets.length;
assets.forEach(function(name) {
assets.forEach(name => {
// Check if a buffer already exists in case the client wishes
// to provide its own data rather than using a HTTP request.
@@ -93,12 +90,12 @@ Filament.fetch = function(assets, onDone, onFetched) {
onDone();
}
} else {
fetch(name).then(function(response) {
fetch(name).then(response => {
if (!response.ok) {
throw new Error(name);
}
return response.arrayBuffer();
}).then(function(arrayBuffer) {
}).then(arrayBuffer => {
Filament.assets[name] = new Uint8Array(arrayBuffer);
if (onFetched) {
onFetched(name);