fix: set default offset of IndexBuffer

.changeset/grumpy-jokes-hear.md

@@ -0,0 +1,5 @@
+---
+'@strawberry-vis/g-device-api': patch
+---
+
+Set default offset of IndexBuffer.

.changeset/silver-feet-poke.md

@@ -0,0 +1,5 @@
+---
+'@strawberry-vis/g-device-api': minor
+---
+
+Support stencil front & back.

__tests__/integration/stencil.spec.ts

@@ -0,0 +1,23 @@
+import _gl from 'gl';
+import { getWebGLDeviceContributionAndCanvas } from '../utils';
+import { render } from '../../examples/demos/stencil';
+import '../useSnapshotMatchers';
+
+describe('Stencil', () => {
+  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');
+
+    disposeCallback();
+  });
+});

examples/demos/draw-index.ts

@@ -0,0 +1,150 @@
+import {
+  DeviceContribution,
+  VertexStepMode,
+  Format,
+  TransparentWhite,
+  BufferUsage,
+  BufferFrequencyHint,
+  TextureUsage,
+} from '../../src';
+import { initExample } from './utils';
+
+export async function render(
+  deviceContribution: DeviceContribution,
+  $canvas: HTMLCanvasElement,
+  useRAF = true,
+) {
+  // create swap chain and get device
+  const swapChain = (await deviceContribution.createSwapChain($canvas))!;
+  // TODO: resize
+  swapChain.configureSwapChain($canvas.width, $canvas.height);
+  const device = swapChain.getDevice();
+
+  const program = device.createProgram({
+    vertex: {
+      glsl: `
+layout(location = 0) in vec2 a_Position;
+
+void main() {
+  gl_Position = vec4(a_Position, 0.0, 1.0);
+} 
+`,
+    },
+    fragment: {
+      glsl: `
+out vec4 outputColor;
+
+void main() {
+  outputColor = vec4(1.0, 0.0, 0.0, 1.0);
+}
+`,
+    },
+  });
+
+  const vertexBuffer = device.createBuffer({
+    viewOrSize: new Float32Array([0, 0.5, -0.5, -0.5, 0.5, -0.5]),
+    usage: BufferUsage.VERTEX,
+    hint: BufferFrequencyHint.DYNAMIC,
+  });
+  device.setResourceName(vertexBuffer, 'a_Position');
+
+  const indexBuffer = device.createBuffer({
+    viewOrSize: new Uint32Array([0, 1, 2]),
+    usage: BufferUsage.INDEX,
+    hint: BufferFrequencyHint.STATIC,
+  });
+
+  const inputLayout = device.createInputLayout({
+    vertexBufferDescriptors: [
+      {
+        arrayStride: 4 * 2,
+        stepMode: VertexStepMode.VERTEX,
+        attributes: [
+          {
+            shaderLocation: 0,
+            offset: 0,
+            format: Format.F32_RG,
+          },
+        ],
+      },
+    ],
+    indexBufferFormat: Format.U32_R,
+    program,
+  });
+
+  const pipeline = device.createRenderPipeline({
+    inputLayout,
+    program,
+    colorAttachmentFormats: [Format.U8_RGBA_RT],
+  });
+
+  const renderTarget = device.createRenderTargetFromTexture(
+    device.createTexture({
+      format: Format.U8_RGBA_RT,
+      width: $canvas.width,
+      height: $canvas.height,
+      usage: TextureUsage.RENDER_TARGET,
+    }),
+  );
+  device.setResourceName(renderTarget, 'Main Render Target');
+
+  let id: number;
+  const frame = () => {
+    /**
+     * An application should call getCurrentTexture() in the same task that renders to the canvas texture.
+     * Otherwise, the texture could get destroyed by these steps before the application is finished rendering to it.
+     */
+    const onscreenTexture = swapChain.getOnscreenTexture();
+
+    const renderPass = device.createRenderPass({
+      colorAttachment: [renderTarget],
+      colorResolveTo: [onscreenTexture],
+      colorClearColor: [TransparentWhite],
+    });
+
+    renderPass.setPipeline(pipeline);
+    renderPass.setVertexInput(
+      inputLayout,
+      [
+        {
+          buffer: vertexBuffer,
+        },
+      ],
+      {
+        buffer: indexBuffer,
+      },
+    );
+    renderPass.setViewport(0, 0, $canvas.width, $canvas.height);
+    renderPass.draw(3);
+
+    device.submitPass(renderPass);
+    if (useRAF) {
+      id = requestAnimationFrame(frame);
+    }
+  };
+
+  frame();
+
+  return () => {
+    if (useRAF && id) {
+      cancelAnimationFrame(id);
+    }
+    program.destroy();
+    vertexBuffer.destroy();
+    indexBuffer.destroy();
+    inputLayout.destroy();
+    pipeline.destroy();
+    renderTarget.destroy();
+    device.destroy();
+
+    // For debug.
+    device.checkForLeaks();
+  };
+}
+
+export async function DrawIndex($container: HTMLDivElement) {
+  return initExample($container, render, {
+    targets: ['webgl1', 'webgl2', 'webgpu'],
+    default: 'webgl2',
+  });
+}

examples/demos/index.ts

@@ -1,7 +1,9 @@
 export { PrimitiveTopologyPoints } from './primitive-topology-points';
 export { PrimitiveTopologyTriangles } from './primitive-topology-triangles';
+export { DrawIndex } from './draw-index';
 export { MSAA } from './msaa';
 export { RotatingCube } from './rotating-cube';
+export { Stencil } from './stencil';
 export { TwoCubes } from './two-cubes';
 export { TexturedCube } from './textured-cube';
 export { Sampler } from './sampler';