Three.JS – 페이지 6 – GIS Developer

2025-09-242025-09-24

하나의 지오메트리에 대한 매시에 여러 개의 재질 반영하기

매시는 하나의 지오메트리와 2개 이상의 재질로 정의됩니다. three.js 중급 개발자라면 메시가 1개가 아닌 2개 이상의 재질로 정의된다는 점에 의구심을 가질 수 있을텐데요. 하지만 맞습니다. 매시는 2개 이상의 재질을 갖습니다. 하지만 지오메트리는 1개입니다. 이상하죠? 지오메트리가 1개면 그에 대한 재질도 1개여야 맞는거 같은데 말이죠. 그래서 지오메트리의 구성 좌표를 그룹화할 수 있습니다. 재질이 2개라면 2개의 그룹으로 지오메트리의 구성 좌표를 구성하는거죠.

예를들어 다음과 같은 결과를 봅시다.

SphereGeometry로 만든 매시입니다. 그런데 위 아래로 다른 재질이 부여되어 있습니다. 마치 2개의 매시를 뭍여 놓은 것처럼요.

아래는 코드입니다.

const geom = new THREE.SphereGeometry(2);

const indexCount = geom.index.count;
const midIndex = Math.floor(indexCount / 2);

geom.clearGroups();
geom.addGroup(0, midIndex, 0);
geom.addGroup(midIndex, indexCount - midIndex, 1);

const mesh = new THREE.Mesh(geom, [
    new THREE.MeshPhysicalMaterial({ metalness: 1, roughness: 0 }),
    new THREE.MeshNormalMaterial()
]);

scene.add(mesh);

지오메트리에 대한 2개의 그룹핑, 2개의 재질을 적용해 만든 매시에 대한 코드가 보이죠? 지오메트리에 대한 정점의 그룹핑 단위는 인덱스(삼각형을 구성하는 인덱스)입니다. 하지만 경우에 따라서 인덱스가 아닌 정점 하나 하나를 지정해서 만든 넌-인덱스 방식도 존재합니다. 아래는 결과는 동일하지만 넌-인덱스 방식의 지오메트리에 대한 그룹핑 코드입니다.

let geom = new THREE.SphereGeometry(2, 128, 64);
geom = geom.toNonIndexed(); // Non-indexed 지오메트리

const vertexCount = geom.getAttribute("position").count;
const midVertex = Math.floor(vertexCount / 2);

geom.clearGroups();
geom.addGroup(0, midVertex, 0);
geom.addGroup(midVertex, vertexCount - midVertex, 1);

const mesh = new THREE.Mesh(geom, [
    new THREE.MeshPhysicalMaterial({ metalness: 1, roughness: 0 }),
    new THREE.MeshNormalMaterial()
]);

scene.add(mesh);

이번에는 지오메트리에 대한 2개의 그룹을 만들기 위해 버텍스에 대한 인덱스를 사용한 것을 알 수 있습니다.

여튼 지금까지 봤던 three.js에서의 지오메트리에 대한 그룹핑과 매시에 여러개의 재질을 지정할 수 있다는 것을 아셔야, 3D 모델링 툴에서 만들어진 모델들의 구성을 이해할 수 있게 됩니다.

2025-09-142026-04-14

물리적 광원에 대한 개별 노드 지정 (TSL 방식)

three.js 쉐이더 언어인 TSL에서 물리적 광원에 대한 개별 노드를 지정하는 방식을 정리해 봅니다. TSL을 통해 표현하고자 하는 재질은 다음과 같습니다.

코드는 다음과 같습니다.

const geometry = new THREE.IcosahedronGeometry(1, 64);
const material = new THREE.MeshStandardNodeMaterial({
  color: "black",
  // wireframe: true,
});
const mesh = new THREE.Mesh(geometry, material)

const path = './Metal053B_2K-JPG';

const texColor = new THREE.TextureLoader().load(`${path}/Metal053B_2K-JPG_Color.jpg`);
material.colorNode = texture(texColor);

const texNormal = new THREE.TextureLoader().load(`${path}/Metal053B_2K-JPG_NormalGL.jpg`);
material.normalNode = normalMap(texture(texNormal), float(1.));

const texMetalness = new THREE.TextureLoader().load(`${path}/Metal053B_2K-JPG_Metalness.jpg`);
material.metalnessNode = mul(texture(texMetalness), 1.);

const texRoughness = new THREE.TextureLoader().load(`${path}/Metal053B_2K-JPG_Roughness.jpg`);
material.roughnessNode = mul(texture(texRoughness), float(0.7));

광원 노드에 집중하기 위해서 텍스쳐 데이터를 사용했습니다. 텍스쳐 본연의 표현을 위해 재질의 기본 색상을 블랙으로 지정했구요. 사용한 노드는 colorNode, normalNode, metalnessNode, roughnessNode입니다.

광원에 대한 노드는 아니지만 Displacement에 대한 노드를 알아보기 위해 표현하고자 하는 재질은 다음과 같습니다.

코드는 다음과 같습니다.

const geometry = new THREE.IcosahedronGeometry(1, 64);
const material = new THREE.MeshStandardNodeMaterial({
  color: "black",
  // wireframe: true,
});
const mesh = new THREE.Mesh(geometry, material)

const path = './Rock058_2K-JPG';

...

const texAO = new THREE.TextureLoader().load(`${path}/Rock058_2K-JPG_AmbientOcclusion.jpg`);
geometry.setAttribute('uv2', new THREE.BufferAttribute(geometry.attributes.uv.array, 2));
material.aoNode = mul(texture(texAO), float(1.));

const texDisplacement = new THREE.TextureLoader().load(`${path}/Rock058_2K-JPG_Displacement.jpg`);
const displacementNode = texture(texDisplacement);
const displaceStrength = 0.3;
const displacementValue = displacementNode.r.sub(0.5).mul(displaceStrength);
const newPosition = positionWorld.add(normalLocal.mul(displacementValue));
material.positionNode = newPosition;

Displacement 표현을 위해서는 Vertex Shader에 해당하는 positionNode를 이용해야 합니다. 추가로 AO 노드에 대한 사용 코드도 보입니다.

2025-06-07

R3F Cookbook

R3F는 React 기반에서 three.js를 매우 직관적이고 사용하기 쉬운 컴포넌트 레벨로 개발할 수 있는 패키지입니다. 아래의 영상은 R3F에서 제공하는 컴포넌트, 클래스 등과 R3F를 위한 보다 더 발전된 컴포넌트를 제공하는 drei에 대한 내용을 설명합니다. 이 영상 제작의 목적은 궁극적으로 drei의 컴포넌트를 이해하고 이러한 컴포넌트를 직접 개발하기 위한 지식을 얻기 위함입니다.

위의 영상에 더해 지속적으로 내용이 업데이트되므로 해당 채널에 방문하여 참고하시기 바랍니다.

2025-05-162025-05-17

보호된 글: Raymarching Starting Point Code

2025-05-102025-05-10

이웃 격자 밖으로 출력된 결과에 대한 자연스러운 처리

  ..
  
  float n = Hash21(id);
  col += Star(gv - vec2(n, fract(n * 34.)) + .5, 1.);
  
  ..

위의 결과를 보면 격자 하나에 대해 어떤 형상 하나가 표시되어 있다. 문제는 형상 하나가 외부 격자 밖에서는 짤려나간다는 것인데, 이를 해결하기 위한 코드가 아래와 같다.

  ..
  
  for(int y=-1; y<=1; y++) {
      for(int x=-1; x<=1; x++) {
        vec2 offs = vec2(x, y);
        
        float n = Hash21(id + offs);
        col += Star(gv - offs - vec2(n, fract(n * 34.)) + .5, 1.);
      }
  }
  
  ..

위의 코드에서 유의해야할 점은 형상 하나가 바로 인접한 이웃의 이웃 밖으로 나갈 경우 처리되지 않는다. 이럴때는 밖으로 나간 것까지 포함되도록 for 문의 반복 범위를 확장해야 한다.

전체 코드는 다음과 같다.

uniform vec3 uResolution;
uniform float uTime;
uniform vec4 uMouse;

mat2 Rot(float a) {
  float s = sin(a);
  float c = cos(a);
  return mat2(c, -s, s, c);
}

float Star(vec2 uv, float flare) {
  float d = length(uv);
  float m = .05 / d;
  
  float rays = max(0., 1. - abs(uv.x * uv.y * 1000.));
  m += rays * flare;
  uv *= Rot(3.1415 / 4.); 
  rays = max(0., 1. - abs(uv.x * uv.y * 1000.));
  m += rays * .3 * flare;

  m *= smoothstep(1., .0, d); // 형상 하나가 바로 인접한 이웃 밖으로 나가지 않도록 해주는 코드

  return m; 
}

float Hash21(vec2 p) {
  p = fract(p * vec2(123.34, 456.21));
  p += dot(p, p + 45.32);
  return fract(p.x * p.y);
}

void main() {
  vec2 uv = (gl_FragCoord.xy - .5 * uResolution.xy) / uResolution.y;
  uv *= 3.;

  vec3 col = vec3(0);

  vec2 gv = fract(uv) - .5;
  vec2 id = floor(uv);

  for(int y=-1; y<=1; y++) {
      for(int x=-1; x<=1; x++) {
        vec2 offs = vec2(x, y);
        
        float n = Hash21(id + offs);
        col += Star(gv - offs - vec2(n, fract(n * 34.)) + .5, 1.);
      }
  }

  if(gv.x > .48 || gv.y > .48) col.r = 1.;  

  gl_FragColor = vec4(col, 1.0);
}