Nice 3D text effect:
To make the hover effect work, each line also contains the contents of the next line. When hovering the original content slides out of view and the contents of the next line slides in, thus tricking the mind 🙂
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.
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!
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:
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:
Cinema Seat Preview
Maybe you are familiar with those ticket booking systems where, at some point during the purchase flow, you have to choose a seat. This is usually done when selling tickets for games, movies, flights or concerts. Wouldn’t it be cool to have some kind of “realistic” preview of the seat, i.e. see the stage or screen from the perspective of the space you chose? Of course it would 🙂 This is the kind of question that resulted into a new experiment which we’d like to share with you today.
Cool!
WipEout WebGL Model Viewer
The track itself is stored in several distinct files. The most interesting of which are
TRACK.TRV, containing raw vertices, andTRACK.TRFcontaining the track faces as quads of 4 index pointers into the vertices. Pretty straight forward.
Reverse Engineering WipEout →
WipEout Model Viewer, A WebGL Expiriment →
ScanLAB Projects
ScanLAB Projects are the UK’s leading provider of large scale 3D scanning, capturing precise, beautiful digital replicas of buildings, landscapes, objects and events.
We provide quality 3D Scanning Services, 3D Publishing and Pointcloud Visualisation.
Damn impressive! Be sure to check out some of the works shown on their website.
The digital unwrapping of the Egyptian priest Neswaiu
Note: There’s a flash video embedded in this post. Your feed reader or iDevice might/will not show it.
Stockholm’s Medelhavsmuseet, the Museum of Mediterranean and Near Eastern Antiquities, has been working with the research group Interactive Institute Swedish ICT to digitally scan their eight human mummies as part of preparations for a new permanent exhibition.
The results for one of their mummies, the Egyptian priest Neswaiu, are now on show in the form of a digital autopsy table in an “embalmment room” beside his real mummified remains and coffins.
The digital unwrapping of the Egyptian priest Neswaiu →
(via)
Graffiti General
Graffiti General is an immersive WebGL plunge into an abandoned building near Paris and the countless graffiti works that it enshrines.
On the eve of it’s restoration, the memory of the building in its current state is preserved and accessible to everybody.
Graffiti General was made possible thanks to a combination of the very latest technologies: WebGL and ThreeJS on a HTML5 page.
20 000 M2 were thus 3D modelled and 5200 photos, the greatest amount of textures ever used, were colour corrected and integrated into the 3D model.