@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 seater
Full dome
4K
Stereovision

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.

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
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

ISO
Data Sources & Tools
——
Bristol 360
http://maps.bristol.gov.uk/
pinpoint/
——
www.openstreetmap.org.uk
www.mapbox.com

ISO
Data Sources
——
Bristol 360
http://data.gov.uk/
Wider regional data

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

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
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 POV
Left 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
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

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
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
Cyber City 3D
——
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.

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 runtime

Build for Web now available

ISO Bristol 360
Bristol 360
ISO
isodesign.co.uk
theurbantide.co.uk

@Bristol Data Dome Workshop (ISO/Urban Tide)

Recommended

Recommended

More Related Content

Similar to @Bristol Data Dome Workshop (ISO/Urban Tide)

Similar to @Bristol Data Dome Workshop (ISO/Urban Tide) (20)

More from South West Data Meetup

More from South West Data Meetup (11)

Recently uploaded

Recently uploaded (20)

@Bristol Data Dome Workshop (ISO/Urban Tide)