# New P5/WebGL Library for text!

**URL:** <https://discourse.processing.org/t/new-p5-webgl-library-for-text/9136>\
**Category:** Gallery\
**Created:** [March 9, 2019, 8:11am UTC](https://discourse.processing.org/t/new-p5-webgl-library-for-text/9136 "2019-03-09T08:11:02Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![FreddieRa](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/freddiera/32/4078_2.png) [@FreddieRa](https://discourse.processing.org/u/FreddieRa)\
**Post date:** [March 9, 2019, 8:11am UTC](https://discourse.processing.org/t/new-p5-webgl-library-for-text/9136/1 "2019-03-09T08:11:02Z")

</div>

# Hi there!

This is a post introducing my p5.js library **p5.3D**.

 ![An example of my library](https://yyz2.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/9/9f7a9a92d34df1049d0f0ce2164678f9aa22f18b.png)

Built to work with the existing WebGL renderer, this provides an easy and efficient way to render common 2D canvas elements in 3D. This is mainly for text, but includes support for images, and 2D canvases as a whole.

If you want to use it or see how it works, check out my [github](https://github.com/FreddieRa/p5.3D), or OpenProcessing [article](https://www.openprocessing.org/sketch/674191)!

At it’s heart, it converts a `p5.graphics` object (i.e. a canvas) into a 2D array of 1’s and 0’s representing black and white pixels, and then efficiently maps rectangles onto this array to try and minimise the number of primitives that need to be drawn. These are then drawn as cuboids into WebGL. This means it runs ~10x faster than rendering each pixel as its own cube!

Feel free to check it out, modify it, and let me know if there are any tweaks or features you want!

(As a new user I cannot post more images and links, but there are plenty of example sketches and images I can point you to.)

---

<div class="post-metadata">

**Author:** ![FreddieRa](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/freddiera/32/4078_2.png) [@FreddieRa](https://discourse.processing.org/u/FreddieRa)\
**Post date:** [March 9, 2019, 4:51pm UTC](https://discourse.processing.org/t/new-p5-webgl-library-for-text/9136/2 "2019-03-09T16:51:55Z")

</div>

Some example code:  
[Text in 3D](https://www.openprocessing.org/sketch/669863)  
[Images in 3D](https://www.openprocessing.org/sketch/673102)  
[Whole 2D canvas in 3D](https://www.openprocessing.org/sketch/673354)

Some example images:

 ![Text3D](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/c/c353c4383fcbe69108489310bd2da2d6dec7eff8.png)  
 ![Text3D](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/c/ccdb2b6cd29552b2729649f060f7de6809bf0e4c.png)  
 ![Picture3D](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/3/39ef2555a16df2fd7e6ae6d5af798a450c03103e.png)  
 ![Canvas3D](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/7/7e8208fb5dc9bb45caac0d2ea52f9f75920f934f.jpeg)

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [March 9, 2019, 4:55pm UTC](https://discourse.processing.org/t/new-p5-webgl-library-for-text/9136/3 "2019-03-09T16:55:39Z")

</div>

> [@FreddieRa](#):
>
> efficiently maps rectangles onto this array to try and minimise the number of primitives that need to be drawn.

Very exciting – thank you for developing, sharing, and explaining this.

I notice that the examples aren’t a pure extrusion – there is a bevel or rounded edge on the top face. Does that mean the mapped rectangles are drawn twice?

---

<div class="post-metadata">

**Author:** ![yaniki](https://avatars.discourse-cdn.com/v4/letter/y/c77e96/32.png) [@yaniki](https://discourse.processing.org/u/yaniki)\
**Post date:** [March 9, 2019, 6:20pm UTC](https://discourse.processing.org/t/new-p5-webgl-library-for-text/9136/4 "2019-03-09T18:20:43Z")

</div>

Really great work. Thanks!

---

<div class="post-metadata">

**Author:** ![FreddieRa](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/freddiera/32/4078_2.png) [@FreddieRa](https://discourse.processing.org/u/FreddieRa)\
**Post date:** [March 9, 2019, 7:18pm UTC](https://discourse.processing.org/t/new-p5-webgl-library-for-text/9136/5 "2019-03-09T19:18:15Z")

</div>

It does indeed have a bevel effect! One of my efforts to make it look even more 3D, but it is entirely optional for all of them. It’s just a parameter that is `true` by default.

It works by trying to find al the “inner” pixels (i.e ones that are completely surrounded by other pixels), and then creating another set of rectangles for those. They are extruded more than the usual ones so they stick out each side, but it is only one extra primitive, not one front and one for the back, so doesn’t noticeably affect performance or loading times at all.

---

<div class="post-metadata">

**Author:** ![FreddieRa](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/freddiera/32/4078_2.png) [@FreddieRa](https://discourse.processing.org/u/FreddieRa)\
**Post date:** [March 9, 2019, 7:20pm UTC](https://discourse.processing.org/t/new-p5-webgl-library-for-text/9136/6 "2019-03-09T19:20:41Z")

</div>

Thank you!

If you use it for any projects please post them here so I can what great stuff the community comes up with!

(by the way, you can modify some of the methods to create effects like this: [https://www.openprocessing.org/sketch/677593](https://www.openprocessing.org/sketch/677593))