Data Structures & Algorithms > Introduction

WebGPU and WGSL Data Structures and Algorithms serves as a vital resource in the burgeoning field of web graphics and computation. This book is indispensable for developers, programmers, and enthusiasts seeking to delve deeper into the intricacies of WebGPU and WGSL. Elucidating the underlying data structures and algorithms, the book empowers readers to optimize their web graphics applications for performance, efficiency, and scalability. Understanding these fundamental principles enables practitioners to harness the full potential of WebGPU and WGSL, leading to the creation of immersive and visually stunning web experiences. Whether you're a seasoned graphics programmer looking to transition to web development or a web developer aiming to unlock the capabilities of modern GPUs, this book provides invaluable insights and techniques to elevate your skills and projects to new heights.

Data Structures and Algorithms - is like plumbing - pipes and processes are all connected correctly

What is WebGPU & WGSL?

You need to be aware of the underlying hardware (the CPU and the GPU).
WGSL shaders are small programs that run on the GPU (so any structures or algorithms must be appropriate for the massively parallel architecture of the GPU - you can't go just using anything - it'll either run very slow - or just crash).
WebGPU API on the other hand are a set of functions that you'll use to build buffers, configure the pipelines and so on.

Javascript plays a crucial part here - you don't actually program the API - instead, you'll use Javascript to ensure the data is configured/setup correctly.
So you will probably perform a lot of computational work using Javascript (sorting/generating/loading data) before passing things to the API.

Why Algorithms and Data Structure Matter?

Algorithms are the life and soul of software - it's akin to plumbing - the configuration, size and what is connected to what is the algorithm while the contents of the pipes is the data.

Algorithms have an input and output - you pass in some data and out comes something - either the same data or modified in some way.

What's special about WebGPU/WGSL?

• Web-based, client doesn't have direct access to the hardware, gpu side, parallel architecture, synergy - computer and gpu aspects
• Levels - Javascript -> API -> Shader

What This Book Is NOT?

• It's not about the algorithms not teaching WebGPU API
• Not theoretical - very practical approach (using small examples to demonstrate key points)

History and Evolution

Various Graphics API

There are lots of different graphics API (including native ones Vulkan, OpenGL, Metal and web-based WebGL). Up until a few years back, there was really only one way to take advantage of the GPU using web-based applications - that was through the WebGL API.

Birth of WebGPU

The WebGPU API introduced a new era for high performance web-based computing - not only a new API but also a new shader langauge. A set of tools and shaders that isn't just for graphics but is for compute operations as well. Hence, you need to know what is the correct algorithm and data for the correct problem/implementation.

The one size fits all approach to solving problems might work with the CPU but will definetly not work with web-based GPU-CPU programs (data and algorithms working across multiple langauges and processors)

Features and Advantages

High Performance Rendering & Compute

Web-based programs can be powerful! They can compete with natively installed programs. You can run large langauge models (like ChatGPT) in your web-browser or generative models (like Stable Diffusion) thanks to WebGPU.

Cross-Platform Compatibility

No need to worry about having the correctly libraries installed or which operating system your users have - if they've got an up to date web-browser - it will work!

Is this book just about graphics?

• Goes beyond just graphics - compute (perform calculations without graphics shader)
• Example 'simulations'
• Linking graphics to compute - data/structure

Tools and Languages

• Javascript - Underlying browser, optmizaations, arrays, ...data types
• JS->API->Shader (I say API as it could be XR or Sound API that are working with the WebGPU API)

Compatibility with Existing APIs

• Relationship with WebGL
• Integration with Vulkan

How is this book structured?

Start of by reviewing and introducing the core WebGPU API functions/setup, before moving on to explain the fundementals of the WGSL shader language (such as how to create functions, loops declare variables and so on). This forms the basis for later chapters, as wel work through different examples and discuss the different algorithms and data formats (which would be best, bad and crash).

Are there any assessments and exercises?

After each example there will be a range of simple tasks that we will give you a chance to work on - to both help you test out the example, but explore and dig deeper with the topic discussed (e.g., try out variables and alternative ideas).

Summary

WebGPU/WGSL Data Structures and Algorithms is an important and exciting text with lots of important tips and tricks - helping you to understand the best tool for the best job.

As we used plumbing as the analogy for data structures and algorithms - some fun examples of when plumbing 'sort-of' works but .... is dangerous, diry, hacky, or wrong.

Advert (Support Website)

Visitor: