@bristol data dome workshop (iso/urban tide)
TRANSCRIPT
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
© The ISO Organisation 2015
Bristol 360
ISO
ISO Bristol 360
© The ISO Organisation 2015
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 ISO Organisation 2015
The brief
—— 01_Review the technical opportunities of the At Bristol planetarium
ISO
© The ISO Organisation 2015
Bristol 360
At Bristol ——
100 seaterFull dome4KStereovision
© The ISO Organisation 2015
ISO Bristol 360
© The ISO Organisation 2015
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
© The ISO Organisation 2015
At Bristol ——
ISO Bristol 360
© The ISO Organisation 2015
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 ISO Organisation 2015
The brief
—— 02_Explore visual design for graphical dome content
ISO
© The ISO Organisation 2015
Bristol 360
Panoramics + Tracked GFX ——
© The ISO Organisation 2015
ISO
© The ISO Organisation 2015
Bristol 360
Panoramics + Tracked GFX ——
© The ISO Organisation 2015
ISO
© The ISO Organisation 2015
Bristol 360
Datascapes —— Topography
Population stats, electoral
votes, tweets etc
Animate using 2D bump
maps
© The ISO Organisation 2015
ISO
© The ISO Organisation 2015
Bristol 360
Datascapes —— Faceted / low poly
© The ISO Organisation 2015
ISO
© The ISO Organisation 2015
Bristol 360
Slit scan ——
Visualising time or video media via slit scan effects See Cinemetrics
© The ISO Organisation 2015
ISO
© The ISO Organisation 2015
Bristol 360
Dataspheres —— Timeline
ISO
© The ISO Organisation 2015
Bristol 360
Particle simulations ——
Travel?
Flight paths?
Weather?
Networks?
Emails?
Texts?
Swarming particle simulations
ISO
© The ISO Organisation 2015
Bristol 360
Particle simulations ——
Clean air / pollution
ISO
© The ISO Organisation 2015
Bristol 360
Weather / air ——
http://hint.fm/wind/
ISO
© The ISO Organisation 2015
Bristol 360
Minimal infographics ——
ISO
© The ISO Organisation 2015
Bristol 360
Mapping ——
ISO Bristol 360
© The ISO Organisation 2015
The brief
—— 03_Review the available data sets
ISO
© The ISO Organisation 2015
Data Review ——
Bristol 360
15 data sources reviewed
Open Data Bristol 243 datasets
ISO
© The ISO Organisation 2015
Data Sources ——
Bristol 360
https://
opendata.bristol.gov.uk/
243 datasets from Open Data Bristol
ISO
© The ISO Organisation 2015
Data Sources & Tools ——
Bristol 360
http://maps.bristol.gov.uk/
pinpoint/
——
www.openstreetmap.org.uk
www.mapbox.com
ISO
© The ISO Organisation 2015
Data Sources ——
Bristol 360
http://data.gov.uk/
Wider regional data
ISO
© The ISO Organisation 2015
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
© The ISO Organisation 2015
New Data ——
Bristol 360
https://www.dropbox.com/sh/cui16vpt5hrg72x/AAABKudCizGwycLvxppq-2Uoa?dl=0
ISO
© The ISO Organisation 2015
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 ISO Organisation 2015
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
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
© The ISO Organisation 2015
Bristol 360
ISO
© The ISO Organisation 2015
Bristol 360
ISO
© The ISO Organisation 2015
3D dome mockup ——
Bristol 360
15 degree tilt
Cut away view
ISO
© The ISO Organisation 2015
Bristol 360
After Effects pluginC4D plugin
Workflows
Pre-viz dome viewer
ISO
© The ISO Organisation 2015
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
© The ISO Organisation 2015
Bristol 360
Blendy cam 360 —— C4D ——
2D animated layer
ISO
© The ISO Organisation 2015
Bristol 360
AFX_5 camera set up —— After effects ——
Pros:
5 camera set up out put to FULLDOME plugin for fisheye
ISO
© The ISO Organisation 2015
Bristol 360
i_The Smart City
ISO
© The ISO Organisation 2015
Bristol 360
Wide angle view from
inside dome
3D City ——
Generic 3D model
ISO
© The ISO Organisation 2015
Bristol 360
3D City ——
City render tests
Back POV
Front POV
Right POVLeft POV
Domemaster
ISO
© The ISO Organisation 2015
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
© The ISO Organisation 2015
Bristol 360
Jamie and Clyde grafting.
Canon 5D
Sigma 8m fisheye
Canon 8 -15m fisheye
Camera orientated to 10 degree tilt
ISO
© The ISO Organisation 2015
Bristol 360
ISO
© The ISO Organisation 2015
Bristol 360
ii_Bristol - Transport and Environment
ISO
© The ISO Organisation 2015
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
© The ISO Organisation 2015
Bristol 360
Map data ——
Bristol / MapBox
ISO
© The ISO Organisation 2015
Bristol 360
Maps ——
Map box development
ISO
© The ISO Organisation 2015
Bristol 360
Maps ——
Dome mapping development
ISO
© The ISO Organisation 2015
Bristol 360
Maps ——
Animation test
ISO
© The ISO Organisation 2015
Bristol 360
iii_Census data
ISO
© The ISO Organisation 2015
Bubble data ——
Bristol 360
ISO
© The ISO Organisation 2015
Bubble data ——
Largest vote share per ward
Bristol 360
Projection covers the entire
surface of the dome.
ISO
© The ISO Organisation 2015
Bubble data ——
Test animation
Bristol 360
ISO
© The ISO Organisation 2015
Bristol 360
iv_Cultural and historic data
ISO
© The ISO Organisation 2015
Bristol 360
Slit scan ——
Sliced timelapse from a
variety of locations around
Bristol.
ISO
© The ISO Organisation 2015
Bristol 360
Slit scan ——
Sliced timelapse from a
variety of locations around
Bristol.
Offset layered strips in 3D space
ISO
© The ISO Organisation 2015
Bristol 360
Slit scan ——
Test render
ISO
© The ISO Organisation 2015
Bristol 360
v_Social data
ISO
© The ISO Organisation 2015
Bristol 360
Social Media ——
Spinning network of
Instagram posts floating in
3D space.
ISO
© The ISO Organisation 2015
Bristol 360
Social Media ——
AE test using 5 camera
technique
ISO
© The ISO Organisation 2015
Bristol 360
vi_internet of things
ISO
© The ISO Organisation 2015
Bristol 360
Mesh network ——
Mesh multiplies highlighting
that there are over 45,000
sensors around the city.
ISO
© The ISO Organisation 2015
Bristol 360
Mesh network ——
Plexus test
ISO
© The ISO Organisation 2015
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© The ISO Organisation 2015
© The ISO Organisation 2015
ISO Bristol 360
© The ISO Organisation 2015
Domeport viewer
——
ISO Bristol 360
© The ISO Organisation 2015
Live demo
—— 04b_Realtime demo
ISO Bristol 360
© The ISO Organisation 2015
Live demo
—— Unity demo
EXE
ISO Bristol 360
© The ISO Organisation 2015
Live demo
——
ISO Bristol 360
© The ISO Organisation 2015
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
© The ISO Organisation 2015
Cyber City 3D ——
C4D render test
Bristol 360
ISO Bristol 360
© The ISO Organisation 2015
Cyber City 3D ——
C4D render test
Bristol 360
ISO
© The ISO Organisation 2015
Cyber City 3D ——
C4D render test
Bristol 360
ISO Bristol 360
© The ISO Organisation 2015
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
© The ISO Organisation 2015
Data points ——
Banksy locations
and media
ISO Bristol 360
© The ISO Organisation 2015
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
© The ISO Organisation 2015
Data animations ——
png sequences would
be scripted as modular
‘live data’ elements
ISO Bristol 360
© The ISO Organisation 2015
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
© The ISO Organisation 2015
Paths through data ——
AI pathfinding
ISO Bristol 360
© The ISO Organisation 2015
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
© The ISO Organisation 2015
Physics ——
Live generative effects
ISO Bristol 360
© The ISO Organisation 2015
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
© The ISO Organisation 2015
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
ISO Bristol 360
© The ISO Organisation 2015
Bristol 360
ISO
isodesign.co.uk theurbantide.co.uk