Шпаргалка з шейдерів WGSL

let col  = vec4f(1.0, 0.5, 0.2, 1.0);
let rgb  = col.rgb;          // vec3f(1.0, 0.5, 0.2)
let half = vec3f(0.5);       // "splat": (0.5, 0.5, 0.5)
let mixed = vec4f(rgb, 1.0); // конструктор конкатенації

// Присвоєння через свізл (запис у кілька компонентів)
var c = vec4f();
c.x = 1.0;
// увага: WGSL НЕ дозволяє c.yz = vec2f(...) у лівій частині '=' —
// присвоюйте компоненти окремо

struct Particle {
  position: vec3f,
  // УВАГА: vec3 в uniform/storage-буфері має вирівнювання як vec4
  // (16 байтів) — додайте поле явно або чергуйте зі скаляром,
  // щоб уникнути несподіванок із розкладкою
  life: f32,
  velocity: vec3f,
  mass: f32,
};

struct Uniforms {
  viewProjection: mat4x4f,
  time: f32,
  deltaTime: f32,
};

struct VertexOutput {
  @builtin(position) position: vec4f,
  @location(0) uv: vec2f,
  @location(1) normal: vec3f,
};

// індекс group відповідає setBindGroup(index, ...) у JS
// індекс binding відповідає полю `binding` у GPUBindGroupLayoutDescriptor

@group(0) @binding(0) var<uniform> uniforms: Uniforms;
@group(0) @binding(1) var<storage, read> particlesIn: array<Particle>;
@group(0) @binding(2) var<storage, read_write> particlesOut: array<Particle>;
@group(1) @binding(0) var diffuseTex: texture_2d<f32>;
@group(1) @binding(1) var diffuseSampler: sampler;

var<workgroup> tile: array<f32, 64>; // спільна для однієї workgroup

struct Uniforms {
  viewProjection: mat4x4f,
  model: mat4x4f,
  time: f32,
};
@group(0) @binding(0) var<uniform> u: Uniforms;

struct VertexInput {
  @location(0) position: vec3f,
  @location(1) normal: vec3f,
  @location(2) uv: vec2f,
};

struct VertexOutput {
  @builtin(position) clipPos: vec4f,
  @location(0) uv: vec2f,
  @location(1) worldNormal: vec3f,
};

@vertex
fn vs_main(in: VertexInput) -> VertexOutput {
  var out: VertexOutput;
  var pos = in.position;
  pos.y += sin(pos.x * 3.0 + u.time) * 0.1; // просте хвильове зміщення

  let world = u.model * vec4f(pos, 1.0);
  out.clipPos = u.viewProjection * world;
  out.uv = in.uv;
  out.worldNormal = normalize((u.model * vec4f(in.normal, 0.0)).xyz);
  return out;
}

@group(1) @binding(0) var diffuseTex: texture_2d<f32>;
@group(1) @binding(1) var diffuseSampler: sampler;

@fragment
fn fs_main(in: VertexOutput) -> @location(0) vec4f {
  let albedo = textureSample(diffuseTex, diffuseSampler, in.uv);

  let lightDir = normalize(vec3f(1.0, 2.0, 1.5));
  let diff = max(dot(in.worldNormal, lightDir), 0.0);
  let lit = albedo.rgb * (0.2 + 0.8 * diff);

  return vec4f(lit, albedo.a);
}

struct Particle {
  position: vec3f,
  life: f32,
  velocity: vec3f,
  mass: f32,
};

struct SimParams {
  deltaTime: f32,
  gravity: f32,
  particleCount: u32,
};

@group(0) @binding(0) var<uniform> params: SimParams;
@group(0) @binding(1) var<storage, read> particlesIn: array<Particle>;
@group(0) @binding(2) var<storage, read_write> particlesOut: array<Particle>;

@compute @workgroup_size(64)
fn cs_main(
  @builtin(global_invocation_id) gid: vec3<u32>,
  @builtin(local_invocation_index) lid: u32
) {
  let i = gid.x;
  if (i >= params.particleCount) {
    return; // захист: кількість workgroup округлюється вгору, можливий перебір
  }

  var p = particlesIn[i];
  p.velocity.y -= params.gravity * params.deltaTime;
  p.position += p.velocity * params.deltaTime;
  p.life -= params.deltaTime;

  particlesOut[i] = p;
}

const WORKGROUP_SIZE = 64;
const particleCount = 100_000;
const workgroupCount = Math.ceil(particleCount / WORKGROUP_SIZE);

const pass = encoder.beginComputePass();
pass.setPipeline(computePipeline);
pass.setBindGroup(0, bindGroup);
pass.dispatchWorkgroups(workgroupCount); // 1D-диспетч; приймає й (x, y, z)
pass.end();

if (!navigator.gpu) throw new Error("WebGPU не підтримується");

const adapter = await navigator.gpu.requestAdapter();
const device = await adapter.requestDevice();
const context = canvas.getContext("webgpu");
const format = navigator.gpu.getPreferredCanvasFormat();
context.configure({ device, format, alphaMode: "premultiplied" });

const module = device.createShaderModule({ code: wgslSource });

const pipeline = device.createRenderPipeline({
  layout: "auto", // дозволити WebGPU вивести bind group layout із WGSL
  vertex: { module, entryPoint: "vs_main", buffers: [vertexBufferLayout] },
  fragment: {
    module,
    entryPoint: "fs_main",
    targets: [{ format }],
  },
  primitive: { topology: "triangle-list", cullMode: "back" },
});

const computePipeline = device.createComputePipeline({
  layout: "auto",
  compute: { module: computeModule, entryPoint: "cs_main" },
});

// Простий 2D-хеш -> псевдовипадковий float у [0,1]
fn hash21(pIn: vec2f) -> f32 {
  var p = fract(pIn * vec2f(127.1, 311.7));
  p += dot(p, p + 19.19);
  return fract(p.x * p.y);
}

// Value noise: плавна інтерполяція між хешованими вузлами ґратки
fn noise(p: vec2f) -> f32 {
  let i = floor(p);
  let f = fract(p);
  let u = f * f * (3.0 - 2.0 * f); // smoothstep
  return mix(
    mix(hash21(i),             hash21(i + vec2f(1.0, 0.0)), u.x),
    mix(hash21(i + vec2f(0.0, 1.0)), hash21(i + vec2f(1.0, 1.0)), u.x), u.y
  );
}

fn sdCircle(p: vec2f, r: f32) -> f32 { return length(p) - r; }

fn sdBox(p: vec2f, b: vec2f) -> f32 {
  let d = abs(p) - b;
  return length(max(d, vec2f(0.0))) + min(max(d.x, d.y), 0.0);
}

// Плавне булеве об'єднання (k керує радіусом змішування)
fn smin(a: f32, b: f32, k: f32) -> f32 {
  let h = clamp(0.5 + 0.5 * (b - a) / k, 0.0, 1.0);
  return mix(b, a, h) - k * h * (1.0 - h);
}

// Storage-буфер не можна безпечно читати й писати в одному й тому ж
// слоті bind group, тож чергуємо два буфери + дві bind group щокадру.
let bufA = device.createBuffer({ size, usage: STORAGE | COPY_DST });
let bufB = device.createBuffer({ size, usage: STORAGE | COPY_DST });
let bindGroupAtoB = makeBindGroup(bufA, bufB); // читати A, писати B
let bindGroupBtoA = makeBindGroup(bufB, bufA); // читати B, писати A
let flip = false;

function frame() {
  const pass = encoder.beginComputePass();
  pass.setPipeline(computePipeline);
  pass.setBindGroup(0, flip ? bindGroupBtoA : bindGroupAtoB);
  pass.dispatchWorkgroups(workgroupCount);
  pass.end();
  flip = !flip;
}

// Перевідображення [a,b] -> [c,d]
fn remap(x: f32, a: f32, b: f32, c: f32, d: f32) -> f32 {
  return c + (d - c) * ((x - a) / (b - a));
}

// Матриця 2D-обертання
fn rot2(a: f32) -> mat2x2f {
  let c = cos(a);
  let s = sin(a);
  return mat2x2f(c, -s, s, c);
}

// Яскравість (сприймана, вагові коефіцієнти Rec. 709)
fn luma(rgb: vec3f) -> f32 {
  return dot(rgb, vec3f(0.2126, 0.7152, 0.0722));
}

// sRGB <-> лінійний простір (наближення через gamma 2.2)
fn toLinear(c: vec3f) -> vec3f { return pow(c, vec3f(2.2)); }
fn toSRGB(c: vec3f)   -> vec3f { return pow(c, vec3f(1.0 / 2.2)); }