GPU-Rendered Svelte Components using WebGL or WebGPU – Svader

Svader is a library for creating GPU-rendered Svelte components using WebGL and WebGPU fragment shaders. This allows developers to achieve high-performance visual effects and complex graphics directly within their Svelte applications.

At its core, Svader utilizes fragment shaders, which are programs that determine the color of each pixel on the screen. These shaders run on the GPU, enabling massive parallelism and speed improvements over traditional CPU-based rendering. This is especially beneficial for complex visual effects, data visualizations, and other graphically intensive applications.

Features

Use Cases

• Data Visualization. Create complex, real-time data visualizations that update dynamically with GPU-accelerated rendering. Render millions of data points smoothly and efficiently.
• Interactive Generative Art. Design procedural art installations and interactive graphics that respond instantaneously to user inputs, leveraging the parallel processing power of GPUs.
• Complex Web Animations. Develop sophisticated animations and visual effects that go beyond traditional CSS or JavaScript animations, with pixel-perfect control and exceptional performance.
• Scientific Visualization. Build advanced scientific simulations and rendering tools that require intensive computational graphics, such as fluid dynamics, particle systems, or molecular modeling.
• Game Development Prototyping. Rapidly prototype game graphics and experimental visual interfaces with direct GPU shader manipulation.

Installation

Install Svader using your preferred package manager:

# npm
npm i -D svader
# pnpm
pnpm i -D svader
# Bun
bun i -D svader
# Yarn
yarn add -D svader

Usage

To use Svader, you must first decide whether you want to use WebGL or WebGPU for your project. If you are unsure, it’s best to begin with WebGL due to its wider browser support.

Here’s a minimal WebGL fragment shader example:

<script>
    import { WebGlShader } from "svader";
    const shaderCode = `#version 300 es
        precision mediump float;
        out vec4 fragColor;
        uniform vec2 u_resolution;
        uniform vec2 u_offset;
        void main() {
            vec2 pos = gl_FragCoord.xy + u_offset;
            vec2 st = pos / u_resolution;
            fragColor = vec4(st, 0.0, 1.0);
        }
    `;
</script>
<WebGlShader
    width="500px"
    height="500px"
    code={shaderCode}
    parameters={[
        {
            name: "u_resolution",
            value: "resolution",
        },
        {
            name: "u_offset",
            value: "offset",
        },
    ]}
>
    <div class="fallback">WebGL not supported in this environment.</div>
</WebGlShader>

In this code, the shaderCode variable contains your GLES shader code. The <WebGlShader> component renders the shader. parameters defines uniforms. The fallback slot appears if the browser can’t render WebGL.

Here is a minimal example of a WebGPU fragment shader component using Svader:

<script>
    import { WebGpuShader } from "svader";
    const shaderCode = `
        @group(0) @binding(0) var<uniform> resolution: vec2f;
        @group(0) @binding(1) var<uniform> offset: vec2f;
        @fragment
        fn main(@builtin(position) raw_pos: vec4f) -> @location(0) vec4f {
            let pos = raw_pos.xy + offset;
            let st = pos / resolution;
            return vec4f(st, 0.0, 1.0);
        }
    `;
</script>
<WebGpuShader
    width="500px"
    height="500px"
    code={shaderCode}
    parameters={[
        { label: "Resolution", binding: 0, value: "resolution" },
        { label: "Offset", binding: 1, value: "offset" },
    ]}
>
    <div class="fallback">WebGPU not supported in this environment.</div>
</WebGpuShader>

Related Resources

• The Book of Shaders: This is a comprehensive guide to fragment shaders. It is useful for learning shader coding for both WebGL and WebGPU. https://thebookofshaders.com/
• WGSL Specification: The official specification for the WebGPU Shading Language. It is essential for understanding how to write WebGPU shaders and the language’s syntax and capabilities. https://gpuweb.github.io/gpuweb/wgsl/
• WebGL Specification: The official specification for WebGL. This document gives you in-depth information on the API, its functionality, and the technical details needed to utilize it. https://www.khronos.org/registry/webgl/specs/latest/

FAQs

Q: What is a fragment shader?
A: A fragment shader is a program that runs on the GPU and determines the color of each pixel on the screen.

Q: Which should I use: WebGL or WebGPU?
A: For most practical applications, WebGL is better because it is supported by all modern browsers, while WebGPU is still experimental and might not be supported everywhere.

Q: What are built-in values in Svader?
A: Built-in values are predefined parameters like "resolution", "scale", "time", and "offset" that Svader provides. These values are commonly used in fragment shaders.

Q: How do I pass custom values to shaders?
A: For WebGL, you can use the parameters array and specify the parameter type and value. For WebGPU, you need to pass the value as an ArrayBuffer/ArrayBufferView.

Preview