feat: Add cubemap reflection example, *breaking* - remove .populate method

apps/typegpu-docs/src/components/ControlPanel.tsx

@@ -2,6 +2,7 @@ import cs from 'classnames';
 import { useAtom, useAtomValue } from 'jotai';
 import { useSetAtom } from 'jotai';
 import { useId, useState } from 'react';
+import type * as d from 'typegpu/data';
 import { codeEditorShownAtom } from '../utils/examples/codeEditorShownAtom';
 import { currentExampleAtom } from '../utils/examples/currentExampleAtom';
 import { runWithCatchAtom } from '../utils/examples/currentSnackbarAtom';
@@ -17,6 +18,7 @@ import { Select } from './design/Select';
 import { Slider } from './design/Slider';
 import { TextArea } from './design/TextArea';
 import { Toggle } from './design/Toggle';
+import { VectorSlider } from './design/VectorSlider';
 import { openInStackBlitz } from './stackblitz/openInStackBlitz';
 
 function ToggleRow({
@@ -90,6 +92,42 @@ function SliderRow({
   );
 }
 
+function VectorSliderRow<T extends d.AnyVecInstance>({
+  label,
+  initial,
+  min,
+  max,
+  step,
+  onChange,
+}: {
+  label: string;
+  initial?: T;
+  min: T;
+  max: T;
+  step: T;
+  onChange: (value: T) => void;
+}) {
+  const [value, setValue] = useState<T>(initial || min);
+  const runWithCatch = useSetAtom(runWithCatchAtom);
+
+  return (
+    <>
+      <div className="text-sm">{label}</div>
+
+      <VectorSlider
+        min={min}
+        max={max}
+        step={step}
+        value={value}
+        onChange={(newValue) => {
+          setValue(newValue);
+          runWithCatch(() => onChange(newValue));
+        }}
+      />
+    </>
+  );
+}
+
 function TextAreaRow({
   label,
   initial,
@@ -183,6 +221,16 @@ function paramToControlRow(param: ExampleControlParam) {
       step={param.step}
       initial={param.initial}
     />
+  ) : 'onVectorSliderChange' in param ? (
+    <VectorSliderRow
+      key={param.label}
+      label={param.label}
+      onChange={param.onVectorSliderChange}
+      min={param.min}
+      max={param.max}
+      step={param.step}
+      initial={param.initial}
+    />
   ) : 'onButtonClick' in param ? (
     <ButtonRow
       key={param.label}

apps/typegpu-docs/src/components/design/VectorSlider.tsx

@@ -0,0 +1,89 @@
+import * as RadixSlider from '@radix-ui/react-slider';
+import type * as d from 'typegpu/data';
+
+type Props<T extends d.AnyVecInstance> = {
+  min: T;
+  max: T;
+  step: T;
+  value: T;
+  onChange: (value: T) => void;
+};
+
+export function VectorSlider<T extends d.AnyVecInstance>({
+  min,
+  max,
+  step,
+  value,
+  onChange,
+}: Props<T>) {
+  const components: Array<'x' | 'y' | 'z' | 'w'> = [];
+  if ('x' in min) components.push('x');
+  if ('y' in min) components.push('y');
+  if ('z' in min) components.push('z');
+  if ('w' in min) components.push('w');
+
+  const getComponentValue = (vec: T, comp: 'x' | 'y' | 'z' | 'w'): number =>
+    comp in vec
+      ? ((vec as unknown as Record<'x' | 'y' | 'z' | 'w', number | undefined>)[
+          comp
+        ] ?? 0)
+      : 0;
+
+  const handleComponentChange = (
+    componentName: 'x' | 'y' | 'z' | 'w',
+    newValue: number,
+  ) => {
+    const newVec: Partial<d.v4f> = {};
+    if ('x' in value) newVec.x = value.x;
+    if ('y' in value) newVec.y = value.y;
+    if ('z' in value) newVec.z = value.z;
+    if ('w' in value) newVec.w = value.w;
+
+    if (componentName in min) {
+      newVec[componentName] = newValue;
+    }
+
+    onChange(newVec as T);
+  };
+
+  const renderSlider = (component: 'x' | 'y' | 'z' | 'w') => (
+    <div key={component} className={'flex items-center flex-1'}>
+      <RadixSlider.Root
+        value={[getComponentValue(value, component)]}
+        min={getComponentValue(min, component)}
+        max={getComponentValue(max, component)}
+        step={getComponentValue(step, component)}
+        onValueChange={(values) => {
+          handleComponentChange(component, values[0]);
+        }}
+        className="bg-grayscale-20 h-10 rounded-[0.25rem] relative flex overflow-hidden flex-1"
+      >
+        <RadixSlider.Track className="flex-1 h-full">
+          <RadixSlider.Range className="absolute h-full bg-gradient-to-br from-gradient-purple to-gradient-blue" />
+        </RadixSlider.Track>
+        <div className="absolute left-1/2 top-1/2 translate-x-[-50%] translate-y-[-50%] text-xs text-center">
+          {getComponentValue(value, component).toFixed(2)}
+        </div>
+      </RadixSlider.Root>
+    </div>
+  );
+
+  if (components.length === 4) {
+    return (
+      <div className="flex flex-col gap-2 w-full">
+        <div className="flex flex-row gap-4 w-full">
+          {components.slice(0, 2).map((component) => renderSlider(component))}
+        </div>
+        <div className="flex flex-row gap-4 w-full">
+          {components.slice(2, 4).map((component) => renderSlider(component))}
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex flex-row gap-1 w-full">
+      {components.map((component) => renderSlider(component))}
+    </div>
+  );
+}

apps/typegpu-docs/src/content/examples/rendering/cubemap-reflection/cubemap.ts

@@ -0,0 +1,97 @@
+import type { TgpuRoot } from 'typegpu';
+import * as d from 'typegpu/data';
+import { CubeVertex } from './dataTypes';
+
+function vert(
+  position: [number, number, number, number],
+  uv: [number, number],
+) {
+  return CubeVertex({
+    position: d.vec4f(...position),
+    uv: d.vec2f(...uv),
+  });
+}
+
+export const cubeVertices: d.Infer<typeof CubeVertex>[] = [
+  // Bottom face
+  vert([-1, -1, -1, 1], [0, 0]),
+  vert([1, -1, -1, 1], [1, 0]),
+  vert([1, -1, 1, 1], [1, 1]),
+  vert([1, -1, 1, 1], [1, 1]),
+  vert([-1, -1, 1, 1], [0, 1]),
+  vert([-1, -1, -1, 1], [0, 0]),
+
+  // Right face
+  vert([1, 1, 1, 1], [0, 1]),
+  vert([1, -1, 1, 1], [1, 1]),
+  vert([1, -1, -1, 1], [1, 0]),
+  vert([1, 1, -1, 1], [0, 0]),
+  vert([1, 1, 1, 1], [0, 1]),
+  vert([1, -1, -1, 1], [1, 0]),
+
+  // Top face
+  vert([-1, 1, 1, 1], [0, 1]),
+  vert([1, 1, 1, 1], [1, 1]),
+  vert([1, 1, -1, 1], [1, 0]),
+  vert([-1, 1, -1, 1], [0, 0]),
+  vert([-1, 1, 1, 1], [0, 1]),
+  vert([1, 1, -1, 1], [1, 0]),
+
+  // Left face
+  vert([-1, -1, 1, 1], [0, 1]),
+  vert([-1, 1, 1, 1], [1, 1]),
+  vert([-1, 1, -1, 1], [1, 0]),
+  vert([-1, -1, -1, 1], [0, 0]),
+  vert([-1, -1, 1, 1], [0, 1]),
+  vert([-1, 1, -1, 1], [1, 0]),
+
+  // Front face
+  vert([1, 1, 1, 1], [0, 1]),
+  vert([-1, 1, 1, 1], [1, 1]),
+  vert([-1, -1, 1, 1], [1, 0]),
+  vert([-1, -1, 1, 1], [1, 0]),
+  vert([1, -1, 1, 1], [0, 0]),
+  vert([1, 1, 1, 1], [0, 1]),
+
+  // Back face
+  vert([1, -1, -1, 1], [0, 1]),
+  vert([-1, -1, -1, 1], [1, 1]),
+  vert([-1, 1, -1, 1], [1, 0]),
+  vert([1, 1, -1, 1], [0, 0]),
+  vert([1, -1, -1, 1], [0, 1]),
+  vert([-1, 1, -1, 1], [1, 0]),
+];
+
+const cubemapUrls = ['posx', 'negx', 'posy', 'negy', 'posz', 'negz'].map(
+  (side) => `assets/cubemap-reflection/${side}.jpg`,
+);
+
+export async function loadCubemap(
+  root: TgpuRoot,
+  urls: string[] = cubemapUrls,
+) {
+  const size = 2048;
+  const texture = root['~unstable']
+    .createTexture({
+      dimension: '2d',
+      size: [size, size, 6],
+      format: 'rgba8unorm',
+    })
+    .$usage('sampled', 'render');
+
+  await Promise.all(
+    urls.map(async (url, i) => {
+      const response = await fetch(url);
+      const blob = await response.blob();
+      const imageBitmap = await createImageBitmap(blob);
+
+      root.device.queue.copyExternalImageToTexture(
+        { source: imageBitmap },
+        { texture: root.unwrap(texture), mipLevel: 0, origin: [0, 0, i] },
+        [size, size],
+      );
+    }),
+  );
+
+  return texture;
+}

apps/typegpu-docs/src/content/examples/rendering/cubemap-reflection/dataTypes.ts

@@ -0,0 +1,36 @@
+import * as d from 'typegpu/data';
+
+export const Camera = d.struct({
+  view: d.mat4x4f,
+  projection: d.mat4x4f,
+  position: d.vec4f,
+});
+
+export const Vertex = d.unstruct({
+  position: d.float16x4,
+  normal: d.float16x4,
+});
+
+export const ComputeVertex = d.struct({
+  position: d.vec2u, // 2x16 float
+  normal: d.vec2u, // 2x16 float
+});
+
+export const CubeVertex = d.struct({
+  position: d.vec4f,
+  uv: d.vec2f,
+});
+
+export const DirectionalLight = d.struct({
+  direction: d.vec3f,
+  color: d.vec3f,
+  intensity: d.f32,
+});
+
+export const Material = d.struct({
+  ambient: d.vec3f,
+  diffuse: d.vec3f,
+  specular: d.vec3f,
+  shininess: d.f32,
+  reflectivity: d.f32,
+});

apps/typegpu-docs/src/content/examples/rendering/cubemap-reflection/helpers.ts

@@ -0,0 +1,69 @@
+import tgpu from 'typegpu';
+import * as d from 'typegpu/data';
+import * as std from 'typegpu/std';
+
+export const unpackVec2u = tgpu['~unstable'].fn(
+  { packed: d.vec2u },
+  d.vec4f,
+)(({ packed }) => {
+  const xy = std.unpack2x16float(packed.x);
+  const zw = std.unpack2x16float(packed.y);
+  return d.vec4f(xy.x, xy.y, zw.x, zw.y);
+});
+
+export const packVec2u = tgpu['~unstable'].fn(
+  { toPack: d.vec4f },
+  d.vec2u,
+)(({ toPack }) => {
+  const xy = std.pack2x16float(d.vec2f(toPack.x, toPack.y));
+  const zw = std.pack2x16float(d.vec2f(toPack.z, toPack.w));
+  return d.vec2u(xy, zw);
+});
+
+export const normalizeSafely = tgpu['~unstable'].fn(
+  { v: d.vec4f },
+  d.vec4f,
+)(({ v }) => {
+  const length = std.length(d.vec3f(v.x, v.y, v.z));
+  if (length < 1e-8) {
+    return d.vec4f(0, 0, 1, 1);
+  }
+  return d.vec4f(v.x / length, v.y / length, v.z / length, 1);
+});
+
+export const getNormal = tgpu['~unstable'].fn(
+  {
+    v1: d.vec4f,
+    v2: d.vec4f,
+    v3: d.vec4f,
+    smoothNormals: d.u32,
+    vertexPos: d.vec4f,
+  },
+  d.vec4f,
+)(({ v1, v2, v3, smoothNormals, vertexPos }) => {
+  if (smoothNormals === 1) {
+    return vertexPos;
+  }
+  const edge1 = d.vec4f(v2.x - v1.x, v2.y - v1.y, v2.z - v1.z, 0);
+  const edge2 = d.vec4f(v3.x - v1.x, v3.y - v1.y, v3.z - v1.z, 0);
+  return normalizeSafely({
+    v: d.vec4f(
+      edge1.y * edge2.z - edge1.z * edge2.y,
+      edge1.z * edge2.x - edge1.x * edge2.z,
+      edge1.x * edge2.y - edge1.y * edge2.x,
+      0,
+    ),
+  });
+});
+
+export const calculateMidpoint = tgpu['~unstable'].fn(
+  { v1: d.vec4f, v2: d.vec4f },
+  d.vec4f,
+)(({ v1, v2 }) => {
+  return d.vec4f(
+    (v1.x + v2.x) * 0.5,
+    (v1.y + v2.y) * 0.5,
+    (v1.z + v2.z) * 0.5,
+    1,
+  );
+});