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.

3D Ken Burns Effect from a Single Image

Nice research by Simon Niklaus, Long Mai, Jimei Yang and Feng Liu:

In this paper, we introduce a framework that synthesizes the 3D Ken Burns effect from a single image, supporting both a fully automatic mode and an interactive mode with the user controlling the camera. Our framework first leverages a depth prediction pipeline, which estimates scene depth that is suitable for view synthesis tasks.

You can see the result in action starting at 0:30.

3D Ken Burns Effect from a Single Image →

🤔 I’m wondering how this will stack up against Apple’s “Portrait Mode” photos, as those photos already contain depth information.

The Thistlegorm Project

One of the most famous wrecks to dive on is that of the SS Thistlegorm, a British merchant steam ship that was sunk by German bombers on 6 October 1941 near Ras Muhamad (Red Sea, Egypt).

The University of Nottingham, Ain Shams (Cairo) and Alexandria University have joined forces to create a 3D model of the ship’s wreck. Spread out over 12 dives they’ve collected 24,307 high resolution image files (amounting to 637Gb of data) and have recorded several 360° videos.


360 video of a dive on the SS Thistlegorm

💁‍♂️ SS Thistlewhat?

In September 1941, during WW2, the SS Thistlegorm and HMS Carlisle could not transit through the Suez Canal to reach the port of Alexandria due to a collision in said canal. Awaiting unobstructed passage of the canal they moored at a location the Allies labeled “Safe Anchorage F”.

In the night of October 5 to October 6 1941 the Germans dispatched two Heinkel He-111 aircraft from Crete to locate Allied troop carriers, but failed to do so. On their way back however they spotted the SS Thistlegorm and bombed it. By pure chance the bombs hit cargo hold #4, which also contained (part of) the ammunition the ship was holding, resulting in a huge explosion which made the ship sink fast.


Plan of the SS Thistlegorm (click to enlarge)

The fact that the ship is so famous is because of several reasons:

  • At a depth of 30m it rests at an accessible depth.
  • The wreck sits upright, making it also accessible (wrecks that don’t sit upright can make you nauseous)
  • Even though Jacques Cousteau discovered the wreck in the late fifties it was forgotten for a long time. It only became a dive site in the late nineties, which means things were left intact for over 4 decades.
  • It’s a wreck with lots of things to see. Since it was left untouched for a long time, most of the cargo is still in place: trucks, boots, motorbikes, rifles, shells, airplane wings, tanks, steam locomotives, … they’re all still there just like they were stored at the time of the explosion. (Note that much has been salvaged over the past 20 years though, unfortunately)
  • The wreck can easily be penetrated, with one or more exits always in sight.


One of the motorbikes aboard the Thistlegorm

In March earlier this year I did two dives on the SS Thistlegorm. I can confirm that it truly is a beautiful wreck to dive on. Beware the possible strong currents though 😉

The conversion of the 2D images to a 3D model was done using a piece of software called Agisoft Photoscan Pro, and amounted for quite a lot of time:

  • 42 (1008hrs) days of local computing runtime
  • 23 days (556hrs) of cloud computing runtime
  • 65 (1560hrs) days of continuous computer processing in total

The result is amazing though: not only have they created 3D scenes of the exterior of the wreck’s site (embedded at the top of this post), they’ve also created 3D models of the various floors of the SS Thistlegorm. If you have a Cardboard Viewer you can watch ‘m in true VR style.

The Thistlegorm Project →
The Thistlegorm Project: 3D Programmetry →
The Thistlegorm Project: 360 Videos →

Did this help you out? Like what you see?
Consider donating.

I don’t run ads on my blog nor do I do this for profit. A donation however would always put a smile on my face though. Thanks!

☕️ Buy me a Coffee ($3)

CSS-Only Direction Aware Hover

In the past I’ve seen some demos like this one that use JavaScript/math to calculate the hover direction upon mouseenter. Detecting the direction is also possible sans JavaScript, by adding triangular hitareas to a box/link in combination with the CSS General Sibling Selector (viz. ~) to rotate the content.

Internally it looks like this:

Note that the hitareas are made triangular using CSS Clipping, and not using the for this typically used CSS border-fiddling.

Here’s a Pen of the final markup for you to play with:

See the Pen CSS-Only Direction-Aware Cube Links by Gabrielle Wee (@gabriellewee) on CodePen.

Neat! In the process of getting to the end result, a pure CSS version of the Tilt Hover Effect is also demonstrated 🙂

How to Create Direction-Aware CSS-Only Hover Effects →

Sidenote/Related: The General Sibling Selector – just like any other Combinator such as the Adjacent Sibling Selector (+) for that matter – is a CSS Selector that’s very powerful and should be used more often. Here’s why:

Vectiler

Vectiler is a 3d terrain and city mesh builder and exporter. the exports include road/terrain and building geometry.

Embedded above is an example of Manhattan:

Vectiler →

Related: Vizicities →

Patrick Hughes 3D Paintings

This is an amazing piece of 3D art where the closest part of the picture appears to be the furthest away, an optical illusion known as “Reverspective”. As you move around the painting, the room in the painting appears to move with you.

The mind can easily be fooled.

Here’s another one: