feat: Stabilize samplers and textures (#2347)

Author: iwoplaza

apps/typegpu-docs/src/content/docs/fundamentals/accessors.mdx

@@ -308,7 +308,7 @@ import tgpu, { d, std } from 'typegpu';
 
 const root = await tgpu.init();
 // ---cut---
-const texture = root['~unstable']
+const texture = root
   .createTexture({ format: 'rgba8unorm', size: [100, 100] })
   .$usage('storage');
 

apps/typegpu-docs/src/content/docs/fundamentals/data-schemas.mdx

@@ -364,7 +364,7 @@ Texture schemas serve two main purposes:
 import tgpu, { d, std } from 'typegpu';
 
 const root = await tgpu.init();
-const texture = root['~unstable'].createTexture({
+const texture = root.createTexture({
   size: [256, 256],
   format: 'rgba8unorm',
 }).$usage('sampled', 'storage');

apps/typegpu-docs/src/content/docs/fundamentals/textures.mdx

@@ -21,7 +21,7 @@ import tgpu, { d } from 'typegpu';
 
 const root = await tgpu.init();
 
-const texture = root['~unstable'].createTexture({
+const texture = root.createTexture({
   size: [256, 256],
   format: 'rgba8unorm' as const,
 }).$usage('sampled');
@@ -40,7 +40,7 @@ const sampledView = texture.createView();
 
 ## Creating a texture
 
-Textures can be created using the `root['~unstable'].createTexture` method. It accepts a descriptor similar to vanilla `GPUTextureDescriptor`. If specified, the properties will be reflected in the created texture type - this will later help with static checks when creating views or binding the texture in a layout.
+Textures can be created using the `root.createTexture` method. It accepts a descriptor similar to vanilla `GPUTextureDescriptor`. If specified, the properties will be reflected in the created texture type - this will later help with static checks when creating views or binding the texture in a layout.
 
 ```ts
 type TextureProps = {
@@ -57,7 +57,7 @@ type TextureProps = {
 import tgpu from 'typegpu';
 const root = await tgpu.init();
 // ---cut---
-const texture = root['~unstable'].createTexture({
+const texture = root.createTexture({
 //    ^?
   size: [512, 512, 128],
   format: 'rgba8unorm',
@@ -74,7 +74,7 @@ Similar to buffers, textures need usage flags to specify how they will be used.
 import tgpu from 'typegpu';
 const root = await tgpu.init();
 // ---cut---
-const texture = root['~unstable'].createTexture({
+const texture = root.createTexture({
   size: [256, 256],
   format: 'rgba8unorm',
 })
@@ -89,7 +89,7 @@ You can also add multiple flags at once:
 import tgpu from 'typegpu';
 const root = await tgpu.init();
 // ---cut---
-const texture = root['~unstable'].createTexture({
+const texture = root.createTexture({
   size: [256, 256],
   format: 'rgba8unorm',
 }).$usage('sampled', 'storage', 'render');
@@ -122,7 +122,7 @@ You can write various image sources to textures. `ExternalImageSource` includes:
 import tgpu from 'typegpu';
 const root = await tgpu.init();
 // ---cut---
-const texture = root['~unstable'].createTexture({
+const texture = root.createTexture({
   size: [256, 256],
   format: 'rgba8unorm',
 }).$usage('sampled');
@@ -155,7 +155,7 @@ declare const imageBitmap1: ImageBitmap;
 declare const imageBitmap2: ImageBitmap;
 declare const imageBitmap3: ImageBitmap;
 // ---cut---
-const texture3d = root['~unstable'].createTexture({
+const texture3d = root.createTexture({
   size: [256, 256, 3],
   format: 'rgba8unorm',
   dimension: '3d',
@@ -173,7 +173,7 @@ You can write raw binary data directly to textures using `ArrayBuffer`, typed ar
 import tgpu from 'typegpu';
 const root = await tgpu.init();
 // ---cut---
-const texture = root['~unstable'].createTexture({
+const texture = root.createTexture({
   size: [2, 2],
   format: 'rgba8unorm',
 }).$usage('sampled');
@@ -198,12 +198,12 @@ You can also copy from another texture:
 import tgpu from 'typegpu';
 const root = await tgpu.init();
 // ---cut---
-const sourceTexture = root['~unstable'].createTexture({
+const sourceTexture = root.createTexture({
   size: [256, 256],
   format: 'rgba8unorm',
 }).$usage('sampled');
 
-const targetTexture = root['~unstable'].createTexture({
+const targetTexture = root.createTexture({
   size: [256, 256],
   format: 'rgba8unorm',
 }).$usage('sampled');
@@ -220,7 +220,7 @@ import tgpu from 'typegpu';
 const root = await tgpu.init();
 declare const imageBitmap: ImageBitmap;
 // ---cut---
-const texture = root['~unstable'].createTexture({
+const texture = root.createTexture({
   size: [256, 256],
   format: 'rgba8unorm',
   mipLevelCount: 9, // log2(256) + 1
@@ -242,7 +242,7 @@ To create a view - which will also serve as fixed texture usage - you can use on
 import tgpu, { d } from 'typegpu';
 const root = await tgpu.init();
 // ---cut---
-const texture = root['~unstable'].createTexture({
+const texture = root.createTexture({
   size: [512, 512],
   format: 'rgba8unorm',
 }).$usage('sampled');
@@ -260,7 +260,7 @@ If type information is available the view schema will be staticly checked agains
 import tgpu, { d } from 'typegpu';
 const root = await tgpu.init();
 // ---cut---
-const texture = root['~unstable'].createTexture({
+const texture = root.createTexture({
   size: [512, 512],
   format: 'rgba8unorm',
 }); // <-- missing .$usage('sampled')
@@ -273,7 +273,7 @@ const sampledView = texture.createView(d.texture2d(d.f32));
 import tgpu, { d } from 'typegpu';
 const root = await tgpu.init();
 // ---cut---
-const texture = root['~unstable'].createTexture({
+const texture = root.createTexture({
   size: [512, 512],
   format: 'r32float',
 }).$usage('storage');
@@ -291,7 +291,7 @@ To sample textures in shaders, you'll often need a sampler that defines how the
 import tgpu from 'typegpu';
 const root = await tgpu.init();
 // ---cut---
-const sampler = root['~unstable'].createSampler({
+const sampler = root.createSampler({
   magFilter: 'linear',
   minFilter: 'linear',
   mipmapFilter: 'linear',
@@ -312,12 +312,12 @@ Textures can be used in shaders through bind groups or as fixed resources, simil
 import tgpu, { d } from 'typegpu';
 const root = await tgpu.init();
 // ---cut---
-const texture = root['~unstable'].createTexture({
+const texture = root.createTexture({
   size: [256, 256],
   format: 'rgba8unorm',
 }).$usage('sampled');
 
-const sampler = root['~unstable'].createSampler({
+const sampler = root.createSampler({
   magFilter: 'linear',
   minFilter: 'linear',
 });
@@ -343,15 +343,15 @@ For textures that remain consistent across operations, you can create fixed text
 import tgpu, { d, std } from 'typegpu';
 const root = await tgpu.init();
 // ---cut---
-const texture = root['~unstable'].createTexture({
+const texture = root.createTexture({
   size: [256, 256],
   format: 'rgba8unorm',
 }).$usage('sampled');
 
 // Create a fixed sampled view
 const sampledView = texture.createView();
 
-const sampler = root['~unstable'].createSampler({
+const sampler = root.createSampler({
   magFilter: 'linear',
   minFilter: 'linear',
 });

apps/typegpu-docs/src/examples/algorithms/genetic-racing/index.ts

@@ -51,7 +51,7 @@ const params = root.createUniform(SimParams, {
 
 const ga = createGeneticPopulation(root, params);
 
-const trackTexture = root['~unstable']
+const trackTexture = root
   .createTexture({ size: [512, 512], format: 'rgba8unorm' })
   .$usage('render', 'sampled');
 const trackView = trackTexture.createView();
@@ -60,7 +60,7 @@ const carBitmap = await fetch('/TypeGPU/assets/genetic-car/car.png')
   .then((r) => r.blob())
   .then(createImageBitmap);
 
-const carSpriteTexture = root['~unstable']
+const carSpriteTexture = root
   .createTexture({
     size: [carBitmap.width / 2, carBitmap.height / 2],
     format: 'rgba8unorm',
@@ -69,11 +69,11 @@ const carSpriteTexture = root['~unstable']
 carSpriteTexture.write(carBitmap);
 const carSpriteView = carSpriteTexture.createView();
 
-const linearSampler = root['~unstable'].createSampler({
+const linearSampler = root.createSampler({
   magFilter: 'linear',
   minFilter: 'linear',
 });
-const nearestSampler = root['~unstable'].createSampler({
+const nearestSampler = root.createSampler({
   magFilter: 'nearest',
   minFilter: 'nearest',
 });

apps/typegpu-docs/src/examples/algorithms/jump-flood-distance/index.ts

@@ -49,29 +49,29 @@ const paramsUniform = root.createUniform(VisualizationParams, {
   showOutside: 1,
 });
 
-const filteringSampler = root['~unstable'].createSampler({
+const filteringSampler = root.createSampler({
   magFilter: 'linear',
   minFilter: 'linear',
 });
 
 function createResources() {
   const textures = [0, 1].map(() =>
-    root['~unstable']
+    root
       .createTexture({
         size: [width, height],
         format: 'rgba16float',
       })
       .$usage('storage'),
   ) as [FloodTexture, FloodTexture];
 
-  const maskTexture = root['~unstable']
+  const maskTexture = root
     .createTexture({
       size: [width, height],
       format: 'r32uint',
     })
     .$usage('storage') as MaskTexture;
 
-  const distanceTexture = root['~unstable']
+  const distanceTexture = root
     .createTexture({
       size: [width, height],
       format: 'rgba16float',

apps/typegpu-docs/src/examples/algorithms/jump-flood-voronoi/index.ts

@@ -55,14 +55,14 @@ type FloodTexture = TgpuTexture<{ size: [number, number, 2]; format: 'rgba16floa
   SampledFlag &
   StorageFlag;
 
-const filteringSampler = root['~unstable'].createSampler({
+const filteringSampler = root.createSampler({
   magFilter: 'linear',
   minFilter: 'linear',
 });
 
 function createResources() {
   const textures = [0, 1].map(() =>
-    root['~unstable']
+    root
       .createTexture({
         size: [canvas.width, canvas.height, 2],
         format: 'rgba16float',

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

@@ -13,7 +13,7 @@ const gammaCorrection = root.createUniform(d.f32);
 const glyphSize = root.createUniform(d.u32, 8);
 const uvTransformBuffer = root.createUniform(d.mat2x2f, d.mat2x2f.identity());
 
-const shaderSampler = root['~unstable'].createSampler({
+const shaderSampler = root.createSampler({
   magFilter: 'linear',
   minFilter: 'linear',
 });

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

@@ -70,13 +70,13 @@ const paramsUniform = root.createUniform(Params, {
   sampleBias: blurStrength,
 });
 
-const sampler = root['~unstable'].createSampler({
+const sampler = root.createSampler({
   magFilter: 'linear',
   minFilter: 'linear',
   mipmapFilter: 'linear',
 });
 
-const maskTexture = root['~unstable']
+const maskTexture = root
   .createTexture({
     size: [MODEL_WIDTH, MODEL_HEIGHT],
     format: 'rgba8unorm',
@@ -214,7 +214,7 @@ function onVideoChange(size: { width: number; height: number }) {
   updateCropBounds(aspectRatio);
 
   blurredTextures = [0, 1].map(() =>
-    root['~unstable']
+    root
       .createTexture({
         size: [size.width, size.height],
         format: 'rgba8unorm',

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

@@ -27,7 +27,7 @@ const Settings = d.struct({
 
 const settingsUniform = root.createUniform(Settings);
 
-const imageTexture = root['~unstable']
+const imageTexture = root
   .createTexture({
     size: [srcWidth, srcHeight],
     format: 'rgba8unorm',
@@ -36,7 +36,7 @@ const imageTexture = root['~unstable']
 imageTexture.write(imageBitmap);
 
 const textures = [0, 1].map(() => {
-  return root['~unstable']
+  return root
     .createTexture({
       size: [srcWidth, srcHeight],
       format: 'rgba8unorm',
@@ -45,7 +45,7 @@ const textures = [0, 1].map(() => {
 });
 const renderView = textures[1].createView(d.texture2d(d.f32));
 
-const sampler = root['~unstable'].createSampler({
+const sampler = root.createSampler({
   magFilter: 'linear',
   minFilter: 'linear',
 });

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

@@ -53,7 +53,7 @@ const thresholdBuffer = root.createUniform(d.f32, 0.5);
 const colorUniform = root.createUniform(d.vec3f, d.vec3f(0, 1.0, 0));
 const uvTransformUniform = root.createUniform(d.mat2x2f, d.mat2x2f.identity());
 
-const sampler = root['~unstable'].createSampler({
+const sampler = root.createSampler({
   magFilter: 'linear',
   minFilter: 'linear',
 });