# Fragment shader too many uniforms error

**URL:** <https://discourse.processing.org/t/fragment-shader-too-many-uniforms-error/17603>\
**Category:** Coding Questions\
**Created:** [February 7, 2020, 3:14am UTC](https://discourse.processing.org/t/fragment-shader-too-many-uniforms-error/17603 "2020-02-07T03:14:49Z")\
**Posts on this page:** 15\
**Page:** 1

<div class="post-metadata">

**Author:** ![GreenCell](https://avatars.discourse-cdn.com/v4/letter/g/b5ac83/32.png) [@GreenCell](https://discourse.processing.org/u/GreenCell)\
**Post date:** [February 7, 2020, 3:14am UTC](https://discourse.processing.org/t/fragment-shader-too-many-uniforms-error/17603/1 "2020-02-07T03:14:49Z")

</div>

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 as expected. Then someone reported that they were getting an _ERROR: too many uniforms_ on their ipad.

I went digging into this and of course it makes sense, all devices have their own maximum uniforms count.

So my question: What can I do to resolve this so that it can work reliably on any device? Right now I just hard-coded a maximum amount of particles which sets the uniform’s starting array length. Is there a better approach to this? Or maybe there’s a better approach to draw particles on the screen instead of a huge uniform array? I’m new to shaders so I’m oblivious if this not what I should be doing.

You can find sketch and shader here: [Magical trail shader - OpenProcessing](https://www.openprocessing.org/sketch/835887#)

---

<div class="post-metadata">

**Author:** ![hamoid](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/hamoid/32/58_2.png) [@hamoid](https://discourse.processing.org/u/hamoid)\
**Post date:** [February 12, 2020, 4:04pm UTC](https://discourse.processing.org/t/fragment-shader-too-many-uniforms-error/17603/2 "2020-02-12T16:04:24Z")

</div>

First, very nice effect! 🙂

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 the RGBA values for whatever other purpose you had in mind (positions, speeds, …)

Do you think that would work in your case?

---

<div class="post-metadata">

**Author:** ![GreenCell](https://avatars.discourse-cdn.com/v4/letter/g/b5ac83/32.png) [@GreenCell](https://discourse.processing.org/u/GreenCell)\
**Post date:** [February 13, 2020, 2:20am UTC](https://discourse.processing.org/t/fragment-shader-too-many-uniforms-error/17603/3 "2020-02-13T02:20:45Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![hamoid](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/hamoid/32/58_2.png) [@hamoid](https://discourse.processing.org/u/hamoid)\
**Post date:** [February 13, 2020, 4:16pm UTC](https://discourse.processing.org/t/fragment-shader-too-many-uniforms-error/17603/4 "2020-02-13T16:16:14Z")

</div>

[https://editor.p5js.org/abe/sketches/H8K7bY5s](https://editor.p5js.org/abe/sketches/H8K7bY5s)

![canvas](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/1/1707476186abd70acbdee5baa8a98093b0ba963f.png)

Here something done very quickly and without much thinking 🙂 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 to all particles to calculate brightness. The brute force approach.

---

<div class="post-metadata">

**Author:** ![GreenCell](https://avatars.discourse-cdn.com/v4/letter/g/b5ac83/32.png) [@GreenCell](https://discourse.processing.org/u/GreenCell)\
**Post date:** [February 14, 2020, 2:28am UTC](https://discourse.processing.org/t/fragment-shader-too-many-uniforms-error/17603/5 "2020-02-14T02:28:59Z")

</div>

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 😃

---

<div class="post-metadata">

**Author:** ![hamoid](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/hamoid/32/58_2.png) [@hamoid](https://discourse.processing.org/u/hamoid)\
**Post date:** [February 14, 2020, 12:09pm UTC](https://discourse.processing.org/t/fragment-shader-too-many-uniforms-error/17603/6 "2020-02-14T12:09:57Z")

</div>

Welcome! 🙂 I’m glad you found it understandable.

I made a variation 🙂

[https://editor.p5js.org/abe/sketches/wMfSYMEO](https://editor.p5js.org/abe/sketches/wMfSYMEO)

![canvas2](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/3/356b218581c13b15bed6d1b96106b2378b8ae8de.png)

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 🙂 For instance this one with 50 points stops working on my GTX1060, when I could draw looots of lines and achieve a similar effect by applying post processing (some king of glow / blur).

🙂

---

<div class="post-metadata">

**Author:** ![hamoid](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/hamoid/32/58_2.png) [@hamoid](https://discourse.processing.org/u/hamoid)\
**Post date:** [February 14, 2020, 12:14pm UTC](https://discourse.processing.org/t/fragment-shader-too-many-uniforms-error/17603/7 "2020-02-14T12:14:57Z")

</div>

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 points can only move in pixels (and not subpixels) the tilt of the line will jump greatly, meaning that the possible tilts of lines is limited (compared to using floats).

You could work around this by using both R and G to define one value (256x256 = 65536 variations) and B and A for another similar 2 byte value.

In more flexible environments like openFrameworks or OPENRNDR you can use float buffers.

---

<div class="post-metadata">

**Author:** ![GreenCell](https://avatars.discourse-cdn.com/v4/letter/g/b5ac83/32.png) [@GreenCell](https://discourse.processing.org/u/GreenCell)\
**Post date:** [February 17, 2020, 1:46am UTC](https://discourse.processing.org/t/fragment-shader-too-many-uniforms-error/17603/8 "2020-02-17T01:46:16Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![hamoid](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/hamoid/32/58_2.png) [@hamoid](https://discourse.processing.org/u/hamoid)\
**Post date:** [February 18, 2020, 9:10am UTC](https://discourse.processing.org/t/fragment-shader-too-many-uniforms-error/17603/9 "2020-02-18T09:10:59Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![myselfhimself](https://avatars.discourse-cdn.com/v4/letter/m/7ba0ec/32.png) [@myselfhimself](https://discourse.processing.org/u/myselfhimself)\
**Post date:** [February 1, 2021, 1:14pm UTC](https://discourse.processing.org/t/fragment-shader-too-many-uniforms-error/17603/10 "2021-02-01T13:14:06Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![myselfhimself](https://avatars.discourse-cdn.com/v4/letter/m/7ba0ec/32.png) [@myselfhimself](https://discourse.processing.org/u/myselfhimself)\
**Post date:** [February 1, 2021, 3:41pm UTC](https://discourse.processing.org/t/fragment-shader-too-many-uniforms-error/17603/11 "2021-02-01T15:41:37Z")

</div>

Some particle rain… [p5.js Web Editor](https://editor.p5js.org/myselfhimself/sketches/EffYLJ7lE)  
Next up I will train with dots from text vectors… using [reference | p5.js](https://p5js.org/reference/#/p5.Font/textToPoints)

---

<div class="post-metadata">

**Author:** ![myselfhimself](https://avatars.discourse-cdn.com/v4/letter/m/7ba0ec/32.png) [@myselfhimself](https://discourse.processing.org/u/myselfhimself)\
**Post date:** [February 1, 2021, 3:42pm UTC](https://discourse.processing.org/t/fragment-shader-too-many-uniforms-error/17603/12 "2021-02-01T15:42:14Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![hamoid](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/hamoid/32/58_2.png) [@hamoid](https://discourse.processing.org/u/hamoid)\
**Post date:** [February 1, 2021, 4:08pm UTC](https://discourse.processing.org/t/fragment-shader-too-many-uniforms-error/17603/13 "2021-02-01T16:08:56Z")

</div>

Happy to see you creating things with it 🙂

---

<div class="post-metadata">

**Author:** ![myselfhimself](https://avatars.discourse-cdn.com/v4/letter/m/7ba0ec/32.png) [@myselfhimself](https://discourse.processing.org/u/myselfhimself)\
**Post date:** [February 1, 2021, 6:44pm UTC](https://discourse.processing.org/t/fragment-shader-too-many-uniforms-error/17603/14 "2021-02-01T18:44:06Z")

</div>

Falling glowing text  
[https://editor.p5js.org/myselfhimself/sketches/9bTEzNQ2K](https://editor.p5js.org/myselfhimself/sketches/9bTEzNQ2K)

---

<div class="post-metadata">

**Author:** ![myselfhimself](https://avatars.discourse-cdn.com/v4/letter/m/7ba0ec/32.png) [@myselfhimself](https://discourse.processing.org/u/myselfhimself)\
**Post date:** [February 1, 2021, 8:11pm UTC](https://discourse.processing.org/t/fragment-shader-too-many-uniforms-error/17603/15 "2021-02-01T20:11:04Z")

</div>

Blinking colored glowing text with explosion on click:  
[https://editor.p5js.org/myselfhimself/sketches/mwEIYrOWO](https://editor.p5js.org/myselfhimself/sketches/mwEIYrOWO)