Dimensional / Shift – Embracing WebGL in interactive design

View Github Repository Open presentation in a new window

elifitch

See all presentation from elifitch

Dimensional / Shift – Embracing WebGL in interactive design

0 0

webgl-talk

On Github elifitch / webgl-talk

Dimensional / Shift

Embracing WebGL in interactive design

We make stuff at ISL.

Tonight we'll be shrieking about

  • What WebGL is.

  • What we changed about how we work to get it done.

  • How to approach designing for 3d.

  • Why WebGL development mostly isn't terrifying.

So what's WebGL?

Basically, it's 3d for the web.

No plugins.

No

It just works.

Webgl is the medium, three.js is the tool we used to create in that medium It's a javascript library that lets you create webgl experiences without tearing your brain out Sometimes folks conflate the two b/c three.js is so ubiquitous in webgl land, but they're not the same

Yeah. So what.

webgl is regarded as a neat curiosity, the stuff of cool demos we just showed you, and not much more but why?

Why don't we see WebGL more?

  • It's outside the comfort zone of our profession.

  • Designers are used to working and comping in a 2d context.

  • 3D graphics is a field that doesn't overlap much with web development.

  • In the end, it's seen as just a curiosity.

Outside knowledge zone for clients too.

The Internet is Ready

The thing is, it's really not JUST a curiosity anymore It certainly CAN be, but but webgl has matured and is ready for more

No but seriously

  • It's literally ready.

Easy to dismiss something out of hand with the idea that it wont work on folks' browsers, or they wont "get" it, or they won't appreciate it 1. roughly 80% browser support; The rest of the world is ready for this.

No but seriously

  • It's literally ready.

  • It brings another ... dimension

No butt super seriously this time

  • It's literally ready.

  • It brings another dimension to your work.

  • It captures the imagination. That matters.

It can quite literally give you a new dimension to work with WAY more interactive potential ppl want to touch it, interact w/ it play w/ it

So lets talk about how we figured this out.

Facebook came to us with a blank concept

Kickoff

  • Decided on 3d from the beginning

  • Totally essential when exploring a new medium

we decided on 3d after we found out that the audience was more media folks, we wanted to both give us more options in how to visualize data and also capture ppls attention Deciding early - Everyone gets head start on the hard stuff

(╯°□°）╯︵ ssǝɔoɹd

Flip the tables on traditional process

Can't just throw it over the fence.

Have to be much, much more collaborative.

- Some shops practice "throw it over the fence technique" - When working in new mediums, this wont' work, because designers suddenly don't have an experience honed sense of what works and what doesn't, what's trivial and whats a deadline threatening challenge

The closer interaction is to the core of a project, the more collaborative you should try to be.

- Beyond just webgl, the closer interaction is to the core of the product, the more collaborative the design process will need to be if its ever going to be any good -We all know how to make websites and what is required of each of us when we do that -Boundary blurring in 3D, developers are designing more, we are all in it together

Prototyping is invaluable.

Design.

Prototype.

Encorporate.

- Devs, make a gui so designers can tweak things within the scene, rather than comping a response

Embrace uncertainty.

Have to be comfortable with trying to hit a moving target.

You have to be comfortable not knowing 100% what the end result will be from the beginning. Have to trust yourselves.

Sometimes you play minesweeper

and that's okay.

Don't always know if something will work until you try.

is inevitable.

Don't always know if something will work until you try.

Design differently.

Concept first.

Before you sit down to comp Talk, figure out concept

Ego has no place in experimental work.

Designer egos have no place in experimental work. We effectively designed this project together, meeting every single day, talking about aesthetics, scene building, and what is possible. If you want to make something shiny all by yourself don’t try 3d. It’s made for teams!

The tools.

They suck.

Traditional web design tools don’t work for comping 3D scenes. Sketch and Photoshop can help us make interface elements, but short of dragging .pngs into a comp to simulate what it might look like the tools are inadequate

Put down the brush, pick up the chisel.

Tools shouldn’t shape how we design. We should use tools that help us create the vision inside our heads! Don’t be afraid to try out new tools if they’ll help what you’re trying to do. Based on the timeline of this project, I didn’t have time to dive into Blender/c4d the way I wanted to, which would have made the project way better, more detailed, and more fun. But we did use the three.js editor, which helped us get the shape colors we wanted straight into a program where Eli could use the code

loading three.js editor...

Lights.

Camera.

Action!

3d is an opportunity to be part set designer and part interactive designer. as a web designer you're not often thinking about setting a scene, lighting, shadow, postprocessing, these other details, which are crucial to 3D visualizations

Lead by example.

Examples help devs Devs can rip apart examples and see how they work

You're not in Kansas anymore.

To understand WebGL

First you must understand WebGL

When I started out with this stuff I felt.... The larning curve is steep Tutorials mostly suck, three.js docs are written for people who already get the concepts Really the best way to learn is by picking apart examples, but you wont get what's going on b/c none are really commented Really the best way to learn is by picking apart examples, but you wont get what's going on b/c none are really commented

The internet is here to save you.

Udacity - interactive 3d graphics.

Three.js / West Langley on SO.

A not unimpressive list on Eli's github.

Guys don't worry, three.js handles a lot of stuff for you, but there WILL be an upper bound on the stuff you can do without understanding what's going on on a conceptual level. Three.js gives you the utilities to actually DO the math.

Lets address the 🐘 in the room.

Math.

Lets address the dev elephant in the room.

ಠ__ಠ

"Oh so now you tell meI should have paid attention in skule."

Build with a gui in mind.

In the spirit of collaboration, build your app to take advantage of tech like dat.gui to help designers (and you) tweak visually.

Don't be Eli.

Test. Test. Test.

In the spirit of collaboration, build your app to take advantage of tech like dat.gui to help designers (and you) tweak visually.

Keep two or more eyes on performance.

Keep a couple devices on hand.

Make a framerate budget, try to hit 60, if you fail to hit 60, shoot for 30 and don't miss If you want it to be for mobile at ALL, budget perf for mobile

Don't be afraid.

Try it. It's motherfucking badass

Make a splash.

Capture the imagination.

Defy the norm.

Need notes for this

Doesn't have to be the centerpiece of a project.

- Think it's a curiosity? Fine. Use it as such to get a feel for it. Make an "ooh aah" piece of a larger build. Interactive hero, whatever

Get out there and play.

@elifitch

@moonstompmaggie

elifitch.com/webgl-talk

- Don't wait for someone to win a webgl project or pitch it to a client. Build it into something normal. - Get out there and experiment
Dimensional / Shift Embracing WebGL in interactive design