USDZExporter.js 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608
  1. ( function () {
  2. class USDZExporter {
  3. async parse( scene, options = {
  4. ar: {
  5. anchoring: {
  6. type: 'plane'
  7. },
  8. planeAnchoring: {
  9. alignment: 'horizontal'
  10. }
  11. }
  12. } ) {
  13. const files = {};
  14. const modelFileName = 'model.usda';
  15. // model file should be first in USDZ archive so we init it here
  16. files[ modelFileName ] = null;
  17. let output = buildHeader();
  18. output += buildSceneStart( options );
  19. const materials = {};
  20. const textures = {};
  21. scene.traverseVisible( object => {
  22. if ( object.isMesh ) {
  23. const geometry = object.geometry;
  24. const material = object.material;
  25. if ( material.isMeshStandardMaterial ) {
  26. const geometryFileName = 'geometries/Geometry_' + geometry.id + '.usd';
  27. if ( ! ( geometryFileName in files ) ) {
  28. const meshObject = buildMeshObject( geometry );
  29. files[ geometryFileName ] = buildUSDFileAsString( meshObject );
  30. }
  31. if ( ! ( material.uuid in materials ) ) {
  32. materials[ material.uuid ] = material;
  33. }
  34. output += buildXform( object, geometry, material );
  35. } else {
  36. console.warn( 'THREE.USDZExporter: Unsupported material type (USDZ only supports MeshStandardMaterial)', object );
  37. }
  38. } else if ( object.isCamera ) {
  39. output += buildCamera( object );
  40. }
  41. } );
  42. output += buildSceneEnd();
  43. output += buildMaterials( materials, textures );
  44. files[ modelFileName ] = fflate.strToU8( output );
  45. output = null;
  46. for ( const id in textures ) {
  47. const texture = textures[ id ];
  48. const color = id.split( '_' )[ 1 ];
  49. const isRGBA = texture.format === 1023;
  50. const canvas = imageToCanvas( texture.image, color );
  51. const blob = await new Promise( resolve => canvas.toBlob( resolve, isRGBA ? 'image/png' : 'image/jpeg', 1 ) );
  52. files[ `textures/Texture_${id}.${isRGBA ? 'png' : 'jpg'}` ] = new Uint8Array( await blob.arrayBuffer() );
  53. }
  54. // 64 byte alignment
  55. // https://github.com/101arrowz/fflate/issues/39#issuecomment-777263109
  56. let offset = 0;
  57. for ( const filename in files ) {
  58. const file = files[ filename ];
  59. const headerSize = 34 + filename.length;
  60. offset += headerSize;
  61. const offsetMod64 = offset & 63;
  62. if ( offsetMod64 !== 4 ) {
  63. const padLength = 64 - offsetMod64;
  64. const padding = new Uint8Array( padLength );
  65. files[ filename ] = [ file, {
  66. extra: {
  67. 12345: padding
  68. }
  69. } ];
  70. }
  71. offset = file.length;
  72. }
  73. return fflate.zipSync( files, {
  74. level: 0
  75. } );
  76. }
  77. }
  78. function imageToCanvas( image, color ) {
  79. if ( typeof HTMLImageElement !== 'undefined' && image instanceof HTMLImageElement || typeof HTMLCanvasElement !== 'undefined' && image instanceof HTMLCanvasElement || typeof OffscreenCanvas !== 'undefined' && image instanceof OffscreenCanvas || typeof ImageBitmap !== 'undefined' && image instanceof ImageBitmap ) {
  80. const scale = 1024 / Math.max( image.width, image.height );
  81. const canvas = document.createElement( 'canvas' );
  82. canvas.width = image.width * Math.min( 1, scale );
  83. canvas.height = image.height * Math.min( 1, scale );
  84. const context = canvas.getContext( '2d' );
  85. context.drawImage( image, 0, 0, canvas.width, canvas.height );
  86. if ( color !== undefined ) {
  87. const hex = parseInt( color, 16 );
  88. const r = ( hex >> 16 & 255 ) / 255;
  89. const g = ( hex >> 8 & 255 ) / 255;
  90. const b = ( hex & 255 ) / 255;
  91. const imagedata = context.getImageData( 0, 0, canvas.width, canvas.height );
  92. const data = imagedata.data;
  93. for ( let i = 0; i < data.length; i += 4 ) {
  94. data[ i + 0 ] = data[ i + 0 ] * r;
  95. data[ i + 1 ] = data[ i + 1 ] * g;
  96. data[ i + 2 ] = data[ i + 2 ] * b;
  97. }
  98. context.putImageData( imagedata, 0, 0 );
  99. }
  100. return canvas;
  101. }
  102. }
  103. //
  104. const PRECISION = 7;
  105. function buildHeader() {
  106. return `#usda 1.0
  107. (
  108. customLayerData = {
  109. string creator = "Three.js USDZExporter"
  110. }
  111. metersPerUnit = 1
  112. upAxis = "Y"
  113. )
  114. `;
  115. }
  116. function buildSceneStart( options ) {
  117. return `def Xform "Root"
  118. {
  119. def Scope "Scenes" (
  120. kind = "sceneLibrary"
  121. )
  122. {
  123. def Xform "Scene" (
  124. customData = {
  125. bool preliminary_collidesWithEnvironment = 0
  126. string sceneName = "Scene"
  127. }
  128. sceneName = "Scene"
  129. )
  130. {
  131. token preliminary:anchoring:type = "${options.ar.anchoring.type}"
  132. token preliminary:planeAnchoring:alignment = "${options.ar.planeAnchoring.alignment}"
  133. `;
  134. }
  135. function buildSceneEnd() {
  136. return `
  137. }
  138. }
  139. }
  140. `;
  141. }
  142. function buildUSDFileAsString( dataToInsert ) {
  143. let output = buildHeader();
  144. output += dataToInsert;
  145. return fflate.strToU8( output );
  146. }
  147. // Xform
  148. function buildXform( object, geometry, material ) {
  149. const name = 'Object_' + object.id;
  150. const transform = buildMatrix( object.matrixWorld );
  151. if ( object.matrixWorld.determinant() < 0 ) {
  152. console.warn( 'THREE.USDZExporter: USDZ does not support negative scales', object );
  153. }
  154. return `def Xform "${name}" (
  155. prepend references = @./geometries/Geometry_${geometry.id}.usd@</Geometry>
  156. )
  157. {
  158. matrix4d xformOp:transform = ${transform}
  159. uniform token[] xformOpOrder = ["xformOp:transform"]
  160. rel material:binding = </Materials/Material_${material.id}>
  161. }
  162. `;
  163. }
  164. function buildMatrix( matrix ) {
  165. const array = matrix.elements;
  166. return `( ${buildMatrixRow( array, 0 )}, ${buildMatrixRow( array, 4 )}, ${buildMatrixRow( array, 8 )}, ${buildMatrixRow( array, 12 )} )`;
  167. }
  168. function buildMatrixRow( array, offset ) {
  169. return `(${array[ offset + 0 ]}, ${array[ offset + 1 ]}, ${array[ offset + 2 ]}, ${array[ offset + 3 ]})`;
  170. }
  171. // Mesh
  172. function buildMeshObject( geometry ) {
  173. const mesh = buildMesh( geometry );
  174. return `
  175. def "Geometry"
  176. {
  177. ${mesh}
  178. }
  179. `;
  180. }
  181. function buildMesh( geometry ) {
  182. const name = 'Geometry';
  183. const attributes = geometry.attributes;
  184. const count = attributes.position.count;
  185. return `
  186. def Mesh "${name}"
  187. {
  188. int[] faceVertexCounts = [${buildMeshVertexCount( geometry )}]
  189. int[] faceVertexIndices = [${buildMeshVertexIndices( geometry )}]
  190. normal3f[] normals = [${buildVector3Array( attributes.normal, count )}] (
  191. interpolation = "vertex"
  192. )
  193. point3f[] points = [${buildVector3Array( attributes.position, count )}]
  194. float2[] primvars:st = [${buildVector2Array( attributes.uv, count )}] (
  195. interpolation = "vertex"
  196. )
  197. uniform token subdivisionScheme = "none"
  198. }
  199. `;
  200. }
  201. function buildMeshVertexCount( geometry ) {
  202. const count = geometry.index !== null ? geometry.index.count : geometry.attributes.position.count;
  203. return Array( count / 3 ).fill( 3 ).join( ', ' );
  204. }
  205. function buildMeshVertexIndices( geometry ) {
  206. const index = geometry.index;
  207. const array = [];
  208. if ( index !== null ) {
  209. for ( let i = 0; i < index.count; i ++ ) {
  210. array.push( index.getX( i ) );
  211. }
  212. } else {
  213. const length = geometry.attributes.position.count;
  214. for ( let i = 0; i < length; i ++ ) {
  215. array.push( i );
  216. }
  217. }
  218. return array.join( ', ' );
  219. }
  220. function buildVector3Array( attribute, count ) {
  221. if ( attribute === undefined ) {
  222. console.warn( 'USDZExporter: Normals missing.' );
  223. return Array( count ).fill( '(0, 0, 0)' ).join( ', ' );
  224. }
  225. const array = [];
  226. for ( let i = 0; i < attribute.count; i ++ ) {
  227. const x = attribute.getX( i );
  228. const y = attribute.getY( i );
  229. const z = attribute.getZ( i );
  230. array.push( `(${x.toPrecision( PRECISION )}, ${y.toPrecision( PRECISION )}, ${z.toPrecision( PRECISION )})` );
  231. }
  232. return array.join( ', ' );
  233. }
  234. function buildVector2Array( attribute, count ) {
  235. if ( attribute === undefined ) {
  236. console.warn( 'USDZExporter: UVs missing.' );
  237. return Array( count ).fill( '(0, 0)' ).join( ', ' );
  238. }
  239. const array = [];
  240. for ( let i = 0; i < attribute.count; i ++ ) {
  241. const x = attribute.getX( i );
  242. const y = attribute.getY( i );
  243. array.push( `(${x.toPrecision( PRECISION )}, ${1 - y.toPrecision( PRECISION )})` );
  244. }
  245. return array.join( ', ' );
  246. }
  247. // Materials
  248. function buildMaterials( materials, textures ) {
  249. const array = [];
  250. for ( const uuid in materials ) {
  251. const material = materials[ uuid ];
  252. array.push( buildMaterial( material, textures ) );
  253. }
  254. return `def "Materials"
  255. {
  256. ${array.join( '' )}
  257. }
  258. `;
  259. }
  260. function buildMaterial( material, textures ) {
  261. // https://graphics.pixar.com/usd/docs/UsdPreviewSurface-Proposal.html
  262. const pad = ' ';
  263. const inputs = [];
  264. const samplers = [];
  265. function buildTexture( texture, mapType, color ) {
  266. const id = texture.id + ( color ? '_' + color.getHexString() : '' );
  267. const isRGBA = texture.format === 1023;
  268. textures[ id ] = texture;
  269. return `
  270. def Shader "Transform2d_${mapType}" (
  271. sdrMetadata = {
  272. string role = "math"
  273. }
  274. )
  275. {
  276. uniform token info:id = "UsdTransform2d"
  277. float2 inputs:in.connect = </Materials/Material_${material.id}/uvReader_st.outputs:result>
  278. float2 inputs:scale = ${buildVector2( texture.repeat )}
  279. float2 inputs:translation = ${buildVector2( texture.offset )}
  280. float2 outputs:result
  281. }
  282. def Shader "Texture_${texture.id}_${mapType}"
  283. {
  284. uniform token info:id = "UsdUVTexture"
  285. asset inputs:file = @textures/Texture_${id}.${isRGBA ? 'png' : 'jpg'}@
  286. float2 inputs:st.connect = </Materials/Material_${material.id}/Transform2d_${mapType}.outputs:result>
  287. token inputs:wrapS = "repeat"
  288. token inputs:wrapT = "repeat"
  289. float outputs:r
  290. float outputs:g
  291. float outputs:b
  292. float3 outputs:rgb
  293. ${material.transparent || material.alphaTest > 0.0 ? 'float outputs:a' : ''}
  294. }`;
  295. }
  296. if ( material.side === THREE.DoubleSide ) {
  297. console.warn( 'THREE.USDZExporter: USDZ does not support double sided materials', material );
  298. }
  299. if ( material.map !== null ) {
  300. inputs.push( `${pad}color3f inputs:diffuseColor.connect = </Materials/Material_${material.id}/Texture_${material.map.id}_diffuse.outputs:rgb>` );
  301. if ( material.transparent ) {
  302. inputs.push( `${pad}float inputs:opacity.connect = </Materials/Material_${material.id}/Texture_${material.map.id}_diffuse.outputs:a>` );
  303. } else if ( material.alphaTest > 0.0 ) {
  304. inputs.push( `${pad}float inputs:opacity.connect = </Materials/Material_${material.id}/Texture_${material.map.id}_diffuse.outputs:a>` );
  305. inputs.push( `${pad}float inputs:opacityThreshold = ${material.alphaTest}` );
  306. }
  307. samplers.push( buildTexture( material.map, 'diffuse', material.color ) );
  308. } else {
  309. inputs.push( `${pad}color3f inputs:diffuseColor = ${buildColor( material.color )}` );
  310. }
  311. if ( material.emissiveMap !== null ) {
  312. inputs.push( `${pad}color3f inputs:emissiveColor.connect = </Materials/Material_${material.id}/Texture_${material.emissiveMap.id}_emissive.outputs:rgb>` );
  313. samplers.push( buildTexture( material.emissiveMap, 'emissive' ) );
  314. } else if ( material.emissive.getHex() > 0 ) {
  315. inputs.push( `${pad}color3f inputs:emissiveColor = ${buildColor( material.emissive )}` );
  316. }
  317. if ( material.normalMap !== null ) {
  318. inputs.push( `${pad}normal3f inputs:normal.connect = </Materials/Material_${material.id}/Texture_${material.normalMap.id}_normal.outputs:rgb>` );
  319. samplers.push( buildTexture( material.normalMap, 'normal' ) );
  320. }
  321. if ( material.aoMap !== null ) {
  322. inputs.push( `${pad}float inputs:occlusion.connect = </Materials/Material_${material.id}/Texture_${material.aoMap.id}_occlusion.outputs:r>` );
  323. samplers.push( buildTexture( material.aoMap, 'occlusion' ) );
  324. }
  325. if ( material.roughnessMap !== null && material.roughness === 1 ) {
  326. inputs.push( `${pad}float inputs:roughness.connect = </Materials/Material_${material.id}/Texture_${material.roughnessMap.id}_roughness.outputs:g>` );
  327. samplers.push( buildTexture( material.roughnessMap, 'roughness' ) );
  328. } else {
  329. inputs.push( `${pad}float inputs:roughness = ${material.roughness}` );
  330. }
  331. if ( material.metalnessMap !== null && material.metalness === 1 ) {
  332. inputs.push( `${pad}float inputs:metallic.connect = </Materials/Material_${material.id}/Texture_${material.metalnessMap.id}_metallic.outputs:b>` );
  333. samplers.push( buildTexture( material.metalnessMap, 'metallic' ) );
  334. } else {
  335. inputs.push( `${pad}float inputs:metallic = ${material.metalness}` );
  336. }
  337. if ( material.alphaMap !== null ) {
  338. inputs.push( `${pad}float inputs:opacity.connect = </Materials/Material_${material.id}/Texture_${material.alphaMap.id}_opacity.outputs:r>` );
  339. inputs.push( `${pad}float inputs:opacityThreshold = 0.0001` );
  340. samplers.push( buildTexture( material.alphaMap, 'opacity' ) );
  341. } else {
  342. inputs.push( `${pad}float inputs:opacity = ${material.opacity}` );
  343. }
  344. if ( material.isMeshPhysicalMaterial ) {
  345. inputs.push( `${pad}float inputs:clearcoat = ${material.clearcoat}` );
  346. inputs.push( `${pad}float inputs:clearcoatRoughness = ${material.clearcoatRoughness}` );
  347. inputs.push( `${pad}float inputs:ior = ${material.ior}` );
  348. }
  349. return `
  350. def Material "Material_${material.id}"
  351. {
  352. def Shader "PreviewSurface"
  353. {
  354. uniform token info:id = "UsdPreviewSurface"
  355. ${inputs.join( '\n' )}
  356. int inputs:useSpecularWorkflow = 0
  357. token outputs:surface
  358. }
  359. token outputs:surface.connect = </Materials/Material_${material.id}/PreviewSurface.outputs:surface>
  360. token inputs:frame:stPrimvarName = "st"
  361. def Shader "uvReader_st"
  362. {
  363. uniform token info:id = "UsdPrimvarReader_float2"
  364. token inputs:varname.connect = </Materials/Material_${material.id}.inputs:frame:stPrimvarName>
  365. float2 inputs:fallback = (0.0, 0.0)
  366. float2 outputs:result
  367. }
  368. ${samplers.join( '\n' )}
  369. }
  370. `;
  371. }
  372. function buildColor( color ) {
  373. return `(${color.r}, ${color.g}, ${color.b})`;
  374. }
  375. function buildVector2( vector ) {
  376. return `(${vector.x}, ${vector.y})`;
  377. }
  378. function buildCamera( camera ) {
  379. const name = camera.name ? camera.name : 'Camera_' + camera.id;
  380. const transform = buildMatrix( camera.matrixWorld );
  381. if ( camera.matrixWorld.determinant() < 0 ) {
  382. console.warn( 'THREE.USDZExporter: USDZ does not support negative scales', camera );
  383. }
  384. if ( camera.isOrthographicCamera ) {
  385. return `def Camera "${name}"
  386. {
  387. matrix4d xformOp:transform = ${transform}
  388. uniform token[] xformOpOrder = ["xformOp:transform"]
  389. float2 clippingRange = (${camera.near.toPrecision( PRECISION )}, ${camera.far.toPrecision( PRECISION )})
  390. float horizontalAperture = ${( ( Math.abs( camera.left ) + Math.abs( camera.right ) ) * 10 ).toPrecision( PRECISION )}
  391. float verticalAperture = ${( ( Math.abs( camera.top ) + Math.abs( camera.bottom ) ) * 10 ).toPrecision( PRECISION )}
  392. token projection = "orthographic"
  393. }
  394. `;
  395. } else {
  396. return `def Camera "${name}"
  397. {
  398. matrix4d xformOp:transform = ${transform}
  399. uniform token[] xformOpOrder = ["xformOp:transform"]
  400. float2 clippingRange = (${camera.near.toPrecision( PRECISION )}, ${camera.far.toPrecision( PRECISION )})
  401. float focalLength = ${camera.getFocalLength().toPrecision( PRECISION )}
  402. float focusDistance = ${camera.focus.toPrecision( PRECISION )}
  403. float horizontalAperture = ${camera.getFilmWidth().toPrecision( PRECISION )}
  404. token projection = "perspective"
  405. float verticalAperture = ${camera.getFilmHeight().toPrecision( PRECISION )}
  406. }
  407. `;
  408. }
  409. }
  410. THREE.USDZExporter = USDZExporter;
  411. } )();