Synchronizing Scene Loading with JavaScript

24 January 2017 00:59
In pursuance to a question I posted earlier regarding the loading of multiple canvas elements in one app, is there a command available to synchronize the loading of the scenes such that they both appear simultaneously? (another way of phrasing this is a command to postpone the scenes becoming visible until both are 100% loaded).

I'm attaching a project folder with all the necessary assets.

My thanks in advance for any assistance.
01 February 2017 13:10
Hi Colin! At first you need to pause every scene in the load_cb method immediately after it's loaded:

function load_cb(data_id, success) {
    if (!success) {
        console.log("b4w load failure");

Thus all the scenes will be synchronized and will wait for resuming. The "loading_counter" function here is a sort of callback to report that a scene was loaded:
var _loaded_count = 0;
var _modules = [
    ["first_canvas", "canvas_1"],
    ["second_canvas", "canvas_2"]

function loading_counter() {
    if (_loaded_count == _modules.length)

function start_all() {
    for (var i = 0; i < _modules.length; i++)
        b4w.require(_modules[i][0], _modules[i][1]).resume();

- this code can be placed as is in the global scope (or you can organize it as a b4w module). So, every scene informs us that it was loaded and increases the counter. When we count them all we do resuming in the "start_all" method. The following "resume" method should exist in every module:
exports.resume = function() {

Also, if you want to turn off preloaders synchronously, you shouldn't allow them to reach 100% (because it automatically hides a preloader):
function preloader_cb(percentage) {
    if (percentage < 100)

- that means pausing them at 99%.
Then turn them off in the aforementioned "resume" method:
exports.resume = function() {

Anyway, you can write a custom preloader to make it look better than the default one.
Blend4Web Team
Please register or log in to leave a reply.