Meeting

Today started with the first coach meeting. Wouter suggested to start with WebGPU Fundamentals, where I accidentally opened a lesson from the middle instead of the beginning.

WebGPU Fundamentals && Tour of WGSL

Seeing snippets of WGSL code I was quite lost, but then I saw Tour of WGSL. To understand the context better, I have decided to try out WGSL directly, so I went through the half of the tour and saved some memroy anchors to my figma conspect:

To get more comfortable with WGSL, I decided to use a turn a little example from Book of Shaders into WGSL:

@binding(0) @group(0) var<uniform> frame : u32;

@vertex
fn vtx_main(@builtin(vertex_index) vertex_index : u32) -> @builtin(position) vec4f {
  const pos = array(
    vec2( 0.0,  1.0),
    vec2( -1.0, -1.0),
    vec2( 1.0, -1.0),
  );

  return vec4f(pos[vertex_index], 0, 1);
}
//https://thebookofshaders.com/08/
// YUV to RGB matrix
const yuv2rgb = mat3x3f(1.0, 0.0, 1.13983,
                    1.0, -0.39465, -0.58060,
                    1.0, 2.03211, 0.0);

@fragment
fn frag_main() -> @location(0) vec4f {
  var color : vec3f = yuv2rgb * vec3f(0.5, sin(f32(frame) / 128), 0.5);
  return vec4(color, 1);
}

Multiplying colors by YUV matrix turned from yellowish-greenish triangle into cyan, although it’s not quite clear on the hero Image of the post, we all need to start somewhere=). On my way there I also got a bit distracted with a reminder how multiplying matrices works, I had a vague memory from high school but wanted to understand the outcome better.

Then I re-read Fundamentals articles again and I feel how it starts to layer in my head.

Three.js Shading Language

While trying to understand how WebGPU works, I wanted to make sure to understand the difference between WGSL and TSL. After scanning documentation and examples, I wasn’t quite sure I understood it correctly. The examples on three js website do contain TSL already used with WebGPU, but not shaders written in WGSl. Lately when I need to summarise new things I learned I ask ChatGpt to explain me concepts as an example of pizzeria:

Planning

For tomorrow I am planning to:

• map out the roadmap;
• start from proper beginning of WebGPU Fundamentals again;
• re-visit this article about differences between WebGL and WebGPU, as it brings more clarity to me: I also saved this comparison

By the way, I just learned that actually its best practice not to use ternary opeartors, or any flow controls, when writing GLSL code as it’s not good for performance, it might apply to WGSL as well.

My research might seem not linear right now, but I need to get the gist of the context and try out things to better understand the basics.