ECMAScript 2025(ES2025) - Float16 지원 (Half-precision)

Float16 지원은 JavaScript에서 메모리 효율성과 GPU 최적화를 위한 매우 실용적인 개선이고, 이전에는 불가능했던 저정밀도(float16) 표현이 가능해진다는 점에서 중요

---

✅ 기존 상황: Float32, Float64만 지원

📌 기존 TypedArray 종류

타입	정밀도	바이트 수	용도 예시
Float32Array	32비트 (단정밀도)	4 bytes	일반적인 그래픽/물리 계산
Float64Array	64비트 (배정밀도)	8 bytes	고정밀 수치 계산

→ 16비트(2 bytes) float16은 존재하지 않았음.

🧠 문제점

• WebGL 같은 환경에서는 내부적으로 float16을 쓰는 경우가 많지만,
• JS에서는 float32 이상만 다룰 수 있어, float16 데이터 입출력 시 binary format ↔ float32 변환이 불가피했음.
• 이로 인해 메모리 사용량 증가, 성능 손해, 정밀도 차이 발생 등의 문제

---

✅ ECMAScript 2025의 변화: Float16 공식 지원

✨ 추가되는 기능

기능	설명
Float16Array	2바이트 단위 float 배열 (저정밀 부동소수점 숫자 저장)
DataView.getFloat16 / setFloat16	ArrayBuffer에서 16비트 부동소수점 값 읽고 쓰기
Math.f16round(value)	float32를 float16으로 근사 변환

🔧 구조적 차이

• float16은 표현 가능한 값의 범위와 정밀도가 줄어듦
• 하지만 반으로 줄어든 메모리 비용으로 인해 대량의 수치 데이터 처리에 유리

---

✅ 실제 프론트엔드에서 쓰일 수 있는 사례

1. Three.js, WebGL2, WebGPU에서의 정점 데이터

• 예: 10만 개 이상의 포인트, 파티클, 또는 고정밀도가 불필요한 vertex 데이터
• Float16Array로 정점 버퍼를 구성하면 GPU 메모리 절약 가능

const positions = new Float16Array(numPoints * 3);
// WebGL buffer에 업로드

2. 이미지 처리 및 필터링

• 필터 적용 시 float32보다 float16이 충분한 경우 → 성능 증가
• WebGPU shader와의 직접 데이터 교환 시 정밀도 맞추기

3. 머신러닝/AI 추론

• WebNN, TensorFlow.js 등에서는 float16 모델이 훨씬 작음
• 브라우저에서 ONNX, TF 모델을 실행할 때 Float16Array 지원으로 메모리 절약

4. 대규모 애니메이션/시뮬레이션 데이터

• position, velocity, force 등 float 값들이 float16으로도 충분한 경우 많음
• Float32Array 대비 절반 메모리로 수천~수만 개 객체 표현 가능

---

📉 trade-off: 언제 쓰면 안 될까?

상황	이유
수치 정밀도가 중요한 계산	float16은 소수점 표현 한계로 오차가 커질 수 있음
소수점 범위가 넓은 데이터	표현 가능한 최소/최대 범위 좁음
일반적인 UI 계산	성능 이점 없음 (JS 엔진 자체는 대부분 float64 연산 사용)

---

🧠 요약

• 기존: float16을 표현할 수 없어서 float32 이상을 강제 사용 → 메모리 비효율
• 이제: Float16Array, Math.f16round 등으로 저정밀도 float 연산 가능 → GPU 연동, 시뮬레이션, AI, 3D에 강점
• 일반 프론트엔드 UI 코드에는 큰 영향 없음, 하지만 WebGL, WebGPU, 머신러닝 등 고성능 연산 영역에선 적극 활용 가능