글

작성일자

DPI를 구현하는 2가지 방식

한가지는 이미 알고 있던 사용해 왔던 방식입니다.

const DPR = window.devicePixelRatio;
const DPI = DPR * 96;

두번째는 좀더 정확한 DPI를 얻는 방식이라고 합니다.

function getExactDPI() {
  for (let dpi = 1; dpi < 600; dpi++) {
    if (window.matchMedia(`(max-resolution: ${dpi}dpi)`).matches) {
      return dpi;
    }
  }
  return 96; // 기본값
}

어찌되었든 웹에서 DPI는 보안정책 상 정확한 값은 얻기 어렵다고 합니다.

작성일자

three.js의 TSL을 이용한 attribute 관련 코드

attribute를 위한 데이터인 Buffer Attribte를 생성하는 방식은 기존과 동일합니다.

const count = geometry.attributes.position.count
const randomArray = new Float32Array(count)

for (let i = 0; i < count; i++)
    randomArray[i] = Math.random()

const randomBuffer = new THREE.BufferAttribute(randomArray, 1)

// KEY POINT ->
geometry.setAttribute('random', randomBuffer)
const random = attribute('random')
// <-

material.colorNode = random

위의 코드는 다음 코드처럼 좀더 짧고 효과적으로 변경될 수 있습니다.

const count = geometry.attributes.position.count
const randomArray = new Float32Array(count)

for (let i = 0; i < count; i++)
    randomArray[i] = Math.random()

const randomBuffer = new THREE.BufferAttribute(randomArray, 1)

// KEY POINT ->
const random = bufferAttribute(randomBuffer, 'float')
// <-

material.colorNode = random
작성일자

TypeScript, 읽기전용 튜플로부터 유니온 문자열 타입 얻기

대부분의 메타 프로그래밍에서처럼 TypeScript 역시 짧은 코드에 함축된 다양한 내재 기능이 적용되어 개발자에게 혼란스러움을 주는 경우가 많습니다. 아래의 코드가 그 예시인데요.

const methods = [
    "GET",
    "POST",
    "PUT",
    "DELETE"
] as const;

type Method = typeof methods[number];

위의 타입으로써 Method는 다음과 같습니다.

"GET" | "POST" | "PUT" | "DELETE"

여기에 적용된 TypeScript와 관련된 적용 기능 중 중요한 것을 2가지 뽑지면 as const를 통한 문자열 배열의 ‘읽기전용 튜플화’와 Indexed Access Type을 통한 ‘유니온 타입화’입니다.

작성일자

three.js의 내장 Inspector의 console 탭 출력 API

const renderer = new THREE.WebGPURenderer({
    canvas: canvas,
    antialias: true,
    // forceWebGL: true 
});

renderer.inspector = new Inspector();

renderer.inspector.console.addMessage("info", "정보 메세지...");
renderer.inspector.console.addMessage("warn", "경고성 메세지...");
renderer.inspector.console.addMessage("error", "에러 메세지...");

렌더러의 forceWebGL을 활성화해도 작동합니다. addMessage의 첫번째 인자는 반드시 info, warn, error 문자열이 와야 하며 이외의 값이 지정되면 출력하지 않습니다. 상기 코드의 출력 결과는 다음과 같습니다.