[27일차] Video 이론 / 디코딩 / Real Apple Pro canvas

20220826(금)

• 목차
  - Video 이론
  - Real Apple Pro canvas

---

< Video 이론 >

• RGB
  8bit 8bit 8bit ➡ 256 x 256 x 256 = 1600만 컬러
  1920 x 1080 이미지 한 장에 (1920 x 1080 x 3byte) = 6Mbyte ➡ 미쳤다! 너무 용량 커
  
  
• 초당 30프레임으로 해야 인간이 영상을 부드럽다고 판단
• 20분짜리 비디오 하나 계산해보면
  20분 x 60초 x 30프레임 x (한 프레임당) 6Mbyte ➡ 21만 6천Mbyte ➡ 210GB ➡ 미쳤다! 너무 용량 커
  
  
• 데이터를 압축시키자!
  1) 손실 압축
  - 필요없는 데이터를 걷어낸다.
  
  2) 무손실 압축
  - 패턴을 보고서 압축하는 방식(ex. zip 알고리즘)
  111000/111000/111000 ==> 111
  111000➡1
  *영상이나 이미지는 1) 손실 압축 후 2)무손실 압축 진행함 (ex. jpg)
  
  영상에서 변하는 부분만 따와서 압축하기 시작함

• 인트라 프레임 : 모든 프레임(그림 한 장)의 정보를 해당 프레임에서 
• 인터 프레임 : 한 프레임이상의 정보를 압축하고 있으며, 인트라 프레임내의 I를 제외한 B, P 프레임을 말한다.

 

<정리>

1. 영상은 픽셀, 플레임, 프레임의 집합

2. 픽셀은 3byte 따라서 프레임은 엄청 큰 데이터

3. 엄청 큰 데이터는 반드시 압축이 필요

4. 압축은 손실, 무손실 압축 (영상은 둘 다 사용)

5. 인트라프레임, 인터프레임을 사용한다.

 

*영상 정보를 다루는 것 ➡ 매우 크고 압축이 되어 있는 데이터를 다루는 일

 

---

< 디코딩 >

스크롤에 따라 움직이는 animation을 만들고 싶을 때

 

1. key frame을 찾는다.

2. key frame의 디코딩

3. key frame부터 이전 frame까지 디코딩

 

디코딩 : 압축을 풀어서 뽑아내는 것

 

---

< RAP - animation >

• 스크롤에 따라 css의 위치와 투명도가 바뀌는 것
  calcValue로 계산(section 전체 & section 부분) - scroll =============> CSS (위치 & 투명도)
• z-index
  fixed 되어 맨 위 레이어로 올라온 값 뒤에 있는 것을 보여주고 싶을 때 사용