ShaderToy    에서구현하는 Ray Marching 렌더링

   김성완부산게임아카데미

Inven Game Conference

INDEX1

ChapterShaderToy 소개

2Chapter

   프랙탈그래픽

3Chapter

Ray Tracing & Lighting

4Chapter

Ray Marching 알고리즘

5Chapter

Chpater [1]

ShaderToy 소개

Inven Game Conference

1    챕터제목을입력하세요

Shadertoy

1    챕터제목을입력하세요

Shadertoy.com

https://www.shadertoy.com

1    챕터제목을입력하세요

Shadertoy Browse

1    챕터제목을입력하세요

Shadertoy   만든사람들

Iñigo Quilez (IQ / RGBA)  Pol Jeremias

1    챕터제목을입력하세요

 이니고퀼레즈

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

Referencehttps://www.khronos.org/files/opengles_shading_language.pdf

API Quick Reference Cardhttps://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]

 프랙탈그래픽

Inven Game Conference

1    챕터제목을입력하세요

Benoit B. Mandelbrot (1924~2010)

1    챕터제목을입력하세요

Mandelbrot    집합의발견 (1980)

1    챕터제목을입력하세요

Mandelbrot    집합의발견 (1980)

1    챕터제목을입력하세요

Mandelbrot    집합의발견 (1980)

1    챕터제목을입력하세요

Mandelbrot    집합의발견 (1980)

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

Inven Game Conference

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    챕터제목을입력하세요

   페이지제목을입력하세요

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 Codevoid 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]

Ray Marching 알고리즘

Inven Game Conference

1    챕터제목을입력하세요

Marching??

1    챕터제목을입력하세요

Raymarching 알고리즘

1    챕터제목을입력하세요

Ray Marching 알고리즘

Rendering Worlds With Two Triangleshttp://www.iquilezles.org/www/material/nvscene2008/nvscene2008.htm

http://www.iquilezles.org/www/material/nvscene2008/rwwtt.pdf

Link collection of ray marching on the GPUhttp://d.hatena.ne.jp/hanecci/20131005/p1

1    챕터제목을입력하세요

Rendering Worlds With Two Triangles

1    챕터제목을입력하세요

Using only Fragment Shader!

Raymarching Beginners' Threadhttp://www.pouet.net/topic.php?which=7920

1    챕터제목을입력하세요

Raymarching Beginners' Thread

Raymarching Distance Fieldshttp://9bitscience.blogspot.kr/2013/07/raymarching-distance-fields_14.html

1    챕터제목을입력하세요

Sphere Tracing

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 Functionshttp://www.iquilezles.org/www/articles/distfunctions/distfunctions.htm

1    챕터제목을입력하세요

Distance Functions

Sphere - signed - exactfloat sdSphere( vec3 p, float s ){ return length(p)-s;}

Box - unsigned - exactfloat udBox( vec3 p, vec3 b ){ return length(max(abs(p)-b,0.0));}

Box - signed - exactfloat 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 Tutorialhttps://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    챕터제목을입력하세요

   페이지제목을입력하세요

1    챕터제목을입력하세요

GLSL Help - ShaderToy

1    챕터제목을입력하세요

Select Input - Shadertoy

1    챕터제목을입력하세요

Hello Circle

1    챕터제목을입력하세요

Heart equation

1    챕터제목을입력하세요

Heart equation

1    챕터제목을입력하세요

Heart equation

1    챕터제목을입력하세요

   페이지제목을입력하세요

1    챕터제목을입력하세요

   페이지제목을입력하세요

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    챕터제목을입력하세요

Shadertoy

1    챕터제목을입력하세요

Shadertoy

1    챕터제목을입력하세요

Ray March Dream

1    챕터제목을입력하세요

Ray March Reloaded

1    챕터제목을입력하세요

PAPER LANTERN

1    챕터제목을입력하세요

GLSL Sandbox

http://glslsandbox.com/

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

   김성완