초보자도 쉽게 따라할 수 있는 웹 기반 GLSL 쉐이더 프로그래밍

웹에서 GLSL(OpenGL Shading Language)을 사용하여 쉐이더 프로그래밍을 실습하고 실험할 수 있는 다양한 플랫폼이 있지만, 그중에서도 특히 주목할 만한 사이트가 있습니다. 바로 'ShaderToy'와 'GLSL Editor'입니다. 이러한 플랫폼들은 사용자가 브라우저에서 직접 GLSL 코드를 작성하고, 실시간으로 결과를 확인할 수 있게 해줍니다. 이 글에서는 이 두 플랫폼과 함께 간단한 쉐이더 코드 예시 세 가지를 소개하겠습니다.

 

초보자도 쉽게 따라할 수 있는 웹 기반 GLSL 쉐이더 프로그래밍

 

초보자도 쉽게 따라할 수 있는 웹 기반 GLSL 쉐이더 프로그래밍

 

1. ShaderToy

2. GLSL Editor

3. 예시

 

추천글

위의 목차를 클릭하면 해당 글로 자동 이동 합니다.

 

ShaderToy

ShaderToy는 인터랙티브한 쉐이더 프로그래밍을 위한 웹 기반 플랫폼으로, 세계 각국의 개발자들이 만든 다양한 쉐이더 예제를 볼 수 있고, 자신만의 쉐이더를 작성하여 공유할 수도 있습니다. 간단한 2D 그래픽에서부터 복잡한 3D 장면까지, GLSL을 사용한 다양한 시각적 표현을 실험할 수 있는 환경을 제공합니다. ShaderToy는 또한 사용자가 서로의 작업을 평가하고, 코드를 공유하며 학습할 수 있는 커뮤니티 기능도 갖추고 있습니다.

https://www.shadertoy.com/

Shadertoy BETA

 

아래 이미지 처럼 사람들이 많들었던 쉐이더 코드를 보고 확인할 수 있습니다. 또한 수정을 해서 변화되는 모습도 같이 확인할 수 있습니다. 공부하기엔 최적이죠?

GLSL Editor

GLSL Sandbox는 사용자가 자신의 쉐이더 코드를 작성하고, 웹 브라우저에서 바로 결과를 볼 수 있는 인터랙티브한 웹 애플리케이션입니다. 이 플랫폼은 코드의 실시간 미리보기 기능을 제공하므로, 작성한 코드가 실제로 어떻게 작동하는지 즉각적으로 확인할 수 있습니다

https://thebookofshaders.com/edit.php

GLSL Shader Editor

 

이 곳은 ShaderToy와 다르게 다른 사람들의 작품은 확인할 수 없습니다. 조금 아쉽죠? 그래도 빠르게 GLSL의 동작을 확인할 때 용이합니다.

예시

아래는 간단한 쉐이더 코드들의 예시를 보여드리겠습니다.

 

1. 기본 색상 그라데이션 쉐이더
이 코드는 시간에 따라 변화하는 색상 그라데이션을 생성합니다. iTime에 따라 변화하는 코사인 함수를 사용하여 화면의 색상이 변하게 됩니다. 

 

ShaderToy

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
    vec2 uv = fragCoord/iResolution.xy;
    vec3 col = 0.5 + 0.5*cos(iTime+uv.xyx+vec3(0,2,4));
    fragColor = vec4(col,1.0);
}

 

GLSL Editor

#ifdef GL_ES
precision mediump float;
#endif

uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform float u_time;

void main() {
    vec2 st = gl_FragCoord.xy/u_resolution.xy;
    vec3 color =  0.5 + 0.5*cos(u_time+st.xyx+vec3(0,2,4));
	
    gl_FragColor = vec4(color,1.0);
}

 

2. 원 그리기 쉐이더

화면 중앙에 원을 그리는 쉐이더 코드입니다. smoothstep 함수를 사용하여 원의 가장자리를 부드럽게 처리합니다.

ShaderToy

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
    vec2 uv = (fragCoord - 0.5 * iResolution.xy) / iResolution.y;
    float dist = length(uv);
    float circle = smoothstep(0.4, 0.35, dist);
    fragColor = vec4(vec3(circle), 1.0);
}

GLSL Editor

// Author:
// Title:

#ifdef GL_ES
precision mediump float;
#endif

uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform float u_time;

void main() {
    vec2 uv = (gl_FragCoord.xy - 0.5 * u_resolution.xy) / u_resolution.y;
    float dist = length(uv);
     float circle = smoothstep(0.4, 0.35, dist);
	
    gl_FragColor = vec4(vec3(circle), 1.0);
}

 

3. 노이즈 텍스처 쉐이더

간단한 2D 노이즈 텍스처를 생성하는 쉐이더 코드입니다. sin과 dot 함수를 사용하여 노이즈 값을 계산합니다.

ShaderToy

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
    vec2 uv = fragCoord/iResolution.xy;
    float noise = fract(sin(dot(uv, vec2(12.9898,78.233))) * 43758.5453);
    fragColor = vec4(vec3(noise), 1.0);
}

GLSL Editor

#ifdef GL_ES
precision mediump float;
#endif

uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform float u_time;

void main() {
    vec2 uv = gl_FragCoord.xy/u_resolution.xy;
    float noise = fract(sin(dot(uv,vec2(12.9898,78.233))) * 43758.5453);
	
    gl_FragColor = vec4(vec3(noise), 1.0);
}

 

이러한 플랫폼과 코드 예시들을 통해, GLSL과 쉐이더 프로그래밍의 기본적인 개념을 이해하고, 다양한 시각적 효과를 만들어 볼 수 있습니다. ShaderToy와 GLSL Editor는 누구나 쉽게 쉐이더 프로그래밍을 시작할 수 있는 훌륭한 출발점이 될 것입니다.

 

추천글

쉐이더 프로그래밍 가이드: RGB에서 HSV로 – 컬러 스페이스 변환 이해하기

쉐이더 프로그래밍 가이드: RGB에서 HSV로 – 컬러 스페이스 변환 이해하기