웹 3D 디스플레이 성능 가이드 - Three.js vs Babylon.js 구현 전략

import * as THREE from 'three';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';

// 최소 Three.js 뷰어 설정
function initThreeViewer(canvas, modelUrl) {
  // 투명 배경이 있는 씬 설정
  const scene = new THREE.Scene();
  scene.background = null; // 투명

  // 카메라
  const camera = new THREE.PerspectiveCamera(
    75,
    canvas.width / canvas.height,
    0.1,
    1000
  );
  camera.position.z = 5;

  // 알파 채널이 있는 렌더러
  const renderer = new THREE.WebGLRenderer({
    canvas,
    alpha: true,
    antialias: true,
    powerPreference: "high-performance"
  });
  renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));

  // 최적화된 조명
  const ambientLight = new THREE.AmbientLight(0xffffff, 0.6);
  const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
  directionalLight.position.set(10, 10, 5);
  scene.add(ambientLight, directionalLight);

  // 자동 회전이 있는 GLB 로드
  const loader = new GLTFLoader();
  let model;

  loader.load(modelUrl, (gltf) => {
    model = gltf.scene;
    scene.add(model);

    // 모델 중심 맞춤 및 스케일 조정
    const box = new THREE.Box3().setFromObject(model);
    const center = box.getCenter(new THREE.Vector3());
    model.position.sub(center);

    const size = box.getSize(new THREE.Vector3());
    const maxDim = Math.max(size.x, size.y, size.z);
    model.scale.multiplyScalar(2 / maxDim);
  });

  // 자동 회전이 있는 애니메이션 루프
  function animate() {
    requestAnimationFrame(animate);

    if (model) {
      model.rotation.y += 0.01;
    }

    renderer.render(scene, camera);
  }
  animate();

  // 크기 조정 처리
  window.addEventListener('resize', () => {
    camera.aspect = canvas.width / canvas.height;
    camera.updateProjectionMatrix();
    renderer.setSize(canvas.width, canvas.height);
  });
}

import * as BABYLON from '@babylonjs/core';
import '@babylonjs/loaders/glTF';

// 모든 기능이 포함된 Babylon.js 뷰어
function initBabylonViewer(canvas, modelUrl) {
  // 엔진 설정
  const engine = new BABYLON.Engine(canvas, true, {
    preserveDrawingBuffer: true,
    stencil: true,
    powerPreference: "high-performance"
  });

  // 투명 배경이 있는 씬
  const scene = new BABYLON.Scene(engine);
  scene.clearColor = new BABYLON.Color4(0, 0, 0, 0);

  // 자동 회전 카메라
  const camera = new BABYLON.ArcRotateCamera(
    "camera",
    BABYLON.Tools.ToRadians(45),
    BABYLON.Tools.ToRadians(60),
    10,
    BABYLON.Vector3.Zero(),
    scene
  );
  camera.attachControl(canvas, true);
  camera.wheelDeltaPercentage = 0.01;

  // 그림자가 있는 최적화된 조명
  const light = new BABYLON.DirectionalLight(
    "light",
    new BABYLON.Vector3(-1, -2, -1),
    scene
  );
  light.position = new BABYLON.Vector3(20, 40, 20);
  light.intensity = 0.7;

  const ambientLight = new BABYLON.HemisphericLight(
    "ambient",
    new BABYLON.Vector3(0, 1, 0),
    scene
  );
  ambientLight.intensity = 0.3;

  // 그림자 생성기
  const shadowGenerator = new BABYLON.ShadowGenerator(1024, light);
  shadowGenerator.useExponentialShadowMap = true;

  // 최적화가 포함된 모델 로드
  BABYLON.SceneLoader.LoadAssetContainer(
    "",
    modelUrl,
    scene,
    (container) => {
      container.addAllToScene();

      // 모든 메시에 그림자 적용
      container.meshes.forEach(mesh => {
        mesh.receiveShadows = true;
        shadowGenerator.addShadowCaster(mesh);
      });

      // 자동 회전
      scene.registerBeforeRender(() => {
        container.meshes[0].rotation.y += 0.01;
      });
    }
  );

  // 렌더 루프
  engine.runRenderLoop(() => {
    scene.render();
  });

  // 크기 조정 처리
  window.addEventListener('resize', () => {
    engine.resize();
  });
}

// 압축 비교
const modelSizes = {
  uncompressed: "26MB",
  draco: "5MB (-80%)",
  meshopt: "4MB (-85%)",
  quantized: "8MB (-70%)"
};

// Three.js 텍스처 최적화
const textureLoader = new THREE.TextureLoader();
const texture = textureLoader.load('texture.jpg');
texture.minFilter = THREE.LinearMipmapLinearFilter;
texture.magFilter = THREE.LinearFilter;
texture.generateMipmaps = true;

// Basis Universal 압축 (50-75% 더 작음)
import { BasisTextureLoader } from 'three/examples/jsm/loaders/BasisTextureLoader';
const basisLoader = new BasisTextureLoader();
basisLoader.setTranscoderPath('basis/');
basisLoader.load('texture.basis', (texture) => {
  material.map = texture;
});

// LOD (Level of Detail) 구현
const lod = new THREE.LOD();

// 고상세 (클로즈업)
const highDetail = await loadModel('model-300k.glb');
lod.addLevel(highDetail, 0);

// 중상세
const mediumDetail = await loadModel('model-60k.glb');
lod.addLevel(mediumDetail, 50);

// 저상세 (먼 거리)
const lowDetail = await loadModel('model-15k.glb');
lod.addLevel(lowDetail, 100);

scene.add(lod);

// 플레이스홀더가 있는 점진적 로딩
class LazyModel {
  constructor(placeholderUrl, highQualityUrl) {
    this.placeholder = placeholderUrl;
    this.highQuality = highQualityUrl;
    this.loaded = false;
  }

  async load(scene, callback) {
    // 저해상도 플레이스홀더를 즉시 로드
    const placeholder = await this.loadGLB(this.placeholder);
    scene.add(placeholder);
    callback(placeholder);

    // 백그라운드에서 고해상도 로드
    const highQuality = await this.loadGLB(this.highQuality);

    // 부드러운 전환
    highQuality.visible = false;
    scene.add(highQuality);

    // 페이드 전환
    this.fadeTransition(placeholder, highQuality, () => {
      scene.remove(placeholder);
      this.loaded = true;
    });
  }

  fadeTransition(out, in, complete) {
    const duration = 500; // ms
    const start = performance.now();

    function animate() {
      const elapsed = performance.now() - start;
      const progress = Math.min(elapsed / duration, 1);

      out.material.opacity = 1 - progress;
      in.material.opacity = progress;

      if (progress < 1) {
        requestAnimationFrame(animate);
      } else {
        in.visible = true;
        complete();
      }
    }
    animate();
  }
}

// FPS 카운터 및 성능 지표
class PerformanceMonitor {
  constructor(renderer) {
    this.renderer = renderer;
    this.fps = 0;
    this.frame = 0;
    this.lastTime = performance.now();

    // GPU 메모리 모니터링
    this.memory = {
      geometries: 0,
      textures: 0,
      programs: 0
    };
  }

  update() {
    this.frame++;
    const currentTime = performance.now();

    if (currentTime >= this.lastTime + 1000) {
      this.fps = (this.frame * 1000) / (currentTime - this.lastTime);
      this.frame = 0;
      this.lastTime = currentTime;

      // 메모리 통계 업데이트
      const info = this.renderer.info;
      this.memory = {
        geometries: info.memory.geometries,
        textures: info.memory.textures,
        programs: info.programs.length
      };

      console.log(`FPS: ${this.fps.toFixed(1)} | ` +
                  `Geometries: ${this.memory.geometries} | ` +
                  `Textures: ${this.memory.textures}`);
    }
  }
}

<div class="model-viewer-container">
  <!-- SEO 친화적 플레이스홀더 -->
  <img
    src="model-preview.jpg"
    alt="제품명의 3D 모델"
    loading="lazy"
    style="position: absolute; width: 100%; height: 100%;"
    id="placeholder"
  />

  <!-- 3D 캔버스 (초기에는 숨김) -->
  <canvas
    id="viewer-canvas"
    style="display: none;"
    aria-label="인터랙티브 3D 모델 뷰어"
  />

  <!-- 로딩 인디케이터 -->
  <div class="loading-spinner" style="display: none;">
    3D 모델 로딩 중...
  </div>
</div>

<script>
// 점진적 향상
if (WebGL2RenderingContext) {
  // 3D 뷰어 로드
  loadViewer().then(() => {
    document.getElementById('placeholder').style.display = 'none';
    document.getElementById('viewer-canvas').style.display = 'block';
  });
} else {
  // 정적 이미지로 폴백
  console.log('WebGL이 지원되지 않음');
}
</script>

<script type="application/ld+json">
{
  "@context": "https://schema.org/",
  "@type": "3DModel",
  "name": "제품명 3D 모델",
  "description": "제품명의 인터랙티브 3D 뷰",
  "image": "https://example.com/model-preview.jpg",
  "encoding": {
    "@type": "3DModelEncoding",
    "encodingFormat": "model/gltf-binary",
    "contentUrl": "https://example.com/model.glb"
  }
}
</script>

// 기기 기반 적응형 품질
function getQualitySettings() {
  const isMobile = /iPhone|iPad|Android/i.test(navigator.userAgent);
  const gpu = detectGPUTier();

  if (isMobile) {
    return {
      pixelRatio: Math.min(window.devicePixelRatio, 2),
      shadowMapSize: 512,
      textureSize: 1024,
      antialias: false,
      modelQuality: 'standard' // 30k 폴리곤
    };
  }

  // 데스크톱 설정
  return {
    pixelRatio: window.devicePixelRatio,
    shadowMapSize: 2048,
    textureSize: 2048,
    antialias: true,
    modelQuality: gpu.tier > 2 ? 'ultra' : 'pro'
  };
}

// Modelfy 3D 모델용 원클릭 임베드 코드
function generateEmbedCode(modelId, options = {}) {
  const defaults = {
    width: '100%',
    height: '500px',
    autoRotate: true,
    background: 'transparent',
    controls: true,
    quality: 'auto'
  };

  const settings = { ...defaults, ...options };

  return `
<!-- Modelfy 3D Viewer -->
<iframe
  src="https://modelfy3d.com/embed/${modelId}"
  width="${settings.width}"
  height="${settings.height}"
  frameborder="0"
  allow="autoplay; fullscreen; xr-spatial-tracking"
  data-auto-rotate="${settings.autoRotate}"
  data-background="${settings.background}"
  data-controls="${settings.controls}"
  data-quality="${settings.quality}"
  loading="lazy"
></iframe>
  `.trim();
}

// 클립보드에 복사 기능
function copyEmbedCode() {
  const code = generateEmbedCode('your-model-id', {
    width: '800px',
    height: '600px'
  });

  navigator.clipboard.writeText(code).then(() => {
    alert('임베드 코드가 클립보드에 복사되었습니다!');
  });
}

// 최적화 전
const unoptimized = {
  fileSize: "26MB",
  loadTime: "18s",
  fps: "15 (모바일)",
  memory: "450MB"
};

// 최적화 후
const optimized = {
  fileSize: "2.5MB (-90%)",
  loadTime: "2.8s (-84%)",
  fps: "45 (모바일)",
  memory: "95MB (-79%)"
};