gfxfundamentals / webgl-fundamentals

WebGL lessons that start with the basics
http://webglfundamentals.org
Other
4.67k stars 660 forks source link

another bug in m3.js #391

Open MaudDibb opened 2 years ago

MaudDibb commented 2 years ago

translation ended up giving me massively skewed projections when doing 2d transforms.

translate does:

1 0 0 0 1 0 tx ty 1

it needs to do:

1 0 tx 0 1 ty 0 0 1

function translation(tx, ty, dst) { dst = dst || new MatType(9);

dst[0] = 1;
dst[1] = 0;
dst[2] = tx;
dst[3] = 0;
dst[4] = 1;
dst[5] = ty;
dst[6] = 0;
dst[7] = 0;
dst[8] = 1;

return dst;

}

greggman commented 2 years ago

Works fine for me

https://jsgist.org/?src=06108e06ea91816334f0b3fe3ff30a4f

Have you read this article?

MaudDibb commented 2 years ago

i was going off your example on pan/zoom on your q&a page When i tried it, I have it drawing a square centered at 0,0. Instead of seeing a square in the center of the screen tho, i got a stretched diagonal rectangle that extended from the top/left to the bottom/right of the screen. when i swapped the tx/ty values to the new positions in translation, the square appeared normally thru various zoom operations. Maybe im doing something wrong, i dunno. That fixed it for me tho. Im not using twgl tho, I just doing plain js for the webgl stuff, and m3 to do the 3x3 matrix math

greggman commented 2 years ago

I don't know what to tell you. The example on that page you linked to is using m3.js. Twgl is irrelevant. Here's the sample running without twgl

https://jsgist.org/?src=f63d7a962389b73f2a7f8e0b3776c361