How to render 3D in 2D canvas

Louis Hoebregts walks us through how they rendered a 3D globe on a 2D canvas.

Because as all the following animation steps were plain 2D, I couldn’t use a 3D renderer such as Three.js. And so I had to figure out how to render a 3D shape using only the Canvas 2D API.

In this article, I’ll show you how I finally did it. I’ll first explain how to render a basic shape from a 3D scene using the JavaScript Canvas 2D API. Then in the second part of this post, I’ll show you how to make everything a bit fancier with some textures and 3D volumes.

Some really nice demos in there, such as this one:

See the Pen 3D Globe in 2D (Depth sorting) by Base Design (@basedesign) on CodePen.

How to render 3D in 2D canvas →

Published by Bramus!

Bramus is a frontend web developer from Belgium, working as a Chrome Developer Relations Engineer at Google. From the moment he discovered view-source at the age of 14 (way back in 1997), he fell in love with the web and has been tinkering with it ever since (more …)

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.