struct InstanceInput { @location(2) rotation_matrix_0: vec2, @location(3) rotation_matrix_1: vec2, @location(4) position: vec2, @location(5) height: f32, @location(6) aspect: f32, @location(7) texture_idx: u32, }; struct VertexInput { @location(0) position: vec3, @location(1) texture_coords: vec2, } struct VertexOutput { @builtin(position) position: vec4, @location(0) texture_coords: vec2, @location(1) index: u32, } @group(1) @binding(0) var global: GlobalUniform; struct GlobalUniform { camera_position: vec2, camera_zoom: vec2, window_size: vec2, window_aspect: vec2, starfield_texture: vec2, starfield_tile_size: vec2, }; @group(0) @binding(0) var texture_array: binding_array>; @group(0) @binding(1) var sampler_array: binding_array; @vertex fn vertex_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.x; var pos: vec2 = vec2( vertex.position.x * instance.aspect * scale, vertex.position.y * scale ); // Rotate pos = mat2x2( 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(global.window_aspect.x, 1.0); // Translate pos = pos + ( // Don't forget to correct distance for screen aspect ratio too! (instance.position / global.camera_zoom.x) / vec2(global.window_aspect.x, 1.0) ); var out: VertexOutput; out.position = vec4(pos, 0.0, 1.0); out.texture_coords = vertex.texture_coords; out.index = instance.texture_idx; return out; } @fragment fn fragment_main(in: VertexOutput) -> @location(0) vec4 { return textureSampleLevel( texture_array[in.index], sampler_array[in.index], in.texture_coords, 0.0 ).rgba; }