WGSL vs GLSL vs HLSL 문법 차이

Web Graphic 표준이 아직은 webGL이 대세지만 WebGPU로 넘어가고 있다. Unity는 이미 WebGL 1.0을 지원하지 않고 있으나 ES 3.1부터 SRP Batcher를 지원하기 때문에 여전히 모바일 초기 수준으로 개발할 수 없는 환경이 발목을 잡고 있다( WebGL 1은 2022.1의 Auto Graphics API 리스트에서 사용 중단됨)^[각주:1]

 

Unity webGPU sample은 Keijiro 상의 페이지를 참고하면 이해가 쉽다.

Keijiro상의 Sample project webGPU rendering 화면. 아래링크에서 이 화면이 나와야 정상 출력된다. 브라우저에서 지원이 안되면 100% loading에서 화면이 멈춘다.

Unity WebGPU Sample Builds. firefox에서는 실행안되고 chrome에서는 정상 작동. 한국은 web쪽이 아직 불모지인데 다른 한편으로는 이쪽 시장의 가능성이 존재한다고 본다. webGL의 낮은 graphics api 레벨이 webGPU부터는 꽤 좋아지니 장기적으로는 기대해볼만한 플랫폼.(물론 심의나 여타 정책 관련해서 변화도 있어야 하겠지만)

https://www.keijiro.tokyo/WebGPU-Test/

unity thread : https://discussions.unity.com/t/early-access-to-the-new-webgpu-backend/933493

github : https://github.com/keijiro/URPTestbed3

 

항목	WebGL 1.0	WebGL 2.0
기반 API	OpenGL ES 2.0	OpenGL ES 3.0
주요 기능	쉐이더, 텍스처, 기본 버퍼 등	UBO, MRT, 3D Texture, instancing 등
브라우저 지원 범위	거의 모든 브라우저	대부분 브라우저, 단 Safari는 제한적 iOS 16이후 webGL 2 점차 지원 확대중
실무 사용 안정성	매우 높음	높음 (Safari 제외)

 

그럼 WGSL, GLSL, HLSL의 문법 차이는 아래와 같다.

항목	WGSL	GLSL	HLSL
타입 선언	vec3<f32> (명시적)	vec3	float3
셰이더 바인딩	@group(n) @binding(n)	layout(binding = n)	register(t#)
엔트리 포인트	@vertex, @fragment	void main() + #define	VSMain(), PSMain() 등
메모리 공간	var<uniform>, var<storage>	uniform, buffer	cbuffer, RWStructuredBuffer 등
문법 스타일	Rust/C 스타일 + 명시적 타입	C 스타일 (OpenGL 전통)	C 스타일 (DX 전통)

 

변수 선언 & 타입, Uniforms / Constants / Texture & Sampler

WGSL	GLSL	HLSL
var color: vec4<f32>	vec4 color;	float4 color;
let val: f32 = 1.0	float val = 1.0;	float val = 1.0f;
vec3<u32>	uvec3	uint3
@group(0) @binding(0)  var<uniform> uniforms: Uniforms;	layout(std140, binding=0)  uniform Mat { }	cbuffer Mat : register(b0) {}
@group(0) @binding(1)  var texture: texture_2d<f32>;	uniform sampler2D tex;	Texture2D tex :  register(t0);
@group(0) @binding(2) var samp: sampler;	N/A (GLSL는 텍스처 + 샘플러 묶임)	SamplerState samp : register(s0);
textureSample(texture, samp, uv)	texture(tex, uv)	tex.Sample(samp, uv);

 

Built-in 및 위치 지정

기능	WGSL	GLSL	HLSL
위치 지정	@location(0)	layout(location = 0)	: TEXCOORD0
시스템 값	@builtin(position)	gl_Position, gl_FragCoord	SV_Position, SV_Target
셰이더 타입	@vertex, @fragment	main 함수에 없고 구문 주석 필요	float4 VSMain(...) : SV_Position

요소	WGSL	GLSL	HLSL
타입 명시	vec3<f32>	vec3	float3
Uniform 바인딩	@group, @binding	layout(binding=)	register(b#)
Vertex 출력 지정	@builtin(position)	gl_Position	: SV_Position
셰이더 키워드	@vertex, @fragment	없음 (main 구문 추정)	함수명 + 시맨틱
셰이더 언어 구조	타입 안전, 구조화	자유도 높고 느슨함	DirectX 전용 확장 포함

 

WGSL 셰이더 기본 구조

// 전역 변수/상수 정의 struct Uniforms {     viewProjMatrix : mat4x4<f32>, }; @group(0) @binding(0) var<uniform> uniforms : Uniforms; // 입출력 구조체 정의 struct VertexInput {     @location(0) position : vec3<f32>,     @location(1) normal : vec3<f32>, }; struct VertexOutput {     @builtin(position) position : vec4<f32>,     @location(0) normal : vec3<f32>, }; // 버텍스 셰이더 @vertex fn vs_main(input : VertexInput) -> VertexOutput {     var output : VertexOutput;     output.position = uniforms.viewProjMatrix * vec4<f32>(input.position, 1.0);     output.normal = input.normal;     return output; } // 프래그먼트 셰이더 @fragment fn fs_main(input : VertexOutput) -> @location(0) vec4<f32> {     let color = vec3<f32>(0.5) + 0.5 * input.normal; // 예: 노멀 시각화     return vec4<f32>(color, 1.0); }

 

주요 구성 요소

@vertex, @fragment : 셰이더 엔트리 포인트 주석 (vertex/fragment 명시)
@builtin(...) : WebGPU 시스템 내장 데이터 (예: position, instance_index 등)
@location(n) : 입출력 변수의 바인딩 위치 지정
@group(n) @binding(n) : Uniforms, 텍스처, 샘플러 등의 바인딩 위치 지정
struct :: 타입 정의, 주로 VertexInput/Output이나 Uniform Block 등에 사용
var, let : var는 변경 가능한 변수, let은 상수

 

메모리 영역별 키워드

메모리 영역	키워드	설명
Uniform	var<uniform>	읽기 전용 유니폼 버퍼
Storage Buffer	var<storage>	읽고 쓸 수 있는 구조화 버퍼
Workgroup	var<workgroup>	ThreadGroup 내 공유 메모리
Function	var / let	로컬 변수 (함수 내 선언)

 

데이터 흐름 예시

[VertexInput]  ↓ @vertex vs_main()  ↓ VertexOutput (@builtin(position), @location(0))  ↓ @fragment fs_main()  ↓ @location(0) → 최종 출력 색상

• Pipeline Input/Output은 struct 기반으로 관리
• 셰이더끼리의 연결은 location 번호로 통신

 

WGSL 특징

• 타입 안정성 명시적 타입 선언 (vec3<f32> 등)으로 오류 방지
• 버그/해킹 방지 설계 Web 환경 보안에 맞춘 설계 (GLSL보다 엄격)
• 구조적이고 간결함 Modern C 스타일 문법, Rust에서 영향 받음
• GLSL/SPIR-V보다 안전 런타임 체크 최소화 및 최적화 용이

 

 

1. https://docs.unity3d.com/kr/2023.2/Manual/webgl-browsercompatibility.html  
   SRP Batcher는 모든 머티리얼 데이터를 UBO(Uniform Buffer Object)구조로 압축해서 GPU로 보내는데 이때 정렬 및 바인딩 정밀도를 높이기 위한 std140, std430을 지원하지 않음.
   Unity Manual : https://docs.unity.cn/kr/current/Manual/SRPBatcher.html [본문으로]