Ampandheaust
d34722d66d
Amp-Thread-ID: https://ampcode.com/threads/T-01a01380-b478-77d0-84a0-102880a5c5ae Co-authored-by: Heaust Azure <heaust.azure@gmail.com>
102 lines
2.6 KiB
Markdown
102 lines
2.6 KiB
Markdown
# Pipeline and loadout recipes
|
|
|
|
WGSL belongs to a graph package or your application. Core contains no scene program.
|
|
|
|
## 05 — Attach the default pipelines
|
|
|
|
The optional package exports plain declarations, so copy only the programs your graph uses.
|
|
|
|
```js
|
|
import { defaultPipelines } from "@yawn/default-pipelines";
|
|
import { RenderGraph } from "@yawn/render-graph-js";
|
|
|
|
const graph = new RenderGraph("default_programs", 1);
|
|
for (const pipeline of defaultPipelines.render) {
|
|
graph.renderPipeline(pipeline);
|
|
}
|
|
for (const pipeline of defaultPipelines.compute) {
|
|
graph.computePipeline(pipeline);
|
|
}
|
|
const ast = graph.ast();
|
|
```
|
|
|
|
## 06 — Supply a custom render pipeline
|
|
|
|
Put source and entry points in the graph declaration. The shader must honor the scene ABI expected by the executor that uses it.
|
|
|
|
```js
|
|
const shader = /* wgsl */ `
|
|
@group(1) @binding(0) var<uniform> view_projection: mat4x4<f32>;
|
|
struct Input {
|
|
@location(0) position: vec3<f32>,
|
|
@location(3) model_0: vec4<f32>,
|
|
@location(4) model_1: vec4<f32>,
|
|
@location(5) model_2: vec4<f32>,
|
|
@location(6) model_3: vec4<f32>,
|
|
}
|
|
@vertex fn vertex_main(input: Input) -> @builtin(position) vec4<f32> {
|
|
let model = mat4x4<f32>(
|
|
input.model_0,
|
|
input.model_1,
|
|
input.model_2,
|
|
input.model_3,
|
|
);
|
|
return view_projection * model * vec4(input.position, 1.0);
|
|
}
|
|
@fragment fn fragment_main() -> @location(0) vec4<f32> {
|
|
return vec4(0.2, 0.7, 1.0, 1.0);
|
|
}`;
|
|
|
|
const ast = new RenderGraph("custom_render_program", 1)
|
|
.renderPipeline({
|
|
name: "scene",
|
|
shader,
|
|
vertexEntry: "vertex_main",
|
|
fragmentEntry: "fragment_main",
|
|
doubleSided: false,
|
|
})
|
|
.ast();
|
|
```
|
|
|
|
## 07 — Supply a compute pipeline
|
|
|
|
Dispatch dimensions are graph data and are allocated with the rest of the loadout.
|
|
|
|
```js
|
|
const shader = /* wgsl */ `
|
|
@compute @workgroup_size(8, 1, 1)
|
|
fn initialize() {}
|
|
`;
|
|
|
|
const ast = new RenderGraph("compute_program", 1)
|
|
.computePipeline({
|
|
name: "initialize",
|
|
shader,
|
|
entry: "initialize",
|
|
dispatch: [4, 1, 1],
|
|
})
|
|
.ast();
|
|
```
|
|
|
|
## 08 — Compile and switch
|
|
|
|
Compile first, then activate the prepared ID. Drop a candidate when your surrounding transaction fails.
|
|
|
|
```js
|
|
import { loadGraph } from "@yawn/render-graph-js";
|
|
|
|
const compiled = await loadGraph(core, graph);
|
|
try {
|
|
await core.switchCompiledGraph(compiled.compiledId);
|
|
} catch (error) {
|
|
await core.dropCompiledGraph(compiled.compiledId).catch(() => {});
|
|
throw error;
|
|
}
|
|
```
|
|
|
|
<Playground
|
|
id="jso-graph"
|
|
title="Compile and activate a pipeline loadout"
|
|
description="The full preset contains external render/compute declarations and a transient resource graph."
|
|
/>
|