JAVASCRIPT/vanilla

MutationObserver 레거시한 코드들을 유지보수 해야 하는 도중, dom 상태를 관측하여 특정 함수들을 실행시키고 싶은 경우가 생겼다. observer 패턴을 이용하여 react 에서의 getState 처럼, 특정 값이 변경 되었을 때 코드를 실행하고 싶었는데, js에서 MutationObserver 라는걸 지원해 주는 것을 확인 했다. https://developer.mozilla.org/ko/docs/Web/API/MutationObserver MutationObserver - Web API | MDN MutationObserver 인터페이스는 DOM 트리의 변경을 감지하는 기능을 제공합니다. DOM3 이벤트 명세의 일부였던 Mutation Events (en-US)를 대체합니다. devel..

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

Canvas를 Grid로 나눠보자. 지난번에는 사각형을 그리는 파틀르 진행했었다. 이번에는 Uniform 이란걸 이용하여, canvas를 그리드로 나눠 볼건데, 유니폼은 모든 호출에서 동일한 버퍼의 값 이라고 한다. 기하학적 요소나 애니메이션 처리 등 공통된 값을 전달한느데 유용하다고 하는데, 코드를 통해 알아보자. 일단, 기존 drawRect 함수를 일부 수정하였고, 아래는 그 전문이다. drawRect() { // 삼각형 두개로, 정사각형의 좌표 지정. const vertices = new Float32Array([ // X, Y, -0.8, -0.8, // Triangle 1 (Blue) 0.8, -0.8, 0.8, 0.8, -0.8, -0.8, // Triangle 2 (Red) 0.8, 0.8,..

캔버스 초기화를 했으니, 간단한 도형을 그려보자 지난번에 캔버스 초기화를 완료하였다. 생각보다 조금 복잡하였는데 어찌저찌 캔버스를 초기화 하였으니 이제 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..