Skip to content

fix: Align @geometry with main #1932

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 6 commits into
base: main
Choose a base branch
from
Open

fix: Align @geometry with main #1932

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
d25112c
aligned with main
cieplypolar Nov 21, 2025
2dbf523
cleanup
cieplypolar Nov 21, 2025
b1fde76
wgsl tests for circles and wind map
cieplypolar Nov 21, 2025
2738899
lines-combinations wgsl res test
cieplypolar Nov 25, 2025
13e385f
Merge branch 'main' into fix/broken-examples
cieplypolar Nov 25, 2025
582630b
return of the 0s
cieplypolar Nov 25, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 4 additions & 2 deletions apps/typegpu-docs/src/examples/geometry/circles/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ if (!context) {
}

const adapter = await navigator.gpu.requestAdapter();
console.log(`Using ${adapter?.info.vendor} adapter`);
// console.log(`Using ${adapter?.info.vendor} adapter`);
const device = await adapter?.requestDevice({
requiredFeatures: ['timestamp-query'],
});
Expand Down Expand Up @@ -137,7 +137,7 @@ const pipeline = root['~unstable']

setTimeout(() => {
pipeline
.with(bindGroupLayout, uniformsBindGroup)
.with(uniformsBindGroup)
.withColorAttachment({
...(multisample
? {
Expand All @@ -157,6 +157,8 @@ setTimeout(() => {
.draw(circleVertexCount(4), circleCount);
}, 100);

// #region Example controls & Cleanup
export function onCleanup() {
root.destroy();
}
// #endregion
87 changes: 67 additions & 20 deletions apps/typegpu-docs/src/examples/geometry/lines-combinations/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ import {
import { clamp, cos, min, mix, select, sin } from 'typegpu/std';
import type { ColorAttachment } from '../../../../../../packages/typegpu/src/core/pipeline/renderPipeline.ts';
import { TEST_SEGMENT_COUNT } from './constants.ts';
import * as testCases from './testCases.ts';
import { testCases } from './testCases.ts';

const presentationFormat = navigator.gpu.getPreferredCanvasFormat();
const canvas = document.querySelector('canvas');
Expand Down Expand Up @@ -146,7 +146,7 @@ const mainVertex = tgpu['~unstable'].vertexFn({
};
});

console.log(tgpu.resolve({ externals: { lineSegmentVariableWidth } }));
// console.log(tgpu.resolve([lineSegmentVariableWidth]));

const mainFragment = tgpu['~unstable'].fragmentFn({
in: {
Expand Down Expand Up @@ -192,13 +192,13 @@ const mainFragment = tgpu['~unstable'].fragmentFn({
vec3f(0.25, 0.25, 0.75), // 8
];
if (fillType === 2) {
color = colors[instanceIndex % colors.length];
color = vec3f(colors[instanceIndex % colors.length]);
}
if (fillType === 3) {
color = colors[vertexIndex % colors.length];
color = vec3f(colors[vertexIndex % colors.length]);
}
if (fillType === 4) {
color = colors[situationIndex % colors.length];
color = vec3f(colors[situationIndex % colors.length]);
}
if (fillType === 5) {
color = vec3f(uv.x, cos(uv.y * 100), 0);
Expand Down Expand Up @@ -304,11 +304,16 @@ function createPipelines() {
format: presentationFormat,
blend: alphaBlend,
})
.withPrimitive({
// cullMode: 'back',
})
// .withPrimitive({
// cullMode: 'back',
// })
.createPipeline()
.withIndexBuffer(indexBuffer);
.withIndexBuffer(indexBuffer)
.withPerformanceCallback((start, end) => {
if (frameId % 20 === 0) {
console.log(`${(Number(end - start) * 1e-6).toFixed(2)} ms`);
}
});

const outline = root['~unstable']
.with(joinSlot, join)
Expand Down Expand Up @@ -383,11 +388,6 @@ const draw = (timeMs: number) => {
pipelines.fill
.with(uniformsBindGroup)
.withColorAttachment({ ...colorAttachment, loadOp: 'clear' })
.withPerformanceCallback((start, end) => {
if (frameId % 20 === 0) {
console.log(`${(Number(end - start) * 1e-6).toFixed(2)} ms`);
}
})
.drawIndexed(subdiv.fillCount, fillType === 0 ? 0 : TEST_SEGMENT_COUNT);

if (wireframe) {
Expand Down Expand Up @@ -449,44 +449,44 @@ const subdivs = [
},
];

// #region Example controls & Cleanup
export const controls = {
'Test Case': {
initial: Object.keys(testCases)[0],
options: Object.keys(testCases),
onSelectChange: async (selected: keyof typeof testCases) => {
// biome-ignore lint/performance/noDynamicNamespaceImportAccess: no other way
onSelectChange: (selected: keyof typeof testCases) => {
testCase = testCases[selected];
pipelines = createPipelines();
},
},
'Start Cap': {
initial: 'round',
options: Object.keys(lineCaps),
onSelectChange: async (selected: keyof typeof lineCaps) => {
onSelectChange: (selected: keyof typeof lineCaps) => {
startCap = lineCaps[selected];
pipelines = createPipelines();
},
},
'End Cap': {
initial: 'round',
options: Object.keys(lineCaps),
onSelectChange: async (selected: keyof typeof lineCaps) => {
onSelectChange: (selected: keyof typeof lineCaps) => {
endCap = lineCaps[selected];
pipelines = createPipelines();
},
},
Join: {
initial: 'round',
options: Object.keys(lineJoins),
onSelectChange: async (selected: keyof typeof lineJoins) => {
onSelectChange: (selected: keyof typeof lineJoins) => {
join = lineJoins[selected];
pipelines = createPipelines();
},
},
Fill: {
initial: 'solid',
options: Object.keys(fillOptions),
onSelectChange: async (selected: keyof typeof fillOptions) => {
onSelectChange: (selected: keyof typeof fillOptions) => {
fillType = fillOptions[selected];
uniformsBuffer.writePartial({ fillType });
},
Expand Down Expand Up @@ -527,9 +527,56 @@ export const controls = {
reverse = value;
},
},
'Test Resolution': import.meta.env.DEV && {
onButtonClick: () => {
const prevShowRadii = showRadii;
const prevStartCap = startCap;
const prevEndCap = endCap;
const prevJoin = join;
const prevTestCase = testCase;

showRadii = true;

const capsOptions = Object.keys(lineCaps);
const joinOptions = Object.keys(lineJoins);

const { animateWidth, bending, segmentAlternate } = testCases;
const testCasesReduced = { animateWidth, bending, segmentAlternate }; // semi-random subset

Object.entries(testCasesReduced).map(([_, t], i) => {
testCase = t;
startCap = lineCaps[
capsOptions[i % capsOptions.length] as keyof typeof lineCaps
];
endCap = lineCaps[
capsOptions[
(i + 3) % capsOptions.length // greater coverage
] as keyof typeof lineCaps
];
join = lineJoins[
joinOptions[i % joinOptions.length] as keyof typeof lineJoins
];
const namespace = tgpu['~unstable'].namespace();
return Object.entries(createPipelines()).map(([_, pipeline]) =>
root.device.createShaderModule({
code: tgpu.resolve([pipeline], {
names: namespace,
}),
})
);
});

testCase = prevTestCase;
startCap = prevStartCap;
endCap = prevEndCap;
join = prevJoin;
showRadii = prevShowRadii;
},
},
};

export function onCleanup() {
root.destroy();
cancelAnimationFrame(frameId);
}
// #endregion
60 changes: 41 additions & 19 deletions apps/typegpu-docs/src/examples/geometry/lines-combinations/testCases.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,10 +19,11 @@ const testCaseShell = tgpu.fn([u32, f32], LineSegmentVertex);

const segmentSide = tgpu.const(arrayOf(f32, 4), [-1, -1, 1, 1]);

export const segmentAlternate = testCaseShell(
const segmentAlternate = testCaseShell(
(vertexIndex, time) => {
'use gpu';
const side = segmentSide.$[vertexIndex];
// biome-ignore lint/style/useConst: cannot be const, right side has runtime origin
let side = segmentSide.$[vertexIndex];
const r = sin(time + select(0, Math.PI / 2, side === -1));
const radius = 0.4 * r * r;
return LineSegmentVertex({
Expand All @@ -32,10 +33,11 @@ export const segmentAlternate = testCaseShell(
},
);

export const segmentStretch = testCaseShell(
const segmentStretch = testCaseShell(
(vertexIndex, time) => {
'use gpu';
const side = segmentSide.$[vertexIndex];
// biome-ignore lint/style/useConst: cannot be const, right side has runtime origin
let side = segmentSide.$[vertexIndex];
const distance = 0.5 * clamp(0.55 * sin(1.5 * time) + 0.5, 0, 1);
return LineSegmentVertex({
position: vec2f(distance * side * cos(time), distance * side * sin(time)),
Expand All @@ -44,18 +46,19 @@ export const segmentStretch = testCaseShell(
},
);

export const segmentContainsAnotherEnd = testCaseShell(
const segmentContainsAnotherEnd = testCaseShell(
(vertexIndex, time) => {
'use gpu';
const side = segmentSide.$[vertexIndex];
// biome-ignore lint/style/useConst: cannot be const, right side has runtime origin
let side = segmentSide.$[vertexIndex];
return LineSegmentVertex({
position: vec2f(side * 0.25 * (1 + clamp(sin(time), -0.8, 1)), 0),
radius: 0.25 + side * 0.125,
});
},
);

export const caseVShapeSmall = testCaseShell(
const caseVShapeSmall = testCaseShell(
(vertexIndex, t) => {
'use gpu';
const side = clamp(f32(vertexIndex) - 2, -1, 1);
Expand All @@ -67,7 +70,7 @@ export const caseVShapeSmall = testCaseShell(
},
);

export const caseVShapeBig = testCaseShell(
const caseVShapeBig = testCaseShell(
(vertexIndex, time) => {
'use gpu';
const side = clamp(f32(vertexIndex) - 2, -1, 1);
Expand All @@ -79,7 +82,7 @@ export const caseVShapeBig = testCaseShell(
},
);

export const halfCircle = testCaseShell(
const halfCircle = testCaseShell(
(vertexIndex, time) => {
'use gpu';
const angle = Math.PI * clamp(f32(vertexIndex) - 1, 0, 50) / 50;
Expand All @@ -91,7 +94,7 @@ export const halfCircle = testCaseShell(
},
);

export const halfCircleThin = testCaseShell(
const halfCircleThin = testCaseShell(
(vertexIndex, time) => {
'use gpu';
const result = halfCircle(vertexIndex, time);
Expand All @@ -100,7 +103,7 @@ export const halfCircleThin = testCaseShell(
},
);

export const bending = testCaseShell(
const bending = testCaseShell(
(vertexIndex, time) => {
'use gpu';
const i = clamp(f32(vertexIndex) - 1, 0, 48) / 48;
Expand All @@ -115,7 +118,7 @@ export const bending = testCaseShell(
},
);

export const animateWidth = testCaseShell(
const animateWidth = testCaseShell(
(vertexIndex, time) => {
'use gpu';
const i = (f32(vertexIndex) % TEST_SEGMENT_COUNT) / TEST_SEGMENT_COUNT;
Expand All @@ -128,7 +131,7 @@ export const animateWidth = testCaseShell(
},
);

export const perlinTraces = testCaseShell(
const perlinTraces = testCaseShell(
(vertexIndex, time) => {
'use gpu';
const perLine = u32(200);
Expand All @@ -153,7 +156,7 @@ export const perlinTraces = testCaseShell(
},
);

export const bars = testCaseShell(
const bars = testCaseShell(
(vertexIndex, time) => {
'use gpu';
const VERTS_PER_LINE = u32(5);
Expand All @@ -172,7 +175,7 @@ export const bars = testCaseShell(
},
);

export const arms = testCaseShell(
const arms = testCaseShell(
(vertexIndex, time) => {
'use gpu';
const s = sin(time);
Expand All @@ -192,7 +195,7 @@ export const arms = testCaseShell(
},
);

export const armsSmall = testCaseShell(
const armsSmall = testCaseShell(
(vertexIndex, time) => {
'use gpu';
const result = arms(vertexIndex, time);
Expand All @@ -203,7 +206,7 @@ export const armsSmall = testCaseShell(
},
);

export const armsBig = testCaseShell(
const armsBig = testCaseShell(
(vertexIndex, time) => {
'use gpu';
const result = arms(vertexIndex, time);
Expand All @@ -214,7 +217,7 @@ export const armsBig = testCaseShell(
},
);

export const armsRotating = testCaseShell(
const armsRotating = testCaseShell(
(vertexIndex, time) => {
'use gpu';
const s = sin(time);
Expand All @@ -234,7 +237,7 @@ export const armsRotating = testCaseShell(
},
);

export const flyingSquares = testCaseShell(
const flyingSquares = testCaseShell(
(vertexIndex, time) => {
'use gpu';
const squareIndex = u32(vertexIndex / 8);
Expand Down Expand Up @@ -265,3 +268,22 @@ export const flyingSquares = testCaseShell(
});
},
);

export const testCases = {
animateWidth,
arms,
armsBig,
armsRotating,
armsSmall,
bars,
bending,
caseVShapeBig,
caseVShapeSmall,
flyingSquares,
halfCircle,
halfCircleThin,
perlinTraces,
segmentAlternate,
segmentContainsAnotherEnd,
segmentStretch,
};
Loading