Search the Community

Hi all, in my project I'm using incremental loading in order to split large scene files in small pieces. In the incremental files creation I'm trying to use Draco encoding to reduce the file size and speed up the loading process (certainly then should be implemented decoding when reading the file). I'm using the following code but the resulting encoded data is larger than the original data. I ask you first of all if the reasoning I'm doing makes sense and then if someone can explain to me where I'm wrong. Thanks a lot, Matteo createDelayLoadingFileData: function (meshOrGeometry, isMesh) { var result = { positions: meshOrGeometry.positions, indices: meshOrGeometry.indices, normals: meshOrGeometry.normals, }; if (meshOrGeometry.uvs) { result.uvs = meshOrGeometry.uvs; } if (meshOrGeometry.uvs2) { result.uvs2 = meshOrGeometry.uvs2; } if (meshOrGeometry.colors) { result.colors = meshOrGeometry.colors; } if (meshOrGeometry.matricesIndices) { result.matricesIndices = meshOrGeometry.matricesIndices; } if (meshOrGeometry.matricesWeights) { result.matricesWeights = meshOrGeometry.matricesWeights; } if (isMesh && meshOrGeometry.subMeshes) { result.subMeshes = meshOrGeometry.subMeshes; } // --------------------------------------------------------------------- // Test draco encoding // --------------------------------------------------------------------- const mesh = { indices: new Uint32Array(result.indices), positions: new Float32Array(result.positions), normals: new Float32Array(result.normals), uvs: new Float32Array(result.uvs) }; const encoderModule = DracoEncoderModule(); const encoder = new encoderModule.Encoder(); const meshBuilder = new encoderModule.MeshBuilder(); const dracoMesh = new encoderModule.Mesh(); const numFaces = mesh.indices.length / 3; const numPoints = mesh.positions.length; meshBuilder.AddFacesToMesh(dracoMesh, numFaces, mesh.indices); meshBuilder.AddFloatAttributeToMesh(dracoMesh, encoderModule.POSITION, numPoints, 3, mesh.positions); if (result.hasOwnProperty('normals')) { meshBuilder.AddFloatAttributeToMesh( dracoMesh, encoderModule.NORMAL, numPoints, 3, mesh.normals); } if (result.hasOwnProperty('colors')) { meshBuilder.AddFloatAttributeToMesh( dracoMesh, encoderModule.COLOR, numPoints, 3, mesh.colors); } if (result.hasOwnProperty('uvs')) { meshBuilder.AddFloatAttributeToMesh( dracoMesh, encoderModule.TEX_COORD, numPoints, 3, mesh.uvs); } var method = "edgebreaker"; // test method if (method === "edgebreaker") { encoder.SetEncodingMethod(encoderModule.MESH_EDGEBREAKER_ENCODING); } else if (method === "sequential") { encoder.SetEncodingMethod(encoderModule.MESH_SEQUENTIAL_ENCODING); } const encodedData = new encoderModule.DracoInt8Array(); // Use default encoding setting. const encodedLen = encoder.EncodeMeshToDracoBuffer(dracoMesh, encodedData); // Copy encoded data to buffer. const outputArray = []; for (let i = 0; i < encodedLen; ++i) { outputArray.push(encodedData.GetValue(i)); } encoderModule.destroy(dracoMesh); encoderModule.destroy(encodedData); encoderModule.destroy(encoder); encoderModule.destroy(meshBuilder); result.dracoData = outputArray; result.dracoDataLen = outputArray.length; // --------------------------------------------------------------------- return result; }

I tried to display the following DRACO format glb model with Babylon JS Sandbox. https://github.com/mrdoob/three.js/blob/dev/examples/models/gltf/LittlestTokyo.glb However, the following error occurred and the model was not displayed. babylonjs.loaders.min.js:1 Uncaught (in promise) Error: #/meshes/38/primitives/0: undefined at babylonjs.loaders.min.js:1 (anonymous) @ babylonjs.loaders.min.js:1 Promise.then (async) (anonymous) @ babylonjs.loaders.min.js:1 Promise.then (async) p._loadAsync @ babylonjs.loaders.min.js:1 (anonymous) @ babylonjs.loaders.min.js:1 Promise.then (async) p.loadAsync @ babylonjs.loaders.min.js:1 (anonymous) @ babylonjs.loaders.min.js:1 Promise.then (async) l.loadAsync @ babylonjs.loaders.min.js:1 (anonymous) @ babylon.js:1 f @ babylon.js:1 n.onload @ babylon.js:1 load (async) m.ReadFile @ babylon.js:1 P._loadData @ babylon.js:1 P.Append @ babylon.js:1 P.Load @ babylon.js:1 (anonymous) @ babylon.js:1 P.LoadAsync @ babylon.js:1 n.reload @ babylon.js:1 n._processReload @ babylon.js:1 n.loadFiles @ babylon.js:1 n.drop @ babylon.js:1 e._dropHandler @ babylon.js:1 I confirmed that it can be displayed with BabylonJS Sandbox if it is a normal glb file which is not DRACO format. https://sketchfab.com/models/94b24a60dc1b48248de50bf087c0f042

Hi guys. I would like to avoid using a JSON base format in order to reduce assets size to the maximum. I would like to know what is the best geometry compression supported by babylon.js. It looks that babylon support gltf. So i guess we can use Open3dgc compression ? https://github.com/KhronosGroup/glTF/wiki/Open-3D-Graphics-Compression What other options do we have if we want to use LZMA compression ? OpenCTM ? Draco ? http://openctm.sourceforge.net/ https://github.com/google/draco Thanks for your time ! Cheers SK