Sampler Parameters

View source! — View as standalone webpage

Visualizes what all the sampler parameters do. Shows a textured plane at various scales (rotated, head-on, in perspective, and in vanishing perspective). The bottom-right view shows the raw contents of the 4 mipmap levels of the test texture (16x16, 8x8, 4x4, and 2x2).

import { mat4 } from 'wgpu-matrix';

import { GUI } from 'dat.gui';

import texturedSquareWGSL from './texturedSquare.wgsl';

import showTextureWGSL from './showTexture.wgsl';

import { quitIfWebGPUNotAvailable, quitIfLimitLessThan } from '../util';

const kMatrices: Readonly<Float32Array> = new Float32Array([

// Row 1: Scale by 2

...mat4.scale(mat4.rotationZ(Math.PI / 16), [2, 2, 1]),

...mat4.scale(mat4.identity(), [2, 2, 1]),

...mat4.scale(mat4.rotationX(-Math.PI * 0.3), [2, 2, 1]),

...mat4.scale(mat4.rotationX(-Math.PI * 0.42), [2, 2, 1]),

// Row 2: Scale by 1

...mat4.rotationZ(Math.PI / 16),

...mat4.identity(),

...mat4.rotationX(-Math.PI * 0.3),

...mat4.rotationX(-Math.PI * 0.42),

// Row 3: Scale by 0.9

struct Config {

viewProj: mat4x4f,

animationOffset: vec2f,

flangeSize: f32,

highlightFlange: f32,

};

@group(0) @binding(0) var<uniform> config: Config;

@group(0) @binding(1) var<storage, read> matrices: array<mat4x4f>;

@group(0) @binding(2) var samp: sampler;

@group(0) @binding(3) var tex: texture_2d<f32>;

struct Varying {

@builtin(position) pos: vec4f,

@location(0) uv: vec2f,

}

override kTextureBaseSize: f32;

override kViewportSize: f32;

@vertex

fn vmain(

@builtin(instance_index) instance_index: u32,

@builtin(vertex_index) vertex_index: u32,

) -> Varying {

let flange = config.flangeSize;

var uvs = array(

vec2(-flange, -flange), vec2(-flange, 1 + flange), vec2(1 + flange, -flange),

@group(0) @binding(0) var tex: texture_2d<f32>;

struct Varying {

@builtin(position) pos: vec4f,

@location(0) texelCoord: vec2f,

@location(1) mipLevel: f32,

}

const kMipLevels = 4;

const baseMipSize: u32 = 16;

@vertex

fn vmain(

@builtin(instance_index) instance_index: u32, // used as mipLevel

@builtin(vertex_index) vertex_index: u32,

) -> Varying {

var square = array(

vec2f(0, 0), vec2f(0, 1), vec2f(1, 0),

vec2f(1, 0), vec2f(0, 1), vec2f(1, 1),

);

let uv = square[vertex_index];

let pos = vec4(uv * 2 - vec2(1, 1), 0.0, 1.0);

let mipLevel = instance_index;

let mipSize = f32(1 << (kMipLevels - mipLevel));

let texelCoord = uv * mipSize;