Babylon.js & Creo

□ 소개

Babylon.js는 웹 브라우저에서 3D 게임 및 애니메이션을 개발하는 데 사용되는 오픈 소스 3D 게임 엔진입니다. WebGL과 HTML5 Canvas를 사용하여 실시간 3D 렌더링을 지원하며, 강력한 기능과 다양한 도구를 제공하여 개발자들이 높은 수준의 3D 경험을 만들 수 있도록 돕습니다.

[WebGL] Babylonejs 특징

Babylonjs 란? HTML5를 이용한 Web rendering engine 으로 얼마전(2022-01-15) version 5.0 release webgl api를 보다 쉽게 사용하게 해준다. License Apache-2.0 역사 및 현재 2013년 마이크로소프

velog.io

홈 페이지

Babylon.js: Powerful, Beautiful, Simple, Open - Web-Based 3D At Its Best

Babylon.js is one of the world's leading WebGL-based graphics engines. From a new visual scene inspector, best-in-class physically-based rendering, countless performance optimizations, and much more, Babylon.js brings powerful, beautiful, simple, and open

www.babylonjs.com

□ Babylon.js와 Creo 데이터를 연계하려면

Babylon.js는 .gltf, .glb, .obj, .stl 등의 파일 형식을 지원합니다. Creo에서 직접 Babylon.js가 지원하는 형식으로 내보낼 수 없으므로 중간 변환 과정이 필요합니다.

▷ OBJ 파일 형식

OBJ 파일은 3D 모델링에서 가장 널리 사용되는 파일 형식 중 하나입니다. 1980년대 후반에 Wavefront Technologies에서 개발되었으며, 3D 모델의 기하학적 정보와 재질 정보를 저장하는 데 사용됩니다.

OBJ 파일의 특징

구조: OBJ 파일은 텍스트 기반 파일로, 사람이 읽을 수 있는 형태로 구성되어 있습니다. 여기에는 3D 모델을 구성하는 정점, 면, 텍스처 좌표 등의 정보가 포함됩니다.
기하학 정보: OBJ 파일은 3D 모델의 형태를 정의하는 정점(vertex), 선(line), 면(face) 등의 정보를 저장합니다. 각 정점의 좌표와 면을 구성하는 정점의 인덱스 등을 포함합니다.
재질 정보: OBJ 파일은 모델의 색상, 반사율, 투명도 등의 재질 정보를 저장할 수 있습니다. 일반적으로 MTL (Material Template Library) 파일과 함께 사용되며, MTL 파일에는 재질에 대한 자세한 정보가 포함됩니다.
텍스처 매핑: OBJ 파일은 모델 표면에 텍스처를 입히는 데 필요한 텍스처 좌표를 저장할 수 있습니다. 이를 통해 모델에 다양한 질감과 색상을 표현할 수 있습니다.
호환성: OBJ 파일은 다양한 3D 모델링 소프트웨어에서 지원되며, 널리 사용되는 표준 파일 형식입니다.

[nodejs] obj2gltf 라이브러리로 대용량 obj파일➡️ gltf로 변환하기

오늘은 obj2gltf 라이브러리를 활용해서 대용량 obj파일을 gltf파일로 변환하는 코드를 테스트해 봤다.📌 문제 상황데이터 용량이 적은 obj파일을 gltf로 변환할 때는 문제가 발생하지 않았지만, 용

success-notes.tistory.com

▷ OBJ 파일 형식 (설정)

OBJ 파일은 3D 모델의 표면을 작은 삼각형 조각들로 나누어 표현하는 방식이라, 모델의 정확도를 높이기 위해 몇 가지 중요한 설정을 해야 합니다. 핵심은 "코드 높이(Chord height)"를 최소화하는 것입니다. 코드 높이는 삼각형 조각들의 높이를 의미하는데, 이 값이 클수록 모델의 표면이 거칠게 표현될 수 있습니다. 코드 높이를 0으로 설정하면 Creo가 가진 정밀도 내에서 가장 작은 값을 자동으로 선택하여 최대한 매끄러운 표면을 얻을 수 있습니다.

Creo에서 모델링한 데이터를 Wavefront (*.OBJ) 파일로 저장할 때, 모델의 정확도와 품질을 조절하기 위해 사용하는 몇 가지 설정 값들이 있습니다. 이 값들을 조절하여 OBJ 파일의 품질과 용량을 원하는 수준으로 맞출 수 있습니다.

1. 코드 높이 (Chord height)

코드 높이는 3D 모델의 곡면을 표현하는 삼각형 조각들의 최대 높이를 의미합니다. 값이 작을수록 삼각형 조각들이 더 작고 촘촘하게 배치되어 곡면을 더 부드럽고 정밀하게 표현합니다. 하지만 코드 높이가 너무 작으면 파일 용량이 커지고 처리 속도가 느려질 수 있습니다. 곡면을 표현하는 삼각형 조각들의 "높이"를 조절하는 값입니다. 높이가 낮을수록 더 부드러운 표면을 얻을 수 있지만, 파일 크기가 커집니다.

2. 각도 제어 (Angle control)

각도 제어는 인접한 삼각형 조각들 사이의 최대 각도 차이를 제한하는 값입니다. 값이 작을수록 각 조각들이 더 부드럽게 연결되어 곡면의 매끄러움을 유지합니다. 하지만 각도 제어가 너무 작으면 모델의 디테일이 손실될 수 있습니다.삼각형 조각들이 서로 얼마나 "자연스럽게" 연결될지를 결정하는 값입니다. 값이 작을수록 더 매끄러운 곡면을 얻을 수 있지만, 모델의 세밀한 표현이 어려워질 수 있습니다.

3. 단계 크기 (Step size)

단계 크기는 모델의 곡면을 따라 삼각형 조각들을 생성하는 간격을 의미합니다. 값이 작을수록 삼각형 조각들이 더 촘촘하게 배치되어 곡면을 더 정밀하게 표현합니다. 하지만 단계 크기가 너무 작으면 파일 용량이 커지고 처리 속도가 느려질 수 있습니다.곡면을 따라 삼각형 조각들을 얼마나 "촘촘하게" 배치할지를 결정하는 값입니다. 값이 작을수록 더 정밀한 표현이 가능하지만, 파일 크기가 커집니다.

4. 편차 제어 (Deviation control)

편차 제어는 모델의 원래 형상과 OBJ 파일로 저장된 형상 간의 최대 오차를 제한하는 값입니다. 값이 작을수록 OBJ 파일이 원래 모델에 더 가깝게 표현됩니다. 하지만 편차 제어가 너무 작으면 파일 용량이 커지고 처리 속도가 느려질 수 있습니다. OBJ 파일이 원래 모델과 얼마나 "똑같이" 표현될지를 결정하는 값입니다. 값이 작을수록 더 정확한 표현이 가능하지만, 파일 크기가 커집니다.

□ Babylon.js를 사용하여 .obj 파일을 웹 페이지에서 로드하고 표시하는 코드

1. 폴더 구조 : OBJ 파일을 로드하려면 .obj와 .mtl 파일을 models/ 폴더에 배치해야 합니다.

/ 프로젝트 폴더
  ├── index.html
  ├── models/
  │   ├── your_model.obj
  │   ├── your_model.mtl
  │   ├── texture.jpg (옵션)

2. 동작 순서

1) Babylon.js 라이브러리를 로드
2) OBJ 모델과 MTL(Material) 파일을 로드
3) 웹 페이지에 3D 모델을 표시

3. 코드 (HTML + JavaScript)

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Babylon.js - OBJ 모델 로드</title>
    <script src="https://cdn.babylonjs.com/babylon.js"></script>
    <script src="https://cdn.babylonjs.com/loaders/babylonjs.loaders.min.js"></script>
    <style>
        body { margin: 0; overflow: hidden; }
        canvas { width: 100vw; height: 100vh; display: block; }
    </style>
</head>
<body>
    <canvas id="renderCanvas"></canvas>

    <script>
        // Babylon.js 엔진 생성
        const canvas = document.getElementById("renderCanvas");
        const engine = new BABYLON.Engine(canvas, true);

        const createScene = function () {
            const scene = new BABYLON.Scene(engine);

            // 카메라 생성
            const camera = new BABYLON.ArcRotateCamera("camera", Math.PI / 2, Math.PI / 2.5, 10, BABYLON.Vector3.Zero(), scene);
            camera.attachControl(canvas, true);

            // 조명 추가
            const light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(1, 1, 0), scene);
            light.intensity = 0.7;

            // OBJ 파일 로드
            BABYLON.SceneLoader.ImportMesh(
                "", 
                "models/",  // OBJ 파일이 위치한 폴더
                "your_model.obj",  // 불러올 OBJ 파일 이름
                scene,
                function (meshes) {
                    console.log("OBJ 모델 로드 완료");
                    meshes.forEach(mesh => {
                        mesh.position = new BABYLON.Vector3(0, 0, 0); // 위치 설정
                        mesh.scaling = new BABYLON.Vector3(1, 1, 1); // 크기 조정
                    });
                }
            );

            return scene;
        };

        const scene = createScene();
        engine.runRenderLoop(() => scene.render());
        window.addEventListener("resize", () => engine.resize());
    </script>
</body>
</html>

저작자표시 비영리 변경금지

'JavaScript For Creo' 카테고리의 다른 글

Creo.JS] pfcBassSession (0)	2025.02.09
babylon.js 테스트 (0)	2025.02.07
Creo.JS 스크립트 사용 방법? (1)	2025.02.06
browser_test.html (0)	2025.02.06
자비스크리트 예제 사이트 (0)	2025.02.06