Metal(1)- 메탈을 알기전에 필요한 것들

갑자기 왠 뜬끔없이 메탈일까? 그래픽관련 공부를 해야할 계기가 생겼고 이것또한 하나의 기회라고 생각하여 블로그에 정리하며 자세히 공부를 하려합니다. 아주아주 예전에 AR쪽하면서인가(?) metal관련 봤던것 같은데 기억이 안나서 아예 리뉴얼 해서 정리해볼게요~ 

컴퓨터 아키텍처의 기초

CPU: 모든 계산과 논리연산 처리하는 "두뇌"

- ALU: 수학적 연산과 논리 연산 수행

- 제어장치: 명령어 해석 및 실행 순서 결정

- 레지스터: 고속 임시데이터저장

- 캐시메모리: 자주 사용되는 데이터와 명령어 저장

GPU: 원래 그래픽 처리를 위해 설계되었으나, 현재는 병렬 컴퓨팅의 핵심 요소로 확장

- 병렬처리 능력: 동일한 연산을 여러 데이터에 동시 적용

- 그래픽 렌더링: 3D 모델링, 텍스처 매핑, 쉐이딩 처리

- 범용컴퓨팅: 기계학습, 과학적 계산, 암호화 등

IPhone에서 적용

현시점 가장 최신폰인 iPhone 16 pro버전에서는 A18 Pro칩을 사용하고 있다. 

CPU는 2개의 성능코어(P-Core), 4개의 효율코어(E-Core)로 이루어져있다.

성능코어가 무거운 작업(복잡한 계산, 게임)을 빠르게 처리하고, 배터리 효율성이 중요한 일상적인 작업(이메일, 메시지)에 E-Core사용하는데 작업 부하에 따라 적절한 코어를 활성화하여 관리한다고 한다. 

GPU는 6개의 코어가 SIMD방식으로 작동한다. 여기에는 수백~수천개의 작은 처리유닛들이 병렬로 수행한다고 보면된다.

iOS에서 모든 UI요소는 GPU를 통해 렌더링이 되어진다. 더 나아가 이미지 처리(필터, 조정, 변환), 기계학습, AR까지 모두 GPU를 활용한다.

SISD? SIMD?

위에서 GPU관련 공부하면 SIMD가 나온다. 이는 하나의 명령어로 여러개의 데이터를 한번에 처리하는 병렬 방법이다

출처: https://m.blog.naver.com/fs0608/221650925743

SISD(Single Instruction, Single Data)

• 작동 방식: 하나의 명령어가 하나의 데이터에 순차적으로 적용
• 장점: 설계 단순성, 명확한 제어 흐름, 높은 예측 가능성
• 단점: 병렬 처리 불가, 대규모 데이터 처리 시 비효율적
• 주요 사용처: 전통적인 CPU 코어, 순차적 처리가 필요한 작업

SIMD(Single Instruction, Multiple Data)

 

• 작동 방식: 하나의 명령어가 여러 데이터 요소에 동시 적용
• 장점: 높은 처리량, 향상된 전력 효율성, 그래픽 작업에 최적화
• 단점: 조건부 실행 시 성능 저하, 복잡한 프로그래밍 모델
• 주요 사용처: GPU, 벡터 프로세서, 그래픽 렌더링, 신호 처리
• 픽셀마다 동일한 쉐이딩 알고리즘을 적용하는데 이 계산이 독립적으로 수행 가능하고 수백만개를 동시에처리해야하기에 GPU는 SIMD

Shading(셰이딩)

3D 객체의 표면 특성(색상, 질감, 반사 등)을 계산하는 과정

 

그래픽 API

 

OpenGL

플랫폼 독립적인 API로 다양한 운영체제나 하드웨어 상관없이(그러면 추상화를 많이하겟구나) GPU를 활용한 그래픽 렌더링을 가능하게 하는 도구

역할: GPU에 렌더링 명령을 전달하여 2D 및 3D 그래픽 생성. 

구성요소

• 정점(Vertex): 점.
• 선: 정점 간 연결
• 다각형(Polygon): 삼각형 등.복잡한 표면 형성
• 셰이더(Shader): 정점 셰이더와 프래그먼트 셰이더로 그래픽의 동작과 외관을 정의

OpenGL ES(OpenGL for Embedded Systems)

: 위의 경량버전. 모바일 및 임베디드 시스템에서 사용되었습니다

하지만 여전히 OpenGL의 높은 추상화 구조를 계승했기 때문에 하드웨어와 직접적인 통신에서 오버헤드 발생!!!

특히 Apple A시리즈 칩과 같은 고성능 GPU의 잠재력을 완전히 활용하지 못했고, 고사양 게임이나 복잡한 그래픽 작업에서 성능 병목 현상이 나타났다.

GLSL

OpenGL 및 OpenGL ES에서 사용되는 셰이딩 언어로 GPU에서 실행되는 코드를 작성하는데 사용된다. 

Metal

자 이제 본론이다. 허거덩거덩스.. 서론이 너무 길었나..?

Apple이 만든 벌써 10년이넘은 저수준 그래픽 및 컴퓨팅 API이다. Apple 하드웨어의 GPU 성능을 최대한 활용하도록 설계되었다. 그런데 알고보면 우리는 이미 metal을 사용하고 있었다.../

설계 목적

CPU와 GPU간 통신 오버헤드를 줄이고 하드웨어에 더 가까운 저수준 접근을 제공한다. 이를 통해 렌더링 속도를 높이고 모바일 기기에서 배터리 효율성과 성능을 동시에 개선하는 것을 목표로 한다.

장점

• 낮은 오버헤드: 하드웨어에 직접 접근하여 CPU-GPU 간 통신 최적화
• 그래픽과 컴퓨팅 작업 통합: OpenGL의 그래픽과 OpenCL의 계산을 통합 API로 결합.
  • 렌더링 지연시간 감소: OpenGL ES대비 평균 50%이상 감소햇다고한다. 

셰이더

GPU에서 실행되는 작은 프로그램입니다. 우리가 작성한 Xcode에 작성한 코드가 CPU에서 실행되는 것과 달리!!! 셰이더는 GPU에서 실행되며 그래픽 데이터를 처리하는데 특화되어있다.

1. 위치 계산: 3D 객체의 각 점이 화면의 어디에 위치할지를 계산

2. 색상 결정: 각 픽셀의 색상을 계산(조명,재질,텍스처등을 고려하여)

3. 특수 효과 적용: 그림자, 반사,블러,왜곡 등 다양한 시각 효과를 구현한다.

셰이더의 종류 3가지

1. 버텍스 셰이더

: 3D 모델의 각 정점의 위치를 계산

입력: 모델의 원본 정점 좌표, 변환 행렬 등

출력: 화면 좌표계로 변환된 정점 위치 및 추가 데이터

vertex VertexOutput vertexShader(
    const device Vertex* vertices [[buffer(0)]],
    uint vertexID [[vertex_id]]
) {
    // 3D 좌표계의 정점을 화면 좌표계로 변환하는 코드
}

2. 프래그먼트 셰이더

: 각 픽셀의 최종 색상을 결정

입력: 정점 간 보간된 데이터, 텍스처, 조명 정보 등

출력: 픽셀의 RGBA 색상 값

fragment float4 fragmentShader(
    VertexOutput in [[stage_in]],
    texture2d<float> texture [[texture(0)]]
) {
    // 픽셀 색상을 계산하는 코드
}

3. 컴퓨트 셰이더

: 일반적인 병렬 계산 수행

이미지 처리, 물리 시뮬레이션, 인공지능 연산 등

kernel void computeShader(
    texture2d<float, access::read> inputTexture [[texture(0)]],
    texture2d<float, access::write> outputTexture [[texture(1)]],
    uint2 position [[thread_position_in_grid]]
) {
    // 병렬 계산을 수행하는 코드
}

 

이 Metal에서 셰이더를 작성하기 위해서는 MSL이라는 C++기반 언어로 셰이더를 작성한다.

// 버텍스 셰이더 - 정점 위치 계산
vertex VertexOutput basicVertex(
    const device Vertex* vertices [[buffer(0)]],
    uint vertexID [[vertex_id]]
) {
    VertexOutput output;
    
    // 정점 위치를 그대로 사용
    output.position = float4(vertices[vertexID].position, 1.0);
    // 텍스처 좌표 전달
    output.texCoord = vertices[vertexID].texCoord;
    
    return output;
}

// 프래그먼트 셰이더 - 색상 변경
fragment float4 tintFragment(
    VertexOutput in [[stage_in]],
    texture2d<float> colorTexture [[texture(0)]],
    constant float4& tintColor [[buffer(0)]]
) {
    constexpr sampler textureSampler(filter::linear);
    
    // 텍스처에서 원본 색상 가져오기
    float4 originalColor = colorTexture.sample(textureSampler, in.texCoord);
    
    // 원본 색상과 틴트 색상 혼합
    return originalColor * tintColor;
}

우리는 이 셰이더를 통해 블러, 필터 효과를 완성할껏이다. 인스타그램 처럼 그건 아마 또 다음글에 이어질꺼 같다...후 길어진다. 어렵다. 아직 갈길이 멀다.