[WebGL - regl] (전략) WebGL 좌표계를 픽셀 좌표계로 변환

728x90

SMALL

WebGL의 기본 좌표계

왼쪽 위: (-1, 1)
오른쪽 아래: (1, -1)

SVG의 기본 좌표계

SVG의 기본 좌표계는 픽셀 좌표를 사용합니다:

왼쪽 위: (0, 0)
오른쪽 아래: (width, height)

1단계. WebGL 좌표계 -> 픽셀 좌표계 변환:

WebGL의 (-1, 1) -> SVG의 (0, 0)으로 매핑되고, (1, -1) -> SVG의 (width, height)으로 매핑됩니다.

function webglToPixel(x, y, canvas) {
  const width = canvas.width;
  const height = canvas.height;
  return {
    x: (x + 1) * 0.5 * width,
    y: (1 - y) * 0.5 * height
  };
}

2단계. relative와 absolute 지정

(1) 겹치려는 canvas와 svg를 감싸고 있는 div 영역(부모, ex_container)에 relative를 주고

- relative : 요소 자기 자신을 기준으로 배치

(2) canvas와 svg에는 absolute를 준다.

- absolute : 부모 요소를 기준으로 배치

  <style>
    #container {
      position: relative;
      width: 800px;
      height: 600px;
    }
    canvas, svg {
      position: absolute;
      top: 0;
      left: 0;
    }
  </style>
</head>

3단계. canvas와 svg에 같은 px의 width & height를 준다.

<body>
  <div id="container">
    <canvas id="webglCanvas" width="800" height="600"></canvas>
    <svg id="svgOverlay" width="800" height="600">
      <!-- D3.js 그래픽 요소 -->
      <circle cx="400" cy="300" r="50" fill="blue"></circle>
    </svg>
  </div>
</body>

728x90

LIST

저작자표시

'💻 DEV > 연구목록' 카테고리의 다른 글

[Webstorm] SSH Key Passphrase 인증 (헤매인 스토리) (0)	2024.11.22
[WebGL - regl] (2) regl 예제 속 GLSL 코드 해석 (0)	2024.08.08
[WebGL - regl] (1) regl 이란? (0)	2024.08.08
[Figma] We can't open that file 에러 해결 (WebGL) (0)	2023.12.13
[Git] SSH 키 생성하는 방법 & SSH 키 찾는 방법 (0)	2023.11.15

EveryDay, EveryPyeon

[WebGL - regl] (전략) WebGL 좌표계를 픽셀 좌표계로 변환

'💻 DEV > 연구목록' 카테고리의 다른 글

댓글

티스토리툴바

[WebGL - regl] (전략) WebGL 좌표계를 픽셀 좌표계로 변환

'💻 DEV > 연구목록' 카테고리의 다른 글

관련글

댓글

티스토리툴바