feat: support multiple render target (#43)

* feat: support multiple render targets #42

* chore: split utils

* chore: commit changeset

.changeset/nasty-eggs-unite.md

@@ -0,0 +1,5 @@
+---
+'@antv/g-device-api': minor
+---
+
+Support multiple render targets.

examples/demos/add-2-vectors.ts

@@ -1,13 +1,4 @@
-import {
-  DeviceContribution,
-  VertexStepMode,
-  Format,
-  TransparentWhite,
-  Buffer,
-  Bindings,
-  BufferUsage,
-} from '../../src';
-import { initExample } from './utils';
+import { DeviceContribution, BufferUsage } from '../../src';
 
 /**
  * Use Compute Shader with WebGPU
@@ -94,9 +85,7 @@ export async function render(
   };
 }
 
-export async function Add2Vectors($container: HTMLDivElement) {
-  return initExample($container, render, {
-    targets: ['webgpu'],
-    default: 'webgpu',
-  });
-}
+render.params = {
+  targets: ['webgpu'],
+  default: 'webgpu',
+};

examples/demos/ar-three.ts

@@ -1,5 +1,4 @@
 import { ARButton } from 'three/examples/jsm/webxr/ARButton';
-import { initExample } from './utils';
 import { DeviceContribution } from '../../src';
 import {
   AmbientLight,
@@ -65,10 +64,8 @@ export async function render(
   return () => {};
 }
 
-export async function ARThree($container: HTMLDivElement) {
-  return initExample($container, render, {
-    targets: ['webgl1', 'webgl2'],
-    xrCompatible: true,
-    default: 'webgl1',
-  });
-}
+render.params = {
+  targets: ['webgl1', 'webgl2'],
+  xrCompatible: true,
+  default: 'webgl1',
+};

examples/demos/ar.ts

@@ -13,7 +13,6 @@ import {
   CompareFunction,
   TransparentWhite,
 } from '../../src';
-import { initExample } from './utils';
 import { vec3, mat4, quat } from 'gl-matrix';
 import {
   cubeVertexArray,
@@ -279,10 +278,8 @@ export async function render(
   };
 }
 
-export async function AR($container: HTMLDivElement) {
-  return initExample($container, render, {
-    targets: ['webgl1', 'webgl2'],
-    xrCompatible: true,
-    default: 'webgl2',
-  });
-}
+render.params = {
+  targets: ['webgl1', 'webgl2'],
+  xrCompatible: true,
+  default: 'webgl2',
+};

examples/demos/blit.ts

@@ -13,7 +13,6 @@ import {
   TransparentBlack,
   CompareFunction,
 } from '../../src';
-import { initExample } from './utils';
 import { vec3, mat4 } from 'gl-matrix';
 import {
   cubeVertexArray,
@@ -234,9 +233,7 @@ void main() {
   };
 }
 
-export async function Blit($container: HTMLDivElement) {
-  return initExample($container, render, {
-    targets: ['webgl1', 'webgl2', 'webgpu'],
-    default: 'webgl2',
-  });
-}
+render.params = {
+  targets: ['webgl1', 'webgl2', 'webgpu'],
+  default: 'webgl2',
+};

examples/demos/compute-boids.ts

@@ -7,7 +7,6 @@ import {
   Bindings,
   BufferUsage,
 } from '../../src';
-import { initExample } from './utils';
 
 /**
  * Use Compute Shader with WebGPU
@@ -350,9 +349,7 @@ fn main(@builtin(global_invocation_id) GlobalInvocationID : vec3<u32>) {
   };
 }
 
-export async function ComputeBoids($container: HTMLDivElement) {
-  return initExample($container, render, {
-    targets: ['webgpu'],
-    default: 'webgpu',
-  });
-}
+render.params = {
+  targets: ['webgpu'],
+  default: 'webgpu',
+};

examples/demos/cubemap.ts

@@ -17,7 +17,7 @@ import {
   MipmapFilterMode,
   TextureDimension,
 } from '../../src';
-import { initExample, loadImage } from './utils';
+import { loadImage } from '../utils/image';
 import { vec3, mat4 } from 'gl-matrix';
 import {
   cubeVertexArray,
@@ -314,9 +314,7 @@ void main() {
   };
 }
 
-export async function Cubemap($container: HTMLDivElement) {
-  return initExample($container, render, {
-    targets: ['webgl1', 'webgl2', 'webgpu'],
-    default: 'webgl2',
-  });
-}
+render.params = {
+  targets: ['webgl1', 'webgl2', 'webgpu'],
+  default: 'webgl2',
+};

examples/demos/draw-index.ts

@@ -7,7 +7,6 @@ import {
   BufferFrequencyHint,
   TextureUsage,
 } from '../../src';
-import { initExample } from './utils';
 
 export async function render(
   deviceContribution: DeviceContribution,
@@ -142,9 +141,7 @@ void main() {
   };
 }
 
-export async function DrawIndex($container: HTMLDivElement) {
-  return initExample($container, render, {
-    targets: ['webgl1', 'webgl2', 'webgpu'],
-    default: 'webgl2',
-  });
-}
+render.params = {
+  targets: ['webgl1', 'webgl2', 'webgpu'],
+  default: 'webgl2',
+};

examples/demos/index.ts

@@ -1,17 +1,18 @@
-export { PrimitiveTopologyPoints } from './primitive-topology-points';
-export { PrimitiveTopologyTriangles } from './primitive-topology-triangles';
-export { DrawIndex } from './draw-index';
-export { MSAA } from './msaa';
-export { Blit } from './blit';
-export { RotatingCube } from './rotating-cube';
-export { Stencil } from './stencil';
-export { Scissor } from './scissor';
-export { TwoCubes } from './two-cubes';
-export { TexturedCube } from './textured-cube';
-export { Sampler } from './sampler';
-export { InstancedCubes } from './instanced-cubes';
-export { Cubemap } from './cubemap';
-export { Add2Vectors } from './add-2-vectors';
-export { ComputeBoids } from './compute-boids';
-export { AR } from './ar';
-export { ARThree } from './ar-three';
+export { render as PrimitiveTopologyPoints } from './primitive-topology-points';
+export { render as PrimitiveTopologyTriangles } from './primitive-topology-triangles';
+export { render as DrawIndex } from './draw-index';
+export { render as MSAA } from './msaa';
+export { render as MultipleRenderTargets } from './multiple-render-targets';
+export { render as Blit } from './blit';
+export { render as RotatingCube } from './rotating-cube';
+export { render as Stencil } from './stencil';
+export { render as Scissor } from './scissor';
+export { render as TwoCubes } from './two-cubes';
+export { render as TexturedCube } from './textured-cube';
+export { render as Sampler } from './sampler';
+export { render as InstancedCubes } from './instanced-cubes';
+export { render as Cubemap } from './cubemap';
+export { render as Add2Vectors } from './add-2-vectors';
+export { render as ComputeBoids } from './compute-boids';
+export { render as AR } from './ar';
+export { render as ARThree } from './ar-three';

examples/demos/instanced-cubes.ts

@@ -13,7 +13,6 @@ import {
   CompareFunction,
   CullMode,
 } from '../../src';
-import { initExample } from './utils';
 import { vec3, mat4 } from 'gl-matrix';
 import {
   cubeVertexArray,
@@ -277,9 +276,7 @@ void main() {
   };
 }
 
-export async function InstancedCubes($container: HTMLDivElement) {
-  return initExample($container, render, {
-    targets: ['webgl2', 'webgpu'],
-    default: 'webgl2',
-  });
-}
+render.params = {
+  targets: ['webgl2', 'webgpu'],
+  default: 'webgl2',
+};

examples/demos/msaa.ts

@@ -6,7 +6,6 @@ import {
   BufferUsage,
   BufferFrequencyHint,
 } from '../../src';
-import { initExample } from './utils';
 
 export async function render(
   deviceContribution: DeviceContribution,
@@ -131,9 +130,7 @@ void main() {
   };
 }
 
-export async function MSAA($container: HTMLDivElement) {
-  return initExample($container, render, {
-    targets: ['webgl2', 'webgpu'],
-    default: 'webgl2',
-  });
-}
+render.params = {
+  targets: ['webgl2', 'webgpu'],
+  default: 'webgl2',
+};