공간정보시스템 / 3차원 시각화 / 딥러닝 기반 기술 연구소 @지오서비스(GEOSERVICE)
지금 자신이 사용하는, 학습하는 IT 기술이 시장에서 얼마나 많이 사용되고 있는지를 평가할 수 있는 사이트입니다.
먼저 Python입니다. AI 관련 프로젝트에서 가장 많이 사용되는 언어인데.. 그 추세가 심상치 않습니다.
다음은 개인적으로.. 미래의 서버 개발을 위해 가장 많이 사용될거라 생각하는 Express입니다.
그리고 요즘 제가 가장 많이 접하고 있는 웹 기반의 3D 기술인 three.js 라이브러리입니다. three.js에 대한 재미있는 점은 three.js가 미국 다음으로 한국에서 가장 많이 사용된다는 것입니다.
여러분들도 자신이 관심이 있는 기술의 트랜드를 한번 확인해 보시면 미래에 대한 자신의 준비를 좀더 합리적으로 대응할 수 있을거라 생각됩니다.
웹에서 3차원 시각화에 대한 개발 문의가 있어 이와 연관된 모델을 시각화하는 예제를 간단히 만들어 보았고.. 아래의 영상은 그에 대한 결과입니다. 모델 데이터를 3차원으로 시각화하는 것은 상대적으로 복잡하지 않은데.. 이렇게 시각화된 장면을 보다 멋지게 표현되도록 다양한 효과를 적용할 필요가 있습니다. 아래의 화면은 먼저 모델을 시각화하고 몇가지 후처리를 통해 더욱 멋지게 보이도록 하였습니다.
아래는 다이아몬드에 대한 반짝거리는 효과를 중점적으로 적용한 영상입니다.
추가적으로 보석과 함께 금괴도 표현해본 영상입니다.
HDRI는 조명으로써 매우 뛰어난 기능을 제공하면서 동시에 시각적인 배경으로도 사용될 수 있습니다. 그러나 HDRI가 배경으로 사용되면 3D 모델과 이질감이 느껴지는데 이런 이질감을 개선할 수 있습니다.
아래의 영상은 배경으로써의 HDRI를 모델과 함께 자연스럽게 표현하기 위해 작업한 코딩 결과입니다.
three.js는 다양한 Helper를 통해 시각적으로 디버깅이 가능한데, React three Fiber에서 이 Helper를 사용하는게 그다지 명확한 API로 가능하지 않다. 다음은 R3F에서 그림자의 카메라에 대한 Helper를 추가해 표시하는 코드이다.
import * as THREE from 'three'
import { OrbitControls } from '@react-three/drei';
import { useEffect, useRef } from 'react';
import { useFrame, useThree } from '@react-three/fiber';
export default function Experience() {
const lightRef = useRef()
const shadowCameraRef = useRef()
const scene = useThree((state) => state.scene)
useEffect(() => {
shadowCameraRef.current = new THREE.CameraHelper(lightRef.current.shadow.camera)
scene.add(shadowCameraRef.current)
return () => {
scene.remove(shadowCameraRef.current)
}
}, [lightRef.current])
useFrame(() => {
shadowCameraRef.current.update()
})
return <>
<ambientLight intensity={0.5} />
<directionalLight ref={lightRef} castShadow ... />
...
</>
}
