svader
v0.5.1
Создайте стройные компоненты с помощью GPU с шейдерами фрагментов WebGL и WebGPU.
Поддерживает Svelte 4 и Svelte 5.
Короче говоря, фрагментный шейдер может быть написан как программа, которая берет координаты пикселя на экране и возвращает цвет, который должен иметь этот пиксель. Эта программа может быть выполнена на графическом процессоре, обеспечивая массовый параллелизм и скорость.
Чтобы узнать больше о том, как писать фрагментные шейдеры, ознакомьтесь с книгой шейдеров.
Ниже приведена набор примеров, сделанных с использованием Svader. Живая версия всех них может быть предварительно просмотрено на svader.vercel.app, и исходный код можно найти в src/routes/ Directory.
# npm
npm i -D svader
# pnpm
pnpm i -D svader
# Bun
bun i -D svader
# Yarn
yarn add -D svaderЧтобы использовать компонент фрагмента шейдера, вам сначала нужно решить, использовать ли WebGL или WebGPU. Если вы не уверены в том, что использовать, см. В разделе WebGL против WebGPU.
Ниже приведен минимальный пример компонента шейдера Webgl.
Посмотреть в Repl
< 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 >Это дает следующий выход:
Здесь переменная shaderCode - это строка, содержащая код шейдера GLES. Для простоты это хранится как строка, но обычно она хранится в отдельном файле myShader.frag . При загрузке шейдера из файла может быть полезно знать, что свойство code принимает как string , так и Promise<string> .
Что делает этот код:
u_offset в 2D координаты пикселя, данного gl_FragCoord.xy .u_resolution , чтобы нормализовать координаты между 0 и 1.x становится красным каналом, а координата y становится зеленым каналом. Синий канал всегда установлен на 0, а канал альфа (непрозрачность) всегда установлен на 1 (полностью непрозрачный). В GLES униформа является входом в функцию, которые одинаковы для каждого пикселя на экране. Они должны быть переданы через свойство parameters компонента <WebGlShader> . В этом случае нам нужно пройти в две формы: u_resolution и u_offset . Поскольку эти конкретные параметры очень часто используются, они специально реализованы в Svader, так что свойство value каждого параметра может быть просто установлено на "resolution" и "offset" соответственно.
Наконец, компонент <WebGlShader> принимает запасной слот, который отображается, когда браузер не может отображать шейдер.
Свойство parameters представляет собой массив объектов со следующими свойствами:
name : Имя единого параметра, например, "my_uniform" . Это должно соответствовать имени параметра в коде шейдера.
type : тип единого параметра, как он записан в коде шейдера, например, "float" . Если свойство value является встроенным значением, таким как "resolution" , type будет определяться автоматически и не должно быть установлено.
value : значение равномерного параметра или строка, указывающая встроенное значение. Если не встроенное значение, тип этого свойства должно соответствовать свойству type , таким, что:
float , int , uint - это number ,vecN , ivecN , uvecN -это number[] с длиной N , например, vec2 -> [1.2, 3.4] .matN -это number[] с длиной N * N , например, mat2 -> [1, 2, 3, 4] . Некоторые типы униформы используются очень часто. Они реализованы в самом Svader и называются встроенными значениями . Чтобы использовать их, свойство value объекта параметра должно быть установлено на строку, соответствующую одному из следующих:
"resolution" : vec2 ширины и высоты холста в пикселях физического устройства.
"scale" : float соотношения между пикселями CSS и пикселями физического устройства, то есть уровень масштабирования. Например, если браузер был увеличен до 150%, параметр scale будет 1.5 .
"time" : float текущего времени за считанные секунды. Примечание: передача этого параметра в шейдер заставит его редерендировать каждый кадр.
"offset" : vec2 , который должен быть добавлен в gl_FragCoord.xy фрагментного шейдера. Иногда размер холста ограничен аппаратным обеспечением. Чтобы компенсировать это, Svader создает виртуальный холст с меньшим переключением выреза, чтобы покрыть экран. Параметр "resolution" автоматически регулируется в соответствии с размером этого виртуального холста, но по техническим причинам gl_FragCoord.xy не может быть скорректирован снаружи. Следовательно, параметр "offset" предоставлен для добавления вручную к этим координатам.
Ниже приведен минимальный пример компонента шейдера фрагмента WebGPU.
Посмотреть в Repl
< 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 >Это дает следующий выход:
Здесь переменная shaderCode - это строка, содержащая код шейдера WGSL. Для простоты это хранится как строка, но обычно она хранится в отдельном файле myShader.wgsl . При загрузке шейдера из файла может быть полезно знать, что свойство code принимает как string , так и Promise<string> .
Что делает этот код:
offset переменную к 2D координатам пикселя, заданного raw_pos.xy .resolution , чтобы нормализовать координаты между 0 и 1.x становится красным каналом, а координата y становится зеленым каналом. Синий канал всегда установлен на 0, а канал альфа (непрозрачность) всегда установлен на 1 (полностью непрозрачный). В WGSL эти var<uniform> S являются основным способом передать параметры шейдеру. Они должны быть переданы через свойство parameters компонента <WebGpuShader> . В этом случае нам нужно пройти в две формы: resolution и offset . Поскольку эти конкретные параметры очень часто используются, они специально реализованы в Svader, так что свойство value каждого параметра может быть просто установлено на "resolution" и "offset" соответственно.
Наконец, компонент <WebGpuShader> принимает отступник, который отображается, когда браузер не может отображать шейдер.
Свойство parameters представляет собой массив объектов со следующими свойствами:
label : Имя параметра, который будет использоваться для отладки. Это не должно соответствовать имени параметра в коде шейдера.
binding : целое число, используемое для сопоставления параметра с переменной в коде шейдера. Это должно соответствовать свойству binding параметра в коде шейдера, например, для объявления переменной
@ group ( 0 ) @ binding ( 42 ) var < uniform > my_variable : f32 ; Свойство binding должно быть 42 .
value : значение параметра или строка, указывающая встроенное значение. Если не встроенное значение, этот параметр должен быть ArrayBuffer / ArrayBufferView . Например, чтобы перейти в число в параметр f32 , он может быть построен, как new Float32Array([myNumberValue]) .
storage : [Необязательно - по умолчанию false ], является ли параметр переменной хранения, а не равномерной переменной. Это должно соответствовать объявлению в коде шейдера, например, для объявления переменной
@ group ( 0 ) @ binding ( 0 ) var < uniform > my_variable : f32 ; свойство storage должно быть false или опущенным, и для
@ group ( 0 ) @ binding ( 0 ) var < storage , read > my_variable : f32 ; это должно быть true . Обратите внимание, что Svader в настоящее время поддерживает только var<storage, read> , а не var<storage, read_write> .
Некоторые типы входов используются очень часто. Они реализованы в самом Svader и называются встроенными значениями . Чтобы использовать их, свойство value объекта параметра должно быть установлено на строку, соответствующую одному из следующих:
"resolution" : vec2f ширины и высоты холста в пикселях физического устройства.
"scale" : f32 отношения между пикселями CSS и пикселями физического устройства, то есть уровень масштабирования. Например, если браузер был увеличен до 150%, параметр scale будет 1.5 .
"time" : f32 текущего времени за считанные секунды. Примечание: передача этого параметра в шейдер заставит его редерендировать каждый кадр.
"offset" : vec2f , который должен быть добавлен в @builtin(position) фрагментного шейдера. Иногда размер холста ограничен аппаратным обеспечением. Чтобы компенсировать это, Svader создает виртуальный холст с меньшим переключением выреза, чтобы покрыть экран. Параметр "resolution" автоматически регулируется в соответствии с размером этого виртуального холста, но по техническим причинам @builtin(position) не может быть скорректирован снаружи. Следовательно, параметр "offset" предоставлен для добавления вручную к этим координатам.
Для практических приложений по умолчанию использование WebGL.
WebGL и WebGPU-это рендеринг API, которые позволяют веб-приложениям отображать графику с ускоренной графической деятельностью.
WebGL - старше из двух и поддерживается всеми современными браузерами.
WebGPU все еще находится на экспериментальной стадии и поддерживается только в нескольких браузерах. Тем не менее, он поддерживает определенные функции, которые нет Webgl. Например, по состоянию на написание, WebGL в Google Chrome поддерживает только 8 половых, активных в документе одновременно, в то время как WebGPU поддерживает практически неограниченное число.
Svader лицензирован по лицензии MIT.
