SXSW 2015: The Evolution of the Web

CJ Gammon
Computer Scientist
Adobe Systems Inc
@cjgammon

Presentation Description

The web has changed a lot in just the past few years and continues to grow in exciting ways. We have new devices and interaction paradigms as well as increasing expectations from users. In this session we will explore inspirational examples of where the web is headed and what new opportunities these provide. We’ll look at demos and techniques that allow us to take advantage of what we have today while looking to the possibilities of the future.

Presentation Notes

In native development for mobile, they use the GPU. As mobile moves forward, there will be more ways to hook into the GPU. For some CSS properties (transform, opactiy, filters) those use the GPU.

caniuse.com

CSS Transformations

There’s a hack where you can tell the browser that you’re going to use it as a 3d element, even though you’re not, which gives you a smooth transition. But this doesn’t work across all browsers, and we shouldn’t rely on them long term.

  • transform: translateZ(0)

There’s been a proposed CSS property that will prevent flickering across devices, and pre-render the transformation on the GPU.

  • will-change: opacity;

Graphics

We have 2d canvas now, but what if we want more? We need a lower level graphics API. Enter, WebGL. WebGL is a low level utilization which allows us to draw rich 3d graphics on the web.

It takes a lot of code (over 100 lines) just to produce a black square in WebGL.

Hardware

The web can now access the camera, gamepad API, Leap motion

Native & Web

The web is getting more capabilities, but there are always going to be exceptions and native may just always be better. We can always create Hybrid apps which allow you to deploy a happy mix. Use the best tool for the job.

Virtual Reality

Stereoscopic rendering can be done with WebGL. (it works with Three.js)

WebVR API allows you to tap into the hardware and see head placement and whatnot.

http://mozvr.com/

Augmented Reality

JSArtToolkit

Designers?

Libraries are great for developers, but how do designers get on board?

bit.ly/cameratool

Blender: Three.js Plugin

Photoshop

  • Word Girl

Flash

  • Flash has support for custom platforms, which allows you to export into any format you want. There exists one for WebGL and Canvas already.
  • He wrote a plugin to export to SnapSVG and load SVG animations in the browser.

Presentation Slides

http://bit.ly/sxweb2015 or http://slides.cjgammon.com/15-3-sxsw/

Posted in SXSW 2015.

2 Comments

    • Thank you for the great talk! I was trying to figure out what the mozvr URL was, but Google was super confused by my queries.

      I’ve recently started playing around with Three.js as part of my Master’s project and so I highly enjoyed your presentation. I’m attempting to design a method to take a 2D SVG vector graphic that has instructions and then map it to a 3D representation in WebGL. Originally I wanted to build something simple so a designer could export an SVG from Adobe Illustrator without any programming experience, but that has become much more complicated than I anticipated.

      I’ll make sure to add the mozvr URL and your YouTube link to the writeup.

Leave a Reply

Your email address will not be published. Required fields are marked *