In this article, I'm going to be going over the basic aspects of programming in WGSL, as well as what different built in variables are for. I am mainly going to focus on the Fragment shader and the Vertex shader as they are standard shader programs used for graphics (however, there is also the compute shader - which is gaining popularity - but that's for another time).
While we won't be able to make you an expert in one tutorial, we can start you off on the road. Background image is from - Balls of Fury (2007) - Quote:"Ping Pong... is not the macarena. It takes patience. She is like a fine, well-aged prostitute... it takes years to learn her tricks...She is cruel, laughs at you when you are naked, but you keep coming back for more, and more! Why? Because she is the only prostitute I can afford.".
Variables
If you are familiar with the Rust programming language, you might notice some similaries in the WGSL language (such as declaring variables). This a brief summary of the main variable types available in WGSL.
bool: Binary value for storing true and false values. Not used as often as other variable types, but it's available when needed.
f32/u32: Good for constant values and loops, but they aren't nearly as popular as floats and doubles as most shaders require decimal precision.
f16: Though not common place, short doubles can be used with WGSL in special cases when less precision than a float 32 is required.
f32: WGSL's most popular storing variable, standard float 32.
array: Arrays in WGSL can be declared with almost any variable type, although they can only be one dimensional in most cases.
Example array:
Abstract Numbers A numeric literal without a suffix denotes a value in an abstract numeric type:
• An integer literal without an i or u suffix denotes an AbstractInt value.
• A floating point literal without an f or h suffix denotes a AbstractFloat value.
Vector variables
vec2:
vec2
variables are short for vector, but they have many more uses than just storing vector information.
vec2
variables can hold up to two values of most variable types. An example of this would be when a
vec2
is used to store 2D coordinates or vectors. They are also commonly used to hold the coordinates of a pixel on a texture, also known as a UV or Texcoord (values from
0.0 to 1.0
).
2D Vector:
vec2(21.2, -15.9);
UV/Texcoord:
vec2(0.923, 0.234);
vec3:
vec3
variables can hold up to three values of most variable types. These are most commonly used to store rgb colors (values from
0.0 to 1.0
, not
0 to 255
), or 3D xyz coordinates/vectors.
Grey rgb color:
vec3(0.5, 0.5, 0.5);
3D xyz position vector:
vec3(123.45, 0.23, -89.912);
vec4:
vec4
variables can hold up to four values of most variable types. These are most commonly used to store rgba colors with an alpha channel, or a normalized vector with length stored as the 4th value. This can be useful if the normalized and the full length vector are both needed. A Normalized vector is a vector where the
xyz
values are between
-1
and
1
.
Translucent red rgba color:
vec4(1.0, 0.0, 0.0, 0.6);
3D normalized
xyzw
vector with a length of
1000
:
vec4(0.8, 0.3, -0.7, 1000);
Matrix Variables
mat2, mat3, mat4: Like
vec
variables, mat variables can store several variable types.
Mat
variables act like a 2D array, for example, a
mat4
will have a 4x4 space for storing variables. These are mostly used for storing vertex positions and are required for complex lighting effects, projections, and transforms.
Example matrix declaration
Built in Variables
There are many built in variables used in WGSL, but I am just going to go over some key variables.
Vertex Shader Variables
vertex_index: This variable gives the index of the current vertex within the current API-level draw command, independent of draw instancing.
instance_index: This variable gives yout the instance index of the current vertex within the current API-level draw command.
position: The output value
(x,y,z,w)
will map to
(x/w, y/w, z/w)
in WebGPU normalized device coordinates.
Fragment Shader Variables
textureSample: Used to get a texture sample.
Structure and Operators
WGSL syntax is is a mix of Javascript and RUST; so a lot of the programming structures/layout might look familiar. Functions are defined with the keyword
fn
followed by the function name - they can optionally take and return different types (or take no arguments or return nothing - it's up to you).
If statements are very similar to most programming languages, they is also access to else statements in WGSL.
Looping statements can be used in WGSL, and the language has access to while, do, and for loops.
WGSL also has access to an array of standard operators used by most programming languages today. These include but aren't limited to:
==, >, < +, -, *, /, %, ++, --, etc.
.
Built in Methods
normalize(): Converts a vector into a value between
-1.0
&
1.0
so that it can be used without any added length. This can also convert vector or raw color into an rgb color value which can be used to generate a normal map, or as a debug mode for vectors.
textureSample(tex2D, sampler2D, UV): Returns the
vec4
color value from a texture at a specific coordinate;
smoothStep(float, float, scalar): Uses smooth interpolation to move a value by a percentage. The value is then returned from the method. Perfect for some smoothing effects.
reflect(): This is a built in easy to use method for calculating light reflected from a surface using the direction of the light and the angle of the surface. The resulting value will be a
0.0 to 1.0
value of the light reflected.
Where To Learn More
• WebGPU Tutorials/Books [LINK]
• WebGPU Lab (100s of WebGPU Examples) [LINK]
• Official WGSL Documentation [LINK]
Visitor:
Copyright (c) 2002-2024 xbdev.net - All rights reserved.
Designated articles, tutorials and software are the property of their respective owners.
