Advertisement Jump to content
Sign in to follow this  

need help reducing number of calls to bind/draw textures

This topic is 1813 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

If you intended to correct an error in the post then please contact us.

Recommended Posts

As sort of a self-teaching exercise I'm trying to three draw quads using WebGL...each quad has its own texture with its own model matrix (rotating on its own axis). The code works but I'm trying to reduce the number of calls to the GL context and better understand how texture binding/drawing works. A picture if it helps...


I'm re-using gl.TEXTURE0 unit for every texture...could I load each texture into its own unit (TEXTURE0, TEXTURE1, TEXTURE2) and not do all the binding over and over again?


This is called before each call to gl.drawArrays (draw command) to load the texture I want to use in drawArrays and I'm not sure if all of it is necessary or if there is another way around it...can I reduce the number of GL calls or optimize this?

//NAME: loadTexture
//PURPOSE: tell GL how to load the specified texture into GL sampler
//IN: WebGL context, GL texture obj, sampler handle, image object, texture unit to use
//RETURN: void
function loadTexture(gl, texture, u_Sampler, image, texUnit){
	//make texture unit specified active
	//bind and activate texture
	gl.bindTexture(gl.TEXTURE_2D, texture);
	//tell GL what parameters to use to map the texture to the geometry
	gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
	//tell GL to bind the specified image to the target
	gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, image);
	//set specifed texture unit index to the sampler
	gl.uniform1i(u_Sampler, 0);

The code that calls loadTexture (see the bottom for the important stuff)...

//NAME: renderImages
//PURPOSE: load images into textures, apply tranaformations and then draw
//IN: array of pre-loaded images
//RETURN: none
function renderImages(images){
	//get a pointer to the canvas
	var canvas = document.getElementById('webgl');
	//get the graphics context from the canvas
	var gl = getWebGLContext(canvas);
	if (!gl) {
		console.log('Failed to get the rendering context for WebGL');
	//initialize shaders specified in this document
	if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) {
		console.log('Failed to initialize shaders.');
	//initialize vertex buffers
	var n = initVertexBuffers(gl);
	if (n < 0){
		console.log('Failed to set the position of the vertices.');
		console.log('Failed to load images.');
	if(images.length != 3){
		console.log('Failed to load all 3 images we need.');
	var texture = gl.createTexture();
		console.log('CreateTexture GL call failed on texture initialization.');
		return false;
	var u_Sampler = gl.getUniformLocation(gl.program, 'u_Sampler');
		console.log('Unable to get storage location of u_Sampler during texture initialization.');
		return false;
	var u_ModelMatrix = gl.getUniformLocation(gl.program, 'u_ModelMatrix');
	if (u_ModelMatrix == null){
		console.log('Failed to get the storage location of u_ModelMatrix');
	var modelMatrixes = [];
	var modelMatrix1 = new Matrix4(); 
	modelMatrix1.translate(0.0, 0.5, 0.0);
	var modelMatrix2 = new Matrix4();
	modelMatrix2.translate(0.5, 0.0, 0.0);
	var modelMatrix3 = new Matrix4();
	modelMatrix3.translate(-0.5, 0.0, 0.0);
	//set the color to use on gl.clear
	gl.clearColor(0.0, 0.0, 0.0, 1.0);
	//flip the image on axis on load
	gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, 1);
	var lastTick1 = 0;
	var lastTick2 = 0;
	var lastTick3 = 0;
	var frameTick = 0;
	var tick = function(){
		var timeElapsed = getElapsed();
		lastTick1 = lastTick1 + timeElapsed;
		lastTick2 = lastTick2 + timeElapsed;
		lastTick3 = lastTick3 + timeElapsed;
		frameTick = frameTick + timeElapsed;
		//run this code when counter exceeds 100ms
		if(lastTick1 > 30){
			lastTick1 = 0;
			modelMatrix1.translate(-0.05, 0.0, 0.0);
			modelMatrix1.rotate(5, 0, 0, 1);
		//run this code when counter exceeds 50ms
		if(lastTick2 > 50){
			lastTick2 = 0;
			modelMatrix2.rotate(3 * DIRECTION, 0, 0, 1);
		//run this code when counter exceeds 30ms
		if(lastTick3 > 100){
			lastTick3 = 0;
			modelMatrix3.rotate(-1 * DIRECTION, 0, 0, 1);
		//run this code when counter exceeds 20ms
		if(frameTick > 20){
			frameTick = 0;
			//clear the color buffer
			//draw everything
			for(var matrixIndex = 0; matrixIndex < modelMatrixes.length; matrixIndex++){
				gl.uniformMatrix4fv(u_ModelMatrix, false, modelMatrixes[matrixIndex].elements);
				loadTexture(gl, texture, u_Sampler, images[matrixIndex], gl.TEXTURE0);
				gl.drawArrays(gl.TRIANGLE_STRIP, 0, n);

Share this post

Link to post
Share on other sites
I'm re-using gl.TEXTURE0 unit for every texture...could I load each texture into its own unit (TEXTURE0, TEXTURE1, TEXTURE2) and not do all the binding over and over again?

Yes and no.

In this case, yes, you could fill your VB so all the vertices from quad 0 only take pixels from texture 0. You would set up the texcoords so the other two texcoords are sampled at constant pixels. For example you could (1) multiply the various texel values together, thus to ignore a texture completely you would sample the texture at a constant white coordinate. This would work pretty much on any hardware.


Or (2), you might add an index and (on more advanced, but still very widespread) conditionally sample a specific texture.

Or (3) you might use texture arrays, albeit I'm not sure they're available in WebGL.


In all the three cases, you need to edit your pixel shader accordingly.


There's a fourth option that is having a "texture atlas", or a chart of textures. I'm not quite on them, they tend to require special care in just too many cases.


EDIT: as for the "no" part, you might have to consider if it's really worth to optimize what's clearly just an experiment. Those kind of optimizations are worth exploring given realistic datasets.

Edited by Krohm

Share this post

Link to post
Share on other sites
Sign in to follow this  

  • Advertisement

Important Information

By using, you agree to our community Guidelines, Terms of Use, and Privacy Policy. is your game development community. Create an account for your GameDev Portfolio and participate in the largest developer community in the games industry.

Sign me up!