This repo contains a simple tour of WGSL static site generator. The purpose is to provide an introduction to WGSL through examples which can be modified and run by the user.
This is not an officially supported Google product.
- Install Hugo Extended v0.0111.3 or newer
Available from Hugo Releases (might need to expand the fold to see the extended versions)
An example install on a Debian based Linux system using prebuilt binaries:
- Goto Hugo Releases - v0.111.3 in a browser
- Download the platform appropriate prebuilt package (
hugo_extended_0.111.3_linux-amd64.deb)- Install package locally using
dpkg -i hugo_extended_0.111.3_linux-amd64.deb
In 'Tour of WGSL' source directory
-
Install Node dependencies
npm ci -
Run Hugo webserver
npm run serve
This should start a webserver on localhost:1313/tour-of-wgsl that you
can visit using a browser on your local machine. Editing pages in the
site will auto-reload the browser window. This site may not display
correctly if WebGPU is not available in your browser, see below for
details about enabling WebGPU.
Documentation can be generated with npm run docs, though there are
known issues with types that may cause warnings/errors.
Note: Need to be running Chrome (113.xxx) or newer, which currently is the canary/unstable version. For Windows & Mac this can be downloaded from https://www.google.com/intl/en_ca/chrome/canary/.
Highly recommended that this exists locally as a separate install from your standard/daily driver browser, since it is not as heavily tested as stable, so may break for normal usage
Enable WebGPU flags, using either:
- Set
Unsafe WebGPUtoenabledinchrome://flags/#enable-unsafe-webgpuin the browser
There is no canary provided for Linux, so either you will need to install from source or download a nightly build, both of which are out of scope for this doc.
For Googlers on Linux, there is an internal Chrome unstable package that can be installed using
apt-getfor a separate install from your normal work browser
On Linux, with Unsafe WebGPU enabled, you may still not get
triangles rendering, depending on if Vulkan support is enabled for
your browser.
To force enabling Vulkan:
- Set
Vulkantoenabledinchrome://flags/#enable-vulkanin the browser
A new page can be added with the hugo new command.
hugo new basics/for-loops.md
This would add a new for-loops.md page into the basics/ folder. The
Markdown file can also just be created by hand if desired.
The pages for the tour exist in the content/ folder. The _index.md
file is the main homepage of the application. Under content/ there
are a series of folders such as basics/ for the various sections in
the tour. Each folder may contain multiple steps of that part of the
tour.
A page allows the shader source to be set which will be loaded into the
text box. This is done by adding a shader: <path to shader> into the
frontmatter of the document (the stuff in the --- block at the top).
The shader will be fetched and populated into the textbox. The user can
then edit the shader if desired and Render the result.
There are several uniforms provided to the shaders, this does mean that for any shader which doesn't use the uniforms they need a phony assignment in order to not generate layout errors.
frame-- The current frame number