#graphics
노트 13개
Frontend › CSS
CSS 시각 효과: 필터, 블렌드 모드, 클리핑, 마스킹그래픽 도구에서 하던 효과를 CSS로 실시간 적용한다. 요소 픽셀을 바꾸는 filter와 뒤 배경만 바꾸는 backdrop-filter, 겹친 층의 색을 섞는 블렌드 모드와 isolation, 도형으로 보이는 영역을 자르는 clip-path, 이미지 픽셀로 투명도를 정하는 mask, 글이 도형을 따라 흐르게 하는 shape-outside까지 정리한다. 같은 이미지 효과를 필터·블렌드·SVG·캔버스로 걸 때의 비용 차이와, 비표준 반사(-webkit-box-reflect)를 마스크로 대신하는 법도 다룬다.
Frontend
Graphics브라우저가 GPU로 그리는 원리(WebGL·WebGPU·셰이더), Three.js로 그리는 웹 3D, 영상을 투명 배경 애니메이션 아이콘으로 쓰는 방법을 다루는 노트 모음.
Frontend › Graphics
Canvas 2D API<canvas>에 JavaScript로 픽셀을 그리는 즉시 모드 그래픽 API. SVG와의 차이(비트맵 vs DOM), getContext의 종류, 상태 스택과 Path2D, 고해상도 화면에서 흐려지지 않게 devicePixelRatio로 키우는 법, 레이어 분리·오프스크린 미리 그리기·정수 좌표·alpha: false 같은 성능 요령, OffscreenCanvas로 워커에서 그리기, 접근성 한계를 정리한다.
Frontend › Graphics
WebGL과 셰이더: 브라우저가 GPU로 그리는 방식브라우저가 GPU에 그림을 그리게 하는 API인 WebGL·WebGPU와, GPU에서 도는 작은 프로그램인 정점 셰이더·프래그먼트 셰이더, 셰이더 언어 GLSL ES·WGSL의 관계를 정리했다. 프론트엔드 개발자는 대개 Three.js 같은 라이브러리로 충분하고, 셰이더는 특수 효과가 필요할 때 배운다.
Frontend › Graphics
WebXR: 브라우저의 VR·AR브라우저에서 VR 헤드셋과 AR 기기에 3D 장면을 보여 주는 WebXR Device API. 세션 종류(inline·immersive-vr·immersive-ar), 기준 공간과 3DoF·6DoF, XR 전용 프레임 루프와 눈마다의 뷰, 입력 소스, AR 모듈(히트 테스트·앵커·DOM 오버레이)을 정리하고, 평면 화면·휴대폰 AR·헤드셋을 한 페이지로 지원하는 점진적 향상과 브라우저 지원 범위, 전신인 WebVR을 다룬다.
Frontend › Web
웹 이미지 형식: 벡터·래스터와 GIF·PNG·JPEG·WebP·AVIF·JPEG XL도형으로 된 그림은 SVG, 사진처럼 실제 세계의 디테일이 있는 그림은 래스터다. 래스터는 손실 압축이 가능한 형식을 고르되, 사진은 AVIF·WebP를 먼저 주고 JPEG로 받친다. PNG는 반투명이 필요한 단순 그림과 원본 보관용, GIF는 거의 쓸 곳이 없다. JPEG XL은 크롬·파이어폭스·사파리가 지원하지만 엣지가 빠져 있어 picture로 대체를 둔다.
Computer Science › C Programming
C로 하는 2D 그래픽 기초SDL과 MiniLibX 같은 C 그래픽 라이브러리의 공통 구조(창, 이벤트 루프, 이미지 버퍼, 렌더러)와 픽셀을 직접 다루는 기법(ARGB 색 패킹, 브레젠험 직선, 선형 보간 그라데이션, 회전 변환, 등각 투영)을 정리한다. SDL2와 SDL3의 차이도 짚는다.
Computer Science
베지어 곡선베지어 곡선은 제어점 몇 개로 매끄러운 곡선을 정의하는 방법이다. 두 점 사이 선형 보간을 겹겹이 반복하는 드 카스텔조 알고리즘으로 1차(직선)·2차·3차 곡선 식과 행렬 표현을 유도하고, 펜 툴·SVG·CSS·폰트에서 어떻게 쓰이는지 정리한다.
Computer Science
변환 행렬: 이동·크기·회전과 동차 좌표그래픽스에서 물체를 옮기고 키우고 돌리는 일은 모두 행렬 곱이다. 좌표 끝에 1을 붙이는 동차 좌표로 이동까지 행렬 하나에 담고, 임의의 점·축을 기준으로 한 변환은 '원점으로 옮기고 → 변환하고 → 되돌리는' 합성으로 만든다. 2D·3D 변환 행렬과 곱하는 순서의 의미를 정리한다.
Computer Science
컴퓨터 그래픽스 렌더링 기초: 프레임버퍼에서 3D 래스터화까지화면이 메모리의 어떤 내용을 비추는지(래스터 스캔과 벡터 스캔, 텍스트 모드, 프레임버퍼)에서 시작해, 3D 장면을 2D 픽셀로 바꾸는 래스터화 렌더링의 단계(투영, 삼각형 메시, 스캔라인 채우기, 안티앨리어싱, 화가 알고리즘과 Z 버퍼, 후면 컬링, 플랫·고러드·퐁 셰이딩, 텍스처 매핑)와 GPU가 이 일을 병렬로 하는 이유를 정리한다.
Algorithm › Math
푸리에 변환신호를 여러 주파수의 사인·코사인 성분의 합으로 분해해 시간·공간 영역을 주파수 영역으로 바꾸는 변환. 디지털 신호에는 이산 푸리에 변환(DFT)을 쓰고 FFT로 O(n log n)에 계산한다. 크기(스펙트럼)는 성분의 세기, 위상은 위치 정보를 담으며, 주파수 영역에서 필터링한 뒤 역변환한다.
AI & Data
컴퓨터 비전 기초: 커널과 합성곱에서 CNN까지컴퓨터 비전은 픽셀 격자에서 높은 수준의 의미를 뽑는 분야다. 영상 처리와의 차이, 분류·탐지·분할·특징·매칭·3D·추적·생성의 세부 과제와 대표 데이터셋, 픽셀 하나로 하는 색 추적, 주변 픽셀 묶음(패치)에 커널을 곱해 더하는 합성곱과 에지 검출, 약한 특징을 모아 얼굴을 찾는 Viola-Jones, 커널을 학습하는 합성곱 신경망(CNN), 얼굴 랜드마크에서 표정·생체 인식으로 올라가는 추상화 층을 정리한다.
AI & Data
AI 이미지를 쓸모 있는 벡터로 바꾸기미드저니로 그린 래스터 이미지를 업스케일러로 키우고 일러스트레이터 이미지 추적(Image Trace)으로 벡터화하면, 지저분한 픽셀이 정리된 편집 가능한 벡터를 쉽게 얻는다. 단계별 역할과 추적 설정을 정리했다.