ROME: "WebGL: The Technology Behind '3 Dreams of Black'"


Experience "3 Dreams of Black" at www.ro.me "3 Dreams of Black" is Chris Milk's new interactive film, created in WebGL with some friends from Google, for Danger Mouse & Daniele Luppi's ROME, featuring Jack White & Norah Jones. The project is a Chrome Experiment (www.chromeexperiments.com that showcases some of the latest web technologies in modern browsers like Google Chrome. In building "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 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.


rome webgl html5 dreams black danger mouse daniele luppi jack white norah jones Google Chrome Chrome Experiment 3 Dreams of Black Chris Milk interactive 3D music video interactive film technology tech video googlechrome

WebGL Aquarium Running on Google's Liquid Galaxy


This is a 100% HTML5, WebGL and JavaScript. Each of the 8 machines is running Chrome. They communicate using WebSockets to a node.js server using the socket.io library. You can find out more info at webglsamples.googlecode.com


webgl Aquarium Google Chrome javascript HTML5 glggman

WebGL Water Simulation


A realtime pool of water rendered using WebGL with reflection, refraction, caustics, and ambient occlusion. The pool is simulated with a heightfield and contains a sphere that can interact with the water's surface. madebyevan.com


webgl water simulation reflection refraction caustics realtime constexpr

Google Maps meets WebGL


Go to maps.google.com Using WebGL technology, Google MapsGL is an experimental project which enables a richer maps experience with immersive 3D buildings, smoother transitions between imagery, fluid transitions into Streetview and more, directly in your browser and all without a plugin.


Google Maps webgl Google

WebGL / Canvas 3D Preview in WebKit r48331


blog.wolfire.com Screen capture of the initial layout tests for WebKit's WebGL implementation.


webgl Canvas 3D webkit opengl Wolfire Games

iOS RAGE rendered with WebGL


A WebGL Demo I built for my presentation at OnGameStart in Poland this september (www.ongamestart.com). Renders levels from the iOS version of id Software's RAGE in a browser. See more details on this demo and other WebGL projects at my Blog, http See my blog post about building this demo at: blog.tojicode.com See my documentation on the iOS RAGE format here: goo.gl


webgl Rage ongamestart tojiro 67445

WebGL Team Fortress 2


WebGL renderer for Source Engine levels I wrote and demoed at onGameStart. Source code is available from Github: github.com You can read more technical details at my blog: blog.tojicode.com


webgl Team Fortress 2 Source Engine ongamestart tojiro 67445

HTML5 in Firefox: WebGL Demo On the Nokia N900


Vladimir Vukicevic, principal engineer, Firefox, shows us a couple of WebGL demos on the Nokia N900.


Nokia N900 Firefox mobile Fennec Maemo webgl Hacks Firefoxfor

TF2 Browser Spectator - WebGL


Read this: Proof of concept of spectating a TF2 game in first person from your browser! Source Engine WebGL code by Brandon Jones (github.com blog.tojicode.com


tf2 web spectate Jimbomcb

Chrome Experiment - WebGL Bookcase


Want to try this experiment? Click here: www.chromeexperiments.com View hundreds of other web browser experiments at www.chromeexperiments.com.


webgl html5 google books api bookcase bookshelf digital virtual chrome experiment experiments

WebGL Earth - an open-source 3D globe running in a web browser (JavaScript, HTML5 Canvas, WebGL)


Live at: www.webglearth.com Source code: www.webglearth.org Free and open-source 3D digital globe for web and mobile devices. It runs in any web-browser which supports HTML5 Canvas with WebGL - Firefox4, Chrome 9+. Soon iPhone, iPod, iPad and Android mobile devices. It is written completely in JavaScript. Rendering is using your graphic card (GPU) and is implemented with the WebGL standard (OpenGL ES 2.0 for web).


webgl earth maps gis gpu projection klokanpp

CubicVR 3D Engine WebGL - Flight of The Navigator #moz10


Flight of The Navigator HTML5 demonstration, all is done in WebGL, HTML5, Javascript and uses the Mozilla Audio API -- no plug-ins required. Demo is now live, check the info and link at: vocamus.net Processing.js ( www.processingjs.org ) is used for animated textures, WebM video for videos and BeatDetektor.js ( www.beatdetektor.com ) for audio analysis and visualization. Follow us on twitter: @ccliffe @humphd @corban @F1LT3R @asalga @Maciek416 Apologies as screen recorder causes lag and we are still working on making a higher resolution version available.


#moz10 webgl javascript html5 audio mozilla summit 2010 cjcliffe

WebGL demo on Xperia arc S


WebGL is supported on the 2011 Xperia smartphones with the latest software update. Here we see demos of Sony Ericsson liquid identity, Three.js (showing the head of Walt Disney) and Ninja heads. Read more on developer.sonyericsson.com


webgl demo arc Sony Ericsson Xperia Arc Software update Sony Ericsson Dev

GTAC 2011: Developing and Testing WebGL


6th Annual Google Test Automation Conference 2011 (GTAC 2011) "Cloudy With A Chance Of Tests" Computer History Museum Mountain View, CA USA October 26-27, 2011 Presented by Roy Williams. ABSTRACT WebGL will enable developers to create richer web applications than ever before by giving developers full access to the GPU on their users' machines. Testing this new capability presents unique challenges new to most web developers. In this talk we'll be discussing techniques and tools used for testing WebGL applications inside of Google, as well as some tips for building your own WebGL applications. Roy Williams has been at Google for 2 years, and was at Microsoft for 5 years prior to that. Some of his major externally visible accomplishments include launching Route Around Traffic in Google Maps for Android. Roy has his BSc in Computer Science from Duke University. He lives in Seattle with his wife Tara.


google tech talk gtac gtac 2011 testing software testing cloud computing Google Tech Talks

Google Aquarium WebGL demo running in Firefox 4.0 beta 7 for Linux


amazing aquarium from google built with webgl technology running in firefox 4.0 beta7 (daily) in GNU/Linux Ubuntu Lucid with customizations. Notice: the rendering errors are caused by my desktop grabber, the demo works smoothly in firefox, its the grabber that is shitty.


linux google webgl 3d groopcd

CycleBlob - A WebGL lightcycle game


Visit cycleblob.com to play (requires Firefox 4 or Chrome). CycleBlob is based on the lightcycle concept from the movie "TRON".


webgl game lightcycle tron cycleblob

WebGL early preview demo on Sony Ericsson Xperia PLAY [official]


Watch this early preview of the future from an internal prototype project where Sony Ericsson has enabled hardware enabled WebGL support in the Android™ web browser.


webgl android Xperia xperia play sony ericsson sony sonyericsson qualcomm adreno hardware snapdragon smart phones mobile sneak peek technology cellphones software graphics software web browser google spidergl cell phones Neocore Khronos Ericsson Dev

CubicVR 3D Engine WebGL BeatDetektor Visualizer Demo #3


All runs in real-time with Javascript, WebGL and HTML5 only (uses Minefield Audio build) -- no browser plugins are used. This demo combines the CubicVR 3D engine on WebGL (www.cubicvr.org) with the Mozilla HTML5 Audio API (hacks.mozilla.org), Processing.js (www.processingjs.org) and BeatDetektor.js (www.beatdetektor.com) Mozilla Audio API is used to sample the HTML5 audio tag on the page, this information is processed by BeatDetektor.js which produces timing information for the Processing.js real-time canvas textures and the CubicVR.js procedurally generated WebGL scene using them. The camera is set to free roam a simple chase pattern with a probability to follow a nearby cube (fully automated). Available online at: cubicvr.org You can also try out BeatDetektor on your iPhone to detect BPM using the built-in microphone, works great on iPad as well: itunes.apple.com you can find more info about audio api-enabled Minefield builds at: wiki.mozilla.org You can also feel free to chat with us about the Audio API via the #audio channel on irc.mozilla.org


webgl cubicvr beatdetektor visualizer 3d opengl html5 audio fft viz canvas cjcliffe

BlackBerry BBX Demo with HTML5 - BlackBerry DevCon 2011


bbx html5 www.netbooknews.com In order to maintain their developer community it seems that Blackberry is casting a very wide net, HTML5 is being pushed as an industry standard for developers and we're keen to learn more about the Blackberry Runtime for Android.


bbx html5 playbook rim bbdevcon demo hands on apps applications minipcpro

Webgl Tutorial - How to Animate 3D Models In Web Pages Using the X3D Format Part 1 Position


This video tutorial shows how to create simple 3D scenes using the X3D format and how to animate the models in them. The X3D data is embedded in web page and if displayed in a browser that supports Webgl, the scene will be rendered using hardware acceleration provided by the client computer's graphics card. The tutorial uses examples and a JavaScript library from the X3DOM website. Note: The only software required to complete this tutorial is a text editor and a modern browser (both free). The text editor used in the tutorial was Notepad++ which is free but only available for the Windows operating system, but any text editor will do. The tutorial shows how to - Create a scene consisting of a red cube. Add tags that animate the position of the cube. Create a scene consisting of two spheres. Add code to animate the positions of the spheres (bouncing balls).


Webgl How to Animate 3D Models Using X3D Format Position Interpolator video tutorial shows create simple scenes animation data embedded web page displayed browser supports rendered hardware acceleration provided client computer graphics card examples javascript library X3DOM software required text editor modern Notepad++ free Windows operating system scene consisting red cube Add tags two spheres code bouncing balls ian scott freemovies.co.uk ianscott 888

WebGL on a Nokia N900


Firmware release PR 1.2 for the N900 enables support for WebGL, and this is a video showing a number of demos on it. Apologies for the shaky camerawork! The N900 is a linux-based smartphone ("mobile computer") from Nokia; more here: maemo.nokia.com WebGL, which is sometimes considered part of the upcoming HTML5 standard, lets web pages do hardware-accelerated 3D graphics. Special developer versions of Firefox, Safari and Chrome support it, and (much to the Firefox team's surprise) this functionality has made it into the N900's firmware already. I've been keeping a blog about WebGL, and you can find links to all of the demos shown in this video, and others, at learningwebgl.com


webgl HTML5 Nokia N900 smartphone computer graphics demo gilesthomas

WebGL Test


Testing the new JavaScript OpenGL bindings (aka Canvas3d aka WebGL) in WebKit twitter follow: abustin


canvas3d webgl javascript webkit alexbustin

Neil Trevett presents 'What is WebGL?'


Neil Trevett, President of the Khronos Group, presents 'What is WebGL?' at the inaugural meeting of the WebGL Meetup group (www.meetup.com/WebGL-Developers-Meetup) in San Francisco, CA on April 28,2011. Learn more about WebGL at www.khronos.org/webgl/wiki/Main_Page .


Neil Trevett khronos webgl web3d opengl x3dom meetup spiralconcepts metromint developers html5 Metaverse One

Illyriad - HTML5 WebGL Preview 2


Upcoming preview of HTML5 WebGL in Illyriad: www.illyriad.co.uk Illyriad is a free-to-play, real-time, HTML5 Massively-Multiplayer strategy game, set in a vast fantasy world of mountain ranges, lakes, forests, oceans, islands, rivers, deserts, jungles, marshes and the northern wastes with countries and factions - each with their own agendas.


html5 illyriad webgl preview video game rts real time strategy clip game mmo mmorts Limited

Paul Rouget on Mixing the web! (Mozilla Summit 2010)


Pretty awesome demo about mixing HTML5, CSS3, WebGL, websockets... etc. Must see.


moz10 bobchao

Visualizing cylinder head CAD file with pythonOCC/WebGL


Best viewed with Firefox 4 Beta 10 or higher


webgl CAD pythonocc tpaviot

Minecraft JavaScript WebGL PHP viewer MC Chunk Loader


github.com Note: code is bad. MC Chunk Loader open source JavaScript/WebGL/PHP Minecraft viewer. Now with JavaScript code for parsing Minecraft NBT files and very remedial lighting/lava shaders. May be interesting for programmers. Not ready for release. Also see ideas on github wiki relating to Minecraft Operating System and source-modifying plugin system.


Minecraft javascript webgl PHP viewer MC Chunk Loader NBT plugin GLSL chocosnark

Highrise/One Millionth Tower - WebGL Capture


Witness the power of imagination transform a dilapidated highrise neighbourhood in this six minute documentary that unfolds in a virtual landscape. (this is a video capture of the WebGL experience) To try the interactive WebGL experience or for more information, please visit: highrise.nfb.ca


vertical living revitalization urban planning Toronto architects animators animation highrise kat cizek nfb national film board of canada highrise.nfb.ca documentary webgl HTML5 Mozilla Popcorn owen pallet jim guthrie

Inside Conway's Life 3D - WebGL/Liquid Galaxy


Modification of Juame Sanchez's Life 3D webgl app running real-time on a multi-machine Liquid Galaxy rig (aka Wonderama). Note: There's a bit of lag/jitter caused by a mix of video cards & CPU's. So some screens are at 60fps while others manage 10fps *sigh* Original app - www.clicktorelease.com 5 Google Chrome web browsers. HTML5/WebGL/WebSockets. WebSocket relay Perl/Mojolicious.


webgl html5 liquid galaxy wonderama uws alfski

HTML5/WebGL/WebSocket Tron Tank on Liquid Galaxy


View sync'd Tron Tank demo running on the UWS Wonderama (a curved 5 screen Liquid Galaxy prototype). - 5 networked PC's running 5 separate HTML5 capable web browsers. - sharing tank & camera position plus other information via WebSocket. - original WebGL Tron Tank by Lindsay Kay www.scenejs.org Note: the video camera has a narrow field-of-view and is NOT in the correct viewing position so there is angular distortion on left and right screens. You really need to be "immersed" in the rig! More details and source code at code.google.com Royalty Free Music : Buddha Mantra Records - Cosmo Circle - The Last Encounter The whole "Tron" thing is obviously (c) Walt Disney Pictures.


webgl liquid galaxy wonderama tron tank html5 virtual reality cave alfski

WebGL Camp 3 - Vangelis Kokkevis and Won Chun


Vangelis Kokkevis and Won Chun from Google


webgl webglcamp google bodybrowser

A sneak preview of our upcoming WebGl demo


Check out this preview of our upcoming WebGL demo. Opera on hardware acceleration == really fast browser.


preview opera turbo opengl webgl hardware acceleration firefox safari browsers web technology future internet exolorer operasoftware

WebGL 3D Asteroid Game with HTML 5 audio


a small webgl 3d asteroid game with HTML 5 audio, done with CopperLicht, CopperCube and WebsitePainter. Demo here: www.ambiera.at (run only if you have a webgl enabled browser) More about CopperLicht: www.ambiera.com


webgl 3d html 5 audio copperlicht ngexec

jelly.mov


Jellyfish, a WebGL demo by Aleksandar Rodic aleksandarrodic.com


jelly luzcaballero 00

Movial 3D Flickr HTML5 demonstration on Qt WebKit


Movial, a Qt Certified Partner, created a 3D Flickr HTML5 demonstration that showcases the latest features of Qt WebKit. The demo uses hardware acceleration in video decoding and relies on WebGL to bring hardware accelerated 3D to the browser. Rendering uses HTML5 canvas element, and images and HTML5 videos are used as textures on WebGL models.


Qt webkit HTML5 webgl movial

WebGL:GLGE Fog


GLGE the webgl library/framework now has fog functionality, see: www.glge.org


webgl glge 3d web supereggbert

CubicVR 3D Engine WebGL BeatDetektor Visualizer Demo #4


All runs in real-time with Javascript, WebGL and HTML5 only (uses Minefield Audio build) -- no browser plugins are used. (*Note the actual demo runs a fair bit smoother than this as the screen recording app tends to cause hiccups in the animation.) This demo combines the CubicVR 3D engine on WebGL (www.cubicvr.org) with the Mozilla HTML5 Audio API (hacks.mozilla.org), Processing.js (www.processingjs.org) and BeatDetektor.js (www.beatdetektor.com) Mozilla Audio API is used to sample the HTML5 audio tag on the page, this information is processed by BeatDetektor.js which produces timing information for the rotation of the various pieces rendered by CubicVR.js. Processing.js is used to render a real-time canvas texture for the intermittent cube models. The tunnel is on an endless cycle of selecting random pieces from the pool of loaded xml meshes. Available online at: cubicvr.org you can find more info about audio api-enabled Minefield builds at: wiki.mozilla.org You can also feel free to chat with us about the Audio API via the #audio channel on irc.mozilla.org


webgl cubicvr beatdetektor visualizer 3d opengl html5 audio fft viz canvas cjcliffe

GLGE WebGL Library Demo Scene


A simple scene contructed in blender and exported to GLGE for use in a WebGL capable browser: www.glge.org


blender 3d web html5 webgl supereggbert

4.1 Million Particles with WebGL on Google Chrome Nightly Build


Rendering a Paul De Jong Attractor with 4.1 Million Particles at 20 FPS on Google Chromium Nightly build experimental webGL


webgl 4.1 Million Particles massive amount of particles google chrome 20 FPS awesomeness manojvekaria

HTML 5 WebGL demo on Chrome 9


This is a video of watching a WebGL demo, using Chrome 9. Created with MAGIX Video deluxe 17 Plus


demo Chrome webgl browser MAGIX Video deluxe 17 Plus LEHSYS

Google WebGL demo, cooliris wall running in firefox 4.0 beta 7 for Linux


amazing cooliris wall from google, built with webgl technology running in firefox 4.0 beta7 (daily) in GNU/Linux Ubuntu Lucid with customizations. Notice: the rendering errors are caused by my desktop grabber, the demo works smoothly in firefox, its the grabber that is shitty.


linux google webgl 3d groopcd

WebGL Brain Surface and Tractography Viewer


WebGL Brain Surface and Tractography viewer developed at Children's Hospital Boston. This web application demonstrates navigation and rendering of cortical surface reconstruction generated by FreeSurfer and tractography generated by the Diffusion Toolkit.


webgl freesurfer Diffusion Toolkit danginsburgchb

IQ's ShaderToy WebGL demo on the N900


This is a follow-up to my video showing various WebGL demos on the Nokia N900 smartphone, at www.youtube.com Here I'm showing some of the demos from IQ's Shader Toy WebGL page, at www.iquilezles.org You can tell that it found the easy ones easy enough, but the Quaternion (1:41 onwards) and Disco demos made it a bit unhappy...


webgl HTML5 Nokia N900 smartphone computer graphics demo gilesthomas

WebGL tutorial, lesson 4 - some real 3D objects


This is a video of the results of part 4 of my port of the well-known NeHe OpenGL tutorial over to the new WebGL system for hardware-accelerated 3D graphics in web pages. You can read more about the code, and see the other parts of the tutorial, at learningwebgl.com


webgl tutorial nehe opengl 3D graphics html5 gilesthomas

Azathioprine by Alcatraz | WebGL (FullHD 1080p HQ HD demoscene demo Evoke 2011)


2nd place in wild demo compo at Evoke 2011 This is a WebGL/Javascript Demo running in a browser! Credits: Code: Digi Music: Keito VIsuals: Acryl, Peach, Critikill, H8jja More Information and Download on Pouet: www.pouet.net


HQ demo product Revision 3D TBL ASD Fairlight pc Farbrausch demoscene scene demoszene computer animated graphics Windows Pouet demonstration HD 1080 1080p Azathioprine Alcatraz evoke 2011 webgl browser chrome javascript Annikras

Ecilavia - Development Preview [WebGL]


Early preview of the tatical RPG game my team's developing for the final assignment of the Digital Game Programming subject at CEFET-MG. We're a team of 5 Computer Engineering undergraduate students from Brazil. Made purely with JavaScript + WebGL. Runs natively on the Web Browser, without the need for plugins.


game cefet cefetmg ecilavia tatical rpg development preview webgl javascript The Coreh

Firefox4 - Flight of the freak-in navigator! WebGL + html5 audio + JS demo


Flight of the freak-in navigator! WebGL + html5 audio + JS demo


firefox audio canvas webgl html5 channy

WebGL in Firefox 4 and on Android


Paul Rouget showing off WebGL in Firefox 4


mozlondon10 mozilla firefox4 html5 css3 svg pretty chrisheilmann