Blog
Dreams in 3D: a WebGL experience for the modern browser
Friday, May 13, 2011
By Ricardo Cabello (aka Mr.doob), Google Data Arts Team
Last August, we released “
The Wilderness Downtown
”, a music experience that brought together HTML5 and JavaScript, as well as the Google Maps and Street View APIs. Today, we’re excited to introduce our newest project, “
3 Dreams of Black
”, made with WebGL, HTML5 and JavaScript, and designed for modern browsers like Google Chrome. We previewed this music experience yesterday with web developers at Day 2 of the
Google I/O keynote
.
“3 Dreams of Black” takes you on a journey through three dream worlds constructed through a combination of rich 2D drawings and animations interwoven with interactive 3D sequences. Throughout various points in these dream worlds, you can grab your mouse and guide the protagonist’s point of view through the experience. This music experience also includes a 3D model creator that allows you to create your own relics and contribute to the shared collective dream. “3 Dreams of Black” is written and directed by Chris Milk, and developed with a few folks here at Google.
In creating “3 Dreams of Black”, we’ve had the opportunity to build many tools, libraries, and models. We’ve fully opened up the source code and made it available for web developers to tinker with us at
www.ro.me/tech
. In addition to the code, a few other highlights include eight WebGL demos, a fun model viewer for interacting with some of the animals from the web experience, and the
Three.js
3D library used for building the experience. In addition, a big part of the project was to define a good pipeline for getting all the animals and environment models right in WebGL -- for this, we extended
Blender
with
custom plugins
so we could manipulate and export the data with ease.
“3 Dreams of Black” is set to the song “Black” off the album
ROME
, presented by
Danger Mouse
&
Daniele Luppi
, featuring
Jack White
and
Norah Jones
on vocals, to be released soon on the record label EMI. Because it’s built in WebGL, it requires a WebGL-supported browser like Chrome, and Windows Vista / Mac OS X 10.6 and above to help ensure that your computer has the necessary and up-to-date graphics drivers. We hope you’ll take a moment to dive into the experience and the developer resources at
www.ro.me
Ricardo Cabello
is a designer/developer in the Google Data Arts Team. He is the creator of several popular Chrome Experiments, including
Google Gravity
,
Ball Pool
, and
Harmony
.
Posted by
Scott Knaster
, Editor
Labels
#freeandopen
#GooglePlay #AndroidDevStory #PlayStore #DeveloperConsole #StoreListingExperiments
#io12
#io13
#io14
#io15
#io16
#io2012
#io2013
#io2014
+1
20% project
3d
about.com
accessibility
Administrative APIs
AdMob
Ads
adsense
advogato
africa
agpl
ajax
ajax apis
ajax search
ajax search books news apis
all for good
amarok
analytics
android
Android Studio
android wear
apache
api
apis
apis console
apis explorer
apis. charts
app engine
app indexing
app indexing api
App Invites
apple
apps
apps script
asia
atom publishing protocol
Auth
authentication
authsub
awards
axsjax
barcodes
beacon
beacons
bespin
best practices
bigquery
blogger
book search
books API
bootcamp
browser
building ajax apps
buzz
c++
caja
caldav
calendar
camino
campfire one
caption
cardboard
CardDAV
cast
chinese
chrome
chrome apps
chrome dev summit
chrome devtools
chrome experiment
chrome extensions
chrome os
chrome web store
chromecast
chromium
chronoscope
cifs
classes
classroom api
client libraries
closure tools
cloud
cloud datastore
cloud platform
cloud portability
cloud services
cloud sql
cloud storage
cms
CocoaPods
code for educators
code jam
code review
code-in
codeedu
coffee with a googler
collada
commerce
community
compression
compressorhead
computing heritage
conferences
contacts api
contest
contextual gadgets
conversations
couchdb
countdown to I/O 2012
courses
creative commons
cricket
crisis response
cryptography
css
css3
custom search
custom search api
danish linux forum
dart
datastore
design
devart
develop
developer
developer expert
developers
developers. meetup
devfest
devfest developer chrome maps social wave apps
discovery service
django
dns
docs
documentation
documents list api
dojo
doodles
dot net
doubleclick
dreamweaver
Drive
drupal
eclipse
eclipsecon
eddystone
education
email
EMEA
enterprise
event
events
evolution
execution api
extensions
faster web
featured
feeds
finance
Firebase
Firebase Analytics
Firebase Cloud Messaging
firebug
firefox
firevox
fitness
font api
fosdem
freebsd
freenet
Fridaygram
fusion tables
gadgets
games
gcc
GDA
gdata
gdd07
gdd08
gdd09
GDD11
GDE
gdg
gdl
gdl weekly
gears
geo
geolocation
geoserver
getpaid
ghop
git
github
gmail
Gmail APIs
gnome
gnome women's summer outreach program
Go
goo.gl
Google
Google APIs
google apps
google apps api
google apps for your domain
google apps marketplace
google buzz
google cast
google chart api
google checkout
google chrome
Google Cloud Messaging
google cloud storage
google code
google code project hosting
google code search
google code university
google compute engine
google data apis
google data protocol
google developer day
google developer days
Google Developers Academy
Google Developers Live
Google Developers site
Google Developers University Consortium
google docs
google doctype
Google Drive
google earth
google fit
Google Fonts
google friend connect
google gadgets
google gears
google grants
google health
Google I/O
Google Identity Platform
google io
google mashup editor
Google Noto fonts
google play services
Google Science Fair
Google sheets
Google Spreadsheets API
google storage
google summer of code
Google tech talk
google technoloy user groups
google tv
google visualization api
google wallet
Google Wave
google web elements
google web toolkit
google.org
google+
googlecast
googleio
googlenew
googlewebelements googleio
GPE
green linux
gsoc
gtags
gtug
guest post
guice
gulp
GWSOP
gwt
hackathon
hacking
hackthon
hangouts
haproxy
hg
hibernate
howto
hpux
html
html5
I/O Extended
I/O Live
ical
identity
ietf
ignite
igoogle
iguanas
iiw
image search
Imara
in-app payments
internationalization
internet explorer
internet of things
interviews
ios
iOS SDK
ipad
iphone
israel
jaiku
java
javascript
jetpack
joomla
joomladayus2007
joomladayusa
karaoke
KDE
KDE 4.0
kernel
kernel summit
khronos
kids
kml
korean
labs
latitude
lca
lessons
licenses
linux
linux foundation
linux summit
linux virtual server
linuxconf eu
LoCo
london
mac
MacFuse
machine learning
maps
maps apis
Marketplace
material design
MDL
meetup
mercurial
MIT CSAIL
mobile
mod_pagespeed
Moderator
MOOC
mozilla
mylar
myspace
MySQL
mythtv
named
narratives
native client
nearby
netbsd
non-profit
nonsense
nosql
notifications
nss
O3D
oauth
OAuth playground
objective-c
OCaml
ocr
ODF
oha
OOXML
open data
open source
open source blog
open web
openajax alliance
opengl
openid
opensocial
openssh
openssl
oreilly
orkut
oscon
oscon2007
osi
oss devs
ossjam
osx
pactester
page speed
payments
performance
phone
photos
picasa
picasa web
places API
play services
playground
plone
plone sprint
podcast
polymer
portugal
posix
PowerMeter API
prediction api
preview
programming
project hosting
Project Loon
Project Tango
proximity
pubsubhubbub
py3k
python
python sprint
rails
random hacks of kindness
reader
Remote Config
research
result snippets
rhino
salesforce
samba
sandbox
scalability
screencast
sdk
search
security
service worker
Sheets API
shindig
shopping
sidewiki
sign-in
silverstripe
sitemaps
sites api
sixapart
sketchup
Smart Lock for Passwords
soap search api
soc
social
social graph
solaris
souders
spa2007
spdy
speakers
speed
speed tracer
standards
startup
storage
Street View
student programs
students
stuff
subscribed links
subversion
summer of code
SVG
sxsw
syndication
tasks API
templates
testing
themes
tool
tools
topp
training
tranparency
transit
translate
tutorials
tv
ubiquitous computing
ubiquity
ubucon
ubuntu
Udacity
unit test
unix
video
videos
Vim
virtual keyboard
virtual reality
visualization
VR
Wearables
web animations api
web components
web designer
web exponents
web fonts
web performance
web platform docs
webfonts
webgl
webmaster
WebP
website optimizer
weekly roundup
WhiteHouse.gov
Who's at Google I/O
windows
windows programming
Winter of Code
wtm
xauth
yahoo
youtube
zlib
zurich
ZXing
Archive
2016
Sep
Aug
Jul
Jun
May
Apr
Mar
Feb
Jan
2015
Dec
Nov
Oct
Sep
Aug
Jul
Jun
May
Apr
Mar
Feb
2014
Dec
Nov
Oct
Sep
Aug
Jul
Jun
May
Apr
Mar
Feb
Jan
2013
Dec
Nov
Oct
Sep
Aug
Jul
Jun
May
Apr
Mar
Feb
Jan
2012
Dec
Nov
Oct
Sep
Aug
Jul
Jun
May
Apr
Mar
Feb
Jan
2011
Dec
Nov
Oct
Sep
Aug
Jul
Jun
May
Apr
Mar
Feb
Jan
2010
Dec
Nov
Oct
Sep
Aug
Jul
Jun
May
Apr
Mar
Feb
Jan
2009
Dec
Nov
Oct
Sep
Aug
Jul
Jun
May
Apr
Mar
Feb
Jan
2008
Dec
Nov
Oct
Sep
Aug
Jul
Jun
May
Apr
Mar
Feb
Jan
2007
Dec
Nov
Oct
Sep
Aug
Jul
Jun
May
Apr
Mar
Feb
Jan
2006
Dec
Nov
Oct
Sep
Aug
Jul
Jun
May
Apr
Mar
Feb
Jan
2005
Dec
Nov
Oct
Sep
Aug
Jul
Jun
May
Apr
Mar
Subscribe
Google
on
Follow @googledevs
Visit
Google Developers
for docs, event info, and more.
