본 글에서는 WebGL이 무엇인지 간략하게 알아보도록 하겠습니다.
배경
Interactive Developer를 목표로 그래픽 관련 라이브러리를 알아보고 있습니다.
그러던 중 p5를 알게되었고, p5를 React에서 사용할 때 상태 관리에 큰 제약이 생긴다는 걸 알게되었습니다.
참고 : react-p5 사용의 문제점
그래서 GSAP(+ Framer), WebGL(+ Three.js)을 마스터하는 것을 목표로 잡게되었습니다. 그 시작을 WebGL로 잡아보았습니다. 이 글이 저와 같은 길을 고민 중이신 분들께 도움이 되면 좋겠습니다.
WebGL
WebGL은 HTML <canvas> 요소를 기반으로 작동하는 JavaScript API로, 플러그인 없이 웹 브라우저에서 상호작용 가능한 2D, 3D 그래픽을 구현할 수 있습니다.
OpenGL 그리고 OpenGL ES
OpenGL
OpenGL은 1992년 실리콘 그래픽스사에서 제작한 2차원 3차원 그래픽을 처리하는 라이브러리입니다.
현재는 비영리 산업체 컨소시엄인 Khronos Group에서 관리하고 있습니다.
참고 : MDN - 크로노스 그룹
OpenGL ES
OpenGL ES는 임베디드 시스템을 위한 OpenGL의 경량화된 서브셋입니다.
WebGL은 OpenGl ES를 기반으로 설계된 웹용 그래픽 API입니다.
JavaScript에서 WebGL을 통해 OpenGL ES 기능을 간접적으로 사용할 수 있습니다.
차세대 그래픽 API와 WebGPU
Khronos Group은 OpenGL의 주요 개발을 사실상 중단하고, 2016년에 완전히 새로 설계된 차세대 그래픽 API인 Vulkan을 출시했습니다. ( 애플은 metal, 마이크로소프트는 DirectX 12,,)
이후에도 브라우저는 여전히 WebGL을 사용하고 있었으나,
2021년 W3C와 Khronos는 Vulkan, Metal, DirectX 12와 통신할 수 있는 WebGPU 초안 사양을 발표했고, 2023년부터 주요 브라우저들이 정식 지원을 시작했습니다.WebGPU는 웹 애플리케이션이 브라우저를 통해 사용자의 GPU 리소스에 더 저수준으로 접근할 수 있도록 해주는 현대적인 그래픽 및 연산 API입니다. 이를 통해 고성능 3D 그래픽은 물론, GPU를 활용한 병렬 연산(예: 머신러닝, 이미지 처리)도 가능해졌습니다.
참고
💡 생각
모든 브라우저에서 WebGPU를 지원한다면, 더 복잡하고 다양한 인터렉티브 작업물들이 나오겠죠? 기대가 되네용 🤓
저도 트렌드를 따르기 위해 WebGL와 Three.js를 마스터한 다음 (Three.js에서도 WebGPU를 지원합니다.) WebGPU을 깊이 있게 공부해봐야겠습니다.
참고
