@Bristol Data Dome Workshop (ISO/Urban Tide)

ISO Bristol 360

© The ISO Organisation 2015

Bristol 360

Damien Smith / Clyde Lawson: ISO Steven Revill / Simon Tricker: Urban Tide

Data dome workshop

ISO Bristol 360


Bristol 360

ISO

ISO Bristol 360


The brief

—— 01_Review the technical opportunities of the At Bristol planetarium

02_Explore visual design for graphical dome content

03_Review the available data sets

04_Create an engaging public demonstration

ISO Bristol 360


The brief

—— 01_Review the technical opportunities of the At Bristol planetarium

ISO


Bristol 360

At Bristol ——

100 seaterFull dome4KStereovision


ISO Bristol 360


At Bristol ——

The company was founded in 1968 by David Evans and Ivan Sutherland, professors in the Computer Science Department at the University of Utah.

Most of the employees were active or former students, and included Jim Clark, who started Silicon Graphics, Ed Catmull, co-founder of Pixar, and John Warnock of Adobe.

http://en.wikipedia.org/wiki/David_C._Evans

http://en.wikipedia.org/wiki/Ivan_Sutherland

http://en.wikipedia.org/wiki/University_of_Utah

http://en.wikipedia.org/wiki/James_H._Clark

http://en.wikipedia.org/wiki/Silicon_Graphics

http://en.wikipedia.org/wiki/Edwin_Catmull

http://en.wikipedia.org/wiki/Pixar

http://en.wikipedia.org/wiki/John_Warnock

http://en.wikipedia.org/wiki/Adobe_Systems

ISO Bristol 360


At Bristol ——

ISO Bristol 360


Our message

—— Data is a city asset we all own… it enables us to look at our city in a different way and imagine new ways of doing things!

- Data is cool- Bristol is open- Come and join in

ISO Bristol 360


The brief

—— 02_Explore visual design for graphical dome content

ISO


Bristol 360

Panoramics + Tracked GFX ——


ISO


Bristol 360

Panoramics + Tracked GFX ——


ISO


Bristol 360

Datascapes —— Topography

Population stats, electoral

votes, tweets etc

Animate using 2D bump

maps


ISO


Bristol 360

Datascapes —— Faceted / low poly


ISO


Bristol 360

Slit scan ——

Visualising time or video media via slit scan effects See Cinemetrics


ISO


Bristol 360

Dataspheres —— Timeline

ISO


Bristol 360

Particle simulations ——

Travel?

Flight paths?

Weather?

Networks?

Emails?

Texts?

Swarming particle simulations

ISO


Bristol 360

Particle simulations ——

Clean air / pollution

ISO


Bristol 360

Weather / air ——

http://hint.fm/wind/

ISO


Bristol 360

Minimal infographics ——

ISO


Bristol 360

Mapping ——

ISO Bristol 360


The brief

—— 03_Review the available data sets

ISO


Data Review ——

Bristol 360

15 data sources reviewed

Open Data Bristol 243 datasets

ISO


Data Sources ——

Bristol 360

https://

opendata.bristol.gov.uk/

243 datasets from Open Data Bristol

https://opendata.bristol.gov.uk/

ISO


Data Sources & Tools ——

Bristol 360

http://maps.bristol.gov.uk/

pinpoint/

——

www.openstreetmap.org.uk

www.mapbox.com

http://maps.bristol.gov.uk/pinpoint/

http://www.openstreetmap.org.uk

http://www.mapbox.com

ISO


Data Sources ——

Bristol 360

http://data.gov.uk/

Wider regional data

http://data.gov.uk/

ISO


Data Workflow ——

Bristol 360

Data Set Identification Data Set Download

Live Rail Data

www.nationalrail.co.uk

data.gov.uk

Accidents

www.opendata.bristol.gov.uk

Manual from National Rail

Downloaded from

www.opendata.bristol.gov.uk

Data Set Refinement Lat Long Creation CSV Creation

Removal of data to

key items

Removal of

Accident Type

Identify Lat/Long using Google

Earth of other tools

Transform Easting / Northing to

Lat Long

http://www.bgs.ac.uk/data/

webservices/convertform.cfm

Ready of ingestion into

ISO Software

http://www.nationalrail.co.uk

http://data.gov.uk

http://www.opendata.bristol.gov.uk

http://www.opendata.bristol.gov.uk

ISO


New Data ——

Bristol 360

https://www.dropbox.com/sh/cui16vpt5hrg72x/AAABKudCizGwycLvxppq-2Uoa?dl=0

ISO


Data Stories ——

Potential new themes

Bristol 360

Mayor’s City Vision

1. Healthy and caring Bristol

2. Keep Bristol working and learning

3. Keep Bristol moving

4. Building successful places

5. Global Green Capital

6. Vibrant Bristol

7. Empowered City

8. Resilient City

9. Active Citizens

ISO Bristol 360


The brief

—— 04_Create an engaging public demonstration

ISO Bristol 360

SCENE MESSAGE / SCRIPT VISUALS DATA SETS

01_Intro - The

Smart City

3 bullet points on city data 3D generic city view with data switching on Smart Cities embrace data & digital

technologies to create better places

to live, work and play.

02_Bristol -

Transport and

Environmental

Bristol as connected city - over 200 datasets made

available

such as...

- transport (car journey times, bus timetables, accident

hotspots)

and environmental

(air quality, rainfall and flood alerts)

2D map of bristol with overlays of

- 3 x transport datasets

- 3 x environmental datasets

- "Live" journey times by route.

- "Live" bus delay by bus route.

- Accident locations by time of day if

required.

- "Live" air quality by location.

- River water quality and "live" river

levels

- Flood alerts

03_Census data We can explore social mobility here we compare Clifton

with Eastville (life expectancy, quality of health, education)

Bar chart / "Animated balls" style graphics - Travel to work / school

- Happiness with Bus Transport

- Quality of Life - Health

- Quality of Life - Obesity

- Population

- Industry / profession

- Language

04_Cultural and

Historic Data

And also cultural data - here we see monuments and even

the location of every original Banksy in the city

2D map with data on

- monuments (slitscan)

- Banksy

- Monuments

- Old Cinemas

- Listed Buildings

- Sculptures

TBC

- Associated Pictures of above

- Banksy + Associated Pictures

05_Social Data We can also access and map social data such as location

specific photos and the mood of the city

Social media =

animated instagram and twitter

- Twitter mood trawling across Bristol

- Instagram

06_The Internet of

Things

We can also use data to map the future - did you know

Bristol is installing a mesh network and 20,000 sensors -

enabling the Internet of Things where devices and people

can communicate directly with each other

Mesh fills the dome - we add 20,000 points, 4G and fibre

networks…. and out of these connections we start to reveal

(dot to dot) images like smartphones and driverless cars

- No real data available, it will be a

mock up.

Story Outlines ——

ISO


Bristol 360

ISO


Bristol 360

ISO


3D dome mockup ——

Bristol 360

15 degree tilt

Cut away view

ISO


Bristol 360

After Effects pluginC4D plugin

Workflows

Pre-viz dome viewer

ISO


Bristol 360

Blendy cam 360 —— C4D ——

Pros:

We could make use of the entire dome.

The camera rig / plugin were easy to use.

The plugin was reasonably priced

Cons:

The plugin didn't like x-particles / hair materials. RBG is fine but depth passes don’t show up.

Issues with alpha channels on textures such as pre rendered text from AE.

ISO


Bristol 360

Blendy cam 360 —— C4D ——

2D animated layer

ISO


Bristol 360

AFX_5 camera set up —— After effects ——

Pros:

5 camera set up out put to FULLDOME plugin for fisheye

ISO


Bristol 360

i_The Smart City

ISO


Bristol 360

Wide angle view from

inside dome

3D City ——

Generic 3D model

ISO


Bristol 360

3D City ——

City render tests

Back POV

Front POV

Right POVLeft POV

Domemaster

ISO


Bristol 360

Projection covers the entire

surface of the dome.

Live action / tracked gfx ——

360 Panoramic with tracked

graphics showing stats, historic

buildings, landmarks etc

ISO


Bristol 360

Jamie and Clyde grafting.

Canon 5D

Sigma 8m fisheye

Canon 8 -15m fisheye

Camera orientated to 10 degree tilt

ISO


Bristol 360

ISO


Bristol 360

ii_Bristol - Transport and Environment

ISO


Bristol 360

Maps ——

GEOlayers

Create maps directly in After Effects using HTTP-tileservers for up-to-date imagery and highly detailed vector-data.

GEOlayers comes with the following server-APIs:

• bing maps • mapquest • openstreetmap • mapbox • stamen design

http://www.bing.com/maps/

http://www.mapquest.com/

https://www.openstreetmap.org/

https://www.mapbox.com/

http://maps.stamen.com/

ISO


Bristol 360

Map data ——

Bristol / MapBox

ISO


Bristol 360

Maps ——

Map box development

ISO


Bristol 360

Maps ——

Dome mapping development

ISO


Bristol 360

Maps ——

Animation test

ISO


Bristol 360

iii_Census data

ISO


Bubble data ——

Bristol 360

ISO


Bubble data ——

Largest vote share per ward

Bristol 360

Projection covers the entire

surface of the dome.

ISO


Bubble data ——

Test animation

Bristol 360

ISO


Bristol 360

iv_Cultural and historic data

ISO


Bristol 360

Slit scan ——

Sliced timelapse from a

variety of locations around

Bristol.

ISO


Bristol 360

Slit scan ——

Sliced timelapse from a

variety of locations around

Bristol.

Offset layered strips in 3D space

ISO


Bristol 360

Slit scan ——

Test render

ISO


Bristol 360

v_Social data

ISO


Bristol 360

Social Media ——

Spinning network of

Instagram posts floating in

3D space.

ISO


Bristol 360

Social Media ——

AE test using 5 camera

technique

ISO


Bristol 360

vi_internet of things

ISO


Bristol 360

Mesh network ——

Mesh multiplies highlighting

that there are over 45,000

sensors around the city.

ISO


Bristol 360

Mesh network ——

Plexus test

ISO


Bristol 360

01_Intro

Smart Cities embrace data & digital technologies to create

better places to live, work & play.

02_Bristol is Open

Bristol is a connected city - over 200 datasets are publicly

available such as transport and environmental information

03_Census data

The data also allows us to understand more about our

communities nd how rich and diverse we are…

04_Culture and historic data

We can also reveal cultural data - from mapping city events and

monuments to the location of every original Banksy in Bristol!

05_Social data

Data also allows us to see the city via social media where

location specific photos illustrate the mood of the city.

environmental data (air quality, rainfall and flood alerts)…

06_The internet of things

And we can also use data to plan for the future; did you know

Bristol is installing a mesh network and 20,000 sensors -

enabling the Internet of Things where millions of devices and

people will be able communicate directly to each other.

ISO Bristol 360


© The ISO Organisation 2015© The ISO Organisation 2015


ISO Bristol 360


Domeport viewer

——

ISO Bristol 360


Live demo

—— 04b_Realtime demo

ISO Bristol 360


Live demo

—— Unity demo

EXE

ISO Bristol 360


Live demo

——

ISO Bristol 360


Live demo

—— Importing Open Street Map / and cybercity 3D

There was a bit of clean up necessary, but the process is pretty straight forward. Main thing is to optimise the map for running in a games environment.

For the demo, it was merged into one mesh then reimported. If we were to do this *properly* (i.e. with the luxury of time) we'd suggest merging the mesh then splitting it up so we can do dynamic loading of the environment (keeping strain off the processor and the framerate as high as possible).

ISO


Cyber City 3D ——

C4D render test

Bristol 360

ISO Bristol 360



C4D render test

Bristol 360

ISO



C4D render test

Bristol 360

ISO Bristol 360


Live demo

—— Data aligned as geo positions / flags

I think the main issue here was that the map isn't actually that 'accurate' in terms of landmarking - so we may say 'here is the train station' but the building may not resemble the train station. That said, it is anatomically correct, and I believe Tom used Google map references to place the markers. Once placed, attaching data is a doddle.

ISO Bristol 360


Data points ——

Banksy locations

and media

ISO Bristol 360


Live demo

—— Data animations added as png sequences

Generally we should avoid this - but it is a fast, easy way to get pre-ziz sequences doing into Unity. Basically just playing through an array of images. This has quite a high overhead in terms of performance and VRAM - and we don't think you could populate an entire map this way without some clever scene loading).

If we were to tackle a fully functioning environment, we'd want to create modular animation components with dynamic text elements so that it is all driven within Unity, and the data can be updated easily and on-the-fly. If we did it this way, the graphics would look crisper and we'd have much more control of the animations.

ISO Bristol 360


Data animations ——

png sequences would

be scripted as modular

‘live data’ elements

ISO Bristol 360


Live demo

—— Paths through the data.

The virtual camera travels on rails that are generated at runtime. We've implemented an AI pathfinding system which allows you to place points anywhere in the city and effectively tell the camera to go there. On command it will work out the best path (this is generally the 'shortest' route, but by adding additional nodes on the map, we can make the camera follow routes to particular places.

ISO Bristol 360


Paths through data ——

AI pathfinding

ISO Bristol 360


Live demo

—— Physics demos

Unity is *brilliant* at doing physics. It's what 3d games engines are pretty much built to do. We can make things act as they would in the real world, or manipulate the parameters of reality to make them act oddly/interestingly.

We can also pause and rewind time, cause explosions (!), and change pretty much any physical property of the objects in the scene. The camera could be made to act as a physical body too (so it could smash through stuff or respond to the environment).

ISO Bristol 360


Physics ——

Live generative effects

ISO Bristol 360


Live demo

—— Process for adapting for the Oculus Rift.

All the tools needed are on the Oculus Developer website. (https://developer.oculus.com/)

In it’s basic form its a case of replacing the standard unity scene camera for a dual Oculus camera rig; however there were plenty of settings we had to tweak to get the best performance e.g. reduce image stuttering etc.

Oculus itself comes with a config utility program that you can use to set up profiles for each user and customise the experience for them by measuring height, eye to neck distance, distance between pupils etc.

https://developer.oculus.com/

ISO Bristol 360


Live demo

—— Dome playback

The Unity plugin needed for dome development is called Omnity 2. Omnity 2 is a class that converts Unity3D’s camera into a fisheye for projection mapping onto domes and arbitrary screen surfaces.http://www.elumenati.com

Features include:Just one file: “OmnityClass.cs”Simply drop Omnity onto your main camera and it works.View frustums for user-defined screen shapes and system configurations.Modify default settings at build time & tweak at runtimeBuild for Web now available

http://www.elumenati.com

ISO Bristol 360


Bristol 360

ISO

isodesign.co.uk theurbantide.co.uk

http://urbantide.co.uk

Data & Analytics

@Bristol Data Dome Workshop (ISO/Urban Tide)