USDZExporter.js 8.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368
  1. import { zipSync, strToU8 } from '../libs/fflate.module.min.js';
  2. class USDZExporter {
  3. async parse( scene ) {
  4. let output = buildHeader();
  5. const materials = {};
  6. const textures = {};
  7. scene.traverse( ( object ) => {
  8. if ( object.isMesh ) {
  9. const geometry = object.geometry;
  10. const material = object.material;
  11. materials[ material.uuid ] = material;
  12. if ( material.map !== null ) textures[ material.map.uuid ] = material.map;
  13. if ( material.normalMap !== null ) textures[ material.normalMap.uuid ] = material.normalMap;
  14. if ( material.aoMap !== null ) textures[ material.aoMap.uuid ] = material.aoMap;
  15. if ( material.roughnessMap !== null ) textures[ material.roughnessMap.uuid ] = material.roughnessMap;
  16. if ( material.metalnessMap !== null ) textures[ material.metalnessMap.uuid ] = material.metalnessMap;
  17. if ( material.emissiveMap !== null ) textures[ material.emissiveMap.uuid ] = material.emissiveMap;
  18. output += buildXform( object, buildMesh( geometry, material ) );
  19. }
  20. } );
  21. output += buildMaterials( materials );
  22. output += buildTextures( textures );
  23. const files = {};
  24. for ( const uuid in textures ) {
  25. const texture = textures[ uuid ];
  26. files[ 'Texture_' + texture.id + '.jpg' ] = await imgToU8( texture.image );
  27. }
  28. return zipSync( { 'model.usda': strToU8( output ), 'textures': files }, { level: 0 } );
  29. }
  30. }
  31. async function imgToU8( image ) {
  32. if ( ( typeof HTMLImageElement !== 'undefined' && image instanceof HTMLImageElement ) ||
  33. ( typeof HTMLCanvasElement !== 'undefined' && image instanceof HTMLCanvasElement ) ||
  34. ( typeof OffscreenCanvas !== 'undefined' && image instanceof OffscreenCanvas ) ||
  35. ( typeof ImageBitmap !== 'undefined' && image instanceof ImageBitmap ) ) {
  36. const canvas = document.createElement( 'canvas' );
  37. canvas.width = Math.min( 1024, image.width );
  38. canvas.height = Math.min( 1024, image.height );
  39. const context = canvas.getContext( '2d' );
  40. context.drawImage( image, 0, 0, canvas.width, canvas.height );
  41. const blob = await new Promise( resolve => canvas.toBlob( resolve, 'image/jpeg', 1 ) );
  42. return new Uint8Array( await blob.arrayBuffer() );
  43. }
  44. }
  45. //
  46. function buildHeader() {
  47. return `#usda 1.0
  48. (
  49. customLayerData = {
  50. string creator = "Three.js USDZExporter"
  51. }
  52. metersPerUnit = 1
  53. upAxis = "Y"
  54. )
  55. `;
  56. }
  57. // Xform
  58. function buildXform( object, define ) {
  59. const name = 'Object_' + object.id;
  60. const transform = buildMatrix( object.matrixWorld );
  61. return `def Xform "${ name }"
  62. {
  63. matrix4d xformOp:transform = ${ transform }
  64. uniform token[] xformOpOrder = ["xformOp:transform"]
  65. ${ define }
  66. }
  67. `;
  68. }
  69. function buildMatrix( matrix ) {
  70. const array = matrix.elements;
  71. return `( ${ buildMatrixRow( array, 0 ) }, ${ buildMatrixRow( array, 4 ) }, ${ buildMatrixRow( array, 8 ) }, ${ buildMatrixRow( array, 12 ) } )`;
  72. }
  73. function buildMatrixRow( array, offset ) {
  74. return `(${ array[ offset + 0 ] }, ${ array[ offset + 1 ] }, ${ array[ offset + 2 ] }, ${ array[ offset + 3 ] })`;
  75. }
  76. // Mesh
  77. function buildMesh( geometry, material ) {
  78. const name = 'Geometry_' + geometry.id;
  79. const attributes = geometry.attributes;
  80. const count = attributes.position.count;
  81. return `def Mesh "${ name }"
  82. {
  83. int[] faceVertexCounts = [${ buildMeshVertexCount( geometry ) }]
  84. int[] faceVertexIndices = [${ buildMeshVertexIndices( geometry ) }]
  85. rel material:binding = </Materials/Material_${ material.id }>
  86. normal3f[] normals = [${ buildVector3Array( attributes.normal, count )}] (
  87. interpolation = "vertex"
  88. )
  89. point3f[] points = [${ buildVector3Array( attributes.position, count )}]
  90. float2[] primvars:st = [${ buildVector2Array( attributes.uv, count )}] (
  91. elementSize = 1
  92. interpolation = "vertex"
  93. )
  94. int[] primvars:st:indices
  95. uniform token subdivisionScheme = "none"
  96. }
  97. `;
  98. }
  99. function buildMeshVertexCount( geometry ) {
  100. const count = geometry.index !== null ? geometry.index.array.length : geometry.attributes.position.count;
  101. return Array( count / 3 ).fill( 3 ).join( ', ' );
  102. }
  103. function buildMeshVertexIndices( geometry ) {
  104. if ( geometry.index !== null ) {
  105. return geometry.index.array.join( ', ' );
  106. }
  107. const array = [];
  108. const length = geometry.attributes.position.count;
  109. for ( let i = 0; i < length; i ++ ) {
  110. array.push( i );
  111. }
  112. return array.join( ', ' );
  113. }
  114. function buildVector3Array( attribute, count ) {
  115. if ( attribute === undefined ) {
  116. console.warn( 'USDZExporter: Normals missing.' );
  117. return Array( count ).fill( '(0, 0, 0)' ).join( ', ' );
  118. }
  119. const array = [];
  120. const data = attribute.array;
  121. for ( let i = 0; i < data.length; i += 3 ) {
  122. array.push( `(${ data[ i + 0 ] }, ${ data[ i + 1 ] }, ${ data[ i + 2 ] })` );
  123. }
  124. return array.join( ', ' );
  125. }
  126. function buildVector2Array( attribute, count ) {
  127. if ( attribute === undefined ) {
  128. console.warn( 'USDZExporter: UVs missing.' );
  129. return Array( count ).fill( '(0, 0)' ).join( ', ' );
  130. }
  131. const array = [];
  132. const data = attribute.array;
  133. for ( let i = 0; i < data.length; i += 2 ) {
  134. array.push( `(${ data[ i + 0 ] }, ${ 1 - data[ i + 1 ] })` );
  135. }
  136. return array.join( ', ' );
  137. }
  138. // Materials
  139. function buildMaterials( materials ) {
  140. const array = [];
  141. for ( const uuid in materials ) {
  142. const material = materials[ uuid ];
  143. array.push( buildMaterial( material ) );
  144. }
  145. return `def "Materials"
  146. {
  147. ${ array.join( '' ) }
  148. }
  149. `;
  150. }
  151. function buildMaterial( material ) {
  152. // https://graphics.pixar.com/usd/docs/UsdPreviewSurface-Proposal.html
  153. const pad = ' ';
  154. const parameters = [];
  155. if ( material.map !== null ) {
  156. parameters.push( `${ pad }color3f inputs:diffuseColor.connect = </Textures/Texture_${ material.map.id }.outputs:rgb>` );
  157. } else {
  158. parameters.push( `${ pad }color3f inputs:diffuseColor = ${ buildColor( material.color ) }` );
  159. }
  160. if ( material.emissiveMap !== null ) {
  161. parameters.push( `${ pad }color3f inputs:emissiveColor.connect = </Textures/Texture_${ material.emissiveMap.id }.outputs:rgb>` );
  162. } else {
  163. parameters.push( `${ pad }color3f inputs:emissiveColor = ${ buildColor( material.emissive ) }` );
  164. }
  165. if ( material.normalMap !== null ) {
  166. parameters.push( `${ pad }normal3f inputs:normal.connect = </Textures/Texture_${ material.normalMap.id }.outputs:rgb>` );
  167. }
  168. if ( material.aoMap !== null ) {
  169. parameters.push( `${ pad }float inputs:occlusion.connect = </Textures/Texture_${ material.aoMap.id }.outputs:r>` );
  170. }
  171. if ( material.roughnessMap !== null ) {
  172. parameters.push( `${ pad }float inputs:roughness.connect = </Textures/Texture_${ material.roughnessMap.id }.outputs:g>` );
  173. } else {
  174. parameters.push( `${ pad }float inputs:roughness = ${ material.roughness }` );
  175. }
  176. if ( material.metalnessMap !== null ) {
  177. parameters.push( `${ pad }float inputs:metallic.connect = </Textures/Texture_${ material.metalnessMap.id }.outputs:b>` );
  178. } else {
  179. parameters.push( `${ pad }float inputs:metallic = ${ material.metalness }` );
  180. }
  181. return `
  182. def Material "Material_${ material.id }"
  183. {
  184. token outputs:surface.connect = </Materials/Material_${ material.id }/PreviewSurface.outputs:surface>
  185. def Shader "PreviewSurface"
  186. {
  187. uniform token info:id = "UsdPreviewSurface"
  188. ${ parameters.join( '\n' ) }
  189. int inputs:useSpecularWorkflow = 0
  190. token outputs:surface
  191. }
  192. }
  193. `;
  194. }
  195. function buildTextures( textures ) {
  196. const array = [];
  197. for ( const uuid in textures ) {
  198. const texture = textures[ uuid ];
  199. array.push( buildTexture( texture ) );
  200. }
  201. return `def "Textures"
  202. {
  203. ${ array.join( '' ) }
  204. }
  205. `;
  206. }
  207. function buildTexture( texture ) {
  208. return `
  209. def Shader "Texture_${ texture.id }"
  210. {
  211. uniform token info:id = "UsdUVTexture"
  212. asset inputs:file = @textures/Texture_${ texture.id }.jpg@
  213. token inputs:wrapS = "repeat"
  214. token inputs:wrapT = "repeat"
  215. float outputs:r
  216. float outputs:g
  217. float outputs:b
  218. float3 outputs:rgb
  219. }
  220. `;
  221. }
  222. function buildColor( color ) {
  223. return `(${ color.r }, ${ color.g }, ${ color.b })`;
  224. }
  225. export { USDZExporter };