Compute shader processing

Here’s sketch i’ve been working on, still needs some tiding up. A compute shader where you can retrieve the values. It still needs some work, for now basic addition works, im adding basic string reader so you can expand the operations to multiply, divide, etc. The accuracy is currently an issue in some instances, when calculating float values.

code structure

add pgraphics to shader 2 for each varible to handle floats.// not sure if there is a better alternative
canvas draw
shader call

canvas draw
shader call

recombine pgraphics to retrieve values.

numbers are stored in pixel rgb to retrieve them processing makes it simple

so retrieve the color and add 16777216

shader is coded with string saved the reopened. Two shaders are created, one for the float and one for integer component. There might be a way to do this in one shader call but for now its a start.

values are stored in the num[] array.

imga, imgb store the values to send to the shader, its pgraphic arraylist.

cs = new cShader(5000,2,op);

number of values, number of vars, the string for operations

ie 20000 values, x & y vars or 2 vars, and operations to send to the shader for now restricted to + - / * only the + works correctly,

so this will give an 4 images with 20000 pixels storing x int y int x float y float, and for example  calculating x*y or x+y or x-y or x/y 

lodRandom populates the canvases with random data.

or call initialise values to add your own, from an arraylist

void initialiseVariables(ArrayList<PGraphics> _imga,ArrayList<PGraphics> _imgb){
  for(int i=0;i<_imga.size();i++){

currently on i5 cpu 4300m integrted graphics, running at 30 frames% second when retrieving, 60 per second without with 500000 values.

working on making it useable with a neural network, and a particle shader. Though the particle will not have shader collision that is too advanced for now, so speed would be impacted.

updated now can multiply add and divide, subtraction still working on, still inaccurate in decimal places and limited to numbers below 16777216. and currently 3 decimal points.
Looking into increasing decimals, using long float or double in glsl.

updated now with multiply add and divide, subtraction, calculated to 3 decimal figures.

cwidth 46 cheight 46 2116
img size 3
s[0] float num = ((tvf0)/(tvf1)*(tvf2))*1.0;
float numf = 0.0;
float num = ((tvf0)/ /
float num = ((tvf0)/(tvf1)* *
float num = ((tvf0)/(tvf1)*(tvf2) /
s[0] float num = ((tvf0)/(tvf1)*(tvf2))*1.0;
float numf = abs(num - int(num))*1000 ;
x 0 0.0 0.0 80.0 255.0 80.25621
xb 0 0.0 100.0 21.0 255.0 80.25621
col  -16777136 -16751595 -16777136 -16751595
x 1 0.0 0.0 62.0 255.0 62.82556
xb 1 1.0 66.0 124.0 255.0 62.82556
col  -16777154 -16694660 -16777154 -16694660
x 2 0.0 0.0 18.0 255.0 18.281738
xb 2 0.0 110.0 13.0 255.0 18.281738
col  -16777198 -16749043 -16777198 -16749043
col******** 23.0 23.0 rid 255.0 0.0 0.0 23.0 Alpha 255.0 23.0
col2 23.354 0.354 exc 354
num 23.0 0.354

cShader cs;

void setup() {
  size(400, 400, P2D);
  String op = "/*/";
  cs = new cShader(2000,3,op);

int k = 0;
float con = 0;

void draw() {
  //cs.runDV();//with debug info
  cs.runDF();//with debug info
  //cs.lodRandom2();//od rndom vribles
  //for(int i=0;i<cs.num.length;i+=2){
  //  point(cs.num[i],cs.num[i+1]);
  text(frameRate, 50, 50);


You’re working on a really fun project.

If so, can you solve it or share it when a project comes out? I am curious about the result.

its now complete, however it hasnt been integrated with anything else, so you’re welcome to use it.


Figured out how to reduce shader calls, this will speed up the calculations as there will be no need to separate the float and integer draw. This gives a twofold increase, but does make it a bit more intensive on the shader though not by much

For 500000 particles
Calculate square root 707…
Make canvas size 708 for the integer part then double width to hold and calculate float component

In total shader will be called on 708 by 1416

This can be extended to make a full particle shader, where the canvas size would be the size of the number of variables times the square root of the number of particles.

So xyz would yield 707 *3 for height with 707 *2 for width. This should run on a standard low end graphics card, no problem but will likely max it out.

Note it’s still slower than a traditional particle shader which would calculate vertices and pass them to fragment, though I’m unable to say how much slower until I test it out

1 Like

It’s not complete there is nothing that allows negative numbers for now only mult div and addition. Its in progress but ran out of steam. Just a case of updating the alpha channel so it reads anything other than 1.0 in the shader then checking said value when adding all values together.

Having said that I’m shelving programming for a while so this won’t be resolved anytime soon.

1 Like