webGPU

각 셀에 색을 지정해보자! 지난번에는 일단 그리드를 그렸지만 빨간 단색으로 채워졌었다. 해당 부분을 조금 변경하여서, 색을 다채롭게 칠해보자. @fragment fn fragmentMain() -> @location(0) vec4f { return vec4f(1, 0, 0, 1); } 위 코드에서 각 프레그먼트에 반환되는 컬라값으로 #FF0000를 넘기고 있기 때문에 전부 빨간 사각형으로 채워졌었다. 색을 다채롭게 하기 위해서는 생각보다 간단하다고 하는데, @vertex 부분에서 렌더링 중인 셀을 알고있으므로 @fragment 단계에 값을 전달만 하면 된다고 한다. 일단, 최종 코드를 먼저 보면 다음과 같다. struct VertexOutput { @builtin(position) position: ve..

캔버스 초기화를 했으니, 간단한 도형을 그려보자 지난번에 캔버스 초기화를 완료하였다. 생각보다 조금 복잡하였는데 어찌저찌 캔버스를 초기화 하였으니 이제 cnavas에 간단한 도형을 그려보도록 하자. https://codelabs.developers.google.com/your-first-webgpu-app?hl=ko#3 첫 번째 WebGPU 앱 | Google Codelabs 이 Codelab에서는 새로운 WebGPU API의 기본사항을 소개합니다. GPU에서 실행되는 Conway's Game of Life의 버전을 빌드하는 방법을 안내합니다. WebGPU의 렌더링 기능은 보드를 그리는 데 사용되고 WebGPU의 컴 codelabs.developers.google.com 위 내용을 참고하면 좋을 것 같다..

WebGPU란? 웹 어플리케이션에서 GPU의 기능에 액세스 하기 위한 최신 기술이다. 기존에는 WebGL이 있었지만, 성능적인 제약이 많았다. 벌컨, 메탈, Direct3D 12가 제공하는 API를 기반으로 모방리 및 데스크톱 플랫폼에 고성능을 제공하는 것이 목적이며, 애플, 모질라, 마이크로소프트, 구글 등의 엔지니어들과 함께 개발 되어가고 있다. 한 때, canvas를 이용하여 이것저것 해본 경험들이 있었는데 WebGPU 기술을 이용하여서 뭔가 쪼물쪼물 만들어 봐야겠다. 일단 그를 위해서 튜토리얼 먼저 진행을 해 보는 것으로! 첫 번째 WebGPU 앱을 통한 튜토리얼 시작. node + ts로 환경 세팅 https://codelabs.developers.google.com/your-first-webg..