목차

WebGL2Fundamentals.org

Fix, Fork, Contribute

WebGL2 Smallest Programs

죄송합니다. 이 문서는 아직 한국어로 번역되지 않았습니다.

번역을 도와주세요! 😄

기초

WebGL2 사용법
기초
WebGL2 작동 원리
WebGL2 셰이더와 GLSL
WebGL2 State Diagram

WebGL2 vs WebGL1

WebGL2 새로운 기능
WebGL1에서 WebGL2로의 변경
WebGLFundamentals.org과 WebGL2Fundamentals.org의 차이점

이미지 처리

이미지 처리
WebGL2 이미지 처리 심화

2D 이동, 회전, 크기 변환 행렬 계산

WebGL2 2D 이동
WebGL2 2D 회전
WebGL2 2D 크기 변환
WebGL2 2D 행렬

3D

3D 직교 투영
3D 원근 투영
3D - 카메라
3D - 행렬의 이름

Lighting

방향성 조명 효과(Directional Lighting)
점 조명 효과(Point Lighting)
스팟 조명 효과(Spot Lighting)

Structure and Organization

더 적은 코드로 즐겁게 코딩하기
여러 물체를 그리는 법
장면(Scene) 그래프

Geometry

3D Geometry - Lathe
.obj 파일 로딩
Loading .obj w .mtl files

Textures

텍스처
데이터 텍스처
두개 이상의 텍스처 사용하기
교차 출처 이미지(Cross Origin Image)
원근 교정 텍스처 매핑
평면 및 원근 투영 매핑

Rendering To A Texture

텍스처에 렌더링하기

Shadows

그림자

Techniques

2D

2D - DrawImage
2D - 행렬 스택
Sprite

3D

큐브맵
환경맵
Skybox
Skinning
Fog
Picking (clicking on stuff)

Text

텍스트 - HTML
텍스트 - Canvas 2D
텍스트 - 텍스처 사용
Text - Using a Glyph Texture

GPGPU

GPGPU

Tips

Smallest Programs
Drawing Without Data
Shadertoy
Pulling Vertices

Optimization

정점 인덱스 (gl.drawElements)
인스턴스 드로잉(Instanced Drawing)

기타

설정 및 설치
보일러플레이트(Boilerplate)
Canvas 리사이징
애니메이션
점, 선, 삼각형
Multiple Views, Multiple Canvases
Visualizing the Camera
WebGL2 알파(Alpha)
2D vs 3D 라이브러리
안티패턴
WebGL2 행렬 vs 수학에서의 행렬
정밀도 이슈
스크린샷 찍기
Canvas Clear 방지
캔버스에서 키보드 입력 받기
HTML에서 WebGL2를 배경으로 사용하기
Cross Platform 문제
질문 및 답변

Reference

Attributes
텍스처 유닛
Framebuffer
readPixels
참고 자료

Helper API Docs
TWGL, A tiny WebGL helper library
github