chore: layer separation

Author: xiaoiver

packages/ecs/src/components/renderable/Filter.ts

@@ -0,0 +1,9 @@
+import { field, Type } from '@lastolivegames/becsy';
+
+export class Filter {
+ @field({ type: Type.object, default: '' }) declare filter: string;
+
+ constructor(props?: Partial<Filter>) {
+ Object.assign(this, props);
+ }
+}

packages/ecs/src/components/renderable/index.ts

@@ -21,3 +21,4 @@ export * from './TextDecoration';
 export * from './Marker';
 export * from './LockAspectRatio';
 export * from './Editable';
+export * from './Filter';

packages/ecs/src/drawcalls/Drawcall.ts

@@ -11,6 +11,7 @@ import {
  BufferFrequencyHint,
  VertexStepMode,
  Format,
+ SwapChain,
 } from '@antv/g-device-api';
 import { Entity } from '@lastolivegames/becsy';
 import { RenderCache, uid } from '../utils';
@@ -21,6 +22,7 @@ import {
  FillImage,
  FillPattern,
  FillTexture,
+ Filter,
  Wireframe,
 } from '../components';
 
@@ -69,6 +71,7 @@ export abstract class Drawcall {
 
  constructor(
  protected device: Device,
+ protected swapChain: SwapChain,
  protected renderCache: RenderCache,
  protected texturePool: TexturePool,
  protected instanced: boolean,
@@ -165,11 +168,13 @@ export abstract class Drawcall {
  }
 
  protected get useFillImage() {
- return this.shapes[0]?.hasSomeOf(
- FillImage,
- FillTexture,
- FillGradient,
- FillPattern,
+ return (
+ this.shapes[0]?.hasSomeOf(
+ FillImage,
+ FillTexture,
+ FillGradient,
+ FillPattern,
+ ) || this.shapes[0]?.has(Filter)
  );
  }
 

packages/ecs/src/drawcalls/SDF.ts

@@ -17,11 +17,18 @@ import {
  TransparentBlack,
  Texture,
  StencilOp,
+ TransparentWhite,
+ Program,
+ RenderPipeline,
+ InputLayout,
+ RenderTarget,
 } from '@antv/g-device-api';
 import { mat3 } from 'gl-matrix';
 import { Entity } from '@lastolivegames/becsy';
 import { Drawcall, ZINDEX_FACTOR } from './Drawcall';
 import { vert, frag, Location } from '../shaders/sdf';
+import { vert as postProcessingVert } from '../shaders/post-processing/vert';
+import { frag as brightness } from '../shaders/post-processing/brightness';
 import { paddingMat3, parseColor, parseGradient } from '../utils';
 import {
  Circle,
@@ -41,6 +48,7 @@ import {
  SizeAttenuation,
  StrokeAttenuation,
  Stroke,
+ Filter,
 } from '../components';
 
 const strokeAlignmentMap = {
@@ -55,6 +63,15 @@ export class SDF extends Drawcall {
  #uniformBuffer: Buffer;
  #texture: Texture;
 
+ #filterProgram: Program;
+ #filterPipeline: RenderPipeline;
+ #filterInputLayout: InputLayout;
+ #filterVertexBuffer: Buffer;
+ #filterTexture: Texture;
+ #filterRenderTarget: RenderTarget;
+ #filterTextureWidth: number;
+ #filterTextureHeight: number;
+
  static useDash(shape: Entity) {
  const { dasharray } = shape.has(Stroke)
  ? shape.read(Stroke)
@@ -96,6 +113,10 @@ export class SDF extends Drawcall {
  return false;
  }
 
+ if (this.shapes[0].has(Filter) || shape.has(Filter)) {
+ return false;
+ }
+
  return true;
  }
 
@@ -300,44 +321,122 @@ export class SDF extends Drawcall {
 
  const instance = this.shapes[0];
 
- if (instance.has(FillGradient) || instance.has(FillPattern)) {
- const { minX, minY, maxX, maxY } =
- instance.read(ComputedBounds).geometryBounds;
- const width = maxX - minX;
- const height = maxY - minY;
-
- const canvas = instance.has(FillPattern)
- ? this.texturePool.getOrCreatePattern({
- pattern: instance.read(FillPattern),
- width,
- height,
- })
- : this.texturePool.getOrCreateGradient({
- gradients: parseGradient(instance.read(FillGradient).value),
- min: [minX, minY],
- width,
- height,
- });
- const texture = this.device.createTexture({
+ if (instance.has(Filter)) {
+ let width = 0;
+ let height = 0;
+ if (this.shapes[0].has(Rect)) {
+ const { minX, minY, maxX, maxY } = Rect.getGeometryBounds(
+ this.shapes[0].read(Rect),
+ );
+ width = maxX - minX;
+ height = maxY - minY;
+ }
+ this.#filterTextureWidth = width;
+ this.#filterTextureHeight = height;
+ this.#filterTexture = this.device.createTexture({
  format: Format.U8_RGBA_NORM,
- width: 128,
- height: 128,
- usage: TextureUsage.SAMPLED,
+ width,
+ height,
+ usage: TextureUsage.RENDER_TARGET,
  });
- texture.setImageData([canvas]);
- this.#texture = texture;
- } else if (instance.has(FillTexture)) {
- this.#texture = instance.read(FillTexture).value;
- } else if (instance.has(FillImage)) {
- const src = instance.read(FillImage).src as ImageBitmap;
- const texture = this.device.createTexture({
- format: Format.U8_RGBA_NORM,
- width: src.width,
- height: src.height,
- usage: TextureUsage.SAMPLED,
+
+ this.#filterRenderTarget = this.device.createRenderTargetFromTexture(
+ this.#filterTexture,
+ );
+
+ const diagnosticDerivativeUniformityHeader =
+ this.device.queryVendorInfo().platformString === 'WebGPU'
+ ? 'diagnostic(off,derivative_uniformity);\n'
+ : '';
+
+ this.#filterProgram = this.renderCache.createProgram({
+ vertex: {
+ glsl: postProcessingVert,
+ },
+ fragment: {
+ glsl: brightness,
+ postprocess: (fs) => diagnosticDerivativeUniformityHeader + fs,
+ },
+ });
+
+ this.#filterVertexBuffer = this.device.createBuffer({
+ viewOrSize: new Float32Array([
+ 0, 0.5, -1, -1, -0.5, -0.5, -1, 1, 0.5, -0.5, 1, 1,
+ ]),
+ usage: BufferUsage.VERTEX,
+ hint: BufferFrequencyHint.DYNAMIC,
  });
- texture.setImageData([src]);
- this.#texture = texture;
+
+ this.#filterInputLayout = this.device.createInputLayout({
+ vertexBufferDescriptors: [
+ {
+ arrayStride: 4 * 4,
+ stepMode: VertexStepMode.VERTEX,
+ attributes: [
+ {
+ shaderLocation: 0,
+ offset: 0,
+ format: Format.F32_RG,
+ },
+ {
+ shaderLocation: 1,
+ offset: 4 * 2,
+ format: Format.F32_RG,
+ },
+ ],
+ },
+ ],
+ indexBufferFormat: null,
+ program: this.#filterProgram,
+ });
+
+ this.#filterPipeline = this.device.createRenderPipeline({
+ inputLayout: this.#filterInputLayout,
+ program: this.#filterProgram,
+ colorAttachmentFormats: [Format.U8_RGBA_NORM],
+ });
+
+ this.#texture = this.#filterTexture;
+ } else {
+ if (instance.has(FillGradient) || instance.has(FillPattern)) {
+ const { minX, minY, maxX, maxY } =
+ instance.read(ComputedBounds).geometryBounds;
+ const width = maxX - minX;
+ const height = maxY - minY;
+
+ const canvas = instance.has(FillPattern)
+ ? this.texturePool.getOrCreatePattern({
+ pattern: instance.read(FillPattern),
+ width,
+ height,
+ })
+ : this.texturePool.getOrCreateGradient({
+ gradients: parseGradient(instance.read(FillGradient).value),
+ min: [minX, minY],
+ width,
+ height,
+ });
+ const texture = this.device.createTexture({
+ format: Format.U8_RGBA_NORM,
+ width: 128,
+ height: 128,
+ usage: TextureUsage.SAMPLED,
+ });
+ texture.setImageData([canvas]);
+ this.#texture = texture;
+ } else if (instance.has(FillTexture)) {
+ this.#texture = instance.read(FillTexture).value;
+ } else if (instance.has(FillImage)) {
+ const src = instance.read(FillImage).src as ImageBitmap;
+ const texture = this.device.createTexture({
+ format: Format.U8_RGBA_NORM,
+ width: src.width,
+ height: src.height,
+ usage: TextureUsage.SAMPLED,
+ });
+ texture.setImageData([src]);
+ this.#texture = texture;
+ }
  }
 
  const sampler = this.renderCache.createSampler({
@@ -364,6 +463,8 @@ export class SDF extends Drawcall {
  renderPass: RenderPass,
  sceneUniformLegacyObject: Record<string, unknown>,
  ) {
+ const hasFilter = this.shapes[0].has(Filter);
+
  if (this.instanced) {
  const instancedData: number[] = [];
  this.shapes.forEach((shape, i, total) => {
@@ -410,13 +511,6 @@ export class SDF extends Drawcall {
  matrix.m22,
  ] as mat3;
 
- // if (this.shapes[0].has(Rect)) {
- // const { x, width } = this.shapes[0].read(Rect);
- // const { children } = (this.shapes[0].has(Parent) &&
- // this.shapes[0].read(Parent)) || { children: [] };
- // console.log(children.length, x, width, matrix.m20);
- // }
-
  this.#uniformBuffer.setSubData(
  0,
  new Uint8Array(
@@ -440,6 +534,35 @@ export class SDF extends Drawcall {
  this.generateWireframe();
  }
 
+ if (hasFilter) {
+ console.log('filter');
+ const filterRenderPass = this.device.createRenderPass({
+ colorAttachment: [this.#filterRenderTarget],
+ colorResolveTo: [null],
+ colorClearColor: [TransparentWhite],
+ colorStore: [true],
+ depthStencilAttachment: null,
+ depthStencilResolveTo: null,
+ });
+ // this.program.setUniformsLegacy(sceneUniformLegacyObject);
+ filterRenderPass.setViewport(
+ 0,
+ 0,
+ this.#filterTextureWidth,
+ this.#filterTextureHeight,
+ );
+ filterRenderPass.setPipeline(this.#filterPipeline);
+ filterRenderPass.setVertexInput(
+ this.#filterInputLayout,
+ [{ buffer: this.#filterVertexBuffer }],
+ null,
+ );
+ filterRenderPass.draw(3);
+ this.device.submitPass(filterRenderPass);
+ const { width, height } = this.swapChain.getCanvas();
+ renderPass.setViewport(0, 0, width, height);
+ }
+
  this.program.setUniformsLegacy(sceneUniformLegacyObject);
  renderPass.setPipeline(this.pipeline);
 

packages/ecs/src/history/ElementsChange.ts

@@ -46,6 +46,7 @@ import {
  HTML,
  Embed,
  Editable,
+ Filter,
 } from '../components';
 
 export type SceneElementsMap = Map<SerializedNode['id'], SerializedNode>;
@@ -635,6 +636,7 @@ export const mutateElement = <TElement extends Mutable<SerializedNode>>(
  lockAspectRatio,
  editable,
  isEditing,
+ filter,
  } = updates as unknown as SerializedNodeAttributes;
 
  if (!isNil(name)) {
@@ -926,6 +928,10 @@ export const mutateElement = <TElement extends Mutable<SerializedNode>>(
  entity.write(Editable).isEditing = !!isEditing;
  }
 
+ if (!isNil(filter)) {
+ safeAddComponent(entity, Filter, { filter });
+ }
+
  if (isNil(element.version)) {
  element.version = 0;
  }

packages/ecs/src/plugins/Renderer.ts

@@ -60,6 +60,7 @@ import {
  Line,
  LockAspectRatio,
  Editable,
+ Filter,
 } from '../components';
 
 export const RendererPlugin: Plugin = () => {
@@ -97,6 +98,7 @@ export const RendererPlugin: Plugin = () => {
  component(Font);
  component(TextDecoration);
  component(Marker);
+ component(Filter);
 
  /**
  * Geometry

packages/ecs/src/shaders/post-processing/brightness.ts

@@ -0,0 +1,10 @@
+export const frag = /* wgsl */ `
+
+in vec2 v_Uv;
+
+out vec4 outputColor;
+
+void main() {
+ outputColor = vec4(0.0, 1.0, 0.0, 1.0);
+}
+`;

packages/ecs/src/shaders/post-processing/vert.ts

@@ -0,0 +1,16 @@
+export enum Location {
+ POSITION = 0,
+ UV = 1,
+}
+
+export const vert = /* wgsl */ `
+layout(location = ${Location.POSITION}) in vec2 a_Position;
+layout(location = ${Location.UV}) in vec2 a_Uv;
+
+out vec2 v_Uv;
+
+void main() {
+ v_Uv = a_Uv;
+ gl_Position = vec4(a_Position, 0.0, 1.0);
+}
+`;