Adobe Systems Inc
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.
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.
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;
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.
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.
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.
Libraries are great for developers, but how do designers get on board?
Blender: Three.js Plugin
- Blender has a “Three.js (.json)” export feature.
- Word Girl
- 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.