WGSL과 GLSL ES 3.00

`"use typeshade"` 파일 하나가 WebGPU에는 WGSL로, WebGL2에는 GLSL ES 3.00로 도착합니다. 이 페이지의 코드 블록은 페이지를 빌드하는 동안 바로 위의 파일에서 컴파일한 결과이며, 사용한 컴파일러는 26de7be8에 고정된 판입니다.

소스

삼각형 하나입니다. 버텍스 진입점이 위치를 정하고 프래그먼트 진입점이 색을 칠합니다. 구조체 두 개가 스테이지마다 출력 모양을 지정합니다.

"use typeshade";

class Clip {
  @builtin("position") pos: vec4;
}

class Color {
  @location(0) color: vec4;
}

@vertex
export function vs(@builtin("vertex_index") i: u32): Clip {
  const x = i === 1 ? 0.8 : i === 2 ? 0. : -0.8;
  const y = i === 2 ? 0.8 : -0.8;
  return { pos: vec4(x, y, 0., 1.) };
}

@fragment
export function fs(): Color {
  return { color: vec4(1., 0., 0., 1.) };
}

WGSL

WGSL은 WebGPU 디바이스가 받아들이는 언어이고, 모듈 하나가 모든 스테이지를 담습니다. 구조체는 구조체로 남고, 진입점은 각자의 스테이지 속성을 그대로 지니며, builtin 입력은 그 값을 받는 매개변수의 속성으로 남습니다.

struct Clip {
  @builtin(position) pos: vec4<f32>,
}

struct Color {
  @location(0) color: vec4<f32>,
}

@vertex
fn vs(@builtin(vertex_index) i: u32) -> Clip {
  let _cse0 = (i == 2u);
  let x = select(select(-0.8, 0.0, _cse0), 0.8, (i == 1u));
  let y = select(-0.8, 0.8, _cse0);
  return Clip(vec4<f32>(x, y, 0.0, 1.0));
}

@fragment
fn fs() -> Color {
  return Color(vec4<f32>(1.0, 0.0, 0.0, 1.0));
}

GLSL ES 3.00

WebGL2 프로그램은 버텍스 셰이더 하나와 프래그먼트 셰이더 하나를 링크해 만들기 때문에, 컴파일러는 스테이지마다 별도의 프로그램을 생성합니다. 각 프로그램은 버전 줄과 기본 정밀도로 시작하고, 버텍스 번호는 언어가 예약해 둔 이름으로 들어오며, 프래그먼트 출력은 선언된 out 변수가 됩니다.

#version 300 es
precision highp float;
precision highp int;


void main() {
  uint i = uint(gl_VertexID);
  bool _cse0 = (i == 2u);
  float x = ((i == 1u) ? 0.8 : (_cse0 ? 0.0 : -0.8));
  float y = (_cse0 ? 0.8 : -0.8);
  gl_Position = vec4(x, y, 0.0, 1.0);
}

#version 300 es
precision highp float;
precision highp int;

layout(location = 0) out vec4 color;

void main() {
  color = vec4(1.0, 0.0, 0.0, 1.0);
}

타깃이 갈라지는 지점

차이마다 그 차이를 다루는 가이드 페이지의 이름을 붙였습니다. 두 언어가 어긋나는 곳에서는 WGSL이 구성 요소의 뜻을 정하고, GLSL ES 3.00은 컴파일러가 코드를 써 내는 대상일 뿐입니다(규칙 1.2아직 확인하는 테스트 없음).

달라지는 것	WGSL	GLSL ES 3.00
셰이더 스테이지	`@compute` 진입점은 워크그룹 크기를 담은 컴퓨트 셰이더를 생성합니다.	이 타깃에는 컴퓨트 스테이지가 없어서, 컴퓨트를 선언한 모듈은 WGSL만 생성합니다.
정밀도	타입이 자기 폭을 지니므로 프로그램은 아무것도 선언하지 않습니다.	프로그램이 부동소수점과 정수의 기본 정밀도를 먼저 선언합니다.
builtin 입력	builtin은 그 값을 받는 매개변수의 속성으로 남습니다.	builtin은 언어가 예약해 둔 이름이 되고, 매개변수는 사라집니다.
스테이지 출력	스테이지는 필드마다 location을 지닌 구조체를 돌려줍니다.	스테이지는 선언된 out 변수에 쓰고, 위치는 예약된 변수로 갑니다.
확장	GPU 기능은 모듈 맨 위의 선언으로 켭니다.	GPU 기능은 전처리기 줄로 켜고, 호스트도 컨텍스트에 해당 확장을 요청합니다.

더 읽을 자료

WGSL 명세가 두 타깃 가운데 첫 번째를 정의합니다.
GLSL ES 3.00 명세와 WebGL2 명세가 두 번째를 정의합니다.
MDN WebGPU API와 MDN WebGL2RenderingContext에서 호스트가 각각을 드라이버에 어떻게 넘기는지 볼 수 있습니다.
언어 참조의 함수에는 내장 함수마다 컴파일러가 쓰는 WGSL과 GLSL ES 3.00 코드가 있고, 타입에는 타입마다 같은 내용이 있습니다.

다음은 예제입니다. 컴파일러 레지스트리의 예제마다 어떤 타깃을 생성하는지 적혀 있습니다.

이 페이지 편집 문제 보고