PJS passes the wrong array type to WebGL methods
- Dominant language
- JavaScript
- Stars
- 776
- Forks
- 180
- PR merge metrics
- No merged PRs in 30d
Description
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](https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/uniformMatrix) 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](https://www.khanacademy.org/computer-programming/why-pjs-3d-graphics-are-so-slow/5383694005714944). 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`.
Contributor guide
No contributing guide indexed for this repository
Research direction
Start by locating PJS's uniformMatrix wrapper, which calls WebGL's uniformMatrix4fv method. Check the linked benchmark and verify that the completed change passes Float32Array values to the WebGL call without changing shader behavior.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- frontend, performance
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Clearly specified
- Newbie friendliness
- 38/100