1

I am currently using josdirkson's SVG extrude script to form groups of 20-30 complex shapes. My goal is to individually manipulate each object as well as the group as a whole throughout the user's interaction. I have been able to achieve this so far, however, my load time can range from 7 to 20 seconds on a variety of devices. I was wondering if a lot of this could be just inherent in script that converts all the SVG paths into bezierCurves, etc. If this was the case, I was wondering if a viable solution might be to somehow export from Three.js to a JSON or other file type which would then be the subsequent data source users are loading from. I was looking at this thread briefly, but didn't want to get too far ahead of myself before crowd sourcing a solution! Any advice or input is greatly appreciated! Thank you!

Community
  • 1
  • 1
ChrisTalbot
  • 181
  • 1
  • 7

1 Answers1

1

Best advice I can give you is to have a look at the profile of the loading-process. To test this in chrome, you can add pairs of console.profile('something'); and console.profileEnd('something'); calls to your code for the region you want to analyze. Then open up the Profiles-panel in the devtools and reload the page / re-run the javascript.

This will probably be able to tell you if you are right about your assumptions. At least it will help you find the thing the time in JS is spent on.

And if that's really the case, you could do some caching of geometries, using geometry.toJSON() and new THREE.JSONLoader().parse(json) to save and restore the geometries. In most cases this should be significantly faster than somehow computing the geometry. (note: there are other, more space-efficient and even more performant ways to do the caching, but the json-format is a good place to start)

Martin Schuhfuß
  • 6,814
  • 1
  • 36
  • 44
  • Thank you! I'll try the profiling start/end triggers later tonight. This is getting a little beyond my skill level, but I'm having fun figuring it out! Here is a screenshot I took of a chrome recording: http://i.imgur.com/ueXm1Yu.png Can I export a group to JSON and preserve individual object identities? Or perhaps move up the hierarchy to exporting the whole scene? – ChrisTalbot Jan 24 '17 at 00:23
  • 1
    ok, amazing. That indeed looks like the initial construction of the meshes is the problem. The first thing you could try is to use a faster triangulation-library, like the earcut-library by mapbox (see here: https://github.com/mrdoob/three.js/issues/5959#issuecomment-148334316). What I could also recommend would be to do the triangulation-work in a Worker, so you at least not freeze your browser with it. – Martin Schuhfuß Jan 24 '17 at 21:04
  • The newest development of this saga is that JSONLoader doesn't support extruded objects. I'm trying to figure out whether I need to re-work all of my SVG paths to be smaller or find another method to import objects. Delving into triangulation libraries seems a bit beyond my skill level. – ChrisTalbot Feb 02 '17 at 21:23
  • 1
    Oh, for that there is a simple hack: you just need to set the type to `Geometry` before serializing it: `extrudeGeom.type = 'Geometry';`. That way, it will get stored and restored as regular geometry. – Martin Schuhfuß Feb 03 '17 at 13:51
  • Excellent! The JSON load is already much faster than extruding from paths each time. My new problem lies in referencing the object tree produced from the JSON load. How can I work this inception-like children tree? http://i.imgur.com/JHAB33p.png Thank you for your help! I sent a DM on Twitter as well. – ChrisTalbot Feb 03 '17 at 19:40
  • 1
    Meet `Object3D.getObjectsByName()` :) https://github.com/mrdoob/three.js/blob/master/src/core/Object3D.js#L368 – Martin Schuhfuß Feb 03 '17 at 20:08