feat: export selected nodes and render in offscreen canvas #58

Author: xiaoiver

packages/ecs/src/systems/BatchManager.ts

@@ -23,6 +23,7 @@ import {
  Renderable,
  Rough,
  Text,
+ UI,
  VectorNetwork,
 } from '../components';
 import { TexturePool } from '../resources';
@@ -278,6 +279,26 @@ export class BatchManager {
  }
  }
 
+ #hidedUIs: Drawcall[] = [];
+ hideUIs() {
+ [...this.#drawcallsToFlush].forEach((drawcall) => {
+ if (drawcall.shapes.some((shape) => shape.has(UI))) {
+ this.#drawcallsToFlush.splice(
+ this.#drawcallsToFlush.indexOf(drawcall),
+ 1,
+ );
+ this.#hidedUIs.push(drawcall);
+ }
+ });
+ }
+
+ showUIs() {
+ this.#hidedUIs.forEach((drawcall) => {
+ this.#drawcallsToFlush.push(drawcall);
+ });
+ this.#hidedUIs = [];
+ }
+
  destroy() {
  for (const key in this.#nonBatchableDrawcallsCache) {
  this.#nonBatchableDrawcallsCache[key].forEach((drawcall) => {

packages/ecs/src/systems/MeshPipeline.ts

@@ -58,13 +58,23 @@ import {
  Marker,
  VectorNetwork,
 } from '../components';
-import { paddingMat3 } from '../utils';
+import { paddingMat3, SerializedNode } from '../utils';
 import { GridRenderer } from './GridRenderer';
 import { BatchManager } from './BatchManager';
 import { getSceneRoot } from './Transform';
 import { safeAddComponent } from '../history';
+import { SetupDevice } from './SetupDevice';
+
+type GPURenderer = {
+ uniformBuffer: Buffer;
+ uniformLegacyObject: Record<string, unknown>;
+ gridRenderer: GridRenderer;
+ batchManager: BatchManager;
+};
 
 export class MeshPipeline extends System {
+ private setupDevice = this.attach(SetupDevice);
+
  private canvases = this.query((q) => q.current.with(Canvas).read);
 
  private cameras = this.query(
@@ -163,7 +173,7 @@ export class MeshPipeline extends System {
  (q) => q.addedChangedOrRemoved.with(Marker).trackWrites,
  );
 
- gpuResources: Map<
+ renderers: Map<
  Entity,
  {
  uniformBuffer: Buffer;
@@ -253,64 +263,73 @@ export class MeshPipeline extends System {
  canvas.remove(RasterScreenshotRequest);
  }
 
+ private createRenderer(gpuResource: GPUResource) {
+ const { device, renderCache, texturePool } = gpuResource;
+ return {
+ uniformBuffer: device.createBuffer({
+ viewOrSize: (16 * 3 + 4 * 5) * Float32Array.BYTES_PER_ELEMENT,
+ usage: BufferUsage.UNIFORM,
+ hint: BufferFrequencyHint.DYNAMIC,
+ }),
+ uniformLegacyObject: null,
+ gridRenderer: new GridRenderer(),
+ batchManager: new BatchManager(device, renderCache, texturePool),
+ };
+ }
+
  private renderCamera(canvas: Entity, camera: Entity, sort = false) {
  if (!canvas.has(GPUResource)) {
  return;
  }
 
- const {
- swapChain,
- device,
- renderTarget,
- depthRenderTarget,
- renderCache,
- texturePool,
- } = canvas.read(GPUResource);
-
  const request = canvas.has(RasterScreenshotRequest)
  ? canvas.read(RasterScreenshotRequest)
  : null;
-
- const { type, encoderOptions, grid, download } = request ?? {
+ const { type, encoderOptions, grid, download, nodes } = request ?? {
  type: 'image/png',
  encoderOptions: 1,
  grid: false,
+ nodes: [],
  };
+ const shouldRenderGrid = !request || grid;
+ const shouldRenderPartially = nodes.length > 0;
+
+ let renderer: GPURenderer;
+ let gpuResource: GPUResource;
+ if (shouldRenderPartially) {
+ // Render to offscreen canvas.
+ gpuResource = this.setupDevice.getOffscreenGPUResource();
+ renderer = this.createRenderer(gpuResource);
+ } else {
+ gpuResource = canvas.read(GPUResource);
+ if (!this.renderers.get(camera)) {
+ this.renderers.set(camera, this.createRenderer(gpuResource));
+ }
+ renderer = this.renderers.get(camera);
+ const { batchManager } = renderer;
+ if (request) {
+ batchManager.hideUIs();
+ }
+ }
+
+ const { swapChain, device, renderTarget, depthRenderTarget } = gpuResource;
+ const { uniformBuffer, uniformLegacyObject, gridRenderer, batchManager } =
+ renderer;
 
  const { width, height } = swapChain.getCanvas();
  const onscreenTexture = swapChain.getOnscreenTexture();
 
- const shouldRenderGrid = !request || grid;
-
- // console.log(request, grid);
-
- if (!this.gpuResources.get(camera)) {
- this.gpuResources.set(camera, {
- uniformBuffer: device.createBuffer({
- viewOrSize: (16 * 3 + 4 * 5) * Float32Array.BYTES_PER_ELEMENT,
- usage: BufferUsage.UNIFORM,
- hint: BufferFrequencyHint.DYNAMIC,
- }),
- uniformLegacyObject: null,
- gridRenderer: new GridRenderer(),
- batchManager: new BatchManager(device, renderCache, texturePool),
- });
- }
-
  const [buffer, legacyObject] = this.updateUniform(
  canvas,
  camera,
  shouldRenderGrid,
  swapChain,
  );
- this.gpuResources.set(camera, {
- ...this.gpuResources.get(camera),
+ this.renderers.set(camera, {
+ ...this.renderers.get(camera),
  uniformLegacyObject: legacyObject,
  });
 
- const { uniformBuffer, uniformLegacyObject, gridRenderer, batchManager } =
- this.gpuResources.get(camera);
-
  uniformBuffer.setSubData(0, new Uint8Array(buffer.buffer));
 
  device.beginFrame();
@@ -326,15 +345,23 @@ export class MeshPipeline extends System {
 
  gridRenderer.render(device, renderPass, uniformBuffer, uniformLegacyObject);
 
- if (this.pendingRenderables.has(camera)) {
- this.pendingRenderables.get(camera).forEach(({ type, entity }) => {
- if (type === 'remove') {
- batchManager.remove(entity, !entity.has(Culled));
- } else {
- batchManager.add(entity);
- }
+ if (shouldRenderPartially) {
+ const { api } = canvas.read(Canvas);
+ nodes.forEach((node: SerializedNode) => {
+ const entity = api.getEntity(node);
+ batchManager.add(entity);
  });
- this.pendingRenderables.delete(camera);
+ } else {
+ if (this.pendingRenderables.has(camera)) {
+ this.pendingRenderables.get(camera).forEach(({ type, entity }) => {
+ if (type === 'remove') {
+ batchManager.remove(entity, !entity.has(Culled));
+ } else {
+ batchManager.add(entity);
+ }
+ });
+ this.pendingRenderables.delete(camera);
+ }
  }
 
  if (sort) {
@@ -351,6 +378,7 @@ export class MeshPipeline extends System {
  encoderOptions,
  );
  this.setScreenshotTrigger(canvas, dataURL, download);
+ batchManager.showUIs();
  }
  }
 
@@ -476,7 +504,7 @@ export class MeshPipeline extends System {
  }
 
  finalize() {
- this.gpuResources.forEach(({ gridRenderer, batchManager }) => {
+ this.renderers.forEach(({ gridRenderer, batchManager }) => {
  gridRenderer.destroy();
  batchManager.clear();
  batchManager.destroy();

packages/ecs/src/systems/SetupDevice.ts

@@ -26,6 +26,7 @@ export class SetupDevice extends System {
  * Used for rendering and exporting the shapes in canvas to image(PNG, JPEG, etc.).
  */
  #offscreenElement: HTMLCanvasElement | OffscreenCanvas;
+ #offscreenGPUResource: GPUResource;
 
  constructor() {
  super();
@@ -41,6 +42,10 @@ export class SetupDevice extends System {
  yield;
  }
 
+ getOffscreenGPUResource() {
+ return this.#offscreenGPUResource;
+ }
+
  execute() {
  this.canvases.added.forEach(async (canvas) => {
  if (!canvas.has(Theme)) {
@@ -62,16 +67,19 @@ export class SetupDevice extends System {
 
  if (!this.#offscreenElement && isBrowser) {
  this.#offscreenElement = document.createElement('canvas');
- this.#offscreenElement.width = width;
- this.#offscreenElement.height = height;
- await this.createGPUResource(
- renderer,
- shaderCompilerPath,
- this.#offscreenElement,
- width,
- height,
- devicePixelRatio,
- );
+ this.#offscreenElement.width = width * devicePixelRatio;
+ this.#offscreenElement.height = height * devicePixelRatio;
+ this.#offscreenGPUResource = {
+ ...(await this.createGPUResource(
+ renderer,
+ shaderCompilerPath,
+ this.#offscreenElement,
+ width,
+ height,
+ devicePixelRatio,
+ )),
+ texturePool: this.#texturePool,
+ };
  }
 
  const holder = canvas.hold();

packages/webcomponents/examples/main.ts

@@ -283,7 +283,7 @@ canvas.addEventListener(Event.READY, async (e) => {
  checkboardStyle: CheckboardStyle.GRID,
  snapToPixelGridEnabled: true,
  snapToPixelGridSize: 1,
- snapToObjectsEnabled: true,
+ // snapToObjectsEnabled: true,
  // checkboardStyle: CheckboardStyle.NONE,
  // penbarSelected: Pen.SELECT,
  // topbarVisible: false,