WebGL Textures: From Image File to GPU Pixels
WebGL textures are images uploaded to the GPU for fast access when "painting" 3D models. They're used to apply detailed surfaces like brick patterns. The footgun: images must be CORS-approved, and non-power-of-two dimensions break mipmapping in WebGL1.
Why it exists
To give the GPU fast, local access to image data. Shaders need to look up pixel colors (texels) millions of times per second. Transferring an image from main memory (RAM) to the GPU for every frame would be impossibly slow. Textures solve this by pre-loading the image onto the GPU's dedicated memory (VRAM).
The mental model
A texture is not just an image; it's a data structure on the GPU that your shaders can query. Think of it as a 2D array of color data that the GPU is optimized to read from. You "bind" a texture to a "texture unit," a sort of slot, and then tell your shader which slot to read from when it needs to color a pixel on a model's surface.
How it works
The process is asynchronous. First, you create a texture object with gl.createTexture(). A common practice is to immediately fill it with a single-pixel placeholder using gl.texImage2D(). This makes the texture usable right away, preventing errors while the real image downloads. You then create a standard HTML Image object. In its onload callback, you call gl.texImage2D() again, this time passing the fully loaded image to upload its data to the GPU texture you created earlier.
When to use it
Use textures whenever you want to apply a detailed 2D image to the surface of a 3D object. This is the standard way to add color, patterns, and simulated detail (like bumps or scratches via normal maps) to models in any real-time 3D application.
When not to use it
Don't use textures for simple, solid colors on a mesh. For that, it's more efficient to just pass a uniform color variable to your shader. Also, avoid loading large, uncompressed images if they aren't necessary, as they consume significant GPU memory.
One canonical example
A key consideration is image dimensions. WebGL1 treats power-of-two (Po2) images (e.g., 256x256, 512x1024) differently from non-power-of-two (NPo2) images. For a Po2 image, you can generate mipmaps with gl.generateMipmap(gl.TEXTURE_2D), which improves quality when viewing the texture from a distance. For an NPo2 image, you must disable mipmapping and set texture wrapping to gl.CLAMP_TO_EDGE and filtering to gl.LINEAR, otherwise the texture may not render correctly.
Interview question
In WebGL1, what specific constraint applies when using a non-power-of-two (NPoT) dimensioned image as a texture?
- a.Mipmapping cannot be used, and texture wrapping and filtering must be set to specific modes.Correct
- b.It must be manually resized to a power-of-two dimension before uploading to the GPU.
- c.It can only be used if the image is hosted on the same domain as the WebGL application.
- d.It will always incur a performance penalty due to on-the-fly GPU resizing.
Why? this is the answer
The card states that for NPoT images in WebGL1, mipmapping must be disabled, and texture wrapping and filtering must be set to specific modes (gl.CLAMP_TO_EDGE and gl.LINEAR). It does not require manual resizing or imply automatic GPU resizing, and CORS is a general requirement, not specific to NPoT.
Just read this? Test yourself on what you have been reading.
Read the original → developer.mozilla.org
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