Hi there! I’m trying to get into the world of fragment shaders but ran into an issue that only appears on some devices. I’m driving the shader with particles that I’m calculating in the sketch, then passing a list of those particles to the shader by using uniform arrays. It seemed to work exactly a…

https://editor.p5js.org/abe/sketches/H8K7bY5s [canvas] Here something done very quickly and without much thinking :slight_smile: I hope the code is not too bad. I’m curious about performance on mobile, as for-loops are not recommended in shaders. For each pixel in the screen it checks the distance…

First, very nice effect! :slight_smile: One approach to pass a lot of information to a shader is using a texture. You put into the texture the data you want encoded as RGBA values (so you can convert positions, speeds, whatever into RGBA values). Then in the shader you sample the texture and use th…

Thank you! I think that could absolutely be a better approach to take when dealing with so many particles. I know this may be a tall order, but do you think you can provide a very simple example?

This is fantastic, thank you so much! I find that most tutorials out there are overly complicated but I can easily follow the code here. Time to try out some GPU particles :smiley:

Welcome! :slight_smile: I’m glad you found it understandable. I made a variation :slight_smile: https://editor.p5js.org/abe/sketches/wMfSYMEO [canvas2] It’s fun to do things with fragment shaders but it’s not always the best performing. It’s better to know when to use them and what for …

Another limitation of this technique in Processing: your stuck with 8 bit integers, so a value encoded in RGBA has only 256 variations. If your canvas is 256x256 pixels it can be ok for storing positions. Also, note the jitter when rotating. If two points near each other define a line, and those po…

Oh that’s interesting. Why is it that the gpu can’t take 50 points in this case?

Hard to say, because I just tried on a 5 year old laptop with integrated graphics and it was working with much higher numbers (I tried up to 500). The framerate just dropped, but it didn’t turn black as it did with the muuuuch better GTX 1060. Maybe a bug in the driver? I don’t know really.

Some particle rain… p5.js Web Editor Next up I will train with dots from text vectors… using reference | p5.js

Really thank you for showing this solution, even though this is difficult to understand at first

Fragment shader too many uniforms error

p5.js Coding Questions

myselfhimself February 1, 2021, 1:14pm 10

I now managed to to something with mouse tracking, thank you:
https://editor.p5js.org/myselfhimself/sketches/uVNEF5Ktz

Texture as data in shader has odd behavior

Topic		Replies	Views
Weird behavior with array uniforms for fragment shader, ideas? p5.js	3	871	February 10, 2021
Rendering many objects with a shader Coding Questions	2	499	November 5, 2021
Texture as data in shader has odd behavior Coding Questions	18	1666	February 23, 2022
Send different uniform values to a single shader Coding Questions	1	569	June 2, 2018
[SOLVED] PGraphics or PImage as Uniform not working when using GLSL in Java OpenGL Coding Questions	15	2172	August 22, 2019

Fragment shader too many uniforms error

Related topics