svader
v0.5.1
Buat komponen SVELTE yang diseret GPU dengan WebGL dan WebGPU Fragment Shaders.
Mendukung Svelte 4 dan Svelte 5.
Singkatnya, shader fragmen dapat ditulis sebagai program yang mengambil koordinat piksel di layar dan mengembalikan warna yang seharusnya dimiliki piksel ini. Program ini dapat dieksekusi pada GPU, memastikan paralelisme dan kecepatan yang besar.
Untuk mempelajari lebih lanjut tentang cara menulis fragmen shader, lihat Book of Shaders.
Berikut ini adalah kumpulan contoh yang dibuat semuanya menggunakan Svader. Versi langsung dari semua ini dapat dipratinjau di svader.vercel.app, dan kode sumber dapat ditemukan di src/routes/ direktori.
# npm
npm i -D svader
# pnpm
pnpm i -D svader
# Bun
bun i -D svader
# Yarn
yarn add -D svaderUntuk menggunakan komponen shader fragmen, pertama -tama Anda harus memutuskan apakah akan menggunakan WebGL atau WebGPU. Jika Anda tidak yakin tentang apa yang harus digunakan, lihat bagian WebGL vs Webgpu.
Berikut ini adalah contoh minimal dari komponen shader fragmen WebGL.
Lihat di 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 >Ini menghasilkan output berikut:
Di sini, variabel shaderCode adalah string yang berisi kode GLES shader. Untuk kesederhanaan, ini disimpan sebagai string, tetapi biasanya akan disimpan dalam file myShader.frag yang terpisah. Saat memuat shader dari file, mungkin berguna untuk mengetahui bahwa properti code menerima baik string dan Promise<string> .
Apa yang dilakukan kode ini adalah:
u_offset yang diberikan ke koordinat 2D piksel yang diberikan oleh gl_FragCoord.xy .u_resolution untuk menormalkan koordinat antara 0 dan 1.x menjadi saluran merah dan koordinat y menjadi saluran hijau. Saluran biru selalu diatur ke 0, dan saluran alfa (opacity) selalu diatur ke 1 (sepenuhnya buram). Dalam GLES, seragam adalah input ke fungsi, yang sama untuk setiap piksel di layar. Ini perlu diteruskan melalui properti parameters dari komponen <WebGlShader> . Dalam hal ini, kita perlu meneruskan dua seragam: u_resolution dan u_offset . Karena parameter spesifik ini sangat umum digunakan, mereka diimplementasikan secara khusus di SVADER sehingga properti value masing -masing parameter dapat dengan mudah diatur ke "resolution" dan "offset" masing -masing.
Terakhir, komponen <WebGlShader> menerima slot fallback, yang diterjemahkan ketika browser tidak dapat membuat shader.
Properti parameters adalah array objek dengan properti berikut:
name : Nama parameter seragam, misalnya "my_uniform" . Ini harus cocok dengan nama parameter dalam kode shader.
type : Jenis parameter seragam seperti yang ditulis dalam kode shader, misalnya "float" . Jika properti value adalah nilai bawaan, seperti "resolution" , type akan ditentukan secara otomatis dan tidak boleh ditetapkan.
value : Nilai parameter seragam, atau string yang menentukan nilai bawaan. Jika bukan nilai bawaan, jenis properti ini harus sesuai dengan type properti, sehingga:
float , int , uint adalah number ,vecN , ivecN , uvecN adalah number[] dengan panjang N , misalnya vec2 -> [1.2, 3.4] .matN adalah number[] dengan panjang N * N , misalnya mat2 -> [1, 2, 3, 4] . Beberapa jenis seragam sangat sering digunakan. Ini diimplementasikan di Svader sendiri, dan disebut sebagai nilai bawaan . Untuk menggunakan ini, properti value objek parameter harus diatur ke string yang cocok dengan salah satu dari yang berikut:
"resolution" : vec2 dari lebar dan tinggi kanvas dalam piksel perangkat fisik.
"scale" : float dari rasio antara piksel CSS dan piksel perangkat fisik, IE zoom level. Misalnya, jika browser telah diperbesar menjadi 150%, parameter scale akan menjadi 1.5 .
"time" : float waktu saat ini dalam hitungan detik. Catatan: Menyerahkan parameter ini ke shader akan menyebabkannya rerender setiap bingkai.
"offset" : vec2 yang akan ditambahkan ke gl_FragCoord.xy dari fragmen shader. Terkadang ukuran kanvas dibatasi oleh perangkat keras. Untuk mengimbangi hal ini, Svader membuat kanvas virtual dengan pergeseran potongan yang lebih kecil untuk menutupi layar. Parameter "resolution" secara otomatis disesuaikan agar sesuai dengan ukuran kanvas virtual ini, tetapi untuk alasan teknis, gl_FragCoord.xy tidak dapat disesuaikan dari luar. Oleh karena itu, parameter "offset" disediakan untuk ditambahkan secara manual ke koordinat ini.
Berikut ini adalah contoh minimal dari komponen shader fragmen webgpu.
Lihat di 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 >Ini menghasilkan output berikut:
Di sini, variabel shaderCode adalah string yang berisi kode shader WGSL. Untuk kesederhanaan, ini disimpan sebagai string, tetapi biasanya akan disimpan dalam file myShader.wgsl yang terpisah. Saat memuat shader dari file, mungkin berguna untuk mengetahui bahwa properti code menerima baik string dan Promise<string> .
Apa yang dilakukan kode ini adalah:
offset yang diberikan ke koordinat 2D piksel yang diberikan oleh raw_pos.xy .resolution untuk menormalkan koordinat antara 0 dan 1.x menjadi saluran merah dan koordinat y menjadi saluran hijau. Saluran biru selalu diatur ke 0, dan saluran alfa (opacity) selalu diatur ke 1 (sepenuhnya buram). Di WGSL, var<uniform> ini adalah cara utama untuk meneruskan parameter ke shader. Ini perlu diteruskan melalui properti parameters dari komponen <WebGpuShader> . Dalam hal ini, kita perlu meneruskan dua seragam: resolution dan offset . Karena parameter spesifik ini sangat umum digunakan, mereka diimplementasikan secara khusus di SVADER sehingga properti value masing -masing parameter dapat dengan mudah diatur ke "resolution" dan "offset" masing -masing.
Terakhir, komponen <WebGpuShader> menerima slot fallback, yang diterjemahkan ketika browser tidak dapat membuat shader.
Properti parameters adalah array objek dengan properti berikut:
label : Nama parameter yang akan digunakan untuk debugging. Ini tidak harus sesuai dengan nama parameter dalam kode shader.
binding : Integer yang digunakan untuk mencocokkan parameter ke variabel dalam kode shader. Ini harus cocok dengan properti binding parameter dalam kode shader, misalnya untuk deklarasi variabel
@ group ( 0 ) @ binding ( 42 ) var < uniform > my_variable : f32 ; Properti binding harus 42 .
value : Nilai parameter, atau string yang menentukan nilai bawaan. Jika bukan nilai bawaan, parameter ini harus berupa ArrayBuffer / ArrayBufferView . Misalnya, untuk meneruskan angka ke parameter f32 , itu dapat dibangun seperti new Float32Array([myNumberValue]) .
storage : [Opsional - Default ke false ] Apakah parameter adalah variabel penyimpanan daripada variabel yang seragam. Ini harus cocok dengan deklarasi dalam kode shader, misalnya untuk deklarasi variabel
@ group ( 0 ) @ binding ( 0 ) var < uniform > my_variable : f32 ; Properti storage harus false atau dihilangkan, dan untuk
@ group ( 0 ) @ binding ( 0 ) var < storage , read > my_variable : f32 ; itu harus true . Perhatikan bahwa Svader saat ini hanya mendukung var<storage, read> dan bukan var<storage, read_write> .
Beberapa jenis input sangat sering digunakan. Ini diimplementasikan di Svader sendiri, dan disebut sebagai nilai bawaan . Untuk menggunakan ini, properti value objek parameter harus diatur ke string yang cocok dengan salah satu dari yang berikut:
"resolution" : vec2f dari lebar dan tinggi kanvas dalam piksel perangkat fisik.
"scale" : f32 dari rasio antara piksel CSS dan piksel perangkat fisik, yaitu tingkat zoom. Misalnya, jika browser telah diperbesar menjadi 150%, parameter scale akan menjadi 1.5 .
"time" : f32 dari waktu saat ini dalam hitungan detik. Catatan: Menyerahkan parameter ini ke shader akan menyebabkannya rerender setiap bingkai.
"offset" : vec2f yang akan ditambahkan ke @builtin(position) dari fragmen shader. Terkadang ukuran kanvas dibatasi oleh perangkat keras. Untuk mengimbangi hal ini, Svader membuat kanvas virtual dengan pergeseran potongan yang lebih kecil untuk menutupi layar. Parameter "resolution" secara otomatis disesuaikan agar sesuai dengan ukuran kanvas virtual ini, tetapi untuk alasan teknis, @builtin(position) tidak dapat disesuaikan dari luar. Oleh karena itu, parameter "offset" disediakan untuk ditambahkan secara manual ke koordinat ini.
Untuk aplikasi praktis, default menggunakan WebGL.
WebGL dan WebGPU keduanya rendering API yang memungkinkan aplikasi web untuk membuat grafik yang dipercepat GPU.
WebGL adalah yang lebih tua dari keduanya dan didukung oleh semua browser modern.
WebGPU masih dalam tahap eksperimental dan hanya didukung di beberapa browser. Namun, ini mendukung fitur -fitur tertentu yang tidak dimiliki WebGL. Misalnya, pada saat penulisan, WebGL di Google Chrome hanya mendukung memiliki 8 kanvas yang aktif dalam dokumen sekaligus, sementara WebGPU mendukung angka yang tidak terbatas secara praktis.
Svader dilisensikan di bawah lisensi MIT.
