WebGL

Basic Boilerplate : Point

기본 보일러플레이트 코드 : 삼각형

기본 보일러플레이트

vert.glsl & frag.glsl을 분리해서 사용하는 보일러플레이트

GLSL을 외부 파일로 작성하기 위한 fetch() API와 비동기 프로그래밍 기본 지식

WebGL2 API가 제공하는 표준 메서드(Methods)와 상수(Constants)를 알아봅니다.

Fragment Shader 아트워크를 위한 Boilerplate 코드입니다. 별도로 작성된 GLSL를 불러오고, full-screen quad 영역에서 보여주는 작업을 하고 있습니다.

WebGL에서 화면에 한 프레임을 그리는 동안, GPU는 수백만 개의 픽셀을 병렬로 처리합니다. 이 문서는 한 픽셀의 관점에서 1/60초(한 프레임) 동안 일어나는 모든 일을 상세히 설명합니다.

WebGL 2.0의 Fragment Shader에서 원을 그리는 방법은 여러 가지가 있습니다. 각 방법은 수학적 원리, 성능, 시각적 품질에서 차이가 있습니다.

Vortex Points

WebGL2로 파란색 광택 球를 그리고, Sine 함수로 표면을 출렁이게 애니메이션하며, Phong 조명 모델로 음영을 입히는 코드.

Cube의 각 면에 GLSL로 작성한 셰이더를 얹고 회전 시킵니다. 마우스로 줌인/아웃이 가능합니다.

Color Plate Rotation

Multi-pass Rendering으로 fragment shader를 여러 번 실행하는 방식으로 레이어를 겹치는 효과를 냅니다.