pmndrs / maath Goto Github PK

https://twitter.com/FarbsMcFarbs/status/1456830625617432576/photo/4

x => (b+a-2)x^3 + (-2a-b+3)x^2 + ax

// maybe with a global?
maath.random(seed) 

// or per method
random(a,b, { seed: 123 })

it should be fairly easy, gotta look for a solid & lightweight RNG package

See

https://graphics.stanford.edu/~mdfisher/subdivision.html
https://tylerxhobbs.com/essays/2017/aesthetically-pleasing-triangle-subdivision

Splitting the triangle in two:
- get a random vertex A
- get the mid point of the opposing side M
- add a new edge AM
- return 2 new triangles ( ABM, AMC )

Splitting in 4 (sudbidivision):
- get midpoint of each vertex ( D, E, F )
- return 4 new triangles [ ABF, DBE, ECF, DEF ]

damp3 (for Vector3) is currently handed by 3 separated damps.

but it can't be separated and should use the "magnitude (length) of the vector" for the maxSpeed.

e.g.
If maxSpeed is 1:
speed x can be 0.999 and speed y can be 0.999.
It means vec3( 0.999, 0.999, 0 ), and diagonal of 0.999 x 0.999.

thus:
Math.sqrt( Math.pow( 0.9999, 2 ) + Math.pow( 0.9999, 2 ) );
// = 1.4140721410168577

the result is larger than 1.

Right now most buffer methods require manual passing of the stride of the buffer (eg. if it's a 2D points buffer or a 3D one).

An alternative approach would be to make 2 separate buffer entry points ( buffer2D, buffer3D ) but that feels overkill.

Composing buffers right now is confusing as you end up with a lot of stride repetition.

Babel macros might be an option, but that feels forced.

Hello,

I'm building some project for web3 using TypeScript, React and NextJS along with Moralis.
I'm facing below error every single time I refresh localhost. Once I remove component X(which contains maath) from app -> refresh host website is working correctly, then if I add that X component again and save file website will reload and animation is displayed and calculated correctly, everything working until I refresh website again. Does anyone have any idea how to fix that issue?

Here is repo with full code: LINK

Not an issue with the package itself, but whenever I use CSB and maath, I get the following error:
Could not find module in path: 'maath/easing' relative to '/src/App.js'

After a reload, the CSB works again. But it randomly jumps back while working to this error.

Hi! This is just a question because I believe I'm using damp3 wrongly.

I'm trying to use damp3 to animate my camera position to focus on a moving object. My first try was this:

        damp3(
          camera.position,
          [
            groupRef.current.position.x,
            groupRef.current.position.y,
            groupRef.current.position.z + 2.5,
          ],
          0.25,
          delta,
        );

And it "works", but if the object is far away, it stops very far. See video ⬇️

Then I found out about the eps prop and it goes well with a high value, but then I loose easing, it just flies instantly:

        damp3(
          camera.position,
          [
            groupRef.current.position.x,
            groupRef.current.position.y,
            groupRef.current.position.z + 2.5,
          ],
          0.25,
          delta,
          undefined, // maxSpeed
          undefined, // easing
          1000, // eps
        );

Any tips on how I can focus on my object without it being too far away, and still keep the easing of the movement?

Thank you in advance!

This would introduce an entry point maath/three with functions such as:

1. convert buffers to Vector3 and back
2. convert matrics to three's
3. host the methods that currently depend on threejs, maybe keeping the same structure (this is currently the case for whatever needs quaternions and some matrix math.)
   3. might even be worth it just forking three's quaternions and matrices (maybe make them static instead of class based)

normalize(buffer, size)

const myRandoms = pipe(
   new Float32Array(10_000 * 3),
   b => inSphere(b),
   b => normalize(b, 3),
  b => map(b, 
)

impl:

const normalize = (buffer: TypedArray, stride: number) => {
  for (let i = 0; i < buffer.length; i += stride) {
    const x = buffer[i + 0];
    const y = buffer[i + 1];
    const z = buffer[i + 2];
    const l = Math.sqrt(x * x + y * y + z * z);
    buffer[i + 0] = x / l;
    buffer[i + 1] = y / l;
    buffer[i + 2] = z / l;
  }
  return buffer;
};

I'm currently trying to wrap my head around your smooth-damp implementation and wonder (VSCode wonders, too) what this line is doing:

haven't seen this x > y === 0 > z pattern, yet.

maybe @drcmda could shed some light? 🙏

Both should exist, eg.

// whatever.viz.jsx
// 1. passing viz
function ComponentWithVizUsingR3FProbably() {
	return <mesh>...</mesh>
}

// 2. non passing viz
...

// whatever.test.js
// regular jest stuff

Ideally, every fn in every entry point should have both visuals and unit (although visual is hard with stuff like determinants)

npm install throws error if the project has newer versions of maath's peerDependencies listed as dependencies/devDependencies. Maybe something like this would help?

"peerDependencies": {
  "@types/three": ">=0.134.0",
  "three": ">=0.134.0"
}

I'm trying to use the easeInOutCubic function from easings.net but that does not seem to work as the object just teleports to its destination

function easeInOutCubic(x: number): number { 
    return x < 0.5 ? 4 * x * x * x : 1 - Math.pow(-2 * x + 2, 3) / 2;
}

damp3(ref.current.position, p.current, 5, delta, 2, easeInOutCubic)

Changing smoothTime, lowering eps or maxSpeed does not seem to have any effect. What exactly does easing expect? When I try out the included rsqw there is a marginal improvement, with the object teleporting to its target with only a couple of frames in between. When console.loging the t param, it does not seem to follow the typical 0-1 range.