[IGC 2016] 부산게임아카데미 김성완 - ShaderToy에서 구현하는 거리함수 기반의 레이마칭 렌더링 알고리즘

ShaderToy에서 구현하는 Ray Marching 렌더링
김 성 완
부산게임아카데미
Inven Game Conference

INDEX
1
Chapter
ShaderToy 소개
2
Chapter
프랙탈 그래픽
3
Chapter
Ray Tracing & Lighting
4
Chapter
Ray Marching 알고리즘
5
Chapter

Chpater [1]
ShaderToy 소개

1
챕터 제목을 입력하세요
Shadertoy

1
Shadertoy.com
https://www.shadertoy.com

1
Shadertoy Browse

1
Shadertoy 만든 사람들
Iñigo Quilez (IQ / RGBA) Pol Jeremias

1
이니고 퀼레즈

1
Oculus Story Studio

1
Henry

1
Dear Angelica

1
Quill 시연

1
Quill (이니고 퀼레즈)

1
Wesley Allsbrook, 일러스트레이터

1
WebGL : OpenGL ES 2.0 for Web

1
OpenGL ES Shading Language
Reference
https://www.khronos.org/files/opengles_shading_language.pdf
API Quick Reference Card
https://www.khronos.org/opengles/sdk/docs/reference_cards/OpenGL-ES-2_0-
Reference-card.pdf

1
Apple live coding - iq
https://youtu.be/CHmneY8ry84

1
Apple - iq, shadertoy
https://www.shadertoy.com/view/XdfGRn

1
Snail - iq, shadertoy
https://youtu.be/__G43hELHL0

1
Making Snail - iq, shadertoy
https://youtu.be/XuSnLbB1j6E

1
Snail - iq, shadertoy
https://www.shadertoy.com/view/ld3Gz2

1
Elephants - iq, Shadertoy

Chpater [2]
프랙탈 그래픽

1
Benoit B. Mandelbrot (1924~2010)

1
Mandelbrot 집합의 발견 (1980)

1
Mandelbrot 집합의 공식

1
3D Mandelbrot
2D 프랙탈 만델브로트 집합처럼 흥미롭고
무한히 복잡한 경계를 가진 3D 프랙탈을 찾으려는 시도
…
하지만 결과는 신통치 않았다.

1
Mandelbulb의 발견 (2009)
2009년 Fractalforum.com 의 3D Fractal 쓰레드를 통해서
Daniel White 와 Paul Nylander 가 드디어 발견
http://www.fractalforums.com/

1
Mandelbulb의 발견 (2009)

1
Mandelbulb의 확대

Chpater [3]
Ray tracing & Lighting

1
페이지 제목을 입력하세요

1
Ray Tracing 알고리즘

1
최초의 레이트레이싱 영상 (1980) Turner Whitted

1
Distributed Ray Tracing (1984) : 루카스 필름

1
Amiga Juggler (1986) - 초창기 저사양 레이트레이싱
영상
https://youtu.be/-yJNGwIcLtw

1
반직선(ray)과 구(Sphere)의 벡터 방정식
𝐂𝐃
O
R

1
반직선(ray)과 구(Sphere)의 교점 구하기

1
반직선(ray)과 구(Sphere)의 교점 구하기
해가 없다 b2 - 4ac < 0
해가 두개 b2 - 4ac > 0, t1 < t2
해가 중근 b2 - 4ac = 0, t1 = t2

1
반직선(ray)과 평면(Plane)의 교차점

1
반직선(ray)과 평면(Plane)의 교차 조건

1
Phong Lighting Model

1
Phong Reflection Model
Bùi Tường Phong (1947~1975) : 베트남 태생, 유타대 박사 학위
컴퓨터 그래픽의 기본 조명 모델을 발명 (박사학위 논문), 백혈병으로 사망
반사광의 강도를 구하는 공식
Ambient = ka la
Diffuse = kd ld(L • N) = kd ldcosβ
Specular = ks ls(R • V)n = ks ls(cosα)n

1
Phong Reflection Model Fomular

1
Phong Reflection Model

1
Phong VS PBL(Physically Based Lighting)

1
Ray3d

1
Minimal Raytracer code (Andrew Kensler)
#include <stdlib.h> // card > aek.ppm
#include <stdio.h>
#include <math.h>
typedef int i;typedef float f;struct v{f x,y,z;v operator+(v r){return v(x+r.x,y+r.y,z+r.z);}v operator*(f r){return v(x*r,y*r,z*r);}f
operator%(v r){return x*r.x+y*r.y+z*r.z;}v(){}v operator^(v r){return v(y*r.z-z*r.y,z*r.x-x*r.z,x*r.y-y*r.x);}v(f a,f b,f
c){x=a;y=b;z=c;}v operator!(){return*this*(1/sqrt(*this%*this));}};i G[]={247570,280596,280600,249748,18578,18577,231184,16,16};f
R(){return(f)rand()/RAND_MAX;}i T(v o,v d,f&t,v&n){t=1e9;i m=0;f p=-o.z/d.z;if(.01<p)t=p,n=v(0,0,1),m=1;for(i k=19;k--;)for(i j=9;j--
;)if(G[j]&1<<k){v p=o+v(-k,0,-j-4);f b=p%d,c=p%p-1,q=b*b-c;if(q>0){f s=-b-sqrt(q);if(s<t&&s>.01)t=s,n=!(p+d*t),m=2;}}return m;}v
S(v o,v d){f t;v n;i m=T(o,d,t,n);if(!m)return v(.7,.6,1)*pow(1-d.z,4);v h=o+d*t,l=!(v(9+R(),9+R(),16)+h*-1),r=d+n*(n%d*-2);f
b=l%n;if(b<0||T(h,l,t,n))b=0;f
p=pow(l%r*(b>0),99);if(m&1){h=h*.2;return((i)(ceil(h.x)+ceil(h.y))&1?v(3,1,1):v(3,3,3))*(b*.2+.1);}return v(p,p,p)+S(h,r)*.5;}i
main(){printf("P6 512 512 255 ");v g=!v(-6,-16,0),a=!(v(0,0,1)^g)*.002,b=!(g^a)*.002,c=(a+b)*-256+g;for(i y=512;y--;)for(i x=512;x--
;){v p(13,13,13);for(i r=64;r--;){v t=a*(R()-.5)*99+b*(R()-.5)*99;p=S(v(17,16,8)+t,!(t*-
1+(a*(R()+x)+b*(y+R())+c)*16))*3.5+p;}printf("%c%c%c",(i)p.x,(i)p.y,(i)p.z);}}

1
Simple sphere raytracer

1
Simple raytracer - Shadertoy

1
Ray Tracer Code
void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
vec2 uv = fragCoord.xy / iResolution.xy;
float aspectRatio = iResolution.x / iResolution.y;
uv *= 2.0; uv -= vec2(1.0, 1.0);
uv.x *= aspectRatio;
vec3 sphere = vec3(0.0, 0.0 + sin(iGlobalTime * 4.0), 5.0);
float R = 1.0;
vec3 ray = vec3(uv, 2.0);
vec3 light = vec3(0.0 + 2.0 * sin(iGlobalTime * 4.0), 1.0, 5.0 + 2.0 * cos(iGlobalTime * 4.0));
float A = dot(ray, ray);
float B = -2.0 * dot(ray, sphere);
float C = dot(sphere, sphere) - R*R;
float Det = B*B - 4.0*A*C;
vec3 color;
if (Det > 0.0) {
color = vec3(1.0, 0.0, 0.0);
float t = (-B - sqrt(Det)) / (2.0 * A);
vec3 pos = t * ray;
vec3 N = normalize(pos - sphere);
vec3 L = normalize(light - pos);
float diffuse = max(dot(N, L), 0.0);
vec3 Ref = reflect(-L,N);
vec3 V = -normalize(pos);
float specular = pow(max(dot(V, Ref),0.0), 32.0);
color *= diffuse;
color += specular;
}
else{
color = vec3(0.5, 0.5, 1.0);
}
fragColor = vec4(color,1.0);
}

Chpater [4]

1
Marching??

1
Raymarching 알고리즘

1
Rendering Worlds With Two Triangles
http://www.iquilezles.org/www/material/nvscene2008/nvscene2008.htm
http://www.iquilezles.org/www/material/nvscene2008/rwwtt.pdf
Link collection of ray marching on the GPU
http://d.hatena.ne.jp/hanecci/20131005/p1

1
Rendering Worlds With Two Triangles

1
Using only Fragment Shader!

Raymarching Beginners' Thread
http://www.pouet.net/topic.php?which=7920
1
Raymarching Beginners' Thread
Raymarching Distance Fields
http://9bitscience.blogspot.kr/2013/07/raymarching-distance-fields_14.html

1
Sphere Tracing

1
Elevated (2009) 4K Demo - Inigo Quilez, rgba
https://youtu.be/jB0vBmiTr6o

1
Elevated (ShaderToy version)
https://www.shadertoy.com/view/MdX3Rr

1
Distance Fields 거리장

1
Distance Fields 거리장의 응용, 와들와들 펭귄즈 (2013)

1
부호있는 거리 함수 Signed Distance Function

1
Distance Functions
Distance Functions
http://www.iquilezles.org/www/articles/distfunctions/distfunctions.htm

1
Distance Functions
Sphere - signed - exact
float sdSphere( vec3 p, float s )
{
return length(p)-s;
}
Box - unsigned - exact
float udBox( vec3 p, vec3 b )
{
return length(max(abs(p)-b,0.0));
}
Box - signed - exact
float sdBox( vec3 p, vec3 b )
{
vec3 d = abs(p) - b;
return min(max(d.x,max(d.y,d.z)),0.0) + length(max(d,0.0));
}

1
CSG(Constructed Solid Geometry) 연산
일종의 집합 연산
합집합 : A U B
교집합 : A ∩ B
차집합 : A − B = A ∩ Bc
대응하는 논리 연산
A ∨ B = A or B
A ∧ B = A and B
A ∧~B = A and not B
OR max(A,B)
AND min(A,B)

1
Ray Marching Interation counter

1
Shadertoy Tutorials
ShaderToy Raymarch Tutorial
https://www.youtube.com/watch?v=yxNnRSefK94
NVScene 2015 Session: Shadertoy Hackathon Kickoff
(Inigo Quilez, Pol Jeremias, Otavio Good)
https://www.youtube.com/watch?v=yxNnRSefK94

1
GLSL Help - ShaderToy

1
Select Input - Shadertoy

1
Hello Circle

1
Heart equation

1
Mandelbrot test

1
Surface normal 구하기
vec3 calcNormal(vec3 p)
{
vec3 eps = vec3(0.01, 0.0, 0.0);
vec3 n;
n.x = distFunc(p + eps.xyy) - distFunc(p - eps.xyy);
n.y = distFunc(p + eps.yxy) - distFunc(p - eps.yxy);
n.z = distFunc(p + eps.yyx) - distFunc(p - eps.yyx);
return normalize(n);
}

1
shadows
free penumbra shadows for raymarching distance fields
http://www.iquilezles.org/www/articles/rmshadows/rmshadows.htm

1
shadow code
float shadow( in vec3 ro, in vec3 rd, float mint, float maxt )
{
for( float t=mint; t < maxt; )
{
float h = map(ro + rd*t);
if( h<0.001 )
return 0.0;
t += h;
}
return 1.0;
}
float softshadow( in vec3 ro, in vec3 rd, float mint, float maxt, float k )
{
float res = 1.0;
for( float t=mint; t < maxt; )
{
float h = map(ro + rd*t);
if( h<0.001 )
return 0.0;
res = min( res, k*h/t );
t += h;
}
return res;
}

1
Ambient occlusion
Fake Ambient occlusion but fast

1
Ambient occlusion code
float calcAO(vec3 p, vec3 n)
{
float r = 0.0;
float w = 1.0;
for (int i = 1; i <= AO_SAMPLES; i++){
float d0 = float(i) * 0.2;
r += w * (d0 - scene(p + n * d0));
w *= 0.5;
}
return 1.0 - clamp(r, 0.0, 1.0);
}

1
Ray March Dream

1
Ray March Reloaded

1
PAPER LANTERN

1
GLSL Sandbox
http://glslsandbox.com/

감사합니다
[부산게임아카데미]
김 성 완

[IGC 2016] 부산게임아카데미 김성완 - ShaderToy에서 구현하는 거리함수 기반의 레이마칭 렌더링 알고리즘

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (8)

More from 강 민우

More from 강 민우 (20)

[IGC 2016] 부산게임아카데미 김성완 - ShaderToy에서 구현하는 거리함수 기반의 레이마칭 렌더링 알고리즘