About

• Live-coding of parametric functions in WebGPU.
• Currently only works in the nightly dev version of Chrome: Chrome Canary.
• To enable WebGPU, start Canary with the --enable-unsafe-webgpu flag.

TODO:

• Camera position is currently not stored in sharable URL.

Getting Started

Start by modifying the samplePosition() function. You can also modify the vertex and fragment shaders for full control over procedural geometry and textures. Note that there are two vertex shaders - one for triangle and another one for point primitives.

The shader code is stored as part of the URL. You can simply copy & paste the URL to share the results.

Examples

Example 1:

Modified version of a parametric function in the mathworks examples.

URL: https://users.cg.tuwien.ac.at/mschuetz/parametric/parametric.html

Example 2:

Simple plane geometry, colored and animated by the fragment shader.

URL: https://users.cg.tuwien.ac.at/mschuetz/parametric/parametric.html?primitive=triangles&resolution=164&shadercode=Ci8vIC0gbW9kaWZ5IHNhbX ...

Example 3

URL: https://users.cg.tuwien.ac.at/mschuetz/parametric/parametric.html?primitive=triangles&resolution=649&shadercode=Ci8vIC0gb ...