Create GPU-rendered Svelte components

This is an extensive documentation for Svader, a JavaScript library that allows developers to render GPU-accelerated graphics in web applications. Here's a summary of the key points:

WebGL vs. WebGPU

• WebGL is the older API and is supported by all modern browsers.
• WebGPU is still experimental and only supported in a few browsers.
• WebGPU offers features not available in WebGL, such as practically unlimited canvases.

Svader Features

• Supports both WebGL and WebGPU rendering APIs.
• Allows developers to render GPU-accelerated graphics in web applications.
• Enables the use of built-in values for common parameters like resolution, scale, and time.
• Supports storage variables for parameters, allowing for more flexible usage.

Svader Parameters

• The parameters property is an array of objects with the following properties:
  • label: The name of the parameter to be used for debugging.
  • binding: An integer matching the variable in the shader code.
  • value: The value of the parameter or a string specifying a built-in value. If not a built-in value, it should be an ArrayBuffer/ArrayBufferView.
  • storage: Optional, defaults to false. Whether the parameter is a storage variable rather than a uniform variable.

Svader Built-in Values

• Supported values:
  • "resolution": A vec2f of the canvas width and height in physical device pixels.
  • "scale": An f32 of the ratio between CSS pixels and physical device pixels, i.e., zoom level.
  • "time": An f32 of the current time in seconds.
  • "offset": A vec2f to be added to the @builtin(position) of the fragment shader.

Svader Usage

• For practical applications, default to using WebGL.
• Use the parameters property to pass parameters to the renderer.
• Use built-in values for common parameters like resolution, scale, and time.
• Consider using storage variables for parameters to allow for more flexible usage.

Overall, Svader provides a powerful toolset for developers to render GPU-accelerated graphics in web applications. By understanding its features, parameters, and built-in values, developers can optimize their application's performance and create engaging user experiences.