@gkjohnson Sidenote, it is better to post JSFiddles that link to Three.js using version tags instead of pointing to master to that future people landing here can view working examples.
I run into different basises in practice, and having a tool would greatly simplify this. For example, DOM CSS 3D transforms are in one basis, data from the AI team where I work is another basis, and Three.js is in yet a third basis. Plus I’m sure other tools and frameworks out there have yet more basises.
Yeah, I think those are more rare cases, and anyone with those crazy coordinate systems can probably also do the crazy math.
I think that, for a great API that covers most cases, we can limit it to 3 perpendicular axes, with left/right handedness for each axis, and assuming the same units along each axis. Someone with more complicated cases can convert to a same-unit perpendicular-axes system prior to using the API.
I think I miscalculated the number of possible permutations earlier. If we have this API (for example):
THREE.setBasis({
up: {axis: 'z', handedness: 'left'},
left: {axis: '-x', handedness: 'right'},
forward: {axis: '-y', handedness: 'left'},
})
up means up on the display device, left means to the left on the display device, and forward means pointing into the display device.
For the first up option, we can have six possible values: z, -z, y, -y, x, -x, and two possible handedness values, left and right. This means, for up we can have 6 * 2, or 12, permutations.
For the next one (let’s say y), we can only use y or x axis variants. This means 8 possible permutations for the second options (because x, -x, y, and -y for axes and left, right for handedness which means 4 * 2 = 8.
For the last option, we’re left with 2*2 = 4 permutations.
So the total permutations is 12 * 8 * 4, or 384.
If we can provide a generic API for this, no one would ever have any more questions (well, they would, but we’d simply point them to the API and they’d be on their way).
Not all systems are right-handed. CSS 3D is left-handed, with -Z forward, -X left, -Y up. Here’s a fiddle: Edit fiddle - JSFiddle - Code Playground
I bet there must exist tools that have a mix of left and right handedness per axis, but I haven’t had to use any yet.
I don’t think we’d need to manually write matrices in a map for the solution. I think we can generate a transform to get a sub-tree rendering as expected in Three-space.
However, I’m not sure that all Three.js APIs would be able operate on those objects as we expect. For example, certain APIs expect Y to be up and operate on world transforms, so my guess is there may be problems when the APIs try to operate on any objects in a sub-tree with the root basis transform applied (maybe trying to rotate something manually might go the wrong direction, or etc).
Hmmmm… speaking of CSS 3D transforms, the THREE.CSS3DRenderer does do some sort of transform to output Three.js matrices into the DOM basis. I wonder what we can learn from that example.
I think this makes one thing obvious: it is east to work in one basis, where all tools operate in the same basis, then export to another basis. F.e., work in Three.js space, then finally export to CSS 3D. But the problems are in importing objects from foreign basis, then working with them using tools that expect the basis of the environment we imported into.