https://github.com/sockmaster27/svader Skip to content Navigation Menu Toggle navigation Sign in * Product + GitHub Copilot Write better code with AI + Security Find and fix vulnerabilities + Actions Automate any workflow + Codespaces Instant dev environments + Issues Plan and track work + Code Review Manage code changes + Discussions Collaborate outside of code + Code Search Find more, search less Explore + All features + Documentation + GitHub Skills + Blog * Solutions By company size + Enterprises + Small and medium teams + Startups By use case + DevSecOps + DevOps + CI/CD + View all use cases By industry + Healthcare + Financial services + Manufacturing + Government + View all industries View all solutions * Resources Topics + AI + DevOps + Security + Software Development + View all Explore + Learning Pathways + White papers, Ebooks, Webinars + Customer Stories + Partners + Executive Insights * Open Source + GitHub Sponsors Fund open source developers + The ReadME Project GitHub community articles Repositories + Topics + Trending + Collections * Enterprise + Enterprise platform AI-powered developer platform Available add-ons + Advanced Security Enterprise-grade security features + GitHub Copilot Enterprise-grade AI features + Premium Support Enterprise-grade 24/7 support * Pricing Search or jump to... Search code, repositories, users, issues, pull requests... Search [ ] Clear Search syntax tips Provide feedback We read every piece of feedback, and take your input very seriously. [ ] [ ] Include my email address so I can be contacted Cancel Submit feedback Saved searches Use saved searches to filter your results more quickly Name [ ] Query [ ] To see all available qualifiers, see our documentation. Cancel Create saved search Sign in Sign up Reseting focus You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert {{ message }} sockmaster27 / svader Public * Notifications You must be signed in to change notification settings * Fork 2 * Star 160 Create GPU-rendered Svelte components npmjs.com/package/svader License MIT license 160 stars 2 forks Branches Tags Activity Star Notifications You must be signed in to change notification settings * Code * Issues 0 * Pull requests 0 * Actions * Security * Insights Additional navigation options * Code * Issues * Pull requests * Actions * Security * Insights sockmaster27/svader master BranchesTags [ ] Go to file Code Folders and files Name Name Last commit Last commit message date Latest commit History 143 Commits .github/workflows .github/workflows .vscode .vscode packages packages resources resources tests tests .gitignore .gitignore .prettierignore .prettierignore .prettierrc .prettierrc CONTRIBUTING.md CONTRIBUTING.md LICENSE.md LICENSE.md README.md README.md eslint.config.js eslint.config.js package-lock.json package-lock.json package.json package.json playwright.config.ts playwright.config.ts tsconfig.json tsconfig.json View all files Repository files navigation * README * MIT license Svader Logo Svader Create GPU-rendered Svelte components with WebGL and WebGPU fragment shaders. Supports Svelte 4 and Svelte 5. What is a fragment shader? In short, a fragment shader can be written as a program that takes the coordinates of a pixel on the screen and returns the color that this pixel should have. This program can be executed on the GPU, ensuring massive parallelism and speed. To learn more about how to write fragment shaders, check out The Book of Shaders. The following is a collection of examples all made using Svader. The live version of all of these can be previewed on svader.vercel.app, and the source code can be found in the src/routes/ directory. Shader example collage Installation # npm npm i -D svader # pnpm pnpm i -D svader # Bun bun i -D svader # Yarn yarn add -D svader Usage To use a fragment shader component, you first need to decide whether to use WebGL or WebGPU. If you're unsure about what to use, see the WebGL vs. WebGPU section. Sections * WebGL + WebGL parameters o WebGL built-in values * WebGPU + WebGPU parameters o WebGPU built-in values WebGL The following is a minimal example of a WebGL fragment shader component. View in REPL
WebGL not supported in this environment.
 This produces the following output: Output of the WebGL shader Here, the shaderCode variable is a string containing the GLES shader code. For simplicity, this is stored as a string, but it would typically be stored in a separate myShader.frag file. When loading the shader from a file, it might be useful to know that the code property accepts both a string and a Promise. What this code does is: 1. Add the given u_offset uniform to the 2D coordinates of the pixel given by gl_FragCoord.xy. 2. Divide the resulting coordinates entrywise by the u_resolution uniform to normalize the coordinates between 0 and 1. 3. Return the normalized coordinates as the color of the pixel, such that the x coordinate becomes the red channel and the y coordinate becomes the green channel. The blue channel is always set to 0, and the alpha (opacity) channel is always set to 1 (fully opaque). In GLES, uniforms are inputs to the function, that are the same for every pixel on the screen. These need to be passed in via the parameters property of the component. In this case, we need to pass in two uniforms: u_resolution and u_offset. Since these specific parameters are very commonly used, they are specially implemented in Svader such that the value property of each parameter can simply be set to "resolution" and "offset" respectively. Lastly, the component accepts a fallback slot, which is rendered when the browser cannot render the shader. WebGL parameters The parameters property is an array of objects with the following properties: * name: The name of the uniform parameter, e.g. "my_uniform". This must match the name of the parameter in the shader code. * type: The type of the uniform parameter as it is written in the shader code, e.g. "float". If the value property is a built-in value, such as "resolution", the type will be determined automatically and should not be set. * value: The value of the uniform parameter, or a string specifying a built-in value. If not a built-in value, the type of this property must correspond to the type property, such that: + float, int, uint is a number, + vecN, ivecN, uvecN is a number[] with a length of N, e.g. vec2 -> [1.2, 3.4]. + matN is a number[] with a length of N * N, e.g. mat2 -> [1, 2, 3, 4]. WebGL built-in values Some types of uniforms are used very often. These are implemented in Svader itself, and referred to as built-in values. To use these, the value property of the parameter object must be set to a string matching one of the following: * "resolution": A vec2 of the canvas width and height in physical device pixels. * "scale": A float of the ratio between CSS pixels and physical device pixels, i.e. zoom level. For example, if the browser has been zoomed to 150%, the scale parameter will be 1.5. * "time": A float of the current time in seconds. NOTE: Passing this parameter to the shader will cause it to rerender every frame. * "offset": A vec2 to be added to the gl_FragCoord.xy of the fragment shader. Sometimes the size of the canvas is limited by hardware. To compensate for this, Svader creates a virtual canvas with a smaller cutout shifting around to cover the screen. The "resolution" parameter is automatically adjusted to match the size of this virtual canvas, but for technical reasons, the gl_FragCoord.xy cannot be adjusted from the outside. Therefore, the "offset" parameter is provided to be manually added to these coordinates. WebGPU The following is a minimal example of a WebGPU fragment shader component. View in REPL
WebGPU not supported in this environment.
 This produces the following output: Output of the WebGPU shader Here, the shaderCode variable is a string containing the WGSL shader code. For simplicity, this is stored as a string, but it would typically be stored in a separate myShader.wgsl file. When loading the shader from a file, it might be useful to know that the code property accepts both a string and a Promise. What this code does is: 1. Add the given offset uniform variable to the 2D coordinates of the pixel given by raw_pos.xy. 2. Divide the resulting coordinates entrywise by the resolution uniform to normalize the coordinates between 0 and 1. 3. Return the normalized coordinates as the color of the pixel, such that the x coordinate becomes the red channel and the y coordinate becomes the green channel. The blue channel is always set to 0, and the alpha (opacity) channel is always set to 1 (fully opaque). In WGSL, these vars are the primary way to pass in parameters to the shader. These need to be passed in via the parameters property of the component. In this case, we need to pass in two uniforms: resolution and offset. Since these specific parameters are very commonly used, they are specially implemented in Svader such that the value property of each parameter can simply be set to "resolution" and "offset" respectively. Lastly, the component accepts a fallback slot, which is rendered when the browser cannot render the shader. WebGPU parameters The parameters property is an array of objects with the following properties: * label: The name of the parameter to be used for debugging. This does not have to correspond to the name of the parameter in the shader code. * binding: An integer used to match the parameter to the variable in the shader code. This has to match the binding property of the parameter in the shader code, e.g. for the variable declaration @group(0) @binding(42) var my_variable: f32; the binding property should be 42. * value: The value of the parameter, or a string specifying a built-in value. If not a built-in value, this parameter should be an ArrayBuffer/ArrayBufferView. For example, to pass in a number to an f32 parameter, it can be constructed like new Float32Array ([myNumberValue]). * storage: [Optional - defaults to false] Whether the parameter is a storage variable rather than a uniform variable. This has to match the declaration in the shader code, e.g. for the variable declaration @group(0) @binding(0) var my_variable: f32; the storage property should be false or omitted, and for @group(0) @binding(0) var my_variable: f32; it should be true. Note that Svader currently only supports var and not var. WebGPU built-in values Some types of inputs are used very often. These are implemented in Svader itself, and referred to as built-in values. To use these, the value property of the parameter object must be set to a string matching one of the following: * "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. For example, if the browser has been zoomed to 150%, the scale parameter will be 1.5. * "time": An f32 of the current time in seconds. NOTE: Passing this parameter to the shader will cause it to rerender every frame. * "offset": A vec2f to be added to the @builtin(position) of the fragment shader. Sometimes the size of the canvas is limited by hardware. To compensate for this, Svader creates a virtual canvas with a smaller cutout shifting around to cover the screen. The "resolution" parameter is automatically adjusted to match the size of this virtual canvas, but for technical reasons, the @builtin(position) cannot be adjusted from the outside. Therefore, the "offset" parameter is provided to be manually added to these coordinates. WebGL vs. WebGPU For practical applications, default to using WebGL. WebGL and WebGPU are both rendering APIs that allow web applications to render GPU-accelerated graphics. WebGL is the older of the two and is supported by all modern browsers . WebGPU is still in the experimental stage and is only supported in a few browsers. However, it supports certain features that WebGL does not. For example, as of writing, WebGL in Google Chrome only supports having 8 canvases active in the document at once, while WebGPU supports a practically unlimited number. License Svader is licensed under the MIT License. About Create GPU-rendered Svelte components npmjs.com/package/svader Topics javascript webgl typescript web shaders shader svelte-components svelte javascript-library typescript-library fragment-shader webgl2 webgpu sveltejs webgl-shader svelte-component sveltekit webgpu-shaders svelte4 svelte5 Resources Readme License MIT license Activity Stars 160 stars Watchers 2 watching Forks 2 forks Report repository Releases 10 v0.5.0 Latest Nov 6, 2024 + 9 releases Contributors 2 * @sockmaster27 sockmaster27 Holger Dal Mogensen * @kevinji kevinji Kevin Ji Languages * Svelte 57.0% * WGSL 16.2% * GLSL 16.1% * TypeScript 6.0% * JavaScript 4.1% * HTML 0.6% Footer (c) 2024 GitHub, Inc. Footer navigation * Terms * Privacy * Security * Status * Docs * Contact * Manage cookies * Do not share my personal information You can't perform that action at this time.