• Announcements

    • khawk

      Download the Game Design and Indie Game Marketing Freebook   07/19/17

      GameDev.net and CRC Press have teamed up to bring a free ebook of content curated from top titles published by CRC Press. The freebook, Practices of Game Design & Indie Game Marketing, includes chapters from The Art of Game Design: A Book of Lenses, A Practical Guide to Indie Game Marketing, and An Architectural Approach to Level Design. The GameDev.net FreeBook is relevant to game designers, developers, and those interested in learning more about the challenges in game development. We know game development can be a tough discipline and business, so we picked several chapters from CRC Press titles that we thought would be of interest to you, the GameDev.net audience, in your journey to design, develop, and market your next game. The free ebook is available through CRC Press by clicking here. The Curated Books The Art of Game Design: A Book of Lenses, Second Edition, by Jesse Schell Presents 100+ sets of questions, or different lenses, for viewing a game’s design, encompassing diverse fields such as psychology, architecture, music, film, software engineering, theme park design, mathematics, anthropology, and more. Written by one of the world's top game designers, this book describes the deepest and most fundamental principles of game design, demonstrating how tactics used in board, card, and athletic games also work in video games. It provides practical instruction on creating world-class games that will be played again and again. View it here. A Practical Guide to Indie Game Marketing, by Joel Dreskin Marketing is an essential but too frequently overlooked or minimized component of the release plan for indie games. A Practical Guide to Indie Game Marketing provides you with the tools needed to build visibility and sell your indie games. With special focus on those developers with small budgets and limited staff and resources, this book is packed with tangible recommendations and techniques that you can put to use immediately. As a seasoned professional of the indie game arena, author Joel Dreskin gives you insight into practical, real-world experiences of marketing numerous successful games and also provides stories of the failures. View it here. An Architectural Approach to Level Design This is one of the first books to integrate architectural and spatial design theory with the field of level design. The book presents architectural techniques and theories for level designers to use in their own work. It connects architecture and level design in different ways that address the practical elements of how designers construct space and the experiential elements of how and why humans interact with this space. Throughout the text, readers learn skills for spatial layout, evoking emotion through gamespaces, and creating better levels through architectural theory. View it here. Learn more and download the ebook by clicking here. Did you know? GameDev.net and CRC Press also recently teamed up to bring GDNet+ Members up to a 20% discount on all CRC Press books. Learn more about this and other benefits here.
Sign in to follow this  
Followers 0

need help reducing number of calls to bind/draw textures

1 post in this topic

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

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  
Followers 0