PBR (Physically Based Rendering)
PBR을 셰이더 레벨에서 직접 구현해보고, 그 원리에 대해 이해한다.
- Graphics
- WebGL
SEO 기본 가이드
SEO의 구체적인 원리와 영향 요소들에 대해 살펴본다.
- Web
WebAudio API와 WebGPU를 통한 3D 오디오 비주얼라이저 만들기
AudioContext를 이용해 오디오 스트림을 다루고, 이를 3D 파티클 시스템으로 시각화해본다.
- Browser
- WebAudio API
- WebGPU
- BabylonJS
WebRTC로 간단한 P2P 연결 구축하기
WebRTC에 대해 간단하게 정리하고 실습해보자.
- WebRTC
- Browser
Structural Sharing in React Query
필요할 때만 리렌더링 시키는 React Query의 마법 하나
- React
- Typescript
Core Web Vitals
프론트엔드의 관점에서, 성능(Performance)은 무엇을 의미하고, 또 어떻게 측정할 수 있을까?
- Browser
- Performance
BabylonJS로 인터랙티브 피젯스피너 구현하기
직접 제스처를 통해 피젯스피너를 돌리도록 구현해보자.
- BabylonJS
- Graphics
PixiJS로 구현해보는 실시간 페인팅
PixiJS를 활용하여 간단한 제너러티브 아트를 만들어본다.
- PixiJS
2D 노이즈
2D 노이즈가 구현되는 방식에 대해 살펴본다.
- Graphics
- GLSL
GLTF/GLB 소스는 그대로 노출되어도 상관없는걸까?
3D 컨텐츠를 활용하는 웹 앱에서 3D 모델의 소스를 보호할 수 있는 방법은 없는 것인지 찾아본다.
- Graphics
- WebGL
TS의 관점에서 CJS/ESM 모듈 이해하기
CJS와 ESM로 이분화된 JS의 모듈 생태계를 TS의 관점에서 살펴본다.
- JavaScript
- TypeScript
- NodeJS
유사 Gooch 셰이딩 모델 구현하기
Gooch 셰이딩 스타일의 모델을 직접 구현하고, 원리에 대해 이해해본다.
- GLSL
- Graphics
WebGPU 컴퓨트 셰이더를 이용한 인터랙티브 파티클 구현
GPU 연산을 거친 인터랙티브 파티클을 구현하고, CPU로 구현한 버전과 비교해본다.
- WebGPU
- WGSL
- Graphics
BabylonJS에서의 1BIT 셰이더 구현
단 두가지 컬러만을 사용하는 1BIT 셰이더를 BabylonJS에서 직접 구현해본다.
- BabylonJS
- GLSL
- Graphics