Three.js: GLTF2Loader๋Š” ์ข…์†์„ฑ์„ ํ•˜ํ–ฅ์‹์œผ๋กœ ๋กœ๋“œํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.

์— ๋งŒ๋“  2017๋…„ 08์›” 11์ผ  ยท  3์ฝ”๋ฉ˜ํŠธ  ยท  ์ถœ์ฒ˜: mrdoob/three.js

GLTF2Loader์˜ ํ˜„์žฌ ํŒจํ„ด์€ ๋‹ค์Œ๊ณผ ๊ฐ™์Šต๋‹ˆ๋‹ค.

class GLTF2Parser {
  loadMeshes () {

    return this._withDependencies( [

      'materials',
      'accessors'

    ] ).then( ( dependencies ) => {

      _each( json.meshes, ( meshDef ) => {

        var geometry = /* ... */;
        var material = dependencies.materials[ meshDef.material ];
        var mesh = new THREE.Mesh( geometry, material );
        // ...
        return mesh;

      } );
      // ...
      return meshes;

    } );

  }

  // ...
}

๊ฒฐ๊ณผ์ ์œผ๋กœ ๋ชจ๋“  ์ ‘๊ทผ์ž(๋ชจ๋“  .bin ๋ฒ„ํผ ํŒŒ์ผ์— ์ฐจ๋ก€๋กœ ์ข…์†๋จ)๋Š” ๋ฉ”์‹œ๊ฐ€ ์ƒ์„ฑ๋˜๊ธฐ ์ „์— ๋กœ๋“œ๋ฉ๋‹ˆ๋‹ค. ๋ชจ๋“  ๋ฒ„ํผ๊ฐ€ ์‹ค์ œ๋กœ ํ•„์š”ํ•˜์ง€ ์•Š์€ ๊ฒฝ์šฐ ๋ฌธ์ œ๊ฐ€ ๋ฐœ์ƒํ•ฉ๋‹ˆ๋‹ค. ์˜ˆ๋ฅผ ๋“ค์–ด:

  • (์ดˆ์•ˆ) KHR_draco_mesh_compression ํ™•์žฅ์„ ์‚ฌ์šฉํ•˜๋ฉด ์ž์‚ฐ์— Draco .bin ํŒŒ์ผ ๋ฐ ์••์ถ•๋˜์ง€ ์•Š์€ .bin ํ•  ์ˆ˜ ์žˆ์œผ๋ฏ€๋กœ Draco๋ฅผ ์ง€์›ํ•˜์ง€ ์•Š๋Š” ํด๋ผ์ด์–ธํŠธ๋Š” ์ตœ์ ํ™”๋˜์ง€ ์•Š์€ ๋ฒ„์ „์œผ๋กœ ๊ณ„์† ํด๋ฐฑํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋‘ ๊ฒฝ์šฐ ๋ชจ๋‘ ๋ฒ„ํผ ์ค‘ ํ•˜๋‚˜๋งŒ ๋กœ๋“œํ•˜๋ ค๊ณ  ํ•ฉ๋‹ˆ๋‹ค.
  • (์ดˆ์•ˆ) MSFT_lod ํ™•์žฅ์—๋Š” ๋ณธ์งˆ์ ์œผ๋กœ ๋™์ผํ•œ ๋ฌธ์ œ๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค.
  • ๋น„๋ก ๋‚ด๊ฐ€ ์–ด๋–ค ์˜ˆ๋ฅผ ๋ณด์ง€๋Š” ์•Š์•˜์ง€๋งŒ ๋™์ผํ•œ ๋ฉ”์‰ฌ์— ๊ธˆ์† ๊ฑฐ์นœ ์žฌ๋ฃŒ์™€ ์ŠคํŽ™ ๊ด‘ํƒ ์žฌ๋ฃŒ๋ฅผ ๋ชจ๋‘ ์„ ์–ธํ•˜๋Š” ๊ฒƒ์€ ์ด๋ฏธ ์œ ํšจํ•ฉ๋‹ˆ๋‹ค. ๋กœ๋”๋Š” ์„ฑ๋Šฅ ๋ฐ ๊ธฐ๋Šฅ ์ง€์›์— ๋”ฐ๋ผ ์‚ฌ์šฉํ•  ๊ฒƒ์„ ์„ ํƒํ•  ์ˆ˜ ์žˆ์ง€๋งŒ ํ™•์‹คํžˆ ' ๋‘˜ ๋‹ค์— ๋Œ€ํ•œ ํ…์Šค์ฒ˜๋ฅผ ์š”์ฒญํ•˜๊ณ  ์‹ถ์Šต๋‹ˆ๋‹ค. ํ˜„์žฌ, ์ด๊ฒƒ์€ ์ •ํ™•ํžˆ GLTF2Loader๊ฐ€ ํ•˜๋Š” ์ผ์ž…๋‹ˆ๋‹ค.

๋”ฐ๋ผ์„œ ์ข…์†์„ฑ์„ ํ•˜ํ–ฅ์‹์œผ๋กœ ์š”์ฒญํ•˜๋ ค๋ฉด GLTF2Loader๋ฅผ ์žฌ๊ตฌ์„ฑํ•ด์•ผ ํ•  ์ˆ˜๋„ ์žˆ๋‹ค๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค. ์ œ์•ˆ๋œ ๊ตฌ๋ฌธ(๋ชจ๋ฐฉํ•  ๊ธฐ์กด ์˜ˆ์ œ๊ฐ€ ์—†๋Š” ๊ฒฝ์šฐ)์€ ๋‹ค์Œ๊ณผ ๊ฐ™์Šต๋‹ˆ๋‹ค.

class GLTF2Parser {
  loadMesh ( meshDef ) {

     return Promise.all( [

       this.loadGeometry( meshDef.primitives ),
       this.loadMaterial( meshDef.material )

     ] ).then( ( dependencies ) => {

       var [geometry, material] = dependencies;
       var mesh new THREE.Mesh( geometry, material );
       // ...
       return mesh;

     } );

  }

  // ...
}

^ ๊ฐ„๊ฒฐ์„ฑ์„ ์œ„ํ•ด ES6์„ ์‚ฌ์šฉํ•˜์ง€๋งŒ ์‹ค์ œ๋กœ examples/js์— ์ฒดํฌ์ธํ•  ์ˆ˜๋Š” ์—†์Šต๋‹ˆ๋‹ค.

๋ฆฌํŒฉํ† ๋ง์˜ ์—ฌ์ •์„ ์‹œ์ž‘ํ•˜๊ธฐ ์ „์— ์ด๊ฒƒ์ด ์–ด๋–ป๊ฒŒ ์ž‘๋™ํ•ด์•ผ ํ•˜๋Š”์ง€์— ๋Œ€ํ•œ ๊ฐ•๋ ฅํ•œ ์„ ํ˜ธ ์‚ฌํ•ญ์ด ์žˆ์Šต๋‹ˆ๊นŒ? ์ด ๋ณ€๊ฒฝ์ด ์ ์ง„์ ์œผ๋กœ ๋ฐœ์ƒํ•  ์ˆ˜ ์žˆ๊ธฐ๋ฅผ ๋ฐ”๋ผ๊ณ  ์žˆ์ง€๋งŒ ํ™•์ธ์ด ํ•„์š”ํ•ฉ๋‹ˆ๋‹ค.

/cc @takahirox

๊ฐ€์žฅ ์œ ์šฉํ•œ ๋Œ“๊ธ€

gltf๋ฅผ ๋กœ๋“œํ•˜๊ธฐ ์œ„ํ•œ ๊ด€๋ฆฌ ๊ฐ€๋Šฅํ•œ ์ฝ”๋“œ๋ฅผ ์–ป์œผ๋ ค๋ฉด Internet Explorer๋ฅผ ๋ฒ„๋ ค๋„ ๊ดœ์ฐฎ์„ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค ๐Ÿ‘Œ

๊ทธ๋ž˜์„œ Promise s ๋ฉ‹์ง€๋‹ค. ES6...์€ ๊ธฐ๋Šฅ ๋ฐ ๋ธŒ๋ผ์šฐ์ € ํ˜ธํ™˜์„ฑ์— ๋”ฐ๋ผ ๋‹ค๋ฆ…๋‹ˆ๋‹ค.

๋ชจ๋“  3 ๋Œ“๊ธ€

๋ฆฌํŒฉํ† ๋ง์— ๋™์˜ํ•ฉ๋‹ˆ๋‹ค.
IMO _withDependencies ์™€ _each ์€ ์•ฝ๊ฐ„ ๋ณต์žกํ•ฉ๋‹ˆ๋‹ค.

BTW, @mrdoob Promise ๋ฐ ES6 ์‚ฌ์šฉ์„ ํ—ˆ์šฉํ•ฉ๋‹ˆ๊นŒ?

gltf๋ฅผ ๋กœ๋“œํ•˜๊ธฐ ์œ„ํ•œ ๊ด€๋ฆฌ ๊ฐ€๋Šฅํ•œ ์ฝ”๋“œ๋ฅผ ์–ป์œผ๋ ค๋ฉด Internet Explorer๋ฅผ ๋ฒ„๋ ค๋„ ๊ดœ์ฐฎ์„ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค ๐Ÿ‘Œ

๊ทธ๋ž˜์„œ Promise s ๋ฉ‹์ง€๋‹ค. ES6...์€ ๊ธฐ๋Šฅ ๋ฐ ๋ธŒ๋ผ์šฐ์ € ํ˜ธํ™˜์„ฑ์— ๋”ฐ๋ผ ๋‹ค๋ฆ…๋‹ˆ๋‹ค.

๋ฆฌํŒฉํ† ๋ง์— ๋Œ€ํ•ด @takahirox ์—๊ฒŒ ๊ฐ์‚ฌ๋“œ๋ฆฝ๋‹ˆ๋‹ค!

๋‚˜๋Š” ์ด๊ฒƒ์ด ๋‹ซํž ์ˆ˜ ์žˆ๋‹ค๊ณ  ์ƒ๊ฐํ•œ๋‹ค. ์ผ๋ถ€ ๋ถ€๋ถ„์€ ์—„๊ฒฉํ•˜๊ฒŒ ํ•˜ํ–ฅ์‹์ด์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ์—ฌ๋Ÿฌ ์žฅ๋ฉด์ด ์žˆ๋Š” ๋ชจ๋ธ์˜ ๊ฒฝ์šฐ ์–ธ์  ๊ฐ€๋Š” getMultiDependencies() ๋ฅผ ํ†ตํ•ด ๋…ธ๋“œ ๋˜๋Š” ์ ‘๊ทผ์ž๋ฅผ ๊ฒ€์ƒ‰ํ•˜์ง€ ์•Š๊ธฐ๋ฅผ ์›ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๊ทธ๋Ÿฌ๋‚˜ ์ง€๊ธˆ๊นŒ์ง€ ๋ณธ ๋ชจ๋“  ์˜ˆ์ œ ๋ชจ๋ธ์˜ ๊ฒฝ์šฐ ํ˜„์žฌ ๊ตฌ์กฐ๊ฐ€ ํ›จ์”ฌ ๋” ์ข‹์•„ ๋ณด์ž…๋‹ˆ๋‹ค.

์ด ํŽ˜์ด์ง€๊ฐ€ ๋„์›€์ด ๋˜์—ˆ๋‚˜์š”?
0 / 5 - 0 ๋“ฑ๊ธ‰