svader
v0.5.1
WebGL 및 WebGPU 조각 셰이더로 GPU 렌더링 된 Svelte 구성 요소를 만듭니다.
Svelte 4 및 Svelte 5를 지원합니다.
요컨대, 조각 셰이더는 화면에서 픽셀의 좌표를 취하고이 픽셀의 색상을 반환하는 프로그램으로 작성 될 수 있습니다. 이 프로그램은 GPU에서 실행하여 대규모 병렬성과 속도를 보장 할 수 있습니다.
조각 셰이더를 작성하는 방법에 대한 자세한 내용은 셰이더의 책을 확인하십시오.
다음은 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 svaderFragment Shader 구성 요소를 사용하려면 먼저 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 유니폼을 gl_FragCoord.xy 로 제공 한 픽셀의 2D 좌표에 추가하십시오.u_resolution 균일으로 입력하여 0과 1 사이의 좌표를 정규화합니다.x 좌표가 빨간색 채널이되고 y 좌표가 녹색 채널이되도록 정규화 된 좌표를 픽셀의 색상으로 반환하십시오. 파란색 채널은 항상 0으로 설정되며 알파 (불투명) 채널은 항상 1 (완전히 불투명)으로 설정됩니다. GLES에서는 유니폼이 함수에 입력되며 화면의 모든 픽셀에 대해 동일합니다. <WebGlShader> 구성 요소의 parameters 속성을 통해 전달해야합니다. 이 경우 u_resolution 과 u_offset 두 가지 유니폼을 전달해야합니다. 이러한 특정 매개 변수는 매우 일반적으로 사용되므로 각 매개 변수의 value 속성을 각각 "resolution" 및 "offset" 으로 설정할 수 있도록 Svader에서 특별히 구현됩니다.
마지막으로, <WebGlShader> 구성 요소는 폴백 슬롯을 허용하며, 브라우저가 셰이더를 렌더링 할 수 없을 때 렌더링됩니다.
parameters 속성은 다음 속성을 가진 객체 배열입니다.
name : 균일 한 매개 변수의 이름, 예를 들어 "my_uniform" . 셰이더 코드의 매개 변수 이름과 일치해야합니다.
type : 셰이더 코드 (예 : "float" 에 작성된 균일 매개 변수의 유형. value 속성이 "resolution" 와 같은 내장 값인 경우 type 자동으로 결정되며 설정되지 않아야합니다.
value : 균일 한 매개 변수의 값 또는 내장 값을 지정하는 문자열. 내장 값이 아닌 경우이 속성의 유형은 다음과 같은 type 속성에 해당해야합니다.
float , int , uint number 입니다.vecN , ivecN , uvecN 길이가 N , 예를 들어 vec2 > [1.2, 3.4] 의 number[] 입니다.matN 길이가 N * N , 예를 들어 mat2 > [1, 2, 3, 4] 의 number[] 입니다. 일부 유형의 유니폼은 매우 자주 사용됩니다. 이들은 Svader 자체에서 구현되며 내장 값 이라고합니다. 이를 사용하려면 매개 변수 객체의 value 속성을 다음 중 하나와 일치하는 문자열로 설정해야합니다.
"resolution" : 물리적 장치 픽셀의 캔버스 너비와 높이의 vec2 .
"scale" : CSS 픽셀과 물리적 장치 픽셀 사이의 비율의 float , 즉 줌 레벨. 예를 들어, 브라우저가 150%로 확대 된 경우 scale 매개 변수는 1.5 입니다.
"time" : 초의 현재 시간의 float . 참고 :이 매개 변수를 셰이더로 전달하면 모든 프레임이 다시 렌더링됩니다.
"offset" : Fragment Shader의 gl_FragCoord.xy 에 추가 할 vec2 . 때로는 캔버스의 크기가 하드웨어로 제한됩니다. 이를 보상하기 위해 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 균일 변수를 raw_pos.xy 로 제공 한 픽셀의 2D 좌표에 추가하십시오.resolution 균일하게 나누어 0과 1 사이의 좌표를 정규화합니다.x 좌표가 빨간색 채널이되고 y 좌표가 녹색 채널이되도록 정규화 된 좌표를 픽셀의 색상으로 반환하십시오. 파란색 채널은 항상 0으로 설정되며 알파 (불투명) 채널은 항상 1 (완전히 불투명)으로 설정됩니다. WGSL에서, 이들 var<uniform> >은 매개 변수를 셰이더로 전달하는 주요 방법이다. <WebGpuShader> 구성 요소의 parameters 속성을 통해 전달해야합니다. 이 경우 resolution 와 offset 두 가지 유니폼을 통과해야합니다. 이러한 특정 매개 변수는 매우 일반적으로 사용되므로 각 매개 변수의 value 속성을 각각 "resolution" 및 "offset" 으로 설정할 수 있도록 Svader에서 특별히 구현됩니다.
마지막으로, <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" : CSS 픽셀과 물리적 장치 픽셀 사이의 비율의 f32 , 즉 줌 레벨. 예를 들어, 브라우저가 150%로 확대 된 경우 scale 매개 변수는 1.5 입니다.
"time" : 현재 시간의 f32 초입니다. 참고 :이 매개 변수를 셰이더로 전달하면 모든 프레임이 다시 렌더링됩니다.
"offset" : 조각 셰이더의 @builtin(position) 에 추가 할 vec2f . 때로는 캔버스의 크기가 하드웨어로 제한됩니다. 이를 보상하기 위해 Svader는 화면을 덮기 위해 더 작은 컷 아웃이 이동하는 가상 캔버스를 만듭니다. "resolution" 매개 변수는이 가상 캔버스의 크기와 일치하도록 자동으로 조정되지만 기술적 인 이유로 @builtin(position) 은 외부에서 조정할 수 없습니다. 따라서 "offset" 매개 변수는 이러한 좌표에 수동으로 추가되도록 제공됩니다.
실제 애플리케이션의 경우 WebGL 사용에 대한 기본값.
WebGL과 WebGPU는 웹 애플리케이션이 GPU에 액세스 된 그래픽을 렌더링 할 수있는 API 렌더링 API입니다.
WebGL은 두 가지 중 더 오래되었으며 모든 현대식 브라우저에서 지원됩니다.
WebGPU는 여전히 실험 단계에 있으며 몇 개의 브라우저에서만 지원됩니다. 그러나 WebGL이하지 않는 특정 기능을 지원합니다. 예를 들어, 글을 쓰는 시점에서 Google의 WebGL은 문서에서 한 번에 8 개의 캔버스를 활성화하는 것을 지원하는 반면 WebGPU는 실질적으로 무제한 숫자를 지원합니다.
Svader는 MIT 라이센스에 따라 라이센스가 부여됩니다.
