“A-Frame Tutorials” Video Series

Alexandra Etienne has published a 7-part video series on working with A-Frame on YouTube:

A-Frame is a framework for building rich 3D experiences on the web. It’s built on top of three.js, an advanced 3D JavaScript library that makes working with WebGL extremely fun. The cool part is that A-Frame lets you build WebVR apps without writing a single line of JavaScript (to some extent). You can create a basic scene in a few minutes writing just a few lines of HTML.

A-Frame Tutorials →
A-Frame

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)

Playing with React VR

The folks at Hashrocket have a nice introductory writeup on getting started with the aforementioned React VR.

So if you’ve been doing React or React Native for the past months, you’ll see that React VR is super simple to get started and will let you build exciting 360 experiences.

Starting from the default React VR example scene, they eventually build up to a scene with a rotating object and realistic lighting.

Playing with React VR →

React VR – Build VR websites and interactive 360 experiences with React

React VR is a framework for the creation of VR applications that run in your web browser. It pairs modern APIs like WebGL and WebVR with the declarative power of React, producing experiences that can be consumed through a variety of devices. Leveraging web technologies and the existing React ecosystem, React VR aims to simplify the construction of 360 experiences and democratize the creation of VR content.

Rendering the scene pictured above can be done using this code snippet:

import React from 'react';
import {AppRegistry, Pano, Text, View} from 'react-vr';

class WelcomeToVR extends React.Component {
  render() {
    // Displays "hello" text on top of a loaded 360 panorama image.
    // Text is 0.8 meters in size and is centered three meters in front of you.
    return (
      <View>
        <Pano source={asset('chess-world.jpg')}/>
        <Text
          style={{
            fontSize: 0.8,
            layoutOrigin: [0.5, 0.5],
            transform: [{translate: [0, 0, -3]}],
          }}>
          hello
        </Text>
      </View>
    );
  }
};

AppRegistry.registerComponent('WelcomeToVR', () => WelcomeToVR);

If you’re familiar with React, you can now build in VR 🙂

React VR →
React VR on GitHub →

Sketching for virtual reality in 360°

Virtual reality is a brand new frontier, but there are already tools that cover almost all the steps of creating a new experience (thank you, game industry).

Sketching however, still remains a method that works … if you do it right:

I used to do a lot sketches of only part of the view, or views from different projections (for example front + top). It is good, but doesn’t reflect how the user will see it.

So I tried to use 360 panorama grid to align my sketches to wide angle view.

The result is stunning, and can easily be scanned and loaded into a VR scene:

Draw sketches for virtual reality like pro →

Glen Keane – Step into the Page

Be inspired:

Over nearly four decades at Disney, Glen Keane animated some the most compelling characters of our time: Ariel from The Little Mermaid, the titular beast in Beauty and the Beast, and Disney’s Tarzan, to name just a few. Keane has spent his career embracing new tools, from digital environments to 3D animation to today’s virtual reality, which finally enables him to step into his drawings and wander freely through his imagination.