Asynchronous initialization of Engine

[yangfengzzz]

Because WASM loaded is asynchronous，All physical component should be used after WASM binary loaded well.

The initialization of engine and component should be written in the callback function like Laya:

Laya3D.init(0, 0, null, Handler.create(null, () => { xxx }

PR reviewers: @yangfengzzz , @cptbtptpbcptdtptp , @zhuxudong

[GuoLei1990]

There are several reasons why the engine must consider asynchronous initialization：

• The initialization of webGPU Device is asynchronous
• Decoding libraries for some asset loaders, such as ktx2 and mesh_opt
• The wasm version of the physics engine physX requires asynchronous initialization
• Other etc.

We don't want the engine's future initialization process to happen then->then->then->.... or awaitl;await;await;...

Here are some initial ideas and designs：

WebGL

Universal version:

const webCanvas = new WebCanvas(htmlCanvas);
const webGLGraphicDevice = new WebGLGraphicDevice({});
const physXPhysics = new PhysXPhysics(PhysXRuntimeMode.Auto);
const configuration = {
  canvas: webCanvas,
  graphicDevice: webGLGraphicDevice,
  physics: physXPhysics,
  ktx2LoaderOptions:<LTX2LoaderOptions>{}
};
const engine = await Engine.create(configuration);

// Destroy physX
physXPhysics.destroy();

Encapsulation version:

const physXPhysics = new PhysXPhysics(PhysXRuntimeMode.Auto);
const configuration = {
  canvas: htmlCanvas,
  physics: physXPhysics,
  graphicDeviceOptions: <WebGLGraphcDeviceOptions>{},
  ktx2LoaderOptions:<LTX2LoaderOptions>{}
};
const engine = await WebGLEngine.create(configuration);

// Destroy physX
physXPhysics.destroy();

WebGPU with multi canvas

Universal version:

const webCanvas1 = new WebGPUCanvas("htmlCanvas1",{...});
const webCanvas2 = new WebGPUCanvas("htmlCanvas2",{...});
const webGPUGraphicDevice = new WebGPUGraphicDevice({...});
const physXPhysics = new PhysXPhysics(PhysXRuntimeMode.Auto);
const configuration = {
  graphicDevice:webGPUGraphicDevice, 
  physics: physXPhysics,
  ktx2LoaderOptions:<LTX2LoaderOptions>{}
};
const engine = await Engine.create(configuration);
......
// Set multi renderTaget to different canvas
camera1.renderTaget = webCanvas1);
camera2.renderTaget = webCanvas2;
// Destroy physX
physXPhysics.destroy();

Encapsulation version:

const webCanvas1 = new WebGPUCanvas("htmlCanvas1",{});
const webCanvas2 = new WebGPUCanvas("htmlCanvas2",{});
const physXPhysics = new PhysXPhysics(PhysXRuntimeMode.Auto);
const configuration = {
  physics: physXPhysics,
  graphicDeviceOptions:<WebGPUGraphcDeviceOptions>{}
  ktx2LoaderOptions:<LTX2LoaderOptions>{}
};
const engine = await WebGPUEngine.create(configuration);
......
// Set multi renderTaget to different canvas
camera1.renderTaget = webCanvas1);
camera2.renderTaget = webCanvas2;
// Destroy physX
physXPhysics.destroy();

PhysX and KTX2Loader implementation:

@resourceLoader(AssetType.Texture2D, ["ktx2"])
class KTX2Loader extends Loader<Texture2D> {
  initialize(): Promise<void> {}
  load(item: LoadItem, resourceManager: ResourceManager): AssetPromise<Texture2D> {}
}

class PhysXPhysics {
  constructor(runtimeMode: PhysXRuntimeMode);
  initialize(): Promise<void> {}
  destroy(): void {}
}

@yangfengzzz @gz65555 Discuss together to see if there are other improvements and potential unmet needs

[luzhuang]

How about letting developers handle asynchrony themselves, like PhysXPhysics now.

Promise.all([KTX2Loader.load(), PhysXPhysics.load()])

When they don't use KTX2 or PhysXPhysic, they can still use the engine in a synchronous way.

[gz65555]

How about letting developers handle asynchrony themselves, like PhysXPhysics now.

Promise.all([KTX2Loader.load(), PhysXPhysics.load()])

When they don't use KTX2 or PhysXPhysic, they can still use the engine in a synchronous way.

@luzhuang Specified configuration can be easily exported by Editor.

[gz65555]

Use ktx2Loader as key will be more precise.

{
  "ktx2Loader": {
    "maxWorker": 4,
    "preCreated": true,
  }
}

How to register a initialized function to be called. @GuoLei1990

[GuoLei1990]

How about letting developers handle asynchrony themselves, like PhysXPhysics now.

Promise.all([KTX2Loader.load(), PhysXPhysics.load()])

When they don't use KTX2 or PhysXPhysic, they can still use the engine in a synchronous way.

In the foreseeable future, it can be considered that almost 90% of projects will use asynchronous, even WebGPU is forced asynchronous