Skip to content

Commit

Permalink
fix: WebGPU HAL & handle lost context #863 & #1362 (#1372)
Browse files Browse the repository at this point in the history 
* fix: WebGPU HAL & handle lost context #863 & #1362

* fix: wait for context lost promise

* fix: create renderer3d component in picking plugin #1094

* feat: add onContextLost callback to constructor options of WebGL & WebGPU renderer #1362

* fix: copy glsl_wgsl_compiler_bg.wasm to dist dir of g-webgpu #1369
  • Loading branch information
@xiaoiver
xiaoiver authored Jun 14, 2023
1 parent f5135ac commit 79c6ee1
Show file tree
Hide file tree
Showing 51 changed files with 1,134 additions and 586 deletions.
1 change: 1 addition & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@
"lint": "npm run eslint",
"lint-staged": "lint-staged",
"prettier": "prettier --write './packages/**/*.{js,ts,md}'",
"prepublish": "cp -r rust/pkg packages/g-webgpu/dist",
"publish": "lerna publish",
"postpublish": "yarn sync",
"publish:next": "lerna publish prerelease --dist-tag next",
Expand Down
70 changes: 34 additions & 36 deletions packages/g-lite/src/Canvas.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -510,57 +510,55 @@ export class Canvas extends EventTarget implements ICanvas {

if (this.context.contextService.init) {
this.context.contextService.init();
this.initRenderingService(renderer, firstContentfullPaint);
if (firstContentfullPaint) {
this.requestAnimationFrame(() => {
this.dispatchEvent(new CustomEvent(CanvasEvent.READY));
});
if (this.readyPromise) {
this.resolveReadyPromise();
}
} else {
this.dispatchEvent(new CustomEvent(CanvasEvent.RENDERER_CHANGED));
}
this.initRenderingService(renderer, firstContentfullPaint, true);
} else {
this.context.contextService.initAsync().then(() => {
this.initRenderingService(renderer, firstContentfullPaint);
if (firstContentfullPaint) {
this.dispatchEvent(new CustomEvent(CanvasEvent.READY));
if (this.readyPromise) {
this.resolveReadyPromise();
}
} else {
this.dispatchEvent(new CustomEvent(CanvasEvent.RENDERER_CHANGED));
}
});
}
}

private initRenderingService(
renderer: IRenderer,
firstContentfullPaint = false,
async = false,
) {
this.context.renderingService.init();

this.inited = true;
this.context.renderingService.init(() => {
this.inited = true;

if (!firstContentfullPaint) {
this.getRoot().forEach((node) => {
const renderable = (node as Element).renderable;
if (renderable) {
renderable.renderBoundsDirty = true;
renderable.boundsDirty = true;
renderable.dirty = true;
if (firstContentfullPaint) {
if (async) {
this.requestAnimationFrame(() => {
this.dispatchEvent(new CustomEvent(CanvasEvent.READY));
});
} else {
this.dispatchEvent(new CustomEvent(CanvasEvent.READY));
}
});
}
if (this.readyPromise) {
this.resolveReadyPromise();
}
} else {
this.dispatchEvent(new CustomEvent(CanvasEvent.RENDERER_CHANGED));
}

if (!firstContentfullPaint) {
this.getRoot().forEach((node) => {
const renderable = (node as Element).renderable;
if (renderable) {
renderable.renderBoundsDirty = true;
renderable.boundsDirty = true;
renderable.dirty = true;
}
});
}

// keep current scenegraph unchanged, just trigger mounted event
this.mountChildren(this.getRoot());
// keep current scenegraph unchanged, just trigger mounted event
this.mountChildren(this.getRoot());

if (renderer.getConfig().enableAutoRendering) {
this.run();
}
if (renderer.getConfig().enableAutoRendering) {
this.run();
}
});
}

private loadRendererContainerModule(renderer: IRenderer) {
Expand Down
15 changes: 13 additions & 2 deletions packages/g-lite/src/services/RenderingService.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import type {
CanvasConfig,
} from '../types';
import {
AsyncParallelHook,
AsyncSeriesWaterfallHook,
sortByZIndex,
sortedIndex,
Expand Down Expand Up @@ -72,6 +73,7 @@ export class RenderingService {
* called before any frame rendered
*/
init: new SyncHook<[]>(),
initAsync: new AsyncParallelHook<[]>(),
/**
* only dirty object which has sth changed will be rendered
*/
Expand Down Expand Up @@ -120,15 +122,24 @@ export class RenderingService {
click: new SyncHook<[InteractivePointerEvent]>(),
};

init() {
init(callback: () => void) {
const context = { ...this.globalRuntime, ...this.context };

// register rendering plugins
this.context.renderingPlugins.forEach((plugin) => {
plugin.apply(context, runtime);
});
this.hooks.init.call();
this.inited = true;

if (this.hooks.initAsync.getCallbacksNum() === 0) {
this.inited = true;
callback();
} else {
this.hooks.initAsync.promise().then(() => {
this.inited = true;
callback();
});
}
}

getStats() {
Expand Down
4 changes: 4 additions & 0 deletions packages/g-lite/src/utils/tapable/AsyncParallelHook.ts
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,10 @@
export class AsyncParallelHook<T> {
private callbacks: ((...args: T[]) => Promise<void>)[] = [];

getCallbacksNum() {
return this.callbacks.length;
}

tapPromise(options: string, fn: (...args: T[]) => Promise<void>) {
this.callbacks.push(fn);
}
Expand Down
32 changes: 8 additions & 24 deletions packages/g-plugin-box2d/src/Box2DPlugin.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,6 @@ export class Box2DPlugin implements RenderingPlugin {

private bodies: Map<DisplayObject, Box2DBody> = new Map();
private fixtures: WeakMap<Box2D.b2Fixture, DisplayObject> = new WeakMap();
private pendingDisplayObjects: DisplayObject[] = [];

apply(context: RenderingPluginContext) {
const { renderingService, renderingContext } = context;
Expand All @@ -74,13 +73,8 @@ export class Box2DPlugin implements RenderingPlugin {
};

const handleMounted = (e: FederatedEvent) => {
const Box2D = this.Box2D;
const target = e.target as DisplayObject;
if (Box2D) {
this.addActor(target);
} else {
this.pendingDisplayObjects.push(target);
}
this.addActor(target);
};

const handleUnmounted = (e: FederatedEvent) => {
Expand Down Expand Up @@ -155,25 +149,22 @@ export class Box2DPlugin implements RenderingPlugin {
}
};

renderingService.hooks.init.tap(Box2DPlugin.tag, () => {
renderingService.hooks.initAsync.tapPromise(Box2DPlugin.tag, async () => {
canvas.addEventListener(ElementEvent.MOUNTED, handleMounted);
canvas.addEventListener(ElementEvent.UNMOUNTED, handleUnmounted);
canvas.addEventListener(
ElementEvent.ATTR_MODIFIED,
handleAttributeChanged,
);

(async () => {
this.Box2D = await this.loadBox2D();
this.Box2D = await this.loadBox2D();

this.temp = new this.Box2D.b2Vec2(0, 0);
this.temp2 = new this.Box2D.b2Vec2(0, 0);
this.createScene();
this.handlePendingDisplayObjects();
this.temp = new this.Box2D.b2Vec2(0, 0);
this.temp2 = new this.Box2D.b2Vec2(0, 0);
this.createScene();

// do simulation each frame
canvas.addEventListener(CanvasEvent.BEFORE_RENDER, simulate);
})();
// do simulation each frame
canvas.addEventListener(CanvasEvent.BEFORE_RENDER, simulate);
});

renderingService.hooks.destroy.tap(Box2DPlugin.tag, () => {
Expand Down Expand Up @@ -407,13 +398,6 @@ export class Box2DPlugin implements RenderingPlugin {
}
}

private handlePendingDisplayObjects() {
this.pendingDisplayObjects.forEach((object) => {
this.addActor(object);
});
this.pendingDisplayObjects = [];
}

private async loadBox2D(): Promise<typeof Box2D & EmscriptenModule> {
const hasSIMD = WebAssembly.validate(
new Uint8Array([
Expand Down
20 changes: 13 additions & 7 deletions packages/g-plugin-device-renderer/src/PickingPlugin.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ import {
import type { BatchManager } from './renderer';
import type { RenderGraphPlugin } from './RenderGraphPlugin';
import { SceneUniform, SceneUniformBufferIndex } from './RenderGraphPlugin';
import { Renderable3D } from './components/Renderable3D';

/**
* max depth when doing multi-layer picking
Expand Down Expand Up @@ -53,15 +54,20 @@ export class PickingPlugin implements RenderingPlugin {

const handleMounted = (e: FederatedEvent) => {
const object = e.target as DisplayObject;

// @ts-ignore
const renderable3D = object.renderable3D;
if (renderable3D) {
// generate picking id for later use
const pickingId = this.pickingIdGenerator.getId(object);
renderable3D.pickingId = pickingId;
renderable3D.encodedPickingColor =
this.pickingIdGenerator.encodePickingColor(pickingId);
if (!object.renderable3D) {
// @ts-ignore
object.renderable3D = new Renderable3D();
}

// @ts-ignore
const renderable3D = object.renderable3D;
// generate picking id for later use
const pickingId = this.pickingIdGenerator.getId(object);
renderable3D.pickingId = pickingId;
renderable3D.encodedPickingColor =
this.pickingIdGenerator.encodePickingColor(pickingId);
};

renderingService.hooks.init.tap(PickingPlugin.tag, () => {
Expand Down
75 changes: 26 additions & 49 deletions packages/g-plugin-device-renderer/src/RenderGraphPlugin.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -78,8 +78,6 @@ export class RenderGraphPlugin implements RenderingPlugin {
*/
private builder: RGGraphBuilder;

private pendingDisplayObjects: DisplayObject[] = [];

private enableCapture: boolean;
private captureOptions: Partial<DataURLOptions>;
private capturePromise: Promise<any> | undefined;
Expand Down Expand Up @@ -114,19 +112,13 @@ export class RenderGraphPlugin implements RenderingPlugin {
return;
}

const renderable3D = new Renderable3D();

// add geometry & material required by Renderable3D
// object.entity.addComponent(Geometry3D);
// object.entity.addComponent(Material3D);
// @ts-ignore
object.renderable3D = renderable3D;

if (this.swapChain) {
this.batchManager.add(object);
} else {
this.pendingDisplayObjects.push(object);
if (!object.renderable3D) {
// @ts-ignore
object.renderable3D = new Renderable3D();
}

this.batchManager.add(object);
};

const handleUnmounted = (e: FederatedEvent) => {
Expand Down Expand Up @@ -177,24 +169,28 @@ export class RenderGraphPlugin implements RenderingPlugin {
}
};

renderingService.hooks.init.tap(RenderGraphPlugin.tag, () => {
canvas.addEventListener(ElementEvent.MOUNTED, handleMounted);
canvas.addEventListener(ElementEvent.UNMOUNTED, handleUnmounted);
canvas.addEventListener(
ElementEvent.ATTR_MODIFIED,
handleAttributeChanged,
);
canvas.addEventListener(ElementEvent.BOUNDS_CHANGED, handleBoundsChanged);
this.context.config.renderer.getConfig().enableDirtyRectangleRendering =
false;
renderingService.hooks.initAsync.tapPromise(
RenderGraphPlugin.tag,
async () => {
canvas.addEventListener(ElementEvent.MOUNTED, handleMounted);
canvas.addEventListener(ElementEvent.UNMOUNTED, handleUnmounted);
canvas.addEventListener(
ElementEvent.ATTR_MODIFIED,
handleAttributeChanged,
);
canvas.addEventListener(
ElementEvent.BOUNDS_CHANGED,
handleBoundsChanged,
);
this.context.config.renderer.getConfig().enableDirtyRectangleRendering =
false;

const $canvas =
this.context.contextService.getDomElement() as HTMLCanvasElement;
const $canvas =
this.context.contextService.getDomElement() as HTMLCanvasElement;

const { width, height } = this.context.config;
this.context.contextService.resize(width, height);
const { width, height } = this.context.config;
this.context.contextService.resize(width, height);

(async () => {
// create swap chain and get device
// @ts-ignore
this.swapChain = await this.context.deviceContribution.createSwapChain(
Expand All @@ -213,16 +209,8 @@ export class RenderGraphPlugin implements RenderingPlugin {
device: this.device,
...context,
});

this.pendingDisplayObjects.forEach((object) => {
this.batchManager.add(object);
});
this.pendingDisplayObjects = [];

// trigger rerender
this.context.renderingService.dirtify();
})();
});
},
);

renderingService.hooks.destroy.tap(RenderGraphPlugin.tag, () => {
this.renderHelper.destroy();
Expand All @@ -243,10 +231,6 @@ export class RenderGraphPlugin implements RenderingPlugin {
* build frame graph at the beginning of each frame
*/
renderingService.hooks.beginFrame.tap(RenderGraphPlugin.tag, () => {
if (!this.swapChain) {
return;
}

const canvas = this.swapChain.getCanvas() as HTMLCanvasElement;
const renderInstManager = this.renderHelper.renderInstManager;
this.builder = this.renderHelper.renderGraph.newGraphBuilder();
Expand Down Expand Up @@ -321,10 +305,6 @@ export class RenderGraphPlugin implements RenderingPlugin {
});

renderingService.hooks.endFrame.tap(RenderGraphPlugin.tag, () => {
if (!this.swapChain) {
return;
}

const renderInstManager = this.renderHelper.renderInstManager;

// TODO: time for GPU Animation
Expand Down Expand Up @@ -394,9 +374,6 @@ export class RenderGraphPlugin implements RenderingPlugin {

renderInstManager.resetRenderInsts();

// output to screen
this.swapChain.present();

// capture here since we don't preserve drawing buffer
if (this.enableCapture && this.resolveCapturePromise) {
const { type, encoderOptions } = this.captureOptions;
Expand Down
Loading

0 comments on commit 79c6ee1

Please sign in to comment.