# Making use of the GPU to render huge amount of objects

**URL:** <https://discourse.processing.org/t/making-use-of-the-gpu-to-render-huge-amount-of-objects/26267>\
**Category:** Coding Questions\
**Created:** [December 15, 2020, 12:23pm UTC](https://discourse.processing.org/t/making-use-of-the-gpu-to-render-huge-amount-of-objects/26267 "2020-12-15T12:23:46Z")\
**Posts on this page:** 1\
**Showing post:** 3

<div class="post-metadata">

**Author:** ![josephh](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/josephh/32/210_2.png) [@josephh](https://discourse.processing.org/u/josephh)\
**Post date:** [December 15, 2020, 10:24pm UTC](https://discourse.processing.org/t/making-use-of-the-gpu-to-render-huge-amount-of-objects/26267/3 "2020-12-15T22:24:33Z")

</div>

Hi,

Welcome to the community! 🙂

By default, `p5.js` is not using the `WEBGL` mode for rendering but rather the standard `canvas` html element.

> [@lettuceburrito](#):
>
> We’re currently displaying a map of objects (simple rectangles with text in them, plus some single lines).

You said that you were using WEBGL but if you are only drawing lines, text and rectangles in two dimensions, there’s no need to use it.

For the canvas, it’s usually drawn using the CPU (in [immediate mode](https://en.wikipedia.org/wiki/Immediate_mode_(computer_graphics))) but today some browsers do hardware acceleration using the GPU for rendering :

> **[Impact of GPU Acceleration on Browser CPU Usage • Helge Klein](https://helgeklein.com/blog/impact-gpu-acceleration-browser-cpu-usage/)**
>
> GPU acceleration is en vogue. After slowly but steadily moving out of the 3D niche it has arrived in the mainstream. Today, applications like Microsoft Office leverage the GPU, but even more so do web browsers. Chrome, Firefox, and Internet Explorer...

> <https://stackoverflow.com/questions/12256562/javascript-canvas-libraries-slow-dont-use-gpu>

On the other side WEBGL is using the gpu for rendering and you might actually wonder which one to choose as stated in this thread :

> <https://stackoverflow.com/questions/36908427/webgl-vs-canvas-2d-hardware-acceleration>

Then if you need more performance, there’s some tricks to optimize the canvas rendering (like the one you did by pre rendering static shapes on a separate layer) :

> **[web.dev](https://web.dev/learn?hl=pt-br)**

But the issue is that p5js takes care of the webgl rendering for you so you don’t have a direct low level access to the api. If you really need more performance, go with WEBGL directly rather than using p5js so you can do optimizations. (again makes more sense if you are rendering 3d but works for 2d)

---

_[View the full topic](https://discourse.processing.org/t/making-use-of-the-gpu-to-render-huge-amount-of-objects/26267)._