New P5/WebGL Library for text!

Hi there!

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

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, or OpenProcessing article!

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.)

7 Likes

Some example code:
Text in 3D
Images in 3D
Whole 2D canvas in 3D

Some example images:




1 Like

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?

Really great work. Thanks!

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.

1 Like

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)

1 Like