대가는 결과를 만든다

1. WebGLReneder에서 shadow 사용을 활성화 해줘야 한다. RENDERER.shadowMap.enabled = true; 2. light object와 shadow를 유발시키는 object에 castShadow를 활성화 해줘야 한다. OBJECT.castShadow = true 3. shadow가 표현될 물체에 receiveShadow를 활성화 해줘야 한다. OBJECT.receiveShadow = true; ** 참고 ** - 여러 Children Mesh를 보유한 Mesh의 경우 Parent Mesh에 castShadow나 receiveShadow를 활성화한다고 해서 표현되지 않는다. 하위 Mesh에서 활성화 해줘야 표현이 정상적으로 된다. Object3D의 method인 travers..

Three.js에서 사용할 수 있는 material의 종류들과 그 특성에 대해 간단히 정리한다. 1. MeshBasicMaterial : 단순 음영(Shader)로 그림 (평면, 와이어프레임) - 조명 영향 X 2. MeshDepthMaterial : 음영으로 깊이를 표현 재질 -카메라의 원근을 이용한 깊이 표현, 뒤에 있을 수록 어두움. 3. MeshLambertMaterial : 반사광, 하이라이트가 없는 재질 -정점 Shader 음영 계산하여 면에 보간, -비물리적 기반의 Lambertian 모델 사용 -Gouraud 쉐이딩 모델, 반짝이는 표면을 시뮬레이션 할 수 X 4. MeshNormalMaterial : 백터를 RGB 색상으로 매핑하는 재질 5. MeshPhongMaterial : 반사 하이..

-3D 모델을 Viewer에서 고품질로 표현하는 것이 목표이나 Model의 Mesh가 겹치는 부분에서 Mesh가 충돌나는 듯한 표현을 발견 (스크린샷의 화면은 three.js scene이지만, 실제 unity에도 동일한 현상이 일어남. 3D rendering 원리는 근본적으로 비슷함. 카메라, 빛, 물체....) -카메라가 담는 Scene 거리 범위 설정에 따라 우측의 스크린 샷과 같이 모델의 표현 상에 차이가 있음을 확인하였음. -WebGL 설정에서 Depth표현을 logarithmic 형식으로 설정하거나, Camera의 near, far값을 모델이 위치할 수 있는 범위를 잘 파악하여 설정함으로 해당 이슈를 해결 가능했음.

데이터의 용량은 감소하는 것을 확인하였으나, 옷의 내부 디테일 표현이 안되므로 좋은 방법으로 보이지 않음. (shader로 내부를 겉과 똑같이 표현하는 방식으로 매꾸기는 가능하나, 겉과 다른 속감을 정확하게 표현하는게 아니므로 해결책이 아님)

1. obj load시 사용되는 변수 중 objMaterialsArray의 데이터에서 Material 변수들의 name 저장하여 관리 가능 2. raycaster.intersectObjects()[0].face에서 해당 materialIndex를 얻을 수 있음 3. mesh.children[0].material[materialIndex]를 사용하여 해당 Material의 변수명을 얻고 해당 변수명과 동일한 Material들의 Texture map을 변경하는 것이 가능하겠다. 4. 혹은 mesh.children[0].material[materialIndex]를 사용하여 해당 Material의 Map Image를 얻고, 해당 Map Image와 동일한 Map을 사용하는 Material들의 Texture ma..

OpenCTM 이란? 압축된 형태로 3D 삼각형 Mesh를 저장하기 위한 파일 형식.OpenCTM형식의 파일을 읽고 쓸 수 있는 라이브러리 제공. 삼각형 Mesh 데이터 관리에만 관련되 있음. Scene 정의 형식이 아님.Multiple Mesh, Transformation matrix, materials, light source, physical property을 처리X - Lossless (무손실 압축)- converting 프로그램(obj, ply, dae etc => ctm), dll 제공- maya, blender plugin 제공- js library - https://github.com/jcmellado/js-openctm- A-Frame, Three.js에서의 사용 예제 존재(AFrame ..

1. BoxHelpernew THREE.BoxHelper(Object3D, Color)로 파라미터에 넣은 오브젝트의 공간에서 차지하는 최소, 최대 좌표 값을 알수 있는 BoundingBox를 구할 수 있다.BoxHelper는 보통 Scene에 추가하여 보이도록 할 때 사용하고, 계산을 위한 용도로는 Box3를 사용하는 것이 좋음. ex) /**Bounding Box 생성**/ var boundingBox = new THREE.BoxHelper(object, 0xfffff00); scene.add(boundingBox); 2. Box3new THREE.Box3.setFromObject(Object3D)로 특정 오브젝트를 기준으로 한 boundingBox 생성 가능 boundingBox.getSize(tar..