docs(10_Wiki): Topic_Business/General/Graphic/Programming을 Topics/ 하위로 이동
최상위 10_Wiki/Topic_*였던 4개 카테고리 폴더를 10_Wiki/Topics/Topic_* 로 재배치. 콘텐츠 변경 없음(순수 폴더 이동) — Topics/ 하위 나머지 폴더는 이미 지난 커밋에서 전부 정리된 상태(잔존 항목은 에이전트 운영 상태 및 사용자가 보존을 요청한 업데이트0615/무제 3.canvas 뿐).
This commit is contained in:
Antigravity Agent
@@ -0,0 +1,298 @@
|
||||
---
|
||||
id: wiki-2026-0508-gpu-acceleration-compositing
|
||||
title: GPU Acceleration (Compositing)
|
||||
category: 10_Wiki/Topics
|
||||
status: verified
|
||||
canonical_id: self
|
||||
aliases: [GPU compositing, browser compositor, hardware acceleration, will-change, transform-only]
|
||||
duplicate_of: none
|
||||
source_trust_level: A
|
||||
confidence_score: 0.94
|
||||
verification_status: applied
|
||||
tags: [browser, gpu, compositing, performance, frontend, webgl, will-change]
|
||||
raw_sources: []
|
||||
last_reinforced: 2026-05-10
|
||||
github_commit: pending
|
||||
tech_stack:
|
||||
language: CSS / JavaScript
|
||||
framework: Browser / Chrome / Skia
|
||||
---
|
||||
|
||||
# GPU Acceleration (Compositing)
|
||||
|
||||
## 매 한 줄
|
||||
> **"매 layer 의 의 의 GPU 의 의 의 의 composite"**. 매 browser 의 paint → 매 layer → 매 GPU composite. 매 transform / opacity 의 의 의 cheap. 매 modern: 매 will-change, 매 contain, 매 OffscreenCanvas, 매 view transitions API.
|
||||
|
||||
## 매 핵심
|
||||
|
||||
### 매 rendering pipeline
|
||||
1. **Style** (CSS computed).
|
||||
2. **Layout** (geometry).
|
||||
3. **Paint** (raster).
|
||||
4. **Composite** (GPU).
|
||||
|
||||
### 매 layer 의 promote 조건
|
||||
- `transform` (3D or non-default).
|
||||
- `opacity` < 1 (with animation).
|
||||
- `will-change`.
|
||||
- `<video>`, `<canvas>`.
|
||||
- `position: fixed`.
|
||||
- `filter`.
|
||||
- `backdrop-filter`.
|
||||
- 매 video, iframe.
|
||||
|
||||
### 매 cheap (composite-only)
|
||||
- `transform`: translate, scale, rotate.
|
||||
- `opacity`.
|
||||
|
||||
### 매 expensive (paint or layout)
|
||||
- `top`, `left`, `width`, `height`, `margin`.
|
||||
- `box-shadow`, `border-radius` (animated).
|
||||
|
||||
### 매 modern API
|
||||
- **OffscreenCanvas** (Worker).
|
||||
- **WebGL / WebGPU**.
|
||||
- **View Transitions API**.
|
||||
- **Transform Stream**.
|
||||
- **CSS containment**.
|
||||
|
||||
## 💻 패턴
|
||||
|
||||
### Animate transform (cheap)
|
||||
```css
|
||||
/* 매 ❌ expensive: layout + paint */
|
||||
@keyframes badmove {
|
||||
from { left: 0; }
|
||||
to { left: 100px; }
|
||||
}
|
||||
|
||||
/* 매 ✅ composite-only */
|
||||
@keyframes goodmove {
|
||||
from { transform: translateX(0); }
|
||||
to { transform: translateX(100px); }
|
||||
}
|
||||
|
||||
.element {
|
||||
animation: goodmove 1s;
|
||||
will-change: transform;
|
||||
}
|
||||
```
|
||||
|
||||
### Will-change (promote layer)
|
||||
```css
|
||||
.scrolling-modal {
|
||||
will-change: transform;
|
||||
/* 매 → GPU layer 의 promote */
|
||||
}
|
||||
|
||||
/* 매 ❗ overuse 의 memory + slow */
|
||||
.everything-will-change {
|
||||
will-change: transform, opacity, scroll-position; /* ❌ */
|
||||
}
|
||||
```
|
||||
|
||||
### Force layer (legacy hack)
|
||||
```css
|
||||
.force-gpu {
|
||||
transform: translate3d(0, 0, 0);
|
||||
/* 매 or */
|
||||
transform: translateZ(0);
|
||||
backface-visibility: hidden;
|
||||
}
|
||||
```
|
||||
|
||||
### CSS containment (paint isolation)
|
||||
```css
|
||||
.card {
|
||||
contain: layout paint;
|
||||
/* 매 or */
|
||||
contain: strict; /* 매 layout + paint + size + style */
|
||||
}
|
||||
```
|
||||
|
||||
### content-visibility (auto)
|
||||
```css
|
||||
.below-fold {
|
||||
content-visibility: auto;
|
||||
contain-intrinsic-size: 0 500px;
|
||||
/* 매 outside viewport 의 의 paint 의 skip */
|
||||
}
|
||||
```
|
||||
|
||||
### OffscreenCanvas (worker)
|
||||
```javascript
|
||||
// 매 main thread
|
||||
const canvas = document.querySelector('canvas');
|
||||
const offscreen = canvas.transferControlToOffscreen();
|
||||
const worker = new Worker('render.js');
|
||||
worker.postMessage({ canvas: offscreen }, [offscreen]);
|
||||
|
||||
// 매 render.js (worker)
|
||||
self.onmessage = async ({ data }) => {
|
||||
const ctx = data.canvas.getContext('webgl2');
|
||||
// 매 render off main thread
|
||||
function loop() {
|
||||
// ...
|
||||
requestAnimationFrame(loop);
|
||||
}
|
||||
loop();
|
||||
};
|
||||
```
|
||||
|
||||
### WebGPU (modern)
|
||||
```javascript
|
||||
const adapter = await navigator.gpu.requestAdapter();
|
||||
const device = await adapter.requestDevice();
|
||||
const canvas = document.querySelector('canvas');
|
||||
const ctx = canvas.getContext('webgpu');
|
||||
ctx.configure({ device, format: 'bgra8unorm' });
|
||||
|
||||
const pipeline = device.createRenderPipeline({...});
|
||||
const encoder = device.createCommandEncoder();
|
||||
const pass = encoder.beginRenderPass({...});
|
||||
pass.setPipeline(pipeline);
|
||||
pass.draw(3);
|
||||
pass.end();
|
||||
device.queue.submit([encoder.finish()]);
|
||||
```
|
||||
|
||||
### View Transitions API
|
||||
```css
|
||||
::view-transition-old(root) {
|
||||
animation: fade-out 0.3s;
|
||||
}
|
||||
::view-transition-new(root) {
|
||||
animation: fade-in 0.3s;
|
||||
}
|
||||
```
|
||||
|
||||
```javascript
|
||||
async function navigate(url) {
|
||||
if (!document.startViewTransition) return location.href = url;
|
||||
document.startViewTransition(async () => {
|
||||
const html = await fetch(url).then(r => r.text());
|
||||
document.body.innerHTML = parseHTML(html);
|
||||
});
|
||||
}
|
||||
```
|
||||
|
||||
### DevTools (layer inspection)
|
||||
```
|
||||
DevTools → Rendering → "Layer borders"
|
||||
DevTools → Performance → record → see paint/composite breakdown
|
||||
```
|
||||
|
||||
### Detect layer count (programmatic)
|
||||
```javascript
|
||||
function checkExcessiveLayers() {
|
||||
const elements = document.querySelectorAll('*');
|
||||
let promoted = 0;
|
||||
elements.forEach(el => {
|
||||
const cs = getComputedStyle(el);
|
||||
if (cs.transform !== 'none' || cs.willChange !== 'auto') promoted++;
|
||||
});
|
||||
if (promoted > 50) console.warn('Excessive promoted layers');
|
||||
}
|
||||
```
|
||||
|
||||
### Animation performance
|
||||
```javascript
|
||||
import { onINP } from 'web-vitals';
|
||||
let dropFrames = 0;
|
||||
let lastTime = performance.now();
|
||||
|
||||
function frameMonitor() {
|
||||
const now = performance.now();
|
||||
if (now - lastTime > 18) dropFrames++; // 매 60fps = 16.67ms
|
||||
lastTime = now;
|
||||
requestAnimationFrame(frameMonitor);
|
||||
}
|
||||
frameMonitor();
|
||||
```
|
||||
|
||||
### Skia / Chrome compositor (concept)
|
||||
```cpp
|
||||
// 매 Chrome 의 cc/ thread
|
||||
// 매 main thread: paint → display lists
|
||||
// 매 compositor thread: rasterize tiles → GPU draw quads
|
||||
// 매 GPU process: actual GL/Metal/Vulkan calls
|
||||
```
|
||||
|
||||
### Hardware-accelerated video
|
||||
```css
|
||||
video {
|
||||
/* 매 매 video 의 의 GPU layer 의 의 직접 */
|
||||
transform: translateZ(0); /* 매 hint */
|
||||
}
|
||||
```
|
||||
|
||||
### CSS Houdini (paint worklet)
|
||||
```javascript
|
||||
// 매 paint.js
|
||||
registerPaint('checkerboard', class {
|
||||
paint(ctx, geom, props) {
|
||||
const size = props.get('--size').value;
|
||||
for (let y = 0; y < geom.height; y += size) {
|
||||
for (let x = 0; x < geom.width; x += size) {
|
||||
ctx.fillStyle = (x/size + y/size) % 2 ? 'black' : 'white';
|
||||
ctx.fillRect(x, y, size, size);
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
```css
|
||||
.element {
|
||||
background: paint(checkerboard);
|
||||
--size: 20;
|
||||
}
|
||||
```
|
||||
|
||||
### React optimization
|
||||
```jsx
|
||||
// 매 transform-only animation
|
||||
<motion.div animate={{ x: 100, opacity: 0.5 }} transition={{ duration: 0.3 }}>
|
||||
Content
|
||||
</motion.div>
|
||||
// 매 framer-motion 의 transform-based by default
|
||||
```
|
||||
|
||||
## 매 결정 기준
|
||||
| 상황 | Approach |
|
||||
|---|---|
|
||||
| Animation | transform / opacity only |
|
||||
| Heavy graphics | OffscreenCanvas / WebGPU |
|
||||
| Page transition | View Transitions API |
|
||||
| Long page | content-visibility |
|
||||
| Component isolate | contain |
|
||||
| Custom paint | Houdini |
|
||||
|
||||
**기본값**: 매 transform/opacity 의 animate + 매 will-change 의 strategic + 매 contain + 매 OffscreenCanvas heavy + 매 WebGPU modern.
|
||||
|
||||
## 🔗 Graph
|
||||
- 부모: [[Browser-Rendering]] · [[Performance]]
|
||||
- 변형: [[Compositing]]
|
||||
- 응용: [[Will-Change]] · [[OffscreenCanvas]] · [[WebGPU]]
|
||||
- Adjacent: [[Core Web Vitals Optimization (INP, LCP, CLS)|Core-Web-Vitals]] · [[Compute Shader (WebGPU)]] · [[View-Transitions]]
|
||||
|
||||
## 🤖 LLM 활용
|
||||
**언제**: 매 frontend perf optim. 매 60fps animation. 매 heavy canvas.
|
||||
**언제 X**: 매 simple static page.
|
||||
|
||||
## ❌ 안티패턴
|
||||
- **Animate top/left**: 매 jank.
|
||||
- **will-change everywhere**: 매 memory blow.
|
||||
- **translate3d hack 의 모든**: 매 deprecated.
|
||||
- **Heavy paint per frame**: 매 60fps 의 lose.
|
||||
- **No DevTools layer inspection**: 매 invisible bug.
|
||||
|
||||
## 🧪 검증 / 중복
|
||||
- Verified (MDN, web.dev, Chrome rendering team, Skia).
|
||||
- 신뢰도 A.
|
||||
|
||||
## 🕓 Changelog
|
||||
| 날짜 | 변경 |
|
||||
|---|---|
|
||||
| 2026-05-08 | Phase 1 |
|
||||
| 2026-05-10 | Manual cleanup — pipeline + 매 transform / will-change / contain / OffscreenCanvas / WebGPU code |
|
||||
Reference in New Issue
Block a user