[ReactThreeFiber] Matreial(Drei)
MeshReflectorMaterial
다른 메쉬가 반사되는 재질
거울이나 대리석같은 느낌
<OrbitControls />
<ambientLight intensity={0.1} />
<directionalLight position={[0,1,0]} />
<directionalLight position={[1,2,8]} intensity={0.2} />
<mesh position={[0, -0.6, 0]} rotaion={[- Math.PI / 2, 0, 0]}>
<planeGeomethry args={[10, 10]} />
<MeshReflectorMaterial
blur={[300, 300]}
resolution={2040}
mixBlur={1}
mixStrength={30}
roughness={1}
depthScale={.7}
minDepthThreshold={0.4}
maxDepthThreshold={1.4}
color="#050505"
metalness={0.5} />
</mesh>
<mesh rotaion={[0, 0, 0]}>
<boxGeometry />
<meshStandardMaterial color="cyan" />
</mesh>
바닥 위에 박스가 올라가있는 모양
자세한 내용은 https://github.com/pmndrs/drei#meshreflectormaterial
MeshRefractionMaterial
반짝거리는 물체를 만들 때 효과적
import {RGBELoader} from 'three-stdlib'
//..
const texture = useLoader(RGBELoader, '여기에 hdr 이미지를 넣는다.')
//..
<OrbitControls />
<ambientLight intensity={0.2} />
<directionalLight position={[0,1,0]} />
<directionalLight position={[1,2,8]} intensity={0.7} />
<CubeCamera resolution={1024}/*해상도*/ frames={1} envMap={texture}>
{(texture) => (
<mesh>
<dodecahedronGeometry />
<meshRefractionMaterial
envMap={texture}
toneMapped={false}
bounces={2}
aberrationStrength={0.03}
ior={2.75}
fresnel={1}
color='white'
faseChroma={true}
/>
</mesh>
)}
</CubeCamera>
보석표면에 반사되는 주변환경에 대한 이미지가 필요하다.
3D그래픽에서는 주변환경에 대한 이미지 데이터로 hdr이미지를 많이 사용한다.
CubCamera 통해서 6개의 면에 대한 반사 이미지를 얻어올 수 있다. 반사 이미지는 mesh 표면에 반사되어 표시된다.
bounce - 각이 더 생김
fresnel - strip light(빛 조각?)
ior - 굴절률
aberrationStrength - 수차강도
fastChroma - If this is on it uses fewer ray casts for the RGB shift sacrificing physical accuracy, true
라고 하는데 정확하건 직접 해봐야 알 수 있을 것 같다…
MeshTransmissionMaterial
유리 재질로 매우 뛰어난 컴포넌트
MeshPhysicalMaterial의 향상된 형태
//..
const config = useControls({
transmissionSampler: false,
backside: false,
samples: { value: 10, min: 1, max: 32, step: 1 },
resolution: { value: 2048, min: 256, max: 2048, step: 256 },
transmission: { value: 1, min: 0, max: 1 },
roughness: { value: 0.0, min: 0, max: 1, step: 0.01 },
thickness: { value: 3.5, min: 0, max: 10, step: 0.01 },
ior: { value: 1.5, min: 1, max: 5, step: 0.01 },
chromaticAberration: { value: 0.06, min: 0, max: 1 },
anisotropy: { value: 0.1, min: 0, max: 1, step: 0.01 },
distortion: { value: 0.0, min: 0, max: 1, step: 0.01 },
distortionScale: { value: 0.3, min: 0.01, max: 1, step: 0.01 },
temporalDistortion: { value: 0.5, min: 0, max: 1, step: 0.01 },
clearcoat: { value: 1, min: 0, max: 1 },
attenuationDistance: { value: 0.5, min: 0, max: 10, step: 0.01 },
attenuationColor: '#ffffff',
color: '#c9ffal'
bg: '#839681'
})
//..
<OrbitControls />
<ambientLight intensity={0.1} />
<directionalLight position={[0,1,0]} />
<directionalLight position={[1,2,8]} intensity={0.7} />
<mesh >
<sphereGeometry args={[1.4, 128, 128]} />
<MeshTransmissionMaterial {...config} background={new THREE.Color(config.bg)} />
</mesh>
<mesh scale={0.3}>
<torusGeometry arg={[0.5 0.2 32]} />
<meshStandardMaterial />
</mesh>
이렇게 사용하게된다는데 기본적으로 ui를 사용해서 만져봐야 알것 같다.
https://github.com/pmndrs/drei#meshreflectormaterial
MeshWobbleMaterial
<OrbitControls />
<ambientLight intensity={0.2} />
<directionalLight position={[0,1,0]} />
<directionalLight position={[1,2,8]} intensity={0.7} />
<mesh >
<torusGeometry />
<MeshWobbleMaterial factor={1} speed={10} />
</mesh>
factor - 흔들거림의 정도
speed - 흔들거림의 속도
MeshDistortMaterial
<OrbitControls />
<ambientLight intensity={0.2} />
<directionalLight position={[0,1,0]} />
<directionalLight position={[1,2,8]} intensity={0.7} />
<mesh >
<torusGeometry />
<MeshDistortMaterial distort={0.3} speed={1} />
</mesh>
distort - 왜곡의 정도
speed - 왜곡의 속도
MeshDiscardMaterial
<OrbitControls />
<ambientLight intensity={0.2} />
<directionalLight position={[0,1,0]} />
<directionalLight position={[1,2,8]} intensity={0.7} />
<mesh >
<torusGeometry />
<MeshDiscardMaterial />
</mesh>
화면에 표시하지 않는다
다른 재질의 visible={false} 과 다른 점은 MeshDiscardMaterial은 그림자를 표현한다.
ShaderMaterial
import { extend } from '@react-three/fiber'
//..
const SimpleMaterial = new shaderMaterial(
{
uColor: new THREE.Color(1, 0, 0)
},
`
varying vec2 vUv;
void main() {
vUv = uv;
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}
`
,
`
uniform vec3 uColor;
varying vec2 vUv;
void main() {
gl_FragColor.rgba = vec4(0.5 + 0.3 * sin(vUv.yxx + time) + color, 1.0);
}
`
)
extend({ SimpleMaterial })
//..
<OrbitControls />
<ambientLight intensity={0.2} />
<directionalLight position={[0,1,0]} />
<directionalLight position={[1,2,8]} intensity={0.7} />
<mesh >
<boxGeometry />
<simpleMaterial uColor={"green"} />
</mesh>
인자
- 유니폼 객체 - 자바스크립트에서 gpu에 전달할 값
- 버텍스 쉐이드에 대한 코드 - 지오메트리의 좌표값을 화면에 출력하기 위한 좌표값으로 바꾸는 목적
- 프레그먼트 쉐이드 - 메쉬가 화면에 픽셀단위로 표현될 때 각 픽셀에 색상 값을 결정하는 목적
댓글남기기