Moving maths from JS into shader resulting in different behaviour | Three.js | Page 1

#

I had this JS:

const transformedPosition = shape.position.clone()
  .applyMatrix4(highlighterInverseMatrix);

if (Math.abs(transformedPosition.x) < 8 && Math.abs(transformedPosition.z) < 8) {
  // do something
}

i'm trying to move it into the shader, so i'm setting aCenter to be shape.position (and then passing it through as vCenter) and uHighlighterInversePos to be highlighterInverseMatrix and have the following in my fragment shader:

vec3 transformedCenter = (vec4(vCenter, 1.0) * uHighlighterInversePos).xyz;

if (abs(transformedCenter.x) < 8.0 && abs(transformedCenter.z) < 8.0) {
  // do something
}

It's somewhat working, but somehow the rotation about the y axis is being ignored in the shader version so the conditional is returning incorrectly for some values. In the screenshot, everything within 8 units of the red line (which is at 0,0,0 and .lookAting the camera) is supposed to be blue while everything else is black, but that only happens in one orientation

The documentation describes the Vector3.applyMatrix4 behaviour as "Multiplies this vector (with an implicit 1 in the 4th dimension) and m, and divides by perspective." and the highlighted section is where I suspect the issue might be coming from - but I'm not really sure what that means and reading the source code isn't helping much either

any ideas? 😬

#

video might make it a bit clearer - camera starts at 0,0,30

#

huh, un-inversing the matrix seems to fix it… i don't understand why that works at all? 😅

#Moving maths from JS into shader resulting in different behaviour