<p>The generic term for multiple outputs from a fragment shader is MRT (multiple render targets).</p>
<p>The fragment shader setup code is something along the lines of:</p>
<pre><code>layout( location=0 ) out vec4 colorOutput;
layout( location=1 ) out vec4 outVelocity; // names are abritrary
</code></pre>
<p>Output 0 would replace the default gl_FragColor assignment. Then later to assign values it is simply:</p>
<pre><code>colorOutput = vec4(color,1);
outVelocity = vec4(velocityResults, 0, 0);
</code></pre>
<p>In the opengl setup code the layout locations correspond to the buffers that are created.</p>
<p>Creating the framebuffers is just the usual glGenFrameBuffer, glBindFrameBuffer. Using the java code extensions.</p>

CC BY-SA 4.0
2022-11-15T12:25:23.937Z
I only want to add, that when using MRT, the output targets need to have the same pixel resolution.
Thomas
CC BY-SA 4.0
2022-11-15T11:49:30.733Z
2022-11-15T11:49:30.733Z
pmw1234
<p>as the question suggests im looking to output to more than one canvas element in processing to speed up the calculations and limit shader draw calls. It has to be as simple as possible to be transferable to android as well.</p>
<p>This is the shader call. Is there a way to do this using layout, if I was to provide another sampler texture?</p>
<pre><code>#ifdef GL_ES
precision mediump float;
precision mediump int;
#endif
#define PROCESSING_TEXTURE_SHADER
uniform float v[10];
uniform sampler2D texture;
uniform sampler2D va0;
uniform sampler2D vb0;
uniform sampler2D va1;
uniform sampler2D vb1;
uniform sampler2D va2;
uniform sampler2D vb2;
uniform sampler2D va3;
uniform sampler2D vb3;
uniform float mult = 1.0;
uniform float type;
uniform float thresh;
uniform vec2 texOffset;
varying vec4 vertColor;
varying vec4 vertTexCoord;
uniform vec2 resolution;
uniform float w;
uniform int [1000]s;
uniform float [10]ops;
uniform float [1000]vars;
void main(void) {
float x = 1.0 / resolution.x;
float y = 1.0 / resolution.y;
vec2 tx = vertTexCoord.st;
vec4 via0 = texture2D(va0 , vertTexCoord.st);
vec4 vib0 = texture2D(vb0 , vertTexCoord.st);
vec4 via1 = texture2D(va1 , vertTexCoord.st);
vec4 vib1 = texture2D(vb1 , vertTexCoord.st);
vec4 via2 = texture2D(va2 , vertTexCoord.st);
vec4 vib2 = texture2D(vb2 , vertTexCoord.st);
vec4 via3 = texture2D(va3 , vertTexCoord.st);
vec4 vib3 = texture2D(vb3 , vertTexCoord.st);
float base = 256;
float b1 = base*base*255;
float b2 = base*255;
float b3 = 255;
float tva0 = (via0.r*b1 + via0.g*b2 + via0.b*b3);
float tva1 = (via1.r*b1 + via1.g*b2 + via1.b*b3);
float tva2 = (via2.r*b1 + via2.g*b2 + via2.b*b3);
float tva3 = (via3.r*b1 + via3.g*b2 + via3.b*b3);
float tvb0 = (vib0.r*b1 + vib0.g*b2 + vib0.b*b3 )/100000;
float tvb1 = (vib1.r*b1 + vib1.g*b2 + vib1.b*b3 )/100000;
float tvb2 = (vib2.r*b1 + vib2.g*b2 + vib2.b*b3 )/100000;
float tvb3 = (vib3.r*b1 + vib3.g*b2 + vib3.b*b3 )/100000;
float tvf0 = (tvb0+tva0);
float tvf1 = (tvb1+tva1);
float tvf2 = (tvb2+tva2);
float tvf3 = (tvb3+tva3);
if(via0.a&lt;1.0)tvf0= (tvb0+(-(tva0)*0.0));
if(via1.a&lt;1.0)tvf1= (tvb1+(-(tva1)*0.0));
if(via2.a&lt;1.0)tvf2= (tvb2+(-(tva2)*0.0));
if(via3.a&lt;1.0)tvf3= (tvb3+(-(tva3)*0.0));
float num = ((tvf0)/(tvf1)*(tvf2)/(tvf3))*1.0;
float numf = 0.0;
if(num&lt;0.0) numf = int(-num);
else numf = int(num);
float rni = round(mod (numf/(base*base), base))/255;
float gni = round(mod ((numf/base), base))/255;
float bni = round(mod (numf, base))/255;
if(numf&gt;0.0)gl_FragColor = vec4(rni, gni, bni, 1.0);
else  gl_FragColor = vec4(rni, gni, bni, 0.5);
}
</code></pre>

<shader><java><processing>
Output to more than one canvas texture in processing with shader OpenGL
Paul Goux
# Output to more than one canvas texture in processing with shader OpenGL

(Asked by: username_0 on 2022-11-14)

as the question suggests im looking to output to more than one canvas element in processing to speed up the calculations and limit shader draw calls. It has to be as simple as possible to be transferable to android as well.

This is the shader call. Is there a way to do this using layout, if I was to provide another sampler texture?

```
#ifdef GL_ES
precision mediump float;
precision mediump int;
#endif
#define PROCESSING_TEXTURE_SHADER
uniform float v[10];
uniform sampler2D texture;
uniform sampler2D va0;
uniform sampler2D vb0;
uniform sampler2D va1;
uniform sampler2D vb1;
uniform sampler2D va2;
uniform sampler2D vb2;
uniform sampler2D va3;
uniform sampler2D vb3;
uniform float mult = 1.0;
uniform float type;
uniform float thresh;
uniform vec2 texOffset;
varying vec4 vertColor;
varying vec4 vertTexCoord;
uniform vec2 resolution;
uniform float w;
uniform int [1000]s;
uniform float [10]ops;
uniform float [1000]vars;
void main(void) {
float x = 1.0 / resolution.x;
float y = 1.0 / resolution.y;
vec2 tx = vertTexCoord.st;
vec4 via0 = texture2D(va0 , vertTexCoord.st);
vec4 vib0 = texture2D(vb0 , vertTexCoord.st);
vec4 via1 = texture2D(va1 , vertTexCoord.st);
vec4 vib1 = texture2D(vb1 , vertTexCoord.st);
vec4 via2 = texture2D(va2 , vertTexCoord.st);
vec4 vib2 = texture2D(vb2 , vertTexCoord.st);
vec4 via3 = texture2D(va3 , vertTexCoord.st);
vec4 vib3 = texture2D(vb3 , vertTexCoord.st);
float base = 256;
float b1 = base*base*255;
float b2 = base*255;
float b3 = 255;
float tva0 = (via0.r*b1 + via0.g*b2 + via0.b*b3);
float tva1 = (via1.r*b1 + via1.g*b2 + via1.b*b3);
float tva2 = (via2.r*b1 + via2.g*b2 + via2.b*b3);
float tva3 = (via3.r*b1 + via3.g*b2 + via3.b*b3);
float tvb0 = (vib0.r*b1 + vib0.g*b2 + vib0.b*b3 )/100000;
float tvb1 = (vib1.r*b1 + vib1.g*b2 + vib1.b*b3 )/100000;
float tvb2 = (vib2.r*b1 + vib2.g*b2 + vib2.b*b3 )/100000;
float tvb3 = (vib3.r*b1 + vib3.g*b2 + vib3.b*b3 )/100000;
float tvf0 = (tvb0+tva0);
float tvf1 = (tvb1+tva1);
float tvf2 = (tvb2+tva2);
float tvf3 = (tvb3+tva3);
if(via0.a<1.0)tvf0= (tvb0+(-(tva0)*0.0));
if(via1.a<1.0)tvf1= (tvb1+(-(tva1)*0.0));
if(via2.a<1.0)tvf2= (tvb2+(-(tva2)*0.0));
if(via3.a<1.0)tvf3= (tvb3+(-(tva3)*0.0));
float num = ((tvf0)/(tvf1)*(tvf2)/(tvf3))*1.0;
float numf = 0.0;
if(num<0.0) numf = int(-num);
else numf = int(num);
float rni = round(mod (numf/(base*base), base))/255;
float gni = round(mod ((numf/base), base))/255;
float bni = round(mod (numf, base))/255;
if(numf>0.0)gl_FragColor = vec4(rni, gni, bni, 1.0);
else  gl_FragColor = vec4(rni, gni, bni, 0.5);
}

```

**Tags:** shader, java, processing


---

## 1 answers

### Answer by username_1 on 2022-11-15. Score: 2

The generic term for multiple outputs from a fragment shader is MRT (multiple render targets).

The fragment shader setup code is something along the lines of:

```
layout( location=0 ) out vec4 colorOutput;
layout( location=1 ) out vec4 outVelocity; // names are abritrary

```

Output 0 would replace the default gl\_FragColor assignment. Then later to assign values it is simply:

```
colorOutput = vec4(color,1);
outVelocity = vec4(velocityResults, 0, 0);

```

In the opengl setup code the layout locations correspond to the buffers that are created.

Creating the framebuffers is just the usual glGenFrameBuffer, glBindFrameBuffer. Using the java code extensions.

> **Comments:**
> **username_2**: I only want to add, that when using MRT, the output targets need to have the same pixel resolution.  

---

