Use short vec and mat types (#381)

I'm guessing these are more popular and at glance
give a most positive first impressions of WGSL

sample/a-buffer/composite.wgsl

@@ -1,5 +1,5 @@
 struct Uniforms {
-  modelViewProjectionMatrix: mat4x4<f32>,
+  modelViewProjectionMatrix: mat4x4f,
   maxStorableFragments: u32,
   targetWidth: u32,
 };
@@ -14,7 +14,7 @@ struct Heads {
 };
 
 struct LinkedListElement {
-  color: vec4<f32>,
+  color: vec4f,
   depth: f32,
   next: u32
 };
@@ -30,8 +30,8 @@ struct LinkedList {
 
 // Output a full screen quad
 @vertex
-fn main_vs(@builtin(vertex_index) vertIndex: u32) -> @builtin(position) vec4<f32> {
-  const position = array<vec2<f32>, 6>(
+fn main_vs(@builtin(vertex_index) vertIndex: u32) -> @builtin(position) vec4f {
+  const position = array<vec2f, 6>(
     vec2(-1.0, -1.0),
     vec2(1.0, -1.0),
     vec2(1.0, 1.0),
@@ -44,8 +44,8 @@ fn main_vs(@builtin(vertex_index) vertIndex: u32) -> @builtin(position) vec4<f32
 }
 
 @fragment
-fn main_fs(@builtin(position) position: vec4<f32>) -> @location(0) vec4<f32> {
-  let fragCoords = vec2<i32>(position.xy);
+fn main_fs(@builtin(position) position: vec4f) -> @location(0) vec4f {
+  let fragCoords = vec2i(position.xy);
   let headsIndex = u32(fragCoords.y - sliceInfo.sliceStartY) * uniforms.targetWidth + u32(fragCoords.x);
 
   // The maximum layers we can process for any pixel

sample/a-buffer/main.ts

@@ -62,7 +62,7 @@ const indexBuffer = device.createBuffer({
 }
 
 // Uniforms contains:
-// * modelViewProjectionMatrix: mat4x4<f32>
+// * modelViewProjectionMatrix: mat4x4f
 // * maxStorableFragments: u32
 // * targetWidth: u32
 const uniformsSize = roundUp(
@@ -365,7 +365,7 @@ const configure = () => {
   const averageLayersPerFragment = 4;
 
   // Each element stores
-  // * color : vec4<f32>
+  // * color : vec4f
   // * depth : f32
   // * index of next element in the list : u32
   const linkedListElementSize =

sample/a-buffer/opaque.wgsl

@@ -1,16 +1,16 @@
 struct Uniforms {
-  modelViewProjectionMatrix: mat4x4<f32>,
+  modelViewProjectionMatrix: mat4x4f,
 };
 
 @binding(0) @group(0) var<uniform> uniforms: Uniforms;
 
 struct VertexOutput {
-  @builtin(position) position: vec4<f32>,
+  @builtin(position) position: vec4f,
   @location(0) @interpolate(flat) instance: u32
 };
 
 @vertex
-fn main_vs(@location(0) position: vec4<f32>, @builtin(instance_index) instance: u32) -> VertexOutput {
+fn main_vs(@location(0) position: vec4f, @builtin(instance_index) instance: u32) -> VertexOutput {
   var output: VertexOutput;
 
   // distribute instances into a staggered 4x4 grid
@@ -30,8 +30,8 @@ fn main_vs(@location(0) position: vec4<f32>, @builtin(instance_index) instance:
 }
 
 @fragment
-fn main_fs(@location(0) @interpolate(flat) instance: u32) -> @location(0) vec4<f32> {
-  const colors = array<vec3<f32>,6>(
+fn main_fs(@location(0) @interpolate(flat) instance: u32) -> @location(0) vec4f {
+  const colors = array<vec3f,6>(
       vec3(1.0, 0.0, 0.0),
       vec3(0.0, 1.0, 0.0),
       vec3(0.0, 0.0, 1.0),

sample/a-buffer/translucent.wgsl

@@ -1,5 +1,5 @@
 struct Uniforms {
-  modelViewProjectionMatrix: mat4x4<f32>,
+  modelViewProjectionMatrix: mat4x4f,
   maxStorableFragments: u32,
   targetWidth: u32,
 };
@@ -14,7 +14,7 @@ struct Heads {
 };
 
 struct LinkedListElement {
-  color: vec4<f32>,
+  color: vec4f,
   depth: f32,
   next: u32
 };
@@ -30,12 +30,12 @@ struct LinkedList {
 @binding(4) @group(0) var<uniform> sliceInfo: SliceInfo;
 
 struct VertexOutput {
-  @builtin(position) position: vec4<f32>,
+  @builtin(position) position: vec4f,
   @location(0) @interpolate(flat) instance: u32
 };
 
 @vertex
-fn main_vs(@location(0) position: vec4<f32>, @builtin(instance_index) instance: u32) -> VertexOutput {
+fn main_vs(@location(0) position: vec4f, @builtin(instance_index) instance: u32) -> VertexOutput {
   var output: VertexOutput;
 
   // distribute instances into a staggered 4x4 grid
@@ -56,8 +56,8 @@ fn main_vs(@location(0) position: vec4<f32>, @builtin(instance_index) instance:
 }
 
 @fragment
-fn main_fs(@builtin(position) position: vec4<f32>, @location(0) @interpolate(flat) instance: u32) {
-  const colors = array<vec3<f32>,6>(
+fn main_fs(@builtin(position) position: vec4f, @location(0) @interpolate(flat) instance: u32) {
+  const colors = array<vec3f,6>(
     vec3(1.0, 0.0, 0.0),
     vec3(0.0, 1.0, 0.0),
     vec3(0.0, 0.0, 1.0),
@@ -66,7 +66,7 @@ fn main_fs(@builtin(position) position: vec4<f32>, @location(0) @interpolate(fla
     vec3(0.0, 1.0, 1.0),
   );
 
-  let fragCoords = vec2<i32>(position.xy);
+  let fragCoords = vec2i(position.xy);
   let opaqueDepth = textureLoad(opaqueDepthTexture, fragCoords, 0);
 
   // reject fragments behind opaque objects

sample/animometer/animometer.wgsl

@@ -14,14 +14,14 @@ struct Uniforms {
 @binding(0) @group(1) var<uniform> uniforms : Uniforms;
 
 struct VertexOutput {
-  @builtin(position) Position : vec4<f32>,
-  @location(0) v_color : vec4<f32>,
+  @builtin(position) Position : vec4f,
+  @location(0) v_color : vec4f,
 }
 
 @vertex
 fn vert_main(
-  @location(0) position : vec4<f32>,
-  @location(1) color : vec4<f32>
+  @location(0) position : vec4f,
+  @location(1) color : vec4f
 ) -> VertexOutput {
   var fade = (uniforms.scalarOffset + time.value * uniforms.scalar / 10.0) % 1.0;
   if (fade < 0.5) {
@@ -44,6 +44,6 @@ fn vert_main(
 }
 
 @fragment
-fn frag_main(@location(0) v_color : vec4<f32>) -> @location(0) vec4<f32> {
+fn frag_main(@location(0) v_color : vec4f) -> @location(0) vec4f {
   return v_color;
 }

sample/bitonicSort/bitonicCompute.ts

@@ -36,23 +36,23 @@ fn local_compare_and_swap(idx_before: u32, idx_after: u32) {
 }
 
 // invoke_id goes from 0 to workgroupSize
-fn get_flip_indices(invoke_id: u32, block_height: u32) -> vec2<u32> {
+fn get_flip_indices(invoke_id: u32, block_height: u32) -> vec2u {
   // Caculate index offset (i.e move indices into correct block)
   let block_offset: u32 = ((2 * invoke_id) / block_height) * block_height;
   let half_height = block_height / 2;
   // Calculate index spacing
-  var idx: vec2<u32> = vec2<u32>(
+  var idx: vec2u = vec2u(
     invoke_id % half_height, block_height - (invoke_id % half_height) - 1,
   );
   idx.x += block_offset;
   idx.y += block_offset;
   return idx;
 }
 
-fn get_disperse_indices(invoke_id: u32, block_height: u32) -> vec2<u32> {
+fn get_disperse_indices(invoke_id: u32, block_height: u32) -> vec2u {
   var block_offset: u32 = ((2 * invoke_id) / block_height) * block_height;
   let half_height = block_height / 2;
-	var idx: vec2<u32> = vec2<u32>(
+	var idx: vec2u = vec2u(
     invoke_id % half_height, (invoke_id % half_height) + half_height
   );
   idx.x += block_offset;
@@ -76,9 +76,9 @@ const ALGO_GLOBAL_FLIP = 3;
 // Our compute shader will execute specified # of invocations or elements / 2 invocations
 @compute @workgroup_size(${workgroupSize}, 1, 1)
 fn computeMain(
-  @builtin(global_invocation_id) global_id: vec3<u32>,
-  @builtin(local_invocation_id) local_id: vec3<u32>,
-  @builtin(workgroup_id) workgroup_id: vec3<u32>,
+  @builtin(global_invocation_id) global_id: vec3u,
+  @builtin(local_invocation_id) local_id: vec3u,
+  @builtin(workgroup_id) workgroup_id: vec3u,
 ) {
 
   let offset = ${workgroupSize} * 2 * workgroup_id.x;

sample/bitonicSort/bitonicDisplay.frag.wgsl

@@ -11,8 +11,8 @@ struct FragmentUniforms {
 }
 
 struct VertexOutput {
-  @builtin(position) Position: vec4<f32>,
-  @location(0) fragUV: vec2<f32>
+  @builtin(position) Position: vec4f,
+  @location(0) fragUV: vec2f
 }
 
 // Uniforms from compute shader
@@ -22,13 +22,13 @@ struct VertexOutput {
 @group(1) @binding(0) var<uniform> fragment_uniforms: FragmentUniforms;
 
 @fragment
-fn frag_main(input: VertexOutput) -> @location(0) vec4<f32> {
-  var uv: vec2<f32> = vec2<f32>(
+fn frag_main(input: VertexOutput) -> @location(0) vec4f {
+  var uv: vec2f = vec2f(
     input.fragUV.x * uniforms.width,
     input.fragUV.y * uniforms.height
   );
 
-  var pixel: vec2<u32> = vec2<u32>(
+  var pixel: vec2u = vec2u(
     u32(floor(uv.x)),
     u32(floor(uv.y)),
   );
@@ -41,16 +41,16 @@ fn frag_main(input: VertexOutput) -> @location(0) vec4<f32> {
   if (fragment_uniforms.highlight == 1) {
     return select(
       //If element is above halfHeight, highlight green
-      vec4<f32>(vec3<f32>(0.0, 1.0 - subtracter, 0.0).rgb, 1.0),
+      vec4f(vec3f(0.0, 1.0 - subtracter, 0.0).rgb, 1.0),
       //If element is below halfheight, highlight red
-      vec4<f32>(vec3<f32>(1.0 - subtracter, 0.0, 0.0).rgb, 1.0),
+      vec4f(vec3f(1.0 - subtracter, 0.0, 0.0).rgb, 1.0),
       elementIndex % uniforms.blockHeight < uniforms.blockHeight / 2
     );
   }
 
-  var color: vec3<f32> = vec3f(
+  var color: vec3f = vec3f(
     1.0 - subtracter
   );
 
-  return vec4<f32>(color.rgb, 1.0);
+  return vec4f(color.rgb, 1.0);
 }

sample/cameras/cube.wgsl

@@ -1,5 +1,5 @@
 struct Uniforms {
-  modelViewProjectionMatrix : mat4x4<f32>,
+  modelViewProjectionMatrix : mat4x4f,
 }
 
 @group(0) @binding(0) var<uniform> uniforms : Uniforms;

sample/computeBoids/sprite.wgsl

@@ -1,13 +1,13 @@
 struct VertexOutput {
-  @builtin(position) position : vec4<f32>,
-  @location(4) color : vec4<f32>,
+  @builtin(position) position : vec4f,
+  @location(4) color : vec4f,
 }
 
 @vertex
 fn vert_main(
-  @location(0) a_particlePos : vec2<f32>,
-  @location(1) a_particleVel : vec2<f32>,
-  @location(2) a_pos : vec2<f32>
+  @location(0) a_particlePos : vec2f,
+  @location(1) a_particleVel : vec2f,
+  @location(2) a_pos : vec2f
 ) -> VertexOutput {
   let angle = -atan2(a_particleVel.x, a_particleVel.y);
   let pos = vec2(
@@ -26,6 +26,6 @@ fn vert_main(
 }
 
 @fragment
-fn frag_main(@location(4) color : vec4<f32>) -> @location(0) vec4<f32> {
+fn frag_main(@location(4) color : vec4f) -> @location(0) vec4f {
   return color;
 }

sample/computeBoids/updateSprites.wgsl

@@ -1,6 +1,6 @@
 struct Particle {
-  pos : vec2<f32>,
-  vel : vec2<f32>,
+  pos : vec2f,
+  vel : vec2f,
 }
 struct SimParams {
   deltaT : f32,
@@ -20,7 +20,7 @@ struct Particles {
 
 // https://github.com/austinEng/Project6-Vulkan-Flocking/blob/master/data/shaders/computeparticles/particle.comp
 @compute @workgroup_size(64)
-fn main(@builtin(global_invocation_id) GlobalInvocationID : vec3<u32>) {
+fn main(@builtin(global_invocation_id) GlobalInvocationID : vec3u) {
   var index = GlobalInvocationID.x;
 
   var vPos = particlesA.particles[index].pos;
@@ -30,8 +30,8 @@ fn main(@builtin(global_invocation_id) GlobalInvocationID : vec3<u32>) {
   var colVel = vec2(0.0);
   var cMassCount = 0u;
   var cVelCount = 0u;
-  var pos : vec2<f32>;
-  var vel : vec2<f32>;
+  var pos : vec2f;
+  var vel : vec2f;
 
   for (var i = 0u; i < arrayLength(&particlesA.particles); i++) {
     if (i == index) {

sample/cubemap/sampleCubemap.frag.wgsl

@@ -3,9 +3,9 @@
 
 @fragment
 fn main(
-  @location(0) fragUV: vec2<f32>,
-  @location(1) fragPosition: vec4<f32>
-) -> @location(0) vec4<f32> {
+  @location(0) fragUV: vec2f,
+  @location(1) fragPosition: vec4f
+) -> @location(0) vec4f {
   // Our camera and the skybox cube are both centered at (0, 0, 0)
   // so we can use the cube geomtry position to get viewing vector to sample the cube texture.
   // The magnitude of the vector doesn't matter.