fix: support stencil union, intersection and mask #184

__tests__/integration/stencil-intersection.spec.ts

@@ -0,0 +1,26 @@
+import _gl from 'gl';
+import { getWebGLDeviceContributionAndCanvas } from '../utils';
+import { render } from '../../examples/demos/stencil-intersection';
+import '../useSnapshotMatchers';
+
+describe('Stencil Intersection Operation', () => {
+  it('should render correctly.', async () => {
+    const [webGLDeviceContribution, $canvas] =
+      getWebGLDeviceContributionAndCanvas();
+
+    const disposeCallback = await render(
+      webGLDeviceContribution,
+      $canvas,
+      false,
+    );
+
+    const dir = `${__dirname}/snapshots`;
+
+    expect($canvas.getContext('webgl1')).toMatchWebGLSnapshot(
+      dir,
+      'stencil-intersection',
+    );
+
+    disposeCallback();
+  });
+});

__tests__/integration/stencil-mask.spec.ts

@@ -0,0 +1,26 @@
+import _gl from 'gl';
+import { getWebGLDeviceContributionAndCanvas } from '../utils';
+import { render } from '../../examples/demos/stencil-mask';
+import '../useSnapshotMatchers';
+
+describe('Stencil Mask', () => {
+  it('should render correctly.', async () => {
+    const [webGLDeviceContribution, $canvas] =
+      getWebGLDeviceContributionAndCanvas();
+
+    const disposeCallback = await render(
+      webGLDeviceContribution,
+      $canvas,
+      false,
+    );
+
+    const dir = `${__dirname}/snapshots`;
+
+    expect($canvas.getContext('webgl1')).toMatchWebGLSnapshot(
+      dir,
+      'stencil-mask',
+    );
+
+    disposeCallback();
+  });
+});

__tests__/integration/stencil-union.spec.ts

@@ -0,0 +1,26 @@
+import _gl from 'gl';
+import { getWebGLDeviceContributionAndCanvas } from '../utils';
+import { render } from '../../examples/demos/stencil-union';
+import '../useSnapshotMatchers';
+
+describe('Stencil Union Operation', () => {
+  it('should render correctly.', async () => {
+    const [webGLDeviceContribution, $canvas] =
+      getWebGLDeviceContributionAndCanvas();
+
+    const disposeCallback = await render(
+      webGLDeviceContribution,
+      $canvas,
+      false,
+    );
+
+    const dir = `${__dirname}/snapshots`;
+
+    expect($canvas.getContext('webgl1')).toMatchWebGLSnapshot(
+      dir,
+      'stencil-union',
+    );
+
+    disposeCallback();
+  });
+});

examples/demos/index.ts

@@ -12,6 +12,9 @@ export { render as CanvasGradient } from './canvas-gradient';
 export { render as RotatingCube } from './rotating-cube';
 export { render as NestedRenderPass } from './nested-render-pass';
 export { render as Stencil } from './stencil';
+export { render as StencilMask } from './stencil-mask';
+export { render as StencilUnion } from './stencil-union';
+export { render as StencilIntersection } from './stencil-intersection';
 export { render as Scissor } from './scissor';
 export { render as TwoCubes } from './two-cubes';
 export { render as TexturedCube } from './textured-cube';