전체 글329

[MASH 모션그래픽] 염색체 CG제작하기[2] [MASH 모션그래픽] 염색체 CG제작하기[1]에서 모션까지 제작했다면, 이번 포스팅에서는 쉐이더와 랜더링을 진행해보자. 1 쉐이더 MASH에 색상을 넣는 건 간단하다. MASH의 instancer가 아닌 'Geometry'를 아웃라이어에 선택하여 쉐이더를 적용해주면 된다. 현재 생성된 지오메트리, "ReproMesh"의 쉐이더를 적용해주는 것만으로 나머지 인스턴스의 색상 모두 동시에 적용된다. 가령, 램버트 쉐이더를 MASH지오메트리(ReproMesh)에 적용했을 때 나머지 염색체 모두 해당 쉐이더의 색상으로 변경되는 것을 확인할 수 있다. 다만, 아놀드 랜더링을 선택한다면, 램버트 기본 쉐이더보다 ai standard surface를 사용하는 편이 유리하다.(퀄러티) MASH 지오메트리를 선택한 상태..
[MASH 모션그래픽] 염색체 CG제작하기[1] 영양제나 제약회사 광고에 등장하는 염색체를 CG로 제작해보자. 염색체는 대략 위와 같이 생겼다. 학창시절 생물 시간에 배웠던 XY, XX 뭐시기가 떠오른다. 1 염색체 모델링 염색체 모델링은 모델러마다 각양각색이지만 그 중에서도 가장 효율적인 방법을 선택했다.(Deform 사용) 우선, 원기둥을 꺼내서 아래와 같이 면수를 적당히 늘려준다. 피봇 위치는 가장 아래쪽으로 옮긴 뒤(D키 + V키) 상단을 둥그렇게 상고머리 깎듯 원만하게 대충 만든다. B키를 선택한 후(범위로 선택 됨), R키로 하단 부분을 모아준다. 염색체의 발(?)에 해당되는 부위이므로 ICBM미사일마냥 끝을 사정없이 오무려준다. 모델링이 끝났다. 2 Deform 적용 염색체의 구부러진 하단을 표현하기 위해 염색체 모델링을 선택한 뒤, Mo..
[모션그래픽] 계륵이 된 Maya의 Sprites 효과 Autodesk가 아놀드 랜더러를 주력으로 선택하기 전이었던, 2010년대 초반까지 Maya의 Sprites효과는 현역이었다. Mental Ray, V-ray 사이에서 Sprites를 활용한 특수효과는 꽤 괜찮은 결과를 보여줬다. 하지만 Arnold가 등장한 이후부터 Sprites기능은 퇴색되기 시작했다. Maya2012이후 버전부터 nParticle & Sprites기능에 대한 업데이트는 미미했고, Fluid, Bifrost 그리고 이를 지원하는 아놀드 쉐이더를 중심으로 업데이트가 진행됐다. 게다가 2015년 이후 MASH가 등장함에 따라 Sprites는 계륵이 됐다. 혹시나 해서 Maya2023버전에서 nParticle & Sprites를 특수효과에 사용하려 노력했지만 역시나 쉽지 않다. GPU랜더를..
[MASH & Maya Tip] 세포체 제작 및 애니메이션 [2] 영화에서 세포체 내부의 핵은 조금씩 움직이는 경우가 많기에 모션이 필수적이다. 그런데 세포 내부의 핵은 불규칙적으로 움직이므로 이를 표현하기 위해서는 Maya의 Expression이 필요하다. 1 세포핵 움직임 표현 세포핵 클러스터를 모두 그룹으로 설정한 후, 그룹의 translateX값에 Expression을 설정한다. 불규칙하게 떨리는 세포핵을 표현하기 위해 'noise()함수'를 적용한다. 임의로 설정한 진폭($amp), 진동값($vib)을 테스트해보자.(타임라인 play실행) 세포핵 모션의 범위가 너무 크면 조금씩 값을 조절해준다. **타임라인의 play를 실행했을 때, 세포 폴리곤이 하락한다면 'Nucleus'노드의 중력값(gravity) 때문이다. 혹시 중력값이 있다면, '0'으로 설정해준다...
[MASH & Maya Tip] 세포체 제작 및 애니메이션 [1] '게임', '영화', '광고', '애니메이션' 분야 외 3D그래픽이 의외로 많이 사용되는 분야가 '의료·과학'분야다. 특히, 생명공학 분야는 사실상 3D그래픽으로 설명할 수 밖에 없는 미세한 부분들이 많다. 그 중에서도 대표적인 물질이 '세포체'다. 세포체 효과는 영화, 애니메이션에서도 위와 같은 장면으로 자주 등장한다. 실험 장면에서 세포막에 자극을 주는 듯한 모션그래픽을 한 두번쯤 봤던 경험은 누구나 있을 듯 하다. 아마도 세포체 장면을 제작함에 있어, (Maya기준) nCloth 혹은 softBody를 사용하는 경우가 많을 듯 하다.(필자도 그렇게 생각했음) 하지만 "파티클 + Deformer"방식으로 세포체를 아주 쉽게 제작할 수 있다는 사실을 발견했기에 포스팅으로 남겨야겠다고 결심했다. 본인처럼..
InstaMat studio 출시 & Substance Modeler 1.6 1 InstaMat Studio 출시 - 독일 개발사, Abstract(게임 개발업체)에서 맵핑 및 쉐이딩 프로그램 InstaMat Studio 출시(2024.1.25) - Substance 3D 제품군과 거의 비슷하며, 노드에서 맵을 추가하는 식으로 맵핑 가능. - AI기반 텍스처 생성 & 합성 기능(작업자가 같은 작업 반복시, 자동으로 처리 됨) - 디스맵을 통한 모델링 기능 제공(3D 스캐너 조합) - 1년 기준 10만$(1억) 이하, 무료 라이선스 제공 (상업적 이용 가능) ** 기존 Substance유저는 굳이 사용할 필요성을 못 느낌 2 Substance 3D Modeler 1.6 출시 - 'Snake Hook'라는 새로운 모드 도입 - 인터페이스 변경(Retopology 관련) - VR모드 ..
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버전에 맞는 네이밍 설정(임의로 설정해도 상관없음..
[CG VFX] 물컵 효과 만들기 (Maya) 1 물컵 제작 물컵 FBX파일 : 원본 Maya파일: https://mogl3d.com/refs/details?refs_id=E5icia4LdyWwGZyxsUNq - 물컵, 액체, (particle)분출기 오브젝트 생성 - 오브젝트(물컵, 물) 'ai standardSurface' arnold 쉐이더 적용 2 arnold라이트 생성 - 'skyDome Light' 생성 - 쉐이더 'presets' → 'Clear_Water' or 'Glass' 설정 3 출렁임 효과 연출 - 'liquid'오브젝트(물) 선택 후, 「Deform → Nonlinear → Sine」 적용 - sine 설정: 아래 사진 참고 - 시작 프레임 ~ 마지막 프레임까지 sine의 RotateX값 key설정 - 그래프 에디터에서 Eas..
[CG VFX] 3D Maya, 비누방울 만들기 원본파일: https://mogl3d.com/refs/details?refs_id=SD3059Mi6AyD7ij3ycnS MoGL_3D mogl3d.com 1 넙스 커브 생성하기 - rotation, nurbs Sections, Spans 설정하기 2 Lattice 적용 & - Lattice 'x, y, z' 설정하기 3 SoftBody & Field 적용 - nPaticles > Soft Body 적용 - turbulence & expression 설정 - Lattice 숨기기 4 라이트 생성 - Arnold > Skydome Light 생성 - HDRI 적용 - aiStandardSurface 쉐이더 적용 및 투명도 설정 5 Booleans 적용하기 - 랜더링 카메라 생성하기 6 교차부분 숨기기 - 넙..
[CG VFX] 담배연기 특수효과(cigarette smoke Effect) 제작 원본 파일 Download: https://mogl3d.com/refs/details?refs_id=TzmjLU9mG8zhk3bSfmGL MoGL_3D mogl3d.com 1] 소스준비 2] Emitter 생성하기 - 담배연기는 위로(y축, 한방향) 상승하기 때문에 emitter type을 'Directional'로 선택한다. - 연기 텍스처를 사용할 예정이므로 파티클 타입을 sprite로 선택한다. 3] 쉐이더 넣기 - hypershader에서 'Lambert'쉐이더를 생성한 뒤, sprite파티클에 적용한다. * sprite에 넣는 연기 소스는 포토샵의 브러시로 대충 만들어준다.(256 x 256[px]) - 램버트 쉐이더의 칼라값에 png파일을 넣어준다. 4] Sprite 파티클 크기 조절하기..
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..