Khan / Khan/live-editor

PJS passes the wrong array type to WebGL methods

Open
#731 3 comments 0 reactions 0 assignees View on GitHub
performance pjs
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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.