본문 바로가기
Opengles 3.0 with Android

Chapter 6.1 Pattern Effect - Circle

by SimonLee 2025. 4. 16.

 Pattern Effect - Circle

Framgment Shader 내장 변수

변수 이름 타입 설명 값의 범위
gl_FragCoord vec4 현재 픽셀의 윈도우 좌표와 깊이 x, y: [0, viewport size], z: [0, 1], w: clip.w
gl_FrontFacing bool 전면(Front face) 여부 true 또는 false
gl_FragDepth float 사용자 지정 깊이 값 (옵션) [0.0, 1.0]

 

gl_FragCoord ( 스크린 좌표계 )

구성 요소 타입 의미 값의 범위 사용 목적
gl_FragCoord.x float 스크린 상의 픽셀 X 좌표 0.0 ~ viewportWidth UV 계산, 화면 효과, 위치 기반 이펙트
gl_FragCoord.y float 스크린 상의 픽셀 Y 좌표 0.0 ~ viewportHeight 위와 동일
gl_FragCoord.z float 깊이 버퍼에 쓰이는 Depth 값 0.0 (가까움) ~ 1.0 (멀어짐) Z-buffer 테스트, 그림자, 거리 기반 알파
gl_FragCoord.w float 클립 공간의 w 값 (원근 보정용) gl_Position.w 값 (보통 > 0) 선형 깊이 계산, 원근 거리 감쇠 등 특수 목적

 

 

Fragment Shader

// 모델 기본 색상 (배경색)
uniform vec3 ModelColor;
// 점(도트)의 색상
uniform vec3 DotColor;
// 최종 출력 컬러 (렌더 타겟 0번)
layout(location = 0) out vec4 FinalColor;

// 정사각형 크기 (도트 반복 간격 기준)
uniform float Side;

void main() {
    // 도트 반지름 = 사각형 한 변의 25%
    float DotSize = Side * 0.25;

    // 도트가 배치되는 격자 한 칸 (정사각형)
    vec2 Square = vec2(Side, Side);

    // 현재 픽셀의 위치를 해당 사각형 기준으로 정규화
    vec2 position = mod(gl_FragCoord.xy, Square) - Square * 0.5;

    // 해당 픽셀이 사각형 중심에서 얼마나 떨어졌는지 거리 계산
    float length = length(position);

    // 반지름 안이면 도트 내부임 → 1, 아니면 0
    float inside = step(length, DotSize);

    // 도트 안이면 DotColor, 밖이면 ModelColor
    vec3 baseColor = mix(ModelColor, DotColor, inside);

    // 조명 계산 결과 곱해서 최종 색상 생성
    FinalColor = vec4(baseColor, 1.0) * vec4(PhongShading(), 1.0);
}

 

 

 Pattern Effect - 구역 나누기

 

Object Space Vertex의 x, z 구간을 사용하여 색을 지정한 결과

원기둥의 원점이 (0, 0), 반지름이 1이기 때문에

x, z의 값의 범위는 (-1 ~ 1 )를 갖는다.

 

 

 

위 결과 값에 퐁 셰이딩 값을 곱해주게 되면, 위와 같은 결과를 얻을 수 있다.

diffuseMaterial의 B 채널이 0이기 때문에, 파랑색의 계열이 없어져서

청록색은 -> 초록색으로, 보라색은 붉은색이 된다.

 

Fragment Shader

void main() {
    // objectCoord 기준으로 사분면을 나누어 색상을 지정

    if (objectCoord.x > 0.0 && objectCoord.z > 0.0) {
        // x > 0, z > 0 이면 빨강 (Red)
        FinalColor = vec4(1.0, 0.0, 0.0, 1.0); // 빨강 (Red)
    }
    else if (objectCoord.x > 0.0 && objectCoord.z < 0.0) {
        // x > 0, z < 0 이면 초록 (Green)
        FinalColor = vec4(0.0, 1.0, 0.0, 1.0); // 초록 (Green)
    }
    else if (objectCoord.x < 0.0 && objectCoord.z > 0.0) {
        // x < 0, z > 0 이면 청록 (Cyan)
        FinalColor = vec4(0.0, 1.0, 1.0, 1.0); // 청록 (Cyan)
    }
    else if (objectCoord.x < 0.0 && objectCoord.z < 0.0) {
        // x < 0, z < 0 이면 자홍 (Magenta)
        FinalColor = vec4(1.0, 0.0, 1.0, 1.0); // 자홍 (Magenta)
    }
    // 사분면 색상에 Phong Shading 결과를 곱함 (조명 효과 적용)
    FinalColor = FinalColor * vec4(PhongShading(), 1.0);
}

'Opengles 3.0 with Android' 카테고리의 다른 글

Chapter 6.4 Polka Dot  (0) 2025.04.24
Chapter 6.3 Pattern Effect - Brick Style  (0) 2025.04.22
Chapter 6.0 Warble Effect  (0) 2025.04.16
Chapter 5.2 Multi Light  (0) 2025.04.15
Chapter 5.1 Phong Shader  (0) 2025.03.24