 | [TOC] Chapter 2: Tools and Languages |  |
Lots of the most powerful tools you need are free and integrated into your web-browser!
The purpose of these tutorials is to help you learn WebGPU. However, you can't really get started with WebGPU without a basic understanding of HTML and CSS along with a comprehensive understanding of JavaScript.
We'll look at some of these things here to get you up to speed on these preliminary skills.
You can edit and write your programs using a good old text editor (like notepad++). It's a wizard, its' free and it even has syntax highlighting. However, it just makes it tedious each time you want to check your code - as you have to do multiple steps.
An easier solution is a good integrated development environment (IDE) - it helps group together all your files (manage and keep track of a complex project). Their are also lots of features and debugging resources - not to mention a one click option to run your test programs.
Visual Studio Code is free, and has tons of free plugins to make your life so much easier. You can download and install it from https://code.visualstudio.com/.
If you want to load files, you need to run a local web server on your computer. Trying to run programs locally on your machine from the file directly without a server will not work correctly (as you can't open files - unless they're on a server).
The program files must be loaded into your browser by a web server.
A free and simple resource for running a local server is XAMPP. You can download and install XAMPP which will setup everything for you (Apache + MariaDB + PHP + Perl) - everything you need.
If you don't want to install anything - you can even do all of your programming, debugging and testing online in a browser. You can get editors and debuggers that run in the browser! Few examples include:
• webgpulab (webgpulab.xbdev.net)
• jsfiddle (jsfiddle.net)
• codesandbox (codesandbox.io)
| HTML and CSS | |
HTML (hypertext markup language) and CSS (cascading style sheets) are used to describe web pages. HTML describes the content of the page while CSS describes the formatting of various elements on the page. If a web page is designed with special care, the HTML code that describes the content of a page can remain static, while the CSS style sheets might change based on the target screen size. That is, the web page would have the same content, but could have very different layouts for a large desktop computer screen as compared to a mobile phone screen.
Since our goal in these tutorials is to learn WebGPU, please don't try to become an expert web designer at this time. To build WebGPU programs you only need to understand the basics of HTML and CSS code.
As with all software development, when you design a web page you should start with a very simple HTML document and add complexity a little at a time.
Basic HTML and CSS can be learned from many on-line tutorials. Please use the tutorials at code academy to learn how to create basic HTML and CSS code. Note that you can change from one lesson to the next using the table of contents popup menu in the lower left corner of the interface.
ResourcesThese cheat sheets will be helpful to you:
• HTML 4.0 Cheat Sheet (source: http://www.cheatography.com/davechild/cheat-sheets/html4/)
• CSS 3.0 Cheat Sheet (source: http://gamifyedu.co/wd/epicquest/extras/css3-cheat-sheet.pdf)
HTML Coding StandardsThese coding standards were introduced in section 1, but please study them again after you have studied HTML and CSS.
Always declare the document type as the first line in your document: <!doctype html>
Use lower case element names: <p>, <div>
Close all elements: <p> ... </p>
Close empty elements: <br />
Use lowercase attribute names: <div class="...">
Quote all attribute values for consistency: <div class="...">
Don't use spaces around equal signs: <div class="...">
Try to avoid code lines longer than 80 characters
For readability, add blank lines to separate large or logical code blocks.
For readability, add 2 spaces of indentation for code inside a parent element. Do not use TAB characters.
Always include a <html> , <head> and <body> tag.
Always include the language, character encoding, and <title> :
<!doctype html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>HTML5 Syntax and Coding Style</title>
</head>
Include appropriate comments: ``<!-- This is a comment -->``
Use simple syntax for linking style sheets: ``<link rel="stylesheet" href="styles.css">``
Use simple syntax for loading external scripts: ``<script src="myscript.js">``
Use the same naming convention in HTML as JavaScript
Always use lower case file names
Use consistent file name extensions: ``.html, .css, .js, .frag, .vert, .obj, .mtl``
Let's focus on the tools and resources in detail using general JavaScript and WebGPU examples to connect the concepts.
| JavaScript Language | |
JavaScript is at the core of any WebGPU application. To work with WebGPU effectively, you need to master certain JavaScript features, including classes, modules, asynchronous programming, and how JavaScript interacts with the DOM. These concepts are vital for structuring your WebGPU projects, managing resources, and writing clean, reusable code.
Context
In JavaScript, the term context refers to the value of `this`, which is determined by how a function is called. Context becomes particularly important when you're working with classes, event handlers, and asynchronous code in WebGPU, as `this` allows you to reference the properties and methods within the current object or function.
Consider an example where we define a method within a WebGPU class to initialize the GPU. If `this` is misused, it can cause errors because it won’t reference the correct object.
class WebGPUApp {
constructor() {
this.name = 'My WebGPU App';
}
initialize() {
console.log(this.name); // Refers to the 'name' property of the WebGPUApp instance.
}
}
const app = new WebGPUApp();
app.initialize(); // Logs: "My WebGPU App"
Without careful handling of `this`, you could easily lose access to the class instance properties, especially in event listeners and callback functions where the context changes.
Classes and Objects in JavaScript
JavaScript's `class` syntax allows you to create objects with predefined properties and methods. This is especially useful in WebGPU applications, where you may want to encapsulate various functionalities such as setting up the WebGPU context, loading shaders, and managing the rendering pipeline into reusable class structures.
Module Type
Modules in JavaScript provide a way to organize code into reusable, encapsulated units. This is useful in WebGPU applications where you may want to separate concerns such as GPU initialization, shader management, and rendering logic into distinct files. Modules make your code more maintainable and scalable.
Typically JavaScript files have the extension `.js`, however to distinguish native JS from Modular JS - the `.mjs` extension is used.
For example, you might define a `gpu.mjs` file that contains utility functions for initializing the GPU:
// gpu.mjs
export async function initializeGPU(canvas) {
const adapter = await navigator.gpu.requestAdapter();
const device = await adapter.requestDevice();
return { adapter, device };
}
You can then import this module in your main application file:
// main.mjs
import { initializeGPU } from './gpu.mjs';
const canvas = document.getElementById('gpuCanvas');
const gpuContext = await initializeGPU(canvas);
Class Keyword
The `class` keyword in JavaScript allows you to create a blueprint for objects that share common properties and behaviors. In WebGPU applications, you’ll often create classes to manage GPU state and rendering logic.
Example:
class Renderer {
constructor(canvas) {
this.canvas = canvas;
this.context = canvas.getContext('webgpu');
}
initialize() {
console.log("Renderer initialized with WebGPU context");
}
}
const canvas = document.getElementById('gpuCanvas');
const renderer = new Renderer(canvas);
renderer.initialize(); // Output: Renderer initialized with WebGPU context
In this example, the `Renderer` class encapsulates all the logic needed to initialize a WebGPU context and manage the canvas.
Constructors
A constructor is a special method that is automatically invoked when an instance of a class is created. Constructors are essential in WebGPU for setting up objects that represent various parts of your application, such as the rendering context, shaders, and pipelines.
Example:
class WebGPUDevice {
constructor(adapter) {
this.device = adapter.requestDevice();
}
}
Constructors help organize the initialization code for WebGPU, such as setting up devices and pipelines, and ensuring these components are ready for use.
Import/Export
JavaScript modules enable you to organize your code by using `import` and `export`. You can export classes, functions, or variables from one module and then import them into another, allowing you to keep your codebase modular and manageable.
For instance, you can define WebGPU initialization logic in one file and import it elsewhere, which makes testing and maintenance easier:
// context.mjs
export class GPUContext {
constructor(canvas) {
this.canvas = canvas;
}
}
// main.mjs
import { GPUContext } from './context.mjs';
const canvas = document.getElementById('gpuCanvas');
const gpuContext = new GPUContext(canvas);
Public and Private Data in a Class
JavaScript provides a way to define public and private fields in a class. Public fields are accessible from outside the class, while private fields are restricted to the class itself. This is particularly useful in WebGPU development to manage internal GPU state that should not be modified directly by external code.
Private fields in JavaScript are declared using the `#` syntax:
class WebGPUApp {
#device; // Private field
constructor(adapter) {
this.#device = adapter.requestDevice();
}
getDevice() {
return this.#device; // Accessing private field via a public method
}
}
Using private fields can prevent accidental modification of sensitive data like WebGPU resources and ensures that only specific methods interact with that data.
Some Class Examples
Here's an example of a basic WebGPU class that loads the GPU context and sets up the rendering pipeline:
class BasicRenderer {
constructor(canvas) {
this.canvas = canvas;
this.context = canvas.getContext('webgpu');
}
async initialize() {
this.adapter = await navigator.gpu.requestAdapter();
this.device = await this.adapter.requestDevice();
console.log('WebGPU initialized');
}
render() {
// Rendering logic here
console.log('Rendering frame...');
}
}
const canvas = document.getElementById('gpuCanvas');
const renderer = new BasicRenderer(canvas);
renderer.initialize();
This class is a simple starting point for encapsulating GPU initialization and rendering logic in a reusable structure.
| DOM | |
The Document Object Model (DOM) represents the structure of your HTML page. To work with WebGPU, you'll need to manipulate the DOM to get references to elements like the canvas, handle events, and manage user input.
JavaScript Essentials
The DOM is accessed via JavaScript, allowing you to dynamically interact with and modify HTML elements. In WebGPU, the most important DOM element is the <canvas> , where WebGPU renders its output.
To access the canvas:
const canvas = document.querySelector('#gpuCanvas');
You can also manipulate canvas properties like width and height:
canvas.width = 800;
canvas.height = 600;
| Canvas and WebGPU Context | |
Getting the Canvas Element
The canvas is the HTML element where all WebGPU rendering happens. To render anything, you first need to obtain the canvas element from the DOM.
const canvas = document.getElementById('gpuCanvas');
The canvas is a placeholder in your HTML document, and all WebGPU operations will render directly onto this canvas.
Getting the WebGPU Context
Once you have a reference to the canvas, you need to create a WebGPU context from it. This is similar to getting a WebGL or 2D context in HTML5.
const context = canvas.getContext('webgpu');
The `getContext('webgpu')` method gives you access to the WebGPU API, which lets you interface with the GPU to perform rendering and compute tasks.
The WebGPU Context
The WebGPU context is the interface through which the GPU interacts with the canvas. You will use it to control rendering, manage resources, and set up the rendering pipeline. The context serves as the link between your code and the physical GPU, allowing for efficient real-time graphics rendering.
| Asynchronous File Loading | |
In many WebGPU applications, you’ll need to load resources like shaders, textures, or models from external files. This is where JavaScript’s asynchronous programming features, such as `async`, `await`, and the `fetch` API, come in handy.
Requesting File Downloads
You can request files from a server using the `fetch` function, which returns a promise. This is useful for loading shader source code or textures.
async function loadShaderFile(url) {
const response = await fetch(url);
const shaderCode = await response.text();
return shaderCode;
}
This function asynchronously fetches a file and returns its contents as a string. This is critical for loading shader source files in WebGPU applications.
await , async`, fetch
* ** async**: Marks a function as asynchronous, meaning it returns a promise and can use the `await` keyword inside it.
* ** await**: Pauses the execution of the function until a promise is resolved.
* ** fetch``: Fetches resources from the network and returns a promise.
Loading a Text File Example
Shader files are text - so we'll show a simple example of how you'd load in an external shader file using the fetch API.
async function loadShader(url) {
const response = await fetch(url);
const shaderCode = await response.text();
return shaderCode;
}
loadShader('shaders/vertex.wgsl').then((code) => {
console.log('Shader loaded:', code);
});
Loading an Image File Example
To load textures in WebGPU, you can also load image files using asynchronous methods:
async function loadImage(url) {
const img = new Image();
img.src = url;
await img.decode();
return img;
}
const textureImage = await loadImage('
textures/texture.png');
This method loads an image asynchronously and decodes it before returning, making it ready to be used as a texture in WebGPU.
| Events | |
JavaScript events allow you to interact with the browser, enabling features such as user input handling. Events are critical for WebGPU applications where user actions like mouse clicks or keyboard inputs can trigger changes in the rendering state or control animations.
Browser Events
Browser events are actions that the browser captures, such as clicks, keypresses, or mouse movements. These events are crucial for building interactive WebGPU applications, where user input may dictate how the scene renders or how animations proceed.
Mapping Events to DOM Elements
You can attach event listeners to DOM elements like the canvas to respond to user interactions. This is commonly done using `addEventListener`:
canvas.addEventListener('click', () => {
console.log('Canvas clicked');
});
Here, a click on the canvas element will trigger a function that logs a message. You can use this method to initiate animations, change rendering modes, or handle any user-driven action in your WebGPU project.
Event Objects
When an event occurs, JavaScript generates an event object containing information about the event, such as the target element, mouse coordinates, or key pressed. You can access this object within the event handler function:
canvas.addEventListener('mousemove', (event) => {
console.log(`Mouse position: ${event.clientX}, ${event.clientY}`);
});
This information is valuable when building interactive graphics, such as using mouse input to rotate or zoom a 3D object.
An Example Event Handler
Let’s build a simple example where clicking the canvas changes its background color:
canvas.addEventListener('click', () => {
canvas.style.backgroundColor = 'lightblue';
});
Each click changes the canvas color, and similar logic can be applied to trigger more complex behaviors in WebGPU, such as toggling rendering modes or adjusting lighting parameters.
Event Hierarchies
In JavaScript, events have a hierarchy, meaning they can propagate through different elements. There are two phases to this propagation:
• Capturing: The event moves from the root of the DOM to the target element.
• Bubbling: The event moves back up from the target element to the root.
This behavior allows you to handle events at different levels in the DOM, such as attaching event handlers to both the document and individual elements.
| Debugging | |
When building WebGPU applications, debugging is crucial for identifying and fixing errors. JavaScript provides several tools for this, including browser developer tools and built-in debugging methods.
Google Chrome offers powerful tools for debugging JavaScript applications, which are especially useful when developing with WebGPU. Some key features include:
• Console: Log messages, inspect variables, and check for errors.
• Debugger: Set breakpoints in your code to pause execution and inspect variable states at specific points.
• Network Panel: Inspect network requests, such as when you load shaders or textures with `fetch`.
• WebGPU Inspector: Chrome has a built-in WebGPU debugger where you can inspect WebGPU commands, buffers, and pipelines.
Debugging Principles
1. Set Breakpoints: Breakpoints allow you to pause your code at a specific line and inspect the state of variables. This is especially useful in asynchronous code where errors might not be immediately visible.
2. Watch Variables: While paused at a breakpoint, you can monitor variables to see how their values change over time.
3. Use the Console: `console.log` is a simple but effective tool for outputting debug information at critical points in your code. For example, logging the status of your WebGPU device and context can help you trace issues during initialization.
console.log('WebGPU Device:', device);
You also have access to `console.assert(..)` and `console.warn(..)`.
Use these debugging techniques to track down errors in WebGPU initialization, shader compilation, and rendering issues.
| Summary | |
This chapter covered the essential tools and resources you’ll need to develop WebGPU applications using JavaScript. We explored key JavaScript concepts like classes, modules, and asynchronous programming, and discussed how to interact with the DOM and handle events. Additionally, we learned how to load resources asynchronously, and how to debug WebGPU applications using Chrome DevTools. These tools form the foundation for building efficient, interactive WebGPU applications.
|
