Shader entry points and create*Pipeline API

[iwoplaza]

Entry functions

Compute entry functions

const computeMain = tgpu
  .computeFn([1])
  .does(() => {
    // ...
  });

Vertex & Fragment entry functions

const vertexMain = tgpu
  .vertexFn([], builtin.position)
  .does(() => {
    // ...
  });

const fragmentMain = tgpu
  .fragmentFn([d.vec4f], vec4f)
  .does(() => {
    // ...
  });

Pipelines

createComputePipeline

const computePipeline = root
  .with(size, 16) // adding constants (giving slots values)
  .withCompute(compute_main) // applying a compute stage
  .createPipeline();

// Executing

computePipeline
  .with(layout0, bindGroup0)
  .dispatchWorkgroups(32);

createRenderPipeline

type TgpuRenderPassColorAttachment = {
  /**
   * A view describing the texture that will be output to for this color attachment.
   */
  view: GPUTextureView;
  /**
   * Indicates the depth slice index of "3d" view that will be output to for this color
   * attachment.
   */
  depthSlice?: number;
  /** 
   * A view describing the texture that will receive the resolved output for this color
   * attachment if `view` is multisampled.
   */
  resolveTarget?: GPUTextureView;

  clearValue?: color;
  loadOp: GPULoadOp;
  storeOp: GPUStoreOp;
};

const renderPipeline = root
  .with(size, 16) // adding constants (giving slots values)
  .withVertex(vertex_main, [attrib.a, attrib.b]) // applying a vertex stage
  .withFragment(fragment_main)  // applying a fragment stage (optional)
  .withPrimitive({ topology: 'triangle-list' }) // (optional)
  .withDepthStepcil(...) // (optional)
  .withMultisample(...) // (optional)
  .createPipeline({ format: presentationFormat });

renderPipeline.draw({
  colorAttachments: {
    
  },
});

Example

import { compute_main, vertex_main, fragment_main, size } from './shader.js';

const root = await tgpu.init();

const computePipeline = root
  .with(size, 16)
  .withCompute(compute_main)
  .createPipeline();

const renderPipeline = root
  .with(size, 16)
  .withVertex(vertex_main, [attrib.a, attrib.b])
  .withFragment(fragment_main)
  .createPipeline({ format: presentationFormat });

// Executing

computePipeline
  .with(layout0, bindGroup0)
  .dispatchWorkgroups(32);