Hello math experts, I’m just curious, are there any operations, for example for Matrix4, Quaternion, etc, that you sometimes wish Three.js included? And are there other libraries (even in other languages) that show these features?
Desires collected from the thread below:
coordinate system flexibility - F.e. specify up/down/left/right/forward/backward, and rotation handedness, to make it easy to apply maths between coordinate systems, useful with assets from external systems designed in alternate coordinate systems
Example libraries or frameworks with this feature:
Suica - HTML 3D elements with configurable coordinate system
Oito - Math library similar to Three math classes, with configurable coordinate system (at least axes, not sure about rotation handedness).
more interpolation methods - More ways to interpolate (f.e. animate) between the values of three.js math classes like Vectors, Euler, Quaternion, and Color.
It is not quite often, but sometimes I wish there is an easy way to use various orientations of the coordinate system (e.g. left-/right-handedness and X-/Y-/Z-upness). When making Suica I had to add a coordinate-system-agnostic behaviour, and it was harder than I had expected. It is not just a matter of a different matrix.
Hey, first of all, that’s pretty cool! I wasn’t aware of your HTML 3D lib Suica. We’re both making HTML elements for 3D. Mine’s over at lume.io. Sending love to our cousin A-Frame.
Yes, me too! It would be really useful to make people’s live easier when translating into different coordinate systems. For example
with Lume, I wrote some ugly maths to convert from Lume’s CSS3D/DOMMatrix coordinate system (f.e. Y down, left handed rotation) to Three’s coordinate system.
sometimes we have to import objects written in other coordinate systems, or we want to replicate them and their math functions in Three coordinate system.
That's really interesting that you made the coordinate system configurable in Suica. I'll get some inspiration from that. I've been wondering how to do it in Lume...
f.e. should I apply it at the whole scene level for all nodes in the scene, or per each element’s local space to keep it encapsulated?
If I do it at the whole scene level for all nodes, then it could negatively affect sub-elements written in a certain way, but if I do it at the local space level in an element’s ShadowRoot I could scope the local coordinate system only to that element’s shadow content (Lume elements are Custom Elements that can have Shadow DOM).
I would love to learn more about how you did that in Suica. Will you post some tutorials or videos? I will subscribe! Why haven’t I been following you on X-Formerly-Twitter? I just followed you from my X account. I really like Bluesky more now though, really awesome open source social network, with community-contributed feed algorithms (instead of a single org’s proprietary profit-driven feed algo), and the engagement there is notably more meaningful (here’s my profile).
I’ll update the OP to list all the desires we uncover in this thread.
@hofk Cool! Can you please update that thread to add a description of what “set from basis” means, and what a “basis” is, for the non-math people like me (I mean, I graduated in Comp Sci, but I forgot all the math I haven’t needed to use heh)?
At the moment all we can see there is the name of the method, setFromBasis, followed by a bunch of cryptic maths.
Having a useful description will be great so that we can justfiy why exactly we need it, then end users will have a better idea what to do with it in a practical sense (without necessarily knowing the actual math).
@Fennec Hey, same for you, can you please describe what your library is for? A math n00b can only begin to guess what the meaning of “interpolation on steroids” might be, and the rest is all code. A description of what the lib does and what problems it solves would be great.
@Fennec@hofk I updated the OP, but still need description to understand the problems/solutions.
“interpolation on steroids” is just a catchy tagline . It was originally part of an upcoming particle effect engine, but it felt too good to keep buried inside that project. So, I decided to break it out into its own library. The goal is to provide more interpolation options for three.js math classes (Vectors, Euler, Quaternion, and Color)
If you’ve worked with Unity, Godot, or even Unreal’s particle systems, you’ll recognize similar interpolation options when defining the animation variables. These give you the same flexibility when defining animations and transitions.
The new methods interpolate a value in several ways, and all methods support a noise function. (At the moment only the simplex noise is supported)
value: A single value representing a constant value (Unless the noise is defined).
RandomLerp: A random linear interpolation between two values, start and end.
Random: Picks a random value per axis within a start to end range.
lerp: A Lerp method determined by an easing function, using a start and end range.
Curve: A curve made of key steps between 0 and 1, with scaling for each step. It can be defined for one axis or multiple axes. It supports three modes:
Smooth (default): Smooth cubic bezier curve.
Linear: Straight-lines curve.
Staircase: A Staircase curve. The values change only at the end of each curve segment.
Array: Picks a value from a predefined array, with different options for selection:
Random (default): Random value from the array.
Repeat: Cycles through the array, restarting after the last element.
Alternate: Goes forward and then backward through the array.
gradient: Gradually Interpolate the gradient values. Especially useful with colors but can be used with any class.
It’s built with performance in mind and should handle millions of particles per frame! The core is mostly done, and I believe the best way to explain how it works is through examples. I’m currently working on the documentation, and examples are on the way!
Why haven’t I been following