[R3F] Geometry, Material

지오메트리

지오메트리 : 메시의 모양을 정의

 

모든 지오메트리는 버퍼지오메트리 클래스를 상속받음

어트리뷰트를 가짐

 

 

버퍼 지오메트리가 가지는 속성

Position : 형상의 3D차원 정점

Nomal : 모델 면에 대한 수직 벡터

Color : 정점 색상

UV : 텍스터 맵핑을 위한 좌표

Vertex Index : 면 구성을 위한 정점 인덱스

 

 

 

 

모든 재질은 Matreial class를 상속 받음

 

점 - Point*Matreial

선 - Line*Matreial

면 - Mesh*Matreial

 

r3f는 drei 로 별도의 재질 컴포넌트를 제공

 

 

 

 

재질

meshBasicMaterial
광원의 영향을 전혀 받지않음

 

 

meshLambertMaterial
반사 하이라이트가 없고 반짝이지 않는 표면
모델의 단순성으로 그래픽 정확도가 다소 떨어짐

 

 

meshDepthMaterial

카메라와의 거리에 따라서 밝기가 달라짐

<Canvas camera={{ near: 3.5, far: 6 }}>

 

 

meshMatcapMaterial

하단 참조

 

 

meshNormalMaterial

알록달록 RGB 재질

 

 

meshToonMaterial

만화 재질 (3~5 컬러만을 이용하여 표현)

 

 

Three Material 기본 속성

<meshBasicMaterial
    visible={true}
    transparent={true}
    opacity={0.5}
    depthTest={true}
    depthWrite={true}
    side={THREE.FontSide}
/>

 

 

visible

mesh 출력 여부 결정

$ visible={true}

 

 

transparent

재질의 투명 효과 적용 여부
$ transparent={false}

 

 

opacity

불투명도 지정

transparent가 true로 되어 있어야지만 적용 가능함
$ opacity={1}

 

 

depthTest, depthWrite

depthBuffer 적용

depthBuffer == Z-buffer

카메라와 가까이에 있는 부분(픽셀)은 작음, 멀리 있을 수록 큼 

== 작을수록 어둡게, 멀수록 밝게 처리됨

 

픽셀을 화면에 그릴 때 depthBuffer 값을 통해 검사 유무를 결정

$ depthTest={true}

 

z값을 depthBuffer에 기록할 것인지 결정
$ depthWrite={true}

 

 

side

렌더링 면을 결정

Front만 적용하였을 때 앞면

Front만 적용하였을 때 뒷면

앞면만 렌더링 할 것인지, 뒷면만 렌더링 할 것인지 등을 결정 

$ side={THREE.FrontSide}

 

 

 

 

Material 속성

<meshPhongMaterial
    visible={true}
    transparent={true}
    opacity={1}
    depthTest={true}
    depthWrite={true}
    side={THREE.FrontSide}
    
    color='pink'
    emissive={0x666600}
    specular={0xfffff}
    shininess={1}
    flatShading={false}
/>

Three가 아닌 Material에서 제공하는 속성

특정 Material마다 적용 가능한 것이 별도로 있음

 

 

wireframe

출력을 와이어 프레임 형태로 적용
$ wireframe={false}

 

 

color

재질의 색상값

$ color='#00ff00'
$ color='blue'
$ color={0x00ff00}

 

 

emissive

재질 자체에서 방출하는 색상 값

$ emissive={0x666600} 

 

 

specular

반사하는 색상 값

$ specular={0xfffff}

 

shineness
반사 효과(specular) 강도 적용
숫자가 클수록 세짐 

$ shininess={1}

flatShading

반사를 자연스럽게 할 것인지 깍인대로 할 것인지 여부 결정

$ flatShading={false}

 

 

 

 

pbr 재질

물리 기반 렌더링 (2가지 머테리얼이 있음)

속도면에서는 상대적으로 느림

훨씬 고품질

 

 

meshStandardMaterial

 

 

meshPhysicalMaterial
meshStandardMaterial을 상속받은 머테리얼
-> 보다 발전됨

코팅효과, 유리와 같은 표현 가능

 

 

 

meshStandardMaterial 속성

<meshStandardMaterial
    visible={true}
    transparent={true}
    opacity={1}
    depthTest={true}
    depthWrite={true}
    side={THREE.FrontSide}

    color='pink'
    emissive={0x666600}
    
    roughness={0}
    metalness={0}
/>

roughness={0}

거칠기 (0~1)

0에 가까울수록 매끄러움

 

metalness={0}

금속성을 나타냄 (0~1)

값이 커질수록 금속성이 강해지며 어두워짐

 

 

 

meshPhysicalMaterial

<meshPhysicalMaterial
    visible={true}
    transparent={true}
    opacity={1}
    depthTest={true}
    depthWrite={true}
    side={THREE.FrontSide}
    color='pink'
    emissive={0x666600}

    roughness={0}
    metalness={0}

    clearcoat={0}
    clearcoatRoughness={0}

    transmission={0}
    thickness={0}
    ior={1.5}
/>

meshPhysicalMaterial

clearcoat={0}

코팅효과 (0~1)

clearcoatRoughness={0}

코딩 거칠기 (0~1)

transmission={0}

투명효과 (0~1)

thickness={0}

유리 두께

ior={1.5}

굴절률 (1 ~ 2.333)

 

 

 

meshMatcapMaterial 재질

matcap image

matcap 결과

 

미리 만들어진 쉐이딩 결과 이미지를 사용함

-> 이미지를 텍스쳐로 받아와야 함

별도 광원을 필요로 하지 않음

const matcap = useTexture('./matcap.jpg');

...

<meshMatcapMaterial matcap={matcap} />

 

flatShading을 통해서 각진 모양을 표현할 수 있음

$ flatShading={true}

 

 

※ 쉐이딩 참고 사이트

https://github.com/nidorx/matcaps

GitHub - nidorx/matcaps: Huge library of matcap PNG textures organized by color