셰이더 패턴 메모

5209 단어 three.jsWebGL

임의의 함수 y=f(x)



k = y-f(x)로 하면, 그려고 하는 함수 주변 즉, y-f(x) = 0 부근에 관해서 값이 0에 가까워지므로, 이것을 step 함수로 단락해 주면 된다. 정규화 혹은 사이즈 조정에는, y축 방향은 f(x)→f(x)/2로 변경하는 것이나, x축 방향은 x→2*x로 하는 것으로 대응 가능.


"void main(){",
        "vec2 st = gl_FragCoord.xy*2.0/resolution.xy-1.0;",
        "float fx = abs(st.y-pow(st.x*2.0,3.0)-2.0*pow(st.x*2.0,2.0)+1.0);",
        "gl_FragColor = vec4(vec3(step(0.02,fx)),1.0);",
        "}"

임의의 극좌표 함수



극좌표 함수는 r = distance(st,vec2(0,0)), theta = atan(st.y,st.x) 로 하여 얻어진 값을 바탕으로 y=f(x) 와 동일하게 기술 한다. 이 때 glsl의 atan은 st.x = 0 일 때 예외 처리를하지 않으므로 여기에 대응해야합니다. (참고 → htps : // m / 7, T / ms / d76c 6771641951d31)

확대 축소에 관해서는 꽤 귀찮지만, 기본적으로 r에 관해서 축소하면 좋다고 생각하기 때문에, r = f(theta)라고 기술할 수 있을 때는 f(theta)→f(theta)/2라든지 하면 된다고 생각한다. 그 외의 형상의 함수는 어떻게 하자.

또, 극좌표는 -1∼1의 범위의 좌표계로 묘화하고 싶기 때문에 0-1의 좌표계를 변환하기 위한 함수를 준비해 두면 편할지도 모른다.


        "void main(){",
        "vec2 st = gl_FragCoord.xy*2.0/resolution.xy-1.0;",
        "float r = distance(st,vec2(0.0,0.0));",
        "float theta = atan2(st.y,st.x)+pi;",
        "float k = r-(1.0*(1.0+cos(theta))/2.0);",
        "k = 1.0-k;",
        "gl_FragColor = vec4(vec3(step(1.0,k)),1.0);",
        "}"

2차원 쉐이더를 비상으로 늘린다.



0-1 좌표계에 대해서, 그것을 몇 배나 해 fract를 사용해 소수 이하를 취하는 것으로 좌표계를 복제한다.


void main(){
vec2 st = gl_FragCoord.xy/resolution.xy;
st = st*2.0-1.0;
st = fract(st);
st = to_cent(st);
float r = distance(st,vec2(0.0,0.0));
float theta = atan2(st.y,st.x)+pi;
gl_FragColor = vec4(vec3(distance(st,vec2(0.0,0.0))),1.0);
}

좋은 웹페이지 즐겨찾기