[WebGL - regl] (1) regl 이란?

 

◼︎ regl (npm) 이란?

→ WebGL의 추상화 레이어, WebGL을 더 쉽게 사용할 수 있도록 해주는 경량화된 라이브러리 : 간단한 명령

→ WebGL의 복잡한 API를 단순화

→ 선언형 프로그래밍 스타일 지원 : 고성능 그래픽 렌더링을 보다 직관적으로 수행할 수 있게 해줌

 

◼︎ regl 특징

→ 간단한 API : 복잡한 WebGL 설정을 간단한 명령으로 대체

→ 성능 최적화 : 상태 관리와 명령 큐를 효율적으로 처리해 성능 극대화

→ 모듈화 : 파이프라인과 렌더링 명령을 모듈화해서 재사용 가능

 

◼︎ regl 설치

npm install (--save) reql
# (줄여서) npm i -S reql
# 최신 npm에는 --save 옵션이 기본 동작으로 포함돼 있기에 생략해도 됨

 

◼︎ regl 기본 예시

import regl from 'regl';

const draw = regl({
  frag: `
    precision mediump float;
    void main() {
      gl_FragColor = vec4(1, 0, 0, 1); // 빨간색
    }
  `,
  vert: `
    attribute vec2 position;
    void main() {
      gl_Position = vec4(position, 0, 1);
    }
  `,
  attributes: {
    position: [
      [-1, -1],
      [ 1, -1],
      [ 0,  1]
    ]
  },
  count: 3
});

const canvas = document.getElementById('canvas');
const reglInstance = regl({ canvas });

reglInstance(() => {
  reglInstance.clear({ color: [0, 0, 0, 1] });
  draw();
});