Mars 2020 Entry Descent Landing

Relive the whole Mars 2020 Entry Descent Landing in your browser, in 3D, powered by Three.JS/WebGL 🤯

Here’s a few pointers to use:

  • Use the ⏪ ⏩ at the bottom to speed up / slow down the animation
  • Scroll over the pane on the left to jump between phases of the landing
  • You can click and drag around as you see fit, zooming also possible

Mars 2020 Entry Descent Landing →

GitHub Skyline — Your GitHub Story in 3D

Nice in-browser 3D-render of your GitHub History. You can download the result as a .stl file to run it through your 3D printer.

Here’s my 2020 timeline for example:

I take pride in the fact that my Saturdays (front row) and Sundays (back row) remain as good as empty, and that there’s an occasional gap in between the blocks where I took some time off.

GitHub Skyline →

Make the page count of a 3D book visible using CSS Custom Properties

Michael Scharnagl:

I am currently building a book section for this site and thought it would be cool to show the books in 3D and also to make it visible how many pages a book has. In this article I would like to show you how to use CSS custom properties to adapt the thickness of a 3D book showing how many pages the book has.

Using a --page-count custom property he defines the number of pages, which is then clamped between a minimum and a maximum (--page-count-range), and finally converted to a width in pixels (--page-width). The resulting <length> is then applied onto a 3D-rotated div that makes up the thickness of the book.

html {
  --page-count: 50;
  --page-count-range: clamp(1, calc(var(--page-count) / 50), 20);
  --page-width: calc(10px * var(--page-count-range));
}

.book__wrapper::before {
  width: var(--page-width);
  transform: translateX(calc(200px - var(--page-width) / 2 - 3px)) rotateY(90deg) translateX(calc(calc(var(--page-width)) / 2))
}

.book__wrapper::after {
  transform: translateZ(calc(var(--page-width) * -1));
}

Make the page count of a 3D book visible using CSS Custom Properties →
Demo →

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 →

Painting a Selfie Girl, with Math

Today we are painting a girl taking a selfie, with mathematics.

I like how the author, a few minutes into the video, says … none of which is too complicated to be honest … while I’m hardly understanding any of the things that he’s explaining 🥵

You can play with the result over at Shadertoy.

Creating 3D Illustrations with CSS

Alex Trost at Frontend Horse:

One style I’ve been loving is the 3D work that Ricardo Oliva Alonso creates on CodePen.

It’s a style that looks like it was drawn in Adobe Illustrator or modeled with Three.js. Ricardo will often find a piece on Dribbble and recreate it on CodePen, styling it entirely with HTML and CSS.

While I love the style, I had no idea how he was making the pieces. Luckily, Ricardo was kind enough to share his techniques with us.

Creating 3D Illustrations with CSS →

Making 3D Models Using a Drone

Ow, this is nice. And apparently it’s called “Photogrammetry”.

💭 Reminds me of Microsoft’s Photosynth (RIP)

How Facebook 3D Photos work, and how to create one yourself

💡 Sparked by the 3D Ken Burns Effect from a Single Image post, I was reminded of a few other 3D photo things …

About a year ago, Facebook announced a feature named “3D Photos”, a way to show photos taken with Apple’s “Portrait Mode” (or any other device that does the same) interactively:

Whether it’s a shot of your pet, your friends, or a beautiful spot from your latest vacation, you just take a photo in Portrait mode using your compatible dual-lens smartphone, then share as a 3D photo on Facebook where you can scroll, pan and tilt to see the photo in realistic 3D—like you’re looking through a window.

As unearthed by this research Facebook builds a 3D model out of the image + depth data, and then render the generated .glb file on screen using Three.js.

For example, here’s the wireframe of the kangaroo pictured at the top of this post:


3D wireframe of the kangaroo (Yuri akella Artiukh)

~

A photo taken in Apple’s Portrait Mode is in essence no more than the flat photo combined with a depth map. A depth map is a gray scale photowhere white defines points close-by and pure black defines points farthest away. Using the depth map, you can then blur the content that is furthest away.


Photo + Depth Map = Portrait Mode (Marc Keegan)

~

Winging back to Facebook: if you upload a file named photo.jpg along with a file photo_depth.jpg, Facebook will treat the latter as the depth map for the photo.jpg, and create a post with a 3D photo from them.


Uploading a photo and its depth map to become one one 3D photo

~

If you don’t have a depth map of a photo, you can always create one yourself manually using Photoshop or any other image editing tool.

Certain advertises have used this technique a few times by now, as illustrated on Omnivirt:

Tools like the online 3D Photo Creator have a depth prediction algorithm built in. The result is most likely not as good as your own DIY depth map, yet it give you a head start.

🤖 Psst, As a bonus you can check the console to see the link to the resulting .glb float by in said tool 😉

~

To go the other way around – from 3d photo to photo and depth map – you can use a tool such as the Facebook 3D Photo Depth Analyzer to extract both the photo and the depth map from a 3D photo post.

Just enter the Facebook post ID and hit analyze 🙂

~

Another approach to show a 3D photo is to use WebGL. With this technique you don’t need to generate a .glb, but can directly use a photo and its accompanying depth map:

(Forked from this instructional video by k3dev)

Did this help you out? Like what you see?
Thank me with a coffee.

I don't do this for profit but a small one-time donation would surely put a smile on my face. Thanks!

☕️ Buy me a Coffee (€3)

To stay in the loop you can follow @bramus or follow @bramusblog on Twitter.