Merge branch 'main' into patch-1

Author: p-malecki

apps/typegpu-docs/src/examples/image-processing/image-tuning/index.ts

@@ -259,16 +259,17 @@ async function updateLUT(file: string) {
 
 // #region Example controls and cleanup
 
+// Some of the files became corrupted
 const LUTFiles = {
   None: '',
-  Chrome:
-    'https://raw.githubusercontent.com/abpy/FujifilmCameraProfiles/refs/heads/master/cube%20lut/classic%20chrome.cube',
+  // Chrome:
+  //   'https://raw.githubusercontent.com/abpy/FujifilmCameraProfiles/refs/heads/master/cube%20lut/classic%20chrome.cube',
   Hollywood:
     'https://raw.githubusercontent.com/changyun233/Lumix-V-log-LUTs/refs/heads/main/luts/lumix_color_lab_A/HollywoodBlue_Day.cube',
   Dramatic:
     'https://raw.githubusercontent.com/changyun233/Lumix-V-log-LUTs/refs/heads/main/recommended/Dramatic_BlockBuster_33.cube',
-  'Pro Neg':
-    'https://raw.githubusercontent.com/abpy/FujifilmCameraProfiles/refs/heads/master/cube%20lut/srgb/pro%20neg%20hi_srgb.cube',
+  // 'Pro Neg':
+  //   'https://raw.githubusercontent.com/abpy/FujifilmCameraProfiles/refs/heads/master/cube%20lut/srgb/pro%20neg%20hi_srgb.cube',
   'Cold Ice':
     'https://raw.githubusercontent.com/aras-p/smol-cube/refs/heads/main/tests/luts/tinyglade-Cold_Ice.cube',
   Bluecine:

apps/typegpu-docs/src/examples/image-processing/selfie-segmentation/frame.ts

@@ -4,25 +4,33 @@ export interface VideoFrameCrop {
   sourceSize: [number, number];
   cropOrigin: [number, number];
   cropSize: [number, number];
+  uvTransform: d.m2x2f;
 }
 
 export const FrameCropParams = d.struct({
   sourceSize: d.vec2u,
   cropOrigin: d.vec2f,
   cropSize: d.vec2f,
+  uvTransform: d.mat2x2f,
 });
 
 export const initialFrameCropParams: VideoFrameCrop = {
   sourceSize: [1, 1],
   cropOrigin: [0, 0],
   cropSize: [1, 1],
+  uvTransform: d.mat2x2f.identity(),
 };
 
-export function squareCrop(sourceWidth: number, sourceHeight: number): VideoFrameCrop {
+export function squareCrop(
+  sourceWidth: number,
+  sourceHeight: number,
+  uvTransform: d.m2x2f,
+): VideoFrameCrop {
   const size = Math.min(sourceWidth, sourceHeight);
   return {
     sourceSize: [sourceWidth, sourceHeight],
     cropOrigin: [Math.floor((sourceWidth - size) / 2), Math.floor((sourceHeight - size) / 2)],
     cropSize: [size, size],
+    uvTransform,
   };
 }

apps/typegpu-docs/src/examples/image-processing/selfie-segmentation/index.ts

@@ -70,7 +70,8 @@ export const compositeFragment = tgpu.fragmentFn({
   'use gpu';
   const cropUv = d.vec2f(1 - uv.x, uv.y);
   const sourcePixel = compositeUniform.$.cropOrigin + cropUv * compositeUniform.$.cropSize;
-  const cameraUv = sourcePixel / d.vec2f(compositeUniform.$.sourceSize);
+  const sourceUv = sourcePixel / d.vec2f(compositeUniform.$.sourceSize);
+  const cameraUv = compositeUniform.$.uvTransform * (sourceUv - 0.5) + 0.5;
   const cameraColor = std.textureSampleBaseClampToEdge(
     compositeFrameLayout.$.frame,
     sampler.$,
@@ -108,13 +109,33 @@ video.srcObject = await navigator.mediaDevices.getUserMedia({
 
 let videoFrameCallbackId = 0;
 let postProcessProfile: MaskPostProcessProfile = 'balanced';
+let uvTransform = d.mat2x2f.identity();
+
+const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent);
+function setUVTransformForIOS() {
+  const angle = screen.orientation.type;
+
+  uvTransform = d.mat2x2f.identity();
+  if (angle === 'portrait-primary') {
+    uvTransform = d.mat2x2f(0, -1, 1, 0);
+  } else if (angle === 'portrait-secondary') {
+    uvTransform = d.mat2x2f(0, 1, -1, 0);
+  } else if (angle === 'landscape-primary') {
+    uvTransform = d.mat2x2f(-1, 0, 0, -1);
+  }
+}
+
+if (isIOS) {
+  setUVTransformForIOS();
+  window.addEventListener('orientationchange', setUVTransformForIOS);
+}
 
 function processVideoFrame(_: number, metadata: VideoFrameCallbackMetadata) {
   if (video.readyState < 2) {
     videoFrameCallbackId = video.requestVideoFrameCallback(processVideoFrame);
     return;
   }
-  const crop = squareCrop(metadata.width, metadata.height);
+  const crop = squareCrop(metadata.width, metadata.height, uvTransform);
   const externalTexture = root.device.importExternalTexture({ source: video });
   const encoder = root.device.createCommandEncoder();
   const pass = encoder.beginComputePass();
@@ -175,6 +196,9 @@ export const controls = defineControls({
 
 export function onCleanup() {
   video.cancelVideoFrameCallback(videoFrameCallbackId);
+  if (isIOS) {
+    window.removeEventListener('orientationchange', setUVTransformForIOS);
+  }
   if (video.srcObject) {
     for (const track of (video.srcObject as MediaStream).getTracks()) {
       track.stop();

apps/typegpu-docs/src/examples/image-processing/selfie-segmentation/inference/video-preprocess.ts

@@ -46,10 +46,11 @@ export const videoPreprocessKernel = tgpu.computeFn({
   const coord = d.vec2u(i & MODEL_COORD_MASK, std.bitShiftRight(i, MODEL_COORD_SHIFT));
   const pixel = d.vec2f(coord) + 0.5;
   const cropUv = d.vec2f(MODEL_SIZE.x - pixel.x, pixel.y) / MODEL_SIZE;
-  const uv =
+  const sourceUv =
     (videoFrameParamsLayout.$.params.cropOrigin +
       cropUv * videoFrameParamsLayout.$.params.cropSize) /
     d.vec2f(videoFrameParamsLayout.$.params.sourceSize);
+  const uv = videoFrameParamsLayout.$.params.uvTransform * (sourceUv - 0.5) + 0.5;
 
   const color = std.textureSampleBaseClampToEdge(
     videoFrameFrameLayout.$.frame,

apps/typegpu-docs/src/examples/image-processing/selfie-segmentation/post-processing/kernels.ts

@@ -46,6 +46,7 @@ export const UpsampleParams = d.struct({
   sourceSize: d.vec2u,
   cropOrigin: d.vec2f,
   cropSize: d.vec2f,
+  uvTransform: d.mat2x2f,
   edgeAware: d.u32,
 });
 
@@ -167,7 +168,8 @@ const cameraUvFromScreenUv = (uv: d.v2f) => {
   const cropUv = d.vec2f(1 - uv.x, uv.y);
   const sourcePixel =
     upsampleParamsLayout.$.params.cropOrigin + cropUv * upsampleParamsLayout.$.params.cropSize;
-  return sourcePixel / d.vec2f(upsampleParamsLayout.$.params.sourceSize);
+  const sourceUv = sourcePixel / d.vec2f(upsampleParamsLayout.$.params.sourceSize);
+  return upsampleParamsLayout.$.params.uvTransform * (sourceUv - 0.5) + 0.5;
 };
 
 const cameraColorAtScreenUv = (uv: d.v2f) => {

packages/typegpu-cli/README.md

@@ -1,30 +1,30 @@
-# tgpu
+# @typegpu/cli
 Create a new TypeGPU project or enhance an existing one.
 
 ## Creating
-To run interactive project scaffolding
+To run interactive project scaffolding:
 
 ```sh
-pnpm dlx tgpu@latest
+pnpm dlx typegpu@latest
 # or
-npx tgpu@latest
+npx typegpu@latest
 # or
-yarn dlx tgpu@latest
+yarn dlx typegpu@latest
 # or
-bunx tgpu@latest
+bunx typegpu@latest
 ```
 
 ## Enhancing
-Run inside the root of an existing Vite project:
+Run inside the root of an existing project:
 
 ```sh
-pnpm dlx tgpu@latest -e
+pnpm dlx typegpu@latest -e
 # or
-npx tgpu@latest -e
+npx typegpu@latest -e
 # or
-yarn dlx tgpu@latest -e
+yarn dlx typegpu@latest -e
 # or
-bunx tgpu@latest -e
+bunx typegpu@latest -e
 ```
 
 > [!CAUTION]

packages/typegpu-cli/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@typegpu/cli",
-  "version": "0.11.1",
+  "version": "0.11.2",
   "description": "Add TypeGPU to your project",
   "license": "MIT",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/software-mansion/TypeGPU.git#main",
-    "directory": "packages/tgpu"
+    "directory": "packages/typegpu-cli"
   },
   "bin": "./dist/index.js",
   "files": [

packages/typegpu-cli/src/create.ts

@@ -11,7 +11,7 @@ import { askForAgentSkills } from './steps/skills.ts';
 const DEFAULT_PROJECT_DIR = 'tgpu-project';
 
 const GRADIENT_START = [0.831, 0.553, 1.0] as const;
-const GRADIENT_END = [0.216, 0.263, 0.82] as const;
+const GRADIENT_END = [0.32, 0.4, 0.95] as const;
 
 const PROJECT_TEMPLATES = [
   {
@@ -72,8 +72,7 @@ export async function createProject(cwd: string) {
   p.log.success(`Scaffolded project at ${projectName}.`);
 
   const detected = await detect({ cwd: root });
-  const inferredPm = detected?.agent ?? pmFromUserAgent(process.env.npm_config_user_agent);
-  const pm = projectTemplate === 'expo-simple' && inferredPm === 'npm' ? 'yarn' : inferredPm;
+  const pm = detected?.agent ?? pmFromUserAgent(process.env.npm_config_user_agent);
   const shouldInstall = await confirmStep(`Install dependencies with ${pm}?`, true);
   process.chdir(root);
 
@@ -85,12 +84,12 @@ export async function createProject(cwd: string) {
 
   const cdPath = path.relative(cwd, root);
   const installCmd = resolveCommand(pm, 'install', []);
-  const prebuildCmd =
-    projectTemplate === 'expo-simple' ? { command: 'npx', args: ['expo', 'prebuild'] } : undefined;
-  const runCmd =
-    projectTemplate === 'expo-simple'
-      ? resolveCommand(pm, 'run', ['ios # or android'])
-      : resolveCommand(pm, 'run', ['dev']);
+  const prebuildCmd = projectTemplate.includes('expo')
+    ? { command: 'npx', args: ['expo', 'prebuild'] }
+    : undefined;
+  const runCmd = projectTemplate.includes('expo')
+    ? resolveCommand(pm, 'run', ['ios # or android'])
+    : resolveCommand(pm, 'run', ['dev']);
 
   const steps: string[] = [];
   const shouldCd = (!shouldInstall && !!installCmd) || !!runCmd || !!cdPath;

packages/typegpu-cli/templates/template-expo-simple/_package.json

@@ -18,28 +18,32 @@
     "react": "19.1.0",
     "react-dom": "19.1.0",
     "react-native": "0.81.5",
-    "react-native-safe-area-context": "^5.6.2",
+    "react-native-safe-area-context": "~5.6.0",
     "react-native-web": "^0.21.0",
     "react-native-wgpu": "^0.5.9",
     "typegpu": "^0.11.6",
     "unplugin-typegpu": "^0.11.4"
   },
   "devDependencies": {
     "@babel/core": "^7.28.5",
-    "babel-preset-expo": "^54.0.0",
-    "@types/react": "~19.2.2",
+    "@types/react": "~19.1.10",
     "@webgpu/types": "^0.1.69",
+    "babel-preset-expo": "^54.0.0",
+    "eslint": "^9.38.0",
     "eslint-plugin-typegpu": "^0.11.1",
     "oxfmt": "^0.49.0",
     "oxlint": "^1.64.0",
-    "typescript": "npm:tsover@6.0.1"
+    "typescript": "npm:tsover@5.9.2"
+  },
+  "resolutions": {
+    "typescript": "npm:tsover@5.9.2"
   },
   "overrides": {
-    "typescript": "npm:tsover@6.0.1"
+    "typescript": "npm:tsover@5.9.2"
   },
   "pnpm": {
     "overrides": {
-      "typescript": "npm:tsover@6.0.1"
+      "typescript": "npm:tsover@5.9.2"
     }
   }
 }

packages/typegpu/package.json

@@ -1,6 +1,6 @@
 {
   "name": "typegpu",
-  "version": "0.11.7",
+  "version": "0.11.8",
   "description": "A thin layer between JS and WebGPU/WGSL that improves development experience and allows for faster iteration.",
   "keywords": [
     "compute",