SXSW 2015: Pocket Full of Dynamite: Making the Mobile Web 3D

Hai Nguyen
Creative Technology Lead
Google
@codeingforlove

Presentation Description

The mobile web continues to explode in popularity. As people spend more and more of their time there, they are seeking richer and more immersive experiences, and marketers are racing to make them. At the forefront of this revolution is WebGL, which brings a new way to create beautifully rendered 3d content on the web, most excitingly on mobile. With this new power, there are also new creative and production challenges to face. These constraints extend far beyond the development process alone, with implications on the strategy and creative vision more broadly. In this talk, Hai Nguyen (Creative Technology Lead) and Shana Opperman (Producer) from Google’s Art, Copy & Code team pull back the curtain on what they’ve learned developing WebGL-based experiences with brands such as Nike and Target. They’ll also provide some thoughts on what developments will take place in the near future with mobile web experiences.

Presentation Notes

84% of fans watching football were also on their phones. Google partnered with Nike. Nike already had a video they could work with. (see: The Last Game on YouTube)

Open http://riskeverything.nike.com on your phone.

  • Full screen
  • Camera access
  • Forces landscape

Why not an app?

  • Apps require an app store submission. This takes time, which you may not have.
  • SDKs can change frequently with social media, and that can be challenging.
  • You need two different development teams for Android/iOS.

Mobile WebGL opportunities

  • 1.9 billion people are using smartphones.
  • When iOS8 shipped, this effectively doubled the number of WebGL capable devices
  • 78% of smartphones, globally, are capable of WebGL

WebGL: What you should know

  • Models give shape to thing you see on screen.
  • Textures provide depth and color
  • Shaders make things look soft, hard, shiny, or dull

http://accdemos.com/sxsw (Demos)

What’s coming

  • WebGL 2.0: Advanced rendering features that put mobile web almost on par with native apps
  • Hardware advancements: Devices getting faster, more performance, and more creative possibilities.
  • Browser advancements: New features coming will enable creation of larger scale experiences.

Resources

Questions and Answers?

  • What’s the battery life like?
    • WebGL doesn’t consume much more battery usage than native. The only reason why it uses more is because it’s also running the browser. But the WebGL vs. OpenGL is pretty equivalent.
  • How does Analytics come into play how people play with the 3D objects?
    • There’s nothing specialized. But you can embed the analytic call directly into the input.