Coding6

three.js Path-Tracing-Render 광선추적 랜더링(실사랜더링) HTML 삽입 미리보기할 수 없는 소스 결론적으로 three.js 간접광 구현은 생각보다 힘들었다. three.js 홈페이지에 구현된 예시와 달리 4가지 부분의 조합이 필요한 탓에 엄청 헤맬 수 밖에 없는 구조다. 코드에서 샘플값을 임의로 설정하지 않으면 pc의 그래픽카드 성능에 따라 엄청난 속도차이가 발생할 것으로 보인다.(흡사 실행 안 되는 것처럼 보임) 1] HDR 배경맵 > three.js environtMap 활용 2] GLSL > 쉐이더 PBR머트리얼 3] Ray tracing > gpu-pathtracing-render api 활용 4] 3D Models > Web Worker, 멀티 쓰레드 활용 위와 같이 gpu-pathtracing api를 사용하는 경우, (PBR 쉐이더에서) specu..
three.js GLTF 리깅 컨트롤러 제작하기 three.js덕분에 3D 애니메이팅 분야가 상당히 넓어지고 있다. gltf, fbx 소스파일을 3D프로그램에서 제작한 이후, gltf 로더를 통해 Bone객체를 위와 같이 조작할 수 있으며, Theatre.js, GSAP같은 라이브러리를 통해 키프레임 방식의 애니메이팅도 가능하다. 단, (블랜더가 아닌)Maya 유저의 경우, gltf 사용에 제약이 따른다.(gltf 플러그인 설치해야 됨) 1 Maya2gltf 플러그인 설치 https://github.com/iimachines/Maya2glTF/releases Releases · iimachines/Maya2glTF Maya to glTF 2.0 exporter. Contribute to iimachines/Maya2glTF development by ..
three.js 화면을 gif 녹화하기 Github: https://github.com/webdoli/threeExportGif/tree/main See the Pen three.js + ccapture.js by hub cg (@hub-cg) on CodePen. *주의점 gif_render_scene.js에서 'workersPath'값은 gif.workers.js파일이 있는 폴더로 경로 변경 new CCapture({ format: 'gif', workersPath: 'js/lib/', display: true, });
[three.js] 피봇 위치 설정하기 * 오브젝트 포커스 기능(F단축키) Maya, Max와 같은 3D프로그램에서 'F'키 입력 시, 카메라 뷰가 오브젝트로 맞춰진다. three.js에서 F(포커싱)단축키 기능을 구현하려면, 빈 Object3D 객체를 통해 센터 피봇을 정한 뒤 .attach 메서드로 포커싱 오브젝트를 붙여주면 된다. See the Pen three.js center pivot by hub cg (@hub-cg) on CodePen. 1] 원점에서 오브젝트 거리 계산 let objSize = new THREE.Box3().setFromObject( text ); let centerPos = new THREE.Vector3( ( objSize.max.x - objSize.min.x ) / 2.0, ( objSize.max.y ..
Maya 외부에디터(pyCharm) 연결하기 Maya에서 파이썬으로 모듈을 개발할 때, pyCharm에디터를 사용한다면 좀더 편리하게 개발할 수 있다. 이번 포스팅에서는 의외로 연결이 어려운(?) Maya의 script에디터와 pyCharm을 연결하는 방법을 알아보자. 1 pyCharm 다운로드 - Community버전 다운로드(Free) 2 pyCharm 설정 - 폰트 크기 조절: "Ctrl + 휠" 설정 - Maya 스크립트 에디터에서 실행하려는 폴더 설정하기 2-1 인터프리터 설정 - 우측 하단의 'interpreter' 클릭 - 현재 python버전을 maya스크립트 에디터의 인터프리터로 연결(mayapy.exe) 2-2 인터프리터 이름 변경 - 인터프리터의 이름을 알기 쉽게 변경 - Maya버전에 맞는 네이밍 설정(임의로 설정해도 상관없음..
SVG 무료 아이콘 js라이브러리「iconoir.js」 「iconoir.js」 꽤 괜찮은 무료 아이콘이 필요하다면, 구글 아이콘과 함께 「iconoir」 또한 괜찮은 대안이다. 3D 앱 개발에 필요한 아이콘이 대략 50여가지 정도 있으며, 알파벳 순으로 1,368가지 아이콘을 무료로 사용할 수 있다. iconoir의 특징은 구글 아이콘(무료)보다 좀더 감각적이다. 구글 아이콘이 과학 교과서라면, iconoir는 다소 예체능 느낌이다. 비록, 물량은 구글에 비해 턱없이 부족하지만 좀더 감각적인 디자인을 추구한다면 iconoir을 추천한다. https://iconoir.com/ Iconoir | Free Icons Iconoir is the biggest open source icon library that provides a massive selection o..