본문 바로가기

셰이더 (Shader)89

[GLSL] 8 - 2D Matrices Translate 도형을 이동하는 방법은 좌표계 자체를 이동하는 것이다. st 변수에 각 도형의 위치 벡터를 더한다. 이러면 전체 공간 좌표계가 움직인다. 코드 예제를 보자. float box(in vec2 _st, in vec2 _size){ _size = vec2(0.5) - _size*0.5; vec2 uv = smoothstep(_size, _size+vec2(0.001), _st); uv *= smoothstep(_size, _size+vec2(0.001), vec2(1.0)-_st); return uv.x*uv.y; } float cross(in vec2 _st, float _size){ return box(_st, vec2(_size,_size/4.)) + box(_st, vec2(_size.. 2023. 4. 20.
[GLSL] 7 - Shapes 간단한 도형을 병렬적인 절차에 따라 그리는 방법을 배운다. Rectangle 정사각형을 그리기 if 문 사용 if ( (X GREATER THAN 1) AND (Y GREATER THAN 1) ) paint white else paint black if 문을 step()으로 변경 uniform vec2 u_resolution; void main(){ vec2 st = gl_FragCoord.xy/u_resolution.xy; vec3 color = vec3(0.0); float left = step(0.1,st.x); float bottom = step(0.1,st.y); color = vec3( left * bottom ); gl_FragColor = vec4(color,1.0); } 코드를 줄여보자... 2023. 4. 19.
[GLSL] 6 - Colors 벡터 내부의 데이터에 C언어의 구조체처럼 접근한다. vec3 red = vec3(1.0,0.0,0.0); red.x = 1.0; red.y = 0.0; red.z = 0.0; 색상을 x, y, z 표기법으로 정의하면 혼란스러울 수 있다. 그래서 다른 접근법도 있다. s,t,p는 일반적으로 텍스처의 공간 좌표에 사용된다. vector[0] = vector.r = vector.x = vector.s; vector[1] = vector.g = vector.y = vector.t; vector[2] = vector.b = vector.z = vector.p; vector[3] = vector.a = vector.w = vector.q; GLSL 벡터의 또 다른 특징은 프로퍼티를 원하는 순서대로 결합할 수 있다... 2023. 4. 18.
[GLSL] 5 - Shaping functions // 개요 1차원 함수를 만드는 방법을 알아본다. 이를 알아야 기초가 튼튼해진다. 데이터를 검은색에서 흰색으로의 그라데이션으로 시각화한다. 또한 녹색 선도 그려서 시각화한다. plot 함수 기능에 의문 가지지 말아야한다. 나중에 알아볼 것이다. // 직선 #ifdef GL_ES precision mediump float; #endif uniform vec2 u_resolution; uniform vec2 u_mouse; uniform float u_time; // Plot a line on Y using a value between 0.0-1.0 float plot(vec2 st) { return smoothstep(0.02, 0.0, abs(st.y - st.x)); } void main() { vec.. 2023. 4. 17.
[GLSL] 4 - Running your shader (세부내용 생략) https://thebookofshaders.com/04/ The Book of Shaders Gentle step-by-step guide through the abstract and complex universe of Fragment Shaders. thebookofshaders.com - 저자가 만든 GLSL 쉐이더 에디터에 대한 설명 한다. - 블렌더에서의 사용법에 대해서도 설명한다. 쉐이더 관련 내용은 아니라 자세한 요약은 스킵하였다. 2023. 4. 17.
[GLSL] 3 - Uniforms, gl_FragCoord uniform // uniform이란 Thread들은 서로에 대해 데이터를 공유할수 없더라도, CPU에서 인풋을 받을수 있다. 이 인풋들은 모든 Thread들에 있어서 일정(uniform)하고 read only이다. 즉, 읽을순 있어도 변경할 수 없다. 이런 인풋들을 uniform이라고 한다. float, vec2, vec3, vec4, mat2, mat3, mat4, sampler2D, samplerCube 등의 데이터 타입을 지원한다. 유니폼 값들은 보통 floating pont precision설정이 끝난 후 선언된다. // uniform 선언 위치 #ifdef GL_ES precision mediump float; #endif uniform vec2 u_resolution; // Canvas si.. 2023. 4. 14.
[GLSL] 2 - Hello World // 예제 GPU에서 문자열을 출력하는것은 처음 예제로는 어렵다. 그래서 밝은 색 하나를 출력하는 것으로 대신한다. #ifdef GL_ES precision mediump float; #endif uniform float u_time; void main() { gl_FragColor = vec4(abs(sin(u_time)),0.0,0.0,1.0); } // 예제 분석 쉐이더 언어는 color값을 리턴하는 main 함수이다. C와 형태가 유사하다. 전처리기 매크로 사용한다. // 매크로란? 매크로는 컴파일되기 전에 일어나는 스텝이다. #define을 이용해, 전역변수를 선언한다. 기본적인 논리구현도 가능하다. (#ifdef 또는 #endif) / 사용법 매크로는 해쉬태그(#)로 시작한다. 이런 Pre-c.. 2023. 4. 14.
[GLSL] 1 - What is shader? // 셰이더 특징 셰이더는 스크린 위에 낱개의 픽셀마다 실행된다. 실행은 모두 한번에 일어난다. 즉, 픽셀마다 연산이 다르다. 색을 출력하는 하나의 프로그램이자 함수인셈이다. 그리고 컴파일되어 굉장히 빠르다. // 쉐이더가 빠른 이유 parallel processing 개념에 대해 알아야한다. CPU는 하나의 큰 공장같은 파이프이다. 각 파이프는 thread라고도 부른다. 문제는 작은 작업들이 스크린 위에 픽셀개수만큼 반복되어야 한다는 점이다. 800x600 레졸루션의 게임이라고 하면 480,000개의 픽셀들이 매 프레임 계산되어야 한다. 이 문제를 풀기위해 등장하는 솔루션이 있다. 바로 parellel processing이다. 강력한 마이크로 프로세서를 몇개 또는 큰 파이프를 쓰는대신, 매우 작은 마이.. 2023. 4. 14.
[GLSL] 0 - 참고사항 - 원문 출처 https://thebookofshaders.com/ - 앞으로 업로드 될 게시글은 위 링크의 내용을 핵심만 추려 요약한 것이다. - 해당 사이트의 자체 한글 번역된 내용, deepl, chat GPT 중 중 번역이 더 매끄로운 것을 사용하였다. - 일부 번역이 이상한 경우, 문맥에 맞게 수정하였다. 2023. 4. 14.

티스토리툴바