Galactica/src/render/shaders/sprite.wgsl

// Vertex shader
struct InstanceInput {
	@location(2) rotation_matrix_0: vec2<f32>,
	@location(3) rotation_matrix_1: vec2<f32>,
	@location(4) position: vec2<f32>,
	@location(5) height: f32,
	@location(6) aspect: f32,
	@location(7) texture_idx: u32,
};

struct VertexInput {
	@location(0) position: vec3<f32>,
	@location(1) texture_coords: vec2<f32>,
}

struct VertexOutput {
	@builtin(position) position: vec4<f32>,
	@location(0) texture_coords: vec2<f32>,
	@location(1) index: u32,
}


@group(1) @binding(0)
var<uniform> global: GlobalUniform;
struct GlobalUniform {
	camera_position: vec2<f32>,
	camera_zoom: f32,
	window_aspect: f32,
	starfield_texture: u32,
	starfield_tile_size: f32
};


@vertex
fn vertex_shader_main(
	vertex: VertexInput,
	instance: InstanceInput,
) -> VertexOutput {

	// Apply sprite aspect ratio & scale factor
	// This must be done *before* rotation.
	let scale = instance.height / global.camera_zoom;
	var pos: vec2<f32> = vec2<f32>(
		vertex.position.x * instance.aspect * scale,
		vertex.position.y * scale
	);

	// Rotate
	pos = mat2x2<f32>(
		instance.rotation_matrix_0,
		instance.rotation_matrix_1,
	) * pos;

	// Apply screen aspect ratio, again preserving height.
	// This must be done AFTER rotation... think about it!
	pos = pos / vec2<f32>(global.window_aspect, 1.0);

	// Translate
	pos = pos + (
		// Don't forget to correct distance for screen aspect ratio too!
		(instance.position / global.camera_zoom)
		/ vec2<f32>(global.window_aspect, 1.0)
	);

	var out: VertexOutput;
	out.position = vec4<f32>(pos, 0.0, 1.0);
	out.texture_coords = vertex.texture_coords;
	out.index = instance.texture_idx;
	return out;
}


// Fragment shader
@group(0) @binding(0)
var texture_array: binding_array<texture_2d<f32>>;
@group(0) @binding(1)
var sampler_array: binding_array<sampler>;


@fragment
fn fragment_shader_main(in: VertexOutput) -> @location(0) vec4<f32> {
	return textureSampleLevel(
		texture_array[in.index],
		sampler_array[in.index],
		in.texture_coords,
		0.0
	).rgba;
}