본문 바로가기

전체 글393

[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.
고난 속에 기쁨 (위라클 서평) 감상 한 사람이 역경을 이겨내고, 다른 사람의 희망이 되기 까지의 여정이 너무나 감동적이다. 기꺼이 기쁨을 선택하는 자세를 보며, 나 자신을 많이 돌아보게 된다. 메모 나는 살아있지도 죽어있지도 않은 그 경계선 어딘가에서 발버둥 치고 있었다. 중환자실에서의 물 적신 솜은 내게 오아시스 같았다. 전신이 마비 되었다고해서 기쁨을 느낄 수 있는 마음마저 마비되진 않는다. 나는 오늘도 기쁨을 선택한다. 지우는 환자인 나보다 늘 본인이 먼저 경험하였다. 재활기구는 직접 다 사용해보았다. 언터처블 1%의 우정 내용. 장애인이라고해서 특별히 대하지 않았다. (장난스럽게)놀리는가 하면 약올리기도 했다. 온전히 바라봐주는 드리스가 좋았다. 내 장애는 사지마비가 아니야. 아내 없이 살아야한다는 거지. 필립은 자신의 장애를.. 2023. 4. 10.
[GLSL] Starfield - 5(완) : 마우스 상호작용, 별 팍 사라지는 이슈 수정 #define NUM_LAYERS 8.0 mat2 Rot(float a) { float s = sin(a), c = cos(a) ; return mat2(c, -s, s, c) ; } float Star(vec2 uv, float flare) { float d = length(uv) ; float m = 0.02/d ; m*= 1.5 ; float rays = max(0.0, 1.0-abs(uv.x*uv.y*1000.0)) ; m += rays * flare ; // 대각선 레이 uv *= Rot(3.1415/4.0) ; rays = max(0.0, 1.0-abs(uv.x*uv.y*1000.0)) ; m += rays * 0.3 * flare ; m *= smoothstep(1.0, 0.2, d) ; r.. 2023. 4. 8.
[GLSL] Starfield - 4 : 별 깊이감, 움직임 추가 #define NUM_LAYERS 6.0 mat2 Rot(float a) { float s = sin(a), c = cos(a) ; return mat2(c, -s, s, c) ; } float Star(vec2 uv, float flare) { float d = length(uv) ; float m = 0.02/d ; m*= 1.0 ; // 십자 레이 float rays = max(0.0, 1.0-abs(uv.x*uv.y*1000.0)) ; m += rays * flare ; // 대각선 레이 uv *= Rot(3.1415/4.0) ; rays = max(0.0, 1.0-abs(uv.x*uv.y*1000.0)) ; m += rays * 0.3 * flare ; m *= smoothstep(1.0, 0... 2023. 4. 8.

티스토리툴바