Tag: WebGL

Build with Chrome: LEGO Chrome Experiment

Google earlier this week released their latest Chrome Experiment in partnership with LEGO called “Build with Chrome”.

Now anybody who visits www.buildwithchrome.com via their Chrome browser can use their mouse or touchscreen to build something out of the virtual LEGO bricks and share them directly on Google+.

Why this is a smart Chrome Experiment

This is a simple product demonstration disguised as play. It shows off what the browser can do by putting it in service of something people already understand. Building with LEGO.

  • Low learning curve. If you can drag and drop, you can participate.
  • Touch-ready by design. Mouse and touchscreen both make sense for “building”.
  • Social distribution baked in. Sharing is part of the experience, not an afterthought.

What to take from this if you are building interactive brand work

  1. Make the capability tangible. Don’t explain performance. Let people feel it.
  2. Choose a familiar metaphor. Familiar mechanics reduce friction and increase time spent.
  3. Design sharing as a natural next step. If the output is personal, people want to show it.
  4. Keep the experience single-purpose. One clear activity beats a feature kitchen sink.

A few fast answers before you act

What is “Build with Chrome”?

It is a Google Chrome Experiment built with LEGO that lets people create virtual LEGO models in the browser using a mouse or touchscreen, then share them online.

Why partner with LEGO?

Because LEGO is an instantly understood building system. It makes the digital interaction feel intuitive, playful, and worth sharing.

What is the core marketing mechanic here?

Hands-on participation. The experience turns a browser capability into a personal creation that people can publish socially.

What makes a Chrome Experiment effective?

It demonstrates a technology through an interaction people enjoy, without requiring explanation, and it encourages sharing through an output people feel ownership of.

What is the transferable lesson for digital teams?

If you want people to remember a platform capability, wrap it in a simple activity that creates something personal and shareable.

DoubleClick: Fly over France HTML5 banner

You open a banner and, instead of a product shot, you get a hot-air balloon. You pick up speed, drift across a map, and “tour” famous French locations from above, including the Eiffel Tower, Notre-Dame de la Garde in Marseille, and the Château de Versailles.

This demo came out of the DoubleClick HTML5 Banner Challenge, with Biborg Interactive and Alpha Layer showing what happens when a banner is treated like a mini experience instead of a static placement.

The rich media build leans on several HTML5 capabilities at once. Geolocation can drop you near your own location at the start. WebGL handles the 3D-like rendering layer in capable browsers. Audio and video tags add atmosphere. Google Maps-style navigation does the heavy lifting for exploration.

In digital advertising, HTML5-rich media lets a banner behave like a lightweight web app, while still living inside a standard media buy.

An HTML5 rich media banner is a display unit that runs real-time code in the browser. It can detect location (with permission), render interactive graphics, and respond to user input without plugins.

What makes this feel different from “banner interactivity”

Most interactive banners ask for clicks. This one offers navigation. The moment you give people directional control, the experience shifts from “ad” to “toy”, and time-in-unit rises naturally because curiosity takes over.

Why the tech stack choice matters

Geolocation is not a gimmick here. It personalizes the first frame by making “your world” the default starting point, if the user opts in. WebGL is not decoration. It signals modernity and smoothness, making the experience feel closer to a game than a widget.

The business intent behind the challenge demo

This is less about selling France and more about selling a capability. It is a proof point for what DoubleClick Studio and HTML5 workflows can support, and it is a portfolio-grade demonstration for the teams who built it.

What to steal for your next HTML5 creative

  • Give viewers one clear control. Navigation beats click-to-reveal when you want time spent.
  • Use “permissioned” personalization. Geolocation works best when it improves the first 3 seconds, not when it tries to be clever later.
  • Design a graceful fallback. If 3D is not available, the core experience should still be enjoyable.
  • Make the value visible without instructions. If someone can understand the interaction from across the room, they will try it.

A few fast answers before you act

What is the DoubleClick HTML5 Banner Challenge demo here?

It is a rich media banner concept that lets users “fly” a hot-air balloon over a map of France and discover landmarks, built to showcase what HTML5 banners can do beyond animation.

Which HTML5 features does the banner use?

It is described as using geolocation (with permission), WebGL for interactive graphics, and native audio and video support, alongside map-based navigation to create a lightweight exploration experience.

Why is geolocation useful in a banner?

Because it can personalize the first moment. Starting near a user’s own location makes the experience feel immediately relevant, as long as it is optional and clearly explained.

What does WebGL add to rich media ads?

WebGL enables GPU-accelerated 2D and 3D graphics in the browser. In advertising units, that can translate into smoother motion, depth effects, and more game-like interaction.

What is the biggest risk with “mini-app” banners?

Weight and compatibility. If the unit is too heavy or too fragile across browsers, you lose reach. The best builds keep a simple core loop and treat advanced effects as optional upgrades.