Forums > Jitter

Possible to pass params to shader when creating new geometry?

Jun 12 2012 | 4:29 am

I’ve got a shader that selects a letter in a font atlas (.png file) texture depending on the input of an ascii code integer pass along in Max.

When I create a new gridshape (plane), I assign it the texture and shader.

What I would like to do, is instantiate a whole bunch of gridshapes (via javascript) and assign the same shader and texture but pass along the shader parameter to change the letter.

Right now, if I change the integer directly on the shader, it will update the texture on all of the objects that have been assigned the shader.

Is it possible to send params to the shader of a gridshape instance? Can it work that way?

If not, what are my options? Do I have to instantiate new shaders for each gridshape? Shouldn’t I be able to pass along shader parameters to different instances of geometry?

Thanks for your help in advance!

Jun 12 2012 | 11:17 am

You could change the parameter for every instance you’re drawing.
Though I do not know how it works if you would want to use

-- Pasted Max Patch, click to expand. --

Jun 12 2012 | 12:40 pm

Thanks! That’s what I was looking for.

Does anyone else know how to do the above with

Jun 12 2012 | 2:46 pm

below is patch that uses to display letters from a font atlas on each shape in a 16×16 grid, using the tex_plane_s/t parameters.

-- Pasted Max Patch, click to expand. --

Jul 23 2012 | 11:26 pm

Finally getting back to you on this….

Robert, in your patcher, you’re not actually using a shader to display the letters but rather remapping the texture.
This solution will not work for me because my shader does more for than just map the texture to the correct letter, it also creates a colored background based on a passed parameter as well. I also plan on adding other instance specific shader params.

Essentially, I want to have the ability to pass shader parameters for each gridshape in Is it at all possible to do this with provides an enormous performance improvement over iterating gridshapes in javascript.

Currently, I’m using javascript to loop through an array of letter objects and then drawing them individually while passing shader parameters to each. Each gridshape texture has the potential of being displayed differently via shader params. I’m hoping to find a way to improve the performance and is the obvious way of doing this. With my current strategy, only a couple hundred gridshapes cause a significant loss of fps.

I’ve scoured the forums, and haven’t found other viable options for drawing many instances of geometry. Any other ideas that I should explore?

Any help would be much appreciated!!!!

Jul 24 2012 | 4:20 am

maybe you could try with poly~-but not sure about speed issue with many instances… (i didn’t found out about how to bang the instances in the correct order, that’s why i always prepended the target $1 – it works this way, but should be solved more elegant. maybe somebody can help?

attachment in next post…

Jul 24 2012 | 4:33 am


Jul 24 2012 | 12:02 pm

ok, here one more try with 100 instances of poly…

Jul 24 2012 | 1:01 pm

Thanks tobiasros, I will look at your examples ASAP and get back.

I’ve posted my js drawing function below so that you can see the logic.

From more reading, I understand that the draw function resets the opengl stack every time and this is the source of my slowdown. (

Also, I know that won’t work for me unless there is some undocumented way of passing shader params to each instance of the gridshape multiplied by

I’ve also read into a bit of and it seems that it might be worth trying out. However, I haven’t been able to find an example that shows how to pass different shader params for each instance. Is there a expert who could give me an example?

My most basic question is:

1. Is it possible to achieve what I’m trying to do with either JS or LUA? I want to set up the position, rotation, texture and pass shader params for each instance of a basic gridshape (plane) (and I think somehow use drawraw to get good performance??) The texture and the shader are the same for each gridshape, but the shader params change.

You can ignore most of the code below, it is just to show you that I’m looping to set position, rotation, shader params and then draw already generated gridshapes

function drawGlyphs() {

	// Loop through all Code Blocks

	for (var i = 0; i < myglobal.codeBlockObjArray.length; i++) {

		// Loop through each row of each Code Block

		for (var r = 0; r < myglobal.codeBlockObjArray[i].codeBlockArray.length; r++) {

			var downVector = myglobal.codeBlockObjArray[i].downVector.multiply(r * 1.5);

			for (var c = 0; c < myglobal.codeBlockObjArray[i].codeBlockArray[r].length; c++) {

				var rightVector = myglobal.codeBlockObjArray[i].rightVector.multiply(c);

				var resultVector = rightVector.add(downVector);

				var targetVector = myglobal.codeBlockObjArray[i].position.add(resultVector);

				myglobal.codeBlockObjArray[i].codeBlockArray[r][c].gridShape.position = [targetVector.elements[0], targetVector.elements[1], targetVector.elements[2]];

				myglobal.codeBlockObjArray[i].codeBlockArray[r][c].gridShape.rotate = [myglobal.codeBlockObjArray[i].cameraRotation[0], myglobal.codeBlockObjArray[i].cameraRotation[1], myglobal.codeBlockObjArray[i].cameraRotation[2], myglobal.codeBlockObjArray[i].cameraRotation[3]];				

				charShader.param("glyph", myglobal.codeBlockObjArray[i].codeBlockArray[r][c].charID);

				charShader.param("dimensions", (16, 16));

				if (myglobal.codeBlockObjArray[i].beatCodeIndexArray[myglobal.codeBlockObjArray[i].currentBeatCodeIndex] === r) {

					charShader.param("bgcolor", [1., 0., 0., .5]);

				} else {

					charShader.param("bgcolor", [0., 0., 0., 0.]);


				var eventMatch = false;

				for (var e = 0; e < myglobal.codeBlockObjArray[i].eventCodeIndexArray.length; e++) {

					if (myglobal.codeBlockObjArray[i].eventCodeIndexArray[e] === r) {

						//post("EVENT MATCH");

						eventMatch = true;




				if (eventMatch == true) {

					charShader.param("bgcolor", [0., 0., 1., .5]);






Jul 24 2012 | 5:14 pm

hi tobiasros,

I looked at your poly examples and they too suffer from the same problem as my JS method, which is that the OpenGL stack is reset at each draw call. I upped the number from 100 to 500 and I have just about the same fps as with JS (somewhere below 25fps). I’m currently exploring but I still am not certain if/how to pass shader params to each instance.

Jul 24 2012 | 6:52 pm

You best bet is to do the following:

// pseudo-code
for each object do
   shader.param(name, value)

If you’re drawing a gridshape, set @displaylist 1 for speed.

Jul 24 2012 | 10:56 pm

another option is to use the shader parameter feature.
you can set arbitrary shader parameters per instance with by specifying the parameter name in the @glparams arg list like this:
@glparams shader.param-name (where param-name is the name of the shader parameter you’d like to affect).

the patch below demonstrates this:

-- Pasted Max Patch, click to expand. --

Jul 27 2012 | 1:38 am

Thanks Wesley and Robert!

I’ve attached 3 Max patchers with 3 different methods. 2 with js using and iterating in js and one with

the seems to have the performance edge. with I haven’t been able to figure out how to set non-relative positions.
and with the iterating in js, I haven’t figured out how to draw the gridshapes any more efficiently.

My finding is that outperforms anything else I’ve tried.

A few questions stem from this exploration:

1. Is there a way to incorporate the directly into my JS and still pass shader params? Could someone show me how to do this?
2. For future reference, is there any better way of drawing gridshapes through iteration than the way I’m doing in the iteration patch?
3. With, can you set discrete positioning using the method I was using?


4. I’ve seen lots of references to getting more performance out of Max/Jitter using lower level languages…C and Java? What kind of difference could I expect if I eventually explore that route? I basically want to know how many discrete pieces of geometry I can drive through Jitter and maintain 30-60fps. By going the C or Java route, can I expect to be able to throw thousands of gridshapes??? Are there examples out there using C and Java that essentially show off what is possible?

Any comments on improving my max/js/lua code would be appreciated.


Jul 27 2012 | 2:25 am

1. Is there a way to incorporate the directly into my JS and still pass shader params? Could someone show me how to do this?

I had a look, and I don’t think there is right now. I’ve made a feature request.

2. For future reference, is there any better way of drawing gridshapes through iteration than the way I’m doing in the iteration patch?

Looks like you’re doing the right things to me.

3. With, can you set discrete positioning using the method I was using?

I’m not sure what you mean here. You can do anything in that you can do in JS. If you post the code snippet you’re referring to, I could help better.

You might also want to look into using jit.gen. For generating the various matrices for use with, jit.gen is going to give you really good performance, particularly once you get into the 100s of objects. Looks like right now, you could simply use jit.noise for most of your calculations. Using setcell is going to be quite slow in comparison.

Jul 27 2012 | 2:54 am

I’m not sure what you mean here. You can do anything in that you can do in JS. If you post the code snippet you’re referring to, I could help better.

So, these patchers were just for testing performance. My intention in my actual project is not to randomly generate values for everything but rather to place gridshapes at different locations in 3D. What I’m wondering if how I could place a gridshape with an x,y,z value using an efficient drawing method in jit.lua (and same with my js iteration). (so how to place gridshapes when using drawraw?)

Jul 27 2012 | 3:31 am

use a position matrix with

Viewing 16 posts - 1 through 16 (of 16 total)

Forums > Jitter