jtwjs Dev Wiki
  • DEV_ROAD
    • πŸ’ͺ🏻 μƒμ‘΄ν•˜κΈ°
    • Week 1
      • 개발 ν™˜κ²½ μ„ΈνŒ…
      • νƒ€μž…μŠ€ν¬λ¦½νŠΈ
      • λ¦¬μ—‘νŠΈ
      • Testing Library
      • Parcel & ESLint
    • Week 2
      • JSX
      • Virtual DOM
    • Week 3
      • React Component
      • React State
    • Week 4
      • Express
      • Fetch API & CORS
      • React Hook
      • useRef & Custom Hook
    • Week 5
      • TDD
      • React Testing Library
      • MSW
      • Playwrite
      • Snapshot
    • Week 6
      • Separtion of Concerns
      • Principle
      • DI, (Dependency Injection)
      • Reflect-metadata
      • TSyringe
      • External Store
      • Follow Redux
      • usestore-ts
      • useSyncExternalStore
    • Week 7
      • Routing
      • Routes
      • Router
      • Navigation
    • Week 8
      • Design System
      • Style Basics
      • CSS-in-JS
      • Styled-Components
      • Global Style & Theme
    • Week 9
      • κ°œλ°œν•˜κΈ° μ „ μ€€λΉ„
      • μƒν’ˆ λͺ©λ‘ νŽ˜μ΄μ§€
      • μƒν’ˆ 상세 νŽ˜μ΄μ§€
      • μž₯λ°”κ΅¬λ‹ˆ νŽ˜μ΄μ§€
    • Week 10
      • 둜그인
      • λ‘œκ·Έμ•„μ›ƒ
      • νšŒμ›κ°€μž…
      • μ£Όλ¬Έ λͺ©λ‘ & μ£Όλ¬Έ 상세
    • Week 11
      • 배솑 정보 μž…λ ₯
      • ν¬νŠΈμ› 결제 μš”μ²­
      • 배솑 및 결제 정보 전달
    • Week 12
      • κ΄€λ¦¬μž μ›Ήμ‚¬μ΄νŠΈκ°œλ°œμ‹œμž‘
  • DEV_NOTE
    • TypeScript
      • 기본적 문법
        • Enum
        • λ‹€ν˜•μ„±
          • Untitled
        • ꡬ쑰적 타이핑
        • μ œλ„ˆλ¦­ νƒ€μž…
        • 컨디셔널 νƒ€μž…
        • ν•¨μˆ˜ λ©”μ„œλ“œ 타이핑
        • infer둜 νƒ€μž…μŠ€ν¬λ¦½νŠΈμ˜ μΆ”λ‘  직접 ν™œμš©
        • μž¬κ·€ νƒ€μž…
        • ν…œν”Œλ¦Ώ λ¦¬ν„°λŸ΄ νƒ€μž…
        • 좔가적인 νƒ€μž… 검사 satisfies μ—°μ‚°μž
        • νƒ€μž…μŠ€ν¬λ¦½νŠΈ 건망증
        • μ›μ‹œ μžλ£Œν˜•μ—λ„ λΈŒλžœλ”© 기법 μ‚¬μš© κ°€λŠ₯
        • νƒ€μž… 쒁히기
        • μœ μš©ν•œ νƒ€μž… λ§Œλ“€κΈ°
        • λ°μ½”λ ˆμ΄ν„° ν•¨μˆ˜
        • μ•°λΉ„μ–ΈνŠΈ 선언도 μ„ μ–Έ 병합이 λœλ‹€.
        • μ•°λΉ„μ–ΈνŠΈ 선언도 선언병합이 λœλ‹€.
    • Testing
      • Unit Testing
      • λ‹¨μœ„ ν…ŒμŠ€νŠΈμ˜ 두 λΆ„νŒŒ
      • 쒋은 λ‹¨μœ„ ν…ŒμŠ€νŠΈλ₯Ό κ΅¬μ„±ν•˜λŠ” 4λŒ€ μš”μ†Œ
      • ν…ŒμŠ€νŠΈ λŒ€μ—­κ³Ό 식별할 수 μžˆλŠ” λ™μž‘
      • λ‹¨μœ„ ν…ŒμŠ€νŠΈ μŠ€νƒ€μΌ
      • κ°€μΉ˜ μžˆλŠ” λ‹¨μœ„ ν…ŒμŠ€νŠΈλ₯Ό μœ„ν•œ λ¦¬νŒ©ν† λ§
      • 톡합 ν…ŒμŠ€νŠΈ
      • Cross Browsing Testing
      • κΈ°λŠ₯ ν…ŒμŠ€νŠΈ μ’…λ₯˜
      • React Testing Pattern
      • ν”„λ‘ νŠΈμ—”λ“œ ν…ŒμŠ€νŠΈ μž…λ¬Έ
        • ν…ŒμŠ€νŠΈ λ²”μœ„
        • λ‹¨μœ„ ν…ŒμŠ€νŠΈ 검증
        • Mock
        • UI μ»΄ν¬λ„ŒνŠΈ ν…ŒμŠ€νŠΈ
        • ν…ŒμŠ€νŠΈ 컀버리지
        • μ›Ή 톡합 ν…ŒμŠ€νŠΈ
        • MSW
        • μŠ€ν† λ¦¬λΆ
        • μ‹œκ°μ  νšŒκ·€ ν…ŒμŠ€νŠΈ
        • E2E ν…ŒμŠ€νŠΈ
        • Github Actions μ„€μ •
        • κΉƒν—ˆλΈŒ μ•‘μ…˜μ—μ„œ E2E
      • μ‹œν”„νŠΈ λ ˆν”„νŠΈ
        • ν…ŒμŠ€νŠΈ κΈ°λ³Έμ€‘μ˜ κΈ°λ³Έ
        • λ‹¨μœ„ ν…ŒμŠ€νŠΈ
        • μ½”λ“œ λ³΅μž‘λ„
        • λ¦¬νŒ©ν„°λ§
        • μ½”λ“œ 리뷰
        • 톡합 ν…ŒμŠ€νŠΈ νŒ¨ν„΄
        • μ‹œμŠ€ν…œ ν…ŒμŠ€νŠΈμ˜ μžλ™ν™”
        • 탐색적 ν…ŒμŠ€νŠΈ
      • Test Tip
      • vitest
      • playwright
      • Test Data Generator
      • MSW
    • Algorithm
      • coding test
      • Data Structure
    • Next.js
      • Data Fetching
      • Hydration
      • Next 13
      • Optimization
      • Next 15
        • ETC.
    • Tailwind
      • Tailwind CSS
      • Theme
      • Directives
      • Tool
      • Design System
      • Shadcn UI
    • Storybook
      • Storybook
      • CSF3
      • CDD
      • Headless Component
    • Funtional Programming
      • ν•¨μˆ˜ν˜• ν”„λ‘œκ·Έλž˜λ°
      • μ°Έμ‘° 투λͺ…μ„±
      • λΆ€μˆ˜νš¨κ³Ό
      • ν•¨μˆ˜ ν•©μ„±
      • μ œλ„ˆλ¦­ νƒ€μž… ν™œμš©ν•˜κΈ°
      • 암묡적 μž…μΆœλ ₯
      • μ•‘μ…˜κ³Ό 계산, 데이터
      • κ³„μΈ΅ν˜• 섀계
      • 호좜 κ·Έλž˜ν”„
      • ν•¨μˆ˜ν˜• 섀계
      • λΆˆλ³€μ„±
      • 일급 ν•¨μˆ˜
      • ν•¨μˆ˜ν˜• 도ꡬ
    • Git
      • Github Actions
      • Conflict
      • Branch μ „λž΅
    • Contents Format
      • Audio
    • 3D Graphic
      • 3D keyword
      • Three.js
      • Geometry
      • Material
      • Light
      • Camera
      • Decal
      • Rotation
      • Text
      • Shadow
      • Fog
      • Post Processing
      • Animation
      • Math
        • Vector Space
        • λ²‘ν„°μ˜ μ—°μ‚°
        • νšŒμ „ 계산
      • 3D 컨텐츠가 λ§Œλ“€μ–΄μ§€λŠ” κ³Όμ •
      • R3F
      • Env
      • Scene
      • Transform
      • R3F
      • Interaction & Raycast
      • Rendering Algorithnm
      • Blender
    • Accessibility
      • μ ‘κ·Όμ„±μ΄λž€
    • Interactive Web
      • Parallax
      • Canvas
      • requestAnimationFrame
      • Effect
      • HSL
      • React.js + Canvas
      • Matter.js
    • AWS
      • DevOps
      • Amplify
      • S3
      • ν΄λΌμš°λ“œ μ»΄ν“¨νŒ…
        • μ˜¨ν”„λ ˆλ―ΈμŠ€μ™€ ν΄λΌμš°λ“œ
        • ν΄λΌμš°λ“œ λ„μž…νš¨κ³Ό
        • ν΄λΌμš°λ“œ μ»΄ν“¨νŒ…μ˜ λ²”μœ„
        • μ»΄ν“¨νŒ… μ˜΅μ…˜
          • EC2 - Virtual Machin
          • ECS, EKS - Container
          • Lambda - Serverless
        • λ„€νŠΈμ›Œν¬ 가상화
        • μŠ€ν† λ¦¬μ§€
        • λ°μ΄ν„°λ² μ΄μŠ€
        • 데이터 μˆ˜μ§‘
        • λ¨Έμ‹  λŸ¬λ‹ μ˜μ—­
        • IoT μ˜μ—­
        • 블둝체인 μ˜μ—­
      • ν΄λΌμš°λ“œ μ•„ν‚€ν…μ²˜ 섀계
    • Network
      • Web Server & WAS
    • System Design
      • System Design
      • Component
      • μ˜μ‘΄μ„±μ„ λ°°μ œν•œ 개발
      • Error Handling
      • Architecture
        • λͺ¨λ…Έλ‘œν‹± μ•„ν‚€ν…μ²˜
        • Clean Architecture
        • Layered Architecture
        • 이벀트 기반 μ•„ν‚€ν…μ²˜
      • 상황을 νŒŒμ•…ν•˜λŠ” 메타인지
      • 쀑볡 문제 ν•΄κ²°ν•˜κΈ°
      • Monorepo Arhitecture
        • λͺ¨λ…Έλ ˆν¬ 운영과 νŠΈλŸ¬λΈ”μŠˆνŒ…
        • Module Federation
      • μ½”λ“œ 병λͺ©μ§€μ 
      • API λŒ€μ‘
      • 곡톡 μ½”λ“œ
      • Infra ꡬ좕
      • λͺ¨λ“ˆ 기반의 개발 방식
      • Design System
        • μ΅œμ†Œ μˆ˜μ€€μ˜ μ•„ν‚€ν…μ²˜ μ„€μ •
        • 더 효율적인 λ””μžμΈμ‹œμŠ€ν…œ λ§Œλ“€κΈ°
        • λ””μžμΈ μ‹œμŠ€ν…œκ³Ό UI 라이브러리 λͺ©μ 
        • λ””μžμΈ 토큰
      • 효율적인 업무
        • 업무 ν”„λ‘œμ„ΈμŠ€ 병λͺ© νŒŒμ•…
      • Clean Code
      • Design Pattern
        • CQRS Pattern
        • Strangler Fig Pattern
        • λ°μ½”λ ˆμ΄ν„° νŒ¨ν„΄
        • μ»€λ§¨λ“œ νŒ¨ν„΄
        • μ „λž΅ νŒ¨ν„΄
        • μ˜΅μ €λ²„ νŒ¨ν„΄
      • A/B ν…ŒμŠ€νŒ…
      • λŒ€κ·œλͺ¨ λ¦¬μ—‘νŠΈ μ›Ήμ•± 개발
        • λ³΅μž‘μ„± 관리
        • λͺ¨λ“ˆμ„±
        • μ„±λŠ₯
        • λ””μžμΈ μ‹œμŠ€ν…œ
        • 데이터 패칭
        • μƒνƒœ 관리
        • κ΅­μ œν™”
        • μ½”λ“œ μ‘°μ§ν™”ν•˜κΈ°
        • κ°œμΈν™” A/B ν…ŒμŠ€νŒ…
        • ν™•μž₯ κ°€λŠ₯ν•œ μ›Ή μ•„ν‚€ν…μ²˜
        • ν…ŒμŠ€νŒ…
        • 툴링
        • 기술적 λ§ˆμ΄κ·Έλ ˆμ΄μ…˜
        • νƒ€μž…μŠ€ν¬λ¦½νŠΈ
        • λΌμš°νŒ…
        • μ‚¬μš©μž 쀑심 API λ””μžμΈ
        • λ¦¬μ•‘νŠΈ 미래
    • Performance
      • React DevTools
      • Component μ΅œμ ν™”
      • Page Load
      • API
    • MFA
      • MSA
      • MFA λ„μž…ν•˜κΈ°
      • Monorepo
        • Monorepo Tool
        • Yarn Berry Workspace
        • Turborepo
      • MFA Composition
      • SPA 톡합
      • Design System
      • Package Manager
        • Yarn
        • pnpm
      • Transpiler & Bundler
        • Babel
        • Rollup
        • esbuild
        • swc
        • Webpack
        • Vite
      • 뢄해와 톡합을 μœ„ν•œ μ—¬λŸ¬ 기술 비ꡐ
    • State Management
      • Zustand
    • React v18
      • Automatic batching
      • Suspense
      • Transition
    • SEO
      • Search Engine Optimization
      • Open Graph Element
      • Metadata
    • FE Develop
      • User Scenario
      • Optimization
      • Browser API
        • Scrubbing
        • Clipboard
      • Folder Structure
      • API First Design
      • 톡합 ν…ŒμŠ€νŠΈ
      • ν…Œν¬ μŠ€νŽ™
      • 이슈 관리 with Jira
    • Refactoring
      • λ¦¬νŒ©ν† λ§ 깊게 듀여닀보기
      • κΈ΄ μ½”λ“œ 쑰각내기
      • νƒ€μž… μ½”λ“œ μ²˜λ¦¬ν•˜κΈ°
      • μœ μ‚¬ν•œ μ½”λ“œ μœ΅ν•©ν•˜κΈ°
      • 데이터 보호
      • μ½”λ“œ μΆ”κ°€ 및 제거
    • OAuth 2.0
    • Analytics
      • Mixpanel
    • ETC
      • VSCode
    • React Hook In Action
      • useContext & Provider
      • μ»€μŠ€ν…€ ν›…
      • μ½”λ“œ λΆ„ν• ν•˜κΈ° with Suspense, lazy
      • Suspense와 이미지 μ μž¬ν•˜κΈ°
      • useTransition, uesDeferredValue
      • SuspenseList
    • AI
      • Cursor
    • UI library
      • vanila-extract
      • Headless
      • ν…ŒμŠ€νŠΈ μ½”λ“œ
      • λ¬Έμ„œν™”
Powered by GitBook
On this page
  • κ³΅κ°„μ˜ μˆ˜ν•™
  • ν–‰λ ¬ (Matrix)
  • ν‰λ©΄μ˜ 방정식
  • 물체의 μˆ˜ν•™
  • μ•„ν•€μ‘°ν•©
  • 면을 생성 ν•˜λŠ” μˆ˜ν•™
  • νšŒμ „μ˜ μˆ˜ν•™ (μ‚Όκ°ν•¨μˆ˜μ™€ νšŒμ „ν–‰λ ¬)
  • μ‚Όκ°ν•¨μˆ˜
  1. DEV_NOTE
  2. 3D Graphic

Math

κ³΅κ°„μ˜ μˆ˜ν•™

ν˜„μ‹€ μ„Έκ³„μ˜ 곡간은 ν•˜λ‚˜μ§€λ§Œ, 가상 곡간은 λ¬΄ν•œν•˜λ‹€.

κ³΅κ°„μ΄λž€ μ–΄λ–€ 물질 λ˜λŠ” 물체가 μ‘΄μž¬ν•  수 μžˆκ±°λ‚˜ μ–΄λ–€ 일이 일어날 수 μžˆλŠ” μž₯μ†Œ

ν–‰λ ¬ (Matrix)

μ„ ν˜• λ³€ν™˜μ„ μˆ˜ν–‰ν•˜λŠ” 도ꡬ

  • μ»΄ν“¨ν„°μ—κ²Œ 가상곡간을 λΉ λ₯΄κ²Œ λ³€ν™”μ‹œν‚€λ„λ‘ μ§€μ‹œν•˜λŠ” μΌμ’…μ˜ λͺ…λ Ήμ–΄

  • 곡간을 λ³€ν™˜ν•  λ•Œ μ‚¬μš©ν•˜λŠ” 것듀은 λ‹€ 행렬에 λŒ€μ‘λœλ‹€.

μ›ν•˜λŠ” 곡간 λ³€ν™˜μ„ κ΅¬ν˜„ν•˜κΈ° μœ„ν•΄μ„œλŠ” 행렬이 μ–΄λ–»κ²Œ λ§Œλ“€μ–΄μ§€κ³ , μ–΄λ–»κ²Œ μ„€κ³„ν•΄μ•Όν•˜λŠ”μ§€ 기본원리λ₯Ό μ΄ν•΄ν•˜λŠ”κ²ƒμ΄ μ€‘μš”ν•˜λ‹€.

ν‰λ©΄μ˜ 방정식

ax + by + cz + d = 0

  • μ—¬λŸ¬κ°œμ˜ 평면을 μ‚¬μš©ν•΄μ„œ κ³΅κ°„μ•ˆμ— μžμ‹ μ˜ μ˜μ—­μ„ ꡬ좕할 수 μžˆλ‹€.

  • λŒ€ν‘œμ μΈ 예둜 카메라 μ˜μ—­μ„ μ œμ–΄ν•˜λŠ” μ ˆλ‘μ²΄(Frustum)κ°€ μžˆλ‹€.

μ ˆλ‘μ²΄(Frustum)λž€, 6개의 ν‰λ©΄μœΌλ‘œ κ΅¬μ„±λ˜λ©°, 3D κ³΅κ°„μ—μ„œ 카메라 μ˜μ—­μ— λ‹΄κΈ΄ λΆ€λΆ„λ§Œ κ±ΈλŸ¬λ‚΄ μ‹€μ œλ‘œ λ Œλ”λ§μ‹œν‚€λŠ” λ§€μ»€λ‹ˆμ¦˜μ„ κ°€μ§€κ³  μžˆλ‹€.

물체의 μˆ˜ν•™

가상 κ³΅κ°„μ˜ 체계와 물체λ₯Ό κ΅¬μ„±ν•˜λŠ”λ° μ‚¬μš©ν•˜λŠ” μˆ˜ν•™

μ•„ν•€μ‘°ν•©

aP1+bP2=a(x1,y1,1)+b(x2,y2,1)=(ax1,by1,a)+(bx2,by2,b)=(ax1+bx1,ay1+by2,a+b)aP_1 + bP_2 \\ = a(x_1, y_1, 1) + b(x_2,y_2,1)\\ = (ax_1,b y_1, a) + (bx_2,by_2,b) \\= (ax_1 +bx_1, ay_1 + by_2 , a+b) aP1​+bP2​=a(x1​,y1​,1)+b(x2​,y2​,1)=(ax1​,by1​,a)+(bx2​,by2​,b)=(ax1​+bx1​,ay1​+by2​,a+b)

λ§Œμ•½ a+b=1a + b = 1a+b=1인 경우 κ·Έ 두 점을 더 ν–ˆμ„ λ•Œ 항상 점이 λœλ‹€.

ν•΄λ‹Ή 쑰건을 μƒμ‹œν™”μ‹œν‚¨λ‹€λ©΄ P=aP1+(1βˆ’a)P2P = aP_1 + (1 -a)P_2P=aP1​+(1βˆ’a)P2​ 즉, aκ°’κ³ΌλŠ” λ¬΄κ΄€ν•˜κ²Œ λ§ˆμ§€λ§‰ μ°¨μ›μ˜ 값은 1이 λœλ‹€.

  • 즉, 점과 점을 더 ν–ˆμ„ λ•Œ μ–Έμ œλ‚˜ μ•„ν•€κ³΅κ°„μ˜ 점을 보μž₯ν•œλ‹€.

  • 두 점을 μ‘°ν•©ν–ˆμ„ λ•Œ μƒˆλ‘œμš΄ 점을 λ§Œλ“œλŠ” 곡식이 λœλ‹€.

면을 생성 ν•˜λŠ” μˆ˜ν•™

점 3개λ₯Ό μ‘°ν•©ν•˜λŠ” λ©”μ»€λ‹ˆμ¦˜

P=aP1+bP2+(1βˆ’aβˆ’b)P3P = aP_1 + bP_2 + (1 - a - b)P_3P=aP1​+bP2​+(1βˆ’aβˆ’b)P3​

  • μ„Έ 점을 μ‘°ν•©ν•œ κ²°κ³ΌλŠ” 평면을 λ§Œλ“€μ–΄ λ‚Έλ‹€.

  • μ„Έ 점에 μ‚¬μš©λ˜λŠ” κ³„μˆ˜μ˜ κ°’μ˜ λ²”μœ„λ₯Ό 0 ~ 1둜 μ œν•œν•˜κ²Œ 되면 μ„Έ 점이 κ°€μ§€κ³  μžˆλŠ” μ˜μ—­ 내뢀에 μœ„μΉ˜ν•˜λŠ” 점을 μƒμ„±ν•˜λŠ”λ° 이것이 λ°”λ‘œ μ‚Όκ°ν˜•μ˜ μ˜μ—­μ΄ λœλ‹€.

  • 이 μ‚Όκ°ν˜•μ΄ λͺ¨μ—¬ 물체λ₯Ό κ΅¬μ„±ν•˜κ²Œ 되고 이것듀을 ν•˜λ‚˜μ”© κ·Έλ €μ£ΌλŠ” 것이 κ²°κ΅­ κ·Έλž˜ν”½μ˜ 원리이닀.

  • 이런 μ‚Όκ°ν˜•μ˜ 정보λ₯Ό λͺ¨μ•„λ‘” 것을 Mesh라고 ν•œλ‹€.

μ™œ 점이 μ•„λ‹Œ μ‚Όκ°ν˜•μœΌλ‘œ 물체λ₯Ό 그릴까?

  • 점으둜 κ΅¬μ„±λœ 물체λ₯Ό κ°€κΉŒμ΄μ„œ λ³΄λŠ” 경우 점듀이 νΌμ§€κ²Œ λ˜λ©΄μ„œ 물체의 밀도가 λ–¨μ–΄μ§€κ²Œ λœλ‹€.

  • But μ‚Όκ°ν˜•μœΌλ‘œ 물체가 κ°€μ§€κ³  μžˆλŠ” μ˜μ—­μ„ μ„€μ •ν•œ λ‹€μŒ μ‚Όκ°ν˜• 내뢀에 ν”½μ…€μ˜ κ³„μˆ˜λ₯Ό κ΅¬ν•˜κ³  각각 μΉ ν•΄μ£Όκ²Œ λœλ‹€λ©΄ μ •λ°€ν•˜κ²Œ 보여쀄 수 있게 λœλ‹€.

  • μ‚Όκ°ν˜•μ΄ κ°€μ§€κ³  μžˆλŠ” μ˜μ—­μ„ μΉ ν•΄μ£ΌλŠ” 것을 ν”½μ…€ν™”(Rasterization) 라고 ν•œλ‹€.

μ‚Όκ°ν˜•μ— λŒ€ν•œ μˆ˜ν•™μ€ μ„Έκ°œμ˜ 점과 각 점에 λŒ€μ‘λ˜λŠ” κ³„μˆ˜λ“€λ‘œ κ΅¬μ„±λœλ‹€.

  • 이 κ³„μˆ˜λ“€μ€ 0~1의 λ²”μœ„λ₯Ό κ°€μ§„λ‹€.

  • μ–΄λ–€ 점이 1이라면 λ‚˜λ¨Έμ§€λŠ” 무쑰건 0이 λ˜μ–΄μ•Ό ν•œλ‹€.

  • 즉, μ„Έ 개의 점을 κ°€μ§€κ³  방정식을 톡해 λ§Œλ“€μ–΄μ§„ μƒˆλ‘œμš΄ 점은 μ‚Όκ°ν˜•μ„ κ΅¬μ„±ν•˜λŠ” μ„Έ 점 쀑 어디에 κ°€κΉŒμš΄μ§€ κ·Έ 비쀑을 λ‚˜νƒ€λ‚Ό 수 μžˆλ‹€.

  • λ§Œμ•½ λͺ¨λ“  κ³„μˆ˜μ˜ 값이 1/3 이라면 λ§Œλ“€μ–΄μ§„ 점은 μ‚Όκ°ν˜•μ˜ 정쀑앙에 μœ„μΉ˜ν•˜κ²Œ λœλ‹€.

  • 이 κ³„μˆ˜λ“€μ„ λͺ¨μ•„ μ’Œν‘œλ₯Ό λ§Œλ“ κ²ƒμ΄ λ¬΄κ²Œμ€‘μ‹¬μ’Œν‘œ(Barycentric coordinate)라 ν•œλ‹€.

    • μ‚Όκ°ν˜•μ˜ λ¬΄κ²Œμ€‘μ‹¬ μ’Œν‘œλ₯Ό μ΄μš©ν•΄ ν”½μ…€μ˜ 색상을 κ²°μ •ν•  λ•Œ 각 점의 데이터λ₯Ό ν˜Όν•©ν•΄μ„œ μ›ν•˜λŠ” κ²°κ³Όλ₯Ό λ§Œλ“€μ–΄λ‚Ό 수 μžˆλ‹€.

    • μ‚Όκ°ν˜•μ˜ ν…μŠ€μ³λ₯Ό 였렀 뢙일 λ•Œμ—λ„ μ‚¬μš©ν•˜κ²Œ λ˜λŠ”λ° μ΄λ•Œ μ‚¬μš©λ˜λŠ” μ’Œν‘œλ₯Ό UV μ’Œν‘œλΌ ν•œλ‹€.

  • μ‚Όκ°ν˜•μ„ κ΅¬μ„±ν•˜λŠ” μ„Έ 점에 μƒ‰μƒμ΄λ‚˜ UV 정보듀을 λ„£μ–΄μ„œ μ‚Όκ°ν˜• λ‚΄λΆ€λ₯Ό μΉ ν•˜λŠ” λ‹€μ–‘ν•œ 효과λ₯Ό λ§Œλ“€μ–΄ λ‚Ό 수 μžˆλ‹€

  • μ‚Όκ°ν˜•μ„ κ΅¬μ„±ν•˜λŠ” μ„Έ 점에닀가 Color, UV, Normal, tangent λ“± 뢀가적인 데이터λ₯Ό 넣은 각각의 μ΅œμ’…μ μΈ 점의 데이터 λ¬ΆμŒμ„ 정점(Vertex)이라 ν•œλ‹€.

ν•˜λ‚˜μ˜ 물체λ₯Ό 화면에 κ·Έλ €λ‚΄λŠ” κ³Όμ • μš”μ•½

  1. 물체λ₯Ό μ„Έ 개의 μ •μ μœΌλ‘œ κ΅¬μ„±λœ μ‚Όκ°ν˜•μœΌλ‘œ 뢄리

  2. λΆ„λ¦¬λœ μ‚Όκ°ν˜•μ„ 각각 κ·Έλ €μ„œ 화면을 μ±„μš΄λ‹€.

  • 이 과정은 μ •ν˜•ν™” λ˜μ–΄μžˆκΈ° 떄문에 λ Œλ”λ§ νŒŒμ΄ν”„λΌμΈμ΄λΌκ³ λ„ λΆ€λ₯Έλ‹€. (κ·Έλž˜ν”½μΉ΄λ“œκ°€ μžλ™μœΌλ‘œ 처리)

  • 이 κ³Όμ •μ—μ„œ κ°œλ°œμžκ°€ μ»€μŠ€ν…€ν•  수 μžˆλ„λ‘ μ œκ³΅ν•˜λŠ” ν•¨μˆ˜ 정점 셰이더, ν”½μ…€ 셰이더가 μžˆλ‹€.

1. 정점 셰이더(Vertex Shader)

  • μ‚Όκ°ν˜•μ„ κ΅¬μ„±ν•˜λŠ” 각 μ •μ μ˜ μ΅œμ’… 데이터λ₯Ό κ²°μ •ν•˜λŠ” ν•¨μˆ˜

2. ν”½μ…€ 셰이더(Pixel Shader)

  • μ‚Όκ°ν˜• λ‚΄λΆ€λ₯Ό κ΅¬μ„±ν•˜λŠ” 각 ν”½μ…€μ˜ μ΅œμ’… 색상을 κ²°μ •ν•˜λŠ” ν•¨μˆ˜

νšŒμ „μ˜ μˆ˜ν•™ (μ‚Όκ°ν•¨μˆ˜μ™€ νšŒμ „ν–‰λ ¬)

μ‚Όκ°ν•¨μˆ˜

  • κΈ°μ€€ μœ„μΉ˜μ—μ„œ μ–Όλ§ˆλ§ŒνΌμ˜ 각을 μ΄μš©ν•΄μ„œ νšŒμ „ν–ˆλŠ”μ§€λ₯Ό νšŒμ „ν•œ κ°’κ³Ό λ°˜μ§€λ¦„μ„ μ‚¬μš©ν•΄ ν‘œν˜„ν•  수 μžˆλ‹€.

  • λ‹¨μœ„ μ›μ˜ λ°˜μ§€λ¦„μ˜ 크기가 1 이라면 μ›μƒμ˜ μœ„μΉ˜ν•œ ν•œ 점에 λŒ€ν•΄ μ‚Όκ°ν•¨μˆ˜λ‘œ ν‘œν˜„μ„ ν•˜λ©΄ sin(ΞΈ) β†’ 높이, cos(ΞΈ) β†’ 밑변이 λœλ‹€.

삼각비

  • 높이빗변\frac{높이}{λΉ—λ³€} 빗변높이​밑변빗변\frac{λ°‘λ³€}{λΉ—λ³€}빗변밑변​높이밑변\frac{높이}{λ°‘λ³€}밑변높이​ μ‚Όκ°λΉ„μ˜ 3κ°€μ§€ μ’…λ₯˜

  • μ΄λŸ¬ν•œ λΉ„μœ¨μ„ μ›μœΌλ‘œ ν™•μž₯ν•΄μ„œ ν•¨μˆ˜λ‘œ ν‘œν˜„ν•œκ²ƒμ΄ μ‚Όκ°ν•¨μˆ˜μ΄λ‹€.

    sin(ΞΈ) => 높이빗변\frac{높이}{λΉ—λ³€} 빗변높이​

    cos(ΞΈ) => λ°‘λ³€λΉ—λ³€\frac{λ°‘λ³€}{λΉ—λ³€}빗변밑변​

    tan(ΞΈ) => 높이밑변\frac{높이}{λ°‘λ³€}밑변높이​

PreviousAnimationNextVector Space

Last updated 1 year ago