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