WebGL Uniforms: Global State for Shaders
WebGL uniforms are global constants for your shaders, set once per frame from JavaScript to provide the same value to every vertex and pixel. Use them for scene-wide data like a camera's projection matrix. The footgun: changing a uniform is a CPU-to-GPU call.
Why it exists
Shaders on the GPU need data from the main application running on the CPU. While some data changes for every single vertex (like its position), other data is constant for an entire object or scene, like the camera's perspective. Uniforms were created to efficiently provide this constant, "uniform" data for a complete draw call.
The mental model
A uniform is a read-only global variable for your shader programs. Your JavaScript code sets its value before you tell WebGL to draw anything. Every vertex and fragment processed in that draw call will see the exact same value for that uniform. It's the shader's equivalent of a configuration setting passed in at runtime.
How it works
In your JavaScript, you first get a "location" for a uniform variable that you've declared in your GLSL shader code. You then use a specific gl.uniform* function (like gl.uniformMatrix4fv for a 4x4 matrix or gl.uniform3f for a 3D vector) to upload data to that location. This data is then accessible by name in both your vertex and fragment shaders for the duration of the next draw command.
When to use it
Use uniforms for data that is constant across all vertices of a mesh or even the entire scene for a given frame. This includes the model-view matrix (placing an object in the world), the projection matrix (the camera lens), lighting information (light color, position, direction), and global values like the current time for animations.
When not to use it
Do not use uniforms for data that is unique to each vertex, such as vertex positions, normals, or texture coordinates; use Attributes for that. For passing data calculated in the vertex shader to the fragment shader (like an interpolated color or normal), use Varyings.
One canonical example
A classic use case is passing a transformation matrix to a vertex shader. The JavaScript calculates a single matrix to position an object in the scene. It sends this matrix as a uniform. The vertex shader then multiplies every incoming vertex position by this uniform matrix, moving the entire object as a single unit without needing a different matrix for each vertex.
Interview question
For which scenario is a WebGL uniform the most appropriate mechanism to pass data to a shader?
- a.Transferring an interpolated color value from the vertex shader to the fragment shader.
- b.Defining a different texture coordinate for every individual pixel on a surface.
- c.Providing unique position and normal vectors for each vertex in a 3D model.
- d.Supplying a single transformation matrix that applies to all vertices of an object.Correct
Why? this is the answer
Uniforms are used for data that is constant across all vertices of a mesh or the entire scene, like a transformation matrix. Per-vertex data like positions or normals use Attributes, and data passed from vertex to fragment shaders uses Varyings.
Just read this? Test yourself on what you have been reading.
Read the original → developer.mozilla.org
- #webgl
- #graphics
- #javascript
- #shaders
You just looked this up. Could you explain it out loud?
That is the part interviews actually test. Tezvyn takes questions like this one and gives you what the interviewer is really checking, the answer that lands, and the mistake that ends the conversation, in the four minutes before your next meeting.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.
We are hiring for this. Every open role lists the topics its interview covers, so you can prepare for the real thing rather than guessing.
See open roles