PJS passes the wrong array type to WebGL methods

[Willard21]

PJS passes normal Javascript arrays to WebGL's uniformMatrix4fv method every time it needs to pass a value to a shader program, which happens a lot. The docs say a Float32Array is needed. Chrome's JS Profiler tool showed that to be the primary bottleneck on a few 3D programs I looked at, including my own.

I was writing my own graphics for a 3D game instead of using PJS, and copying the array values to a Float32Array before passing them to that function instantly doubled the program's framerate. I created an isolated benchmark test program here. Testing on Chrome showed the typed array version to be 10x faster, and around 4.5x faster on Firefox. The firefox test suggests this is probably a bigger issue on Chrome, but there's still room for improvement.

A very simple fix for this with no side effects would be to copy array values into a Float32Array inside the uniformMatrix function, which already wraps all calls to uniformMatrix4fv.

[pamelafox]

Khan Academy uses the fork of ProcessingJS here:
https://github.com/Khan/processing-js
That's forked from the original (https://github.com/processing-js/processing-js) which has now been archived in favor of P5js.
Does P5js do the right thing? If so, perhaps that's an option for you.
We don't teach the 3D mode on Khan Academy, so we haven't prioritized improvements to it. (And this project is also in maintenance mode).
Thank you for the well articulated report, regardless.

[Willard21]

I'm just doing it on Khan Academy for fun since I enjoy the challenge of optimizing things. I'm not really concerned about the project itself (it's a spin-off of someone else's). This just seemed like something worth reporting, and neither the original repo nor the KA fork had an issues tab for it.

Love your programming videos btw! They got me started with programming nearly 6 years ago. 😄

[pamelafox]

Ah, okay, we'll keep the issue reported here then.

Thanks! :)