ALEX DANILO: All you web developers out there follow me,
as I go to the other side of the world
to talk to some graphics experts about the insides
of modern browsers today.
[MUSIC PLAYING]
Hi, I'm Alex Danilo.
I'm here in Winchester, the home of the famous round table.
Now, King Arthur may have long gone.
But we're bringing a whole lot of graphic experts
from all around the world to talk about the web.
So welcome to "The Graphical Web."
[MUSIC PLAYING]
Hi, I'm here with Cameron McCormack from Mozilla.
And he's working on Firefox.
And today he gave a presentation about colorful fonts
in OpenType that are available in modern browsers.
Cameron, there are three proposals.
There is one from Microsoft, one from Google,
one from Mozilla and Adobe working together.
The main one I found interesting was SVG in OpenType.
So can you tell me what the advantage of that is versus,
say, one of the other proposals?
CAMERON MCCORMACK: Sure thing, Alex.
So to summarize the three different proposals,
one was a bitmap format that gets embedded into the font,
so they're PNGs-- that was the Google
proposal-- a proposal from Microsoft, which had composed
glyphs from plain, flat shapes, so regular OpenType glyphs.
And the third proposal, from Mozilla and Adobe
was to embed SVG documents into the font.
So with the SVG proposal, you can use the full graphics
complexity of SVG to render your glyphs.
So that means you can have patterns in the fills.
You can use gradients, animation on the glyphs as well.
ALEX DANILO: All right, great.
Also, I've seen in Japan quite a lot of people using emojis,
like smileys and things like that.
So is this what this is aimed at?
CAMERON MCCORMACK: Partially, yes.
So I think a lot of the resurgence in interest
in chromatic fonts, chromatic type,
has been emoji, which was sort of popularized recently by iOS.
But of course, now supported across
mobile and desktop operating systems.
So emojis, since they're little icons,
they probably have slightly different requirements
from multicolored lettering.
So you might want to choose a bitmap format
for those versus a complex vector format.
But on the other hand, the bitmaps
are not going to scale particularly well.
So I think there are pros and cons for both of them.
ALEX DANILO: Right, I get you.
And also, I've noticed web developers always
struggle with different kinds of devices,
like with a different resolution screen.
So to me, I think the SVG proposal
is a really good approach towards that.
In fact, the Microsoft one is quite interesting too.
So what are your thoughts on the tons of pings,
like in the Google proposal?
Don't say anything bad thought.
CAMERON MCCORMACK: Yeah, well so obviously for screens
with different DPIs and just for showing the glyphs
at different sizes, the scalable proposals
have a definite advantage there to avoid pixelation.
There's probably a speed difference.
Whereas, with the SVG proposal, you need a whole SVG renderer.
It might be a bit slower than the existing OpenType rendering
for glyphs the Microsoft proposal uses.
And pings are probably pretty fast to render as well.
So for fidelity, I would still probably
go for one of the scalable solutions, yeah.
ALEX DANILO: OK, great.
So web developers, look forward to scalable graphics
in your fonts.
They're here now in Firefox.
They'll be coming other modern browsers very soon, I expect,
so looking forward to a colorful future.
Hi, I'm standing here with Neil Trevett, who's
President of the Khronos Group.
Khronos, of course, is the standards body
that produces things like OpenGL, WebGL, OpenCL, WebCL,
et cetera.
And of course, we all know WebGL is currently in browsers.
So Neil, where do you see the future of hardware acceleration
on the web and graphics in general?
NEIL TREVETT: I think there's a great feature for it.
And I think it's going to be at two levels.
We have to remember that all the browser vendors are using GPUs
under the covers, the composition, the rendering.
But I think your question is talking about the APIs
that developers can use themselves.
And WebGL, as you say, is now very pervasive.
We're expecting it to be everywhere
on desktop and mobile.
And we hope the next one will be WebCL,
which is for compute, as opposed to graphics.
ALEX DANILO: Right.
Also, I've seen that the trend in tablets
these days is much higher resolution screens.
So do you see that trend continuing?
Do you think that this would mean
silicon is much more important as we go forward?
NEIL TREVETT: Yeah, it's already been a tremendous increase
in the number of pixels that have to be processed.
From the original iPhone to now the iPad mini,
it's a 20-times increase in the number of pixels.
That's an enormous number of pixels
to process and to push around in a system.
And if you have to do that on the CPU,
not only is it going to be not snappy and buttery smooth
on the screen, it's going to eat your battery.
So there's a double win for bringing this rendering
off the CPU onto the GPU.
It goes faster, and your battery will last longer.
ALEX DANILO: So for the web developers out there,
if they were going to get started with WebGL,
what would you recommend they do?
Do they learn raw WebGL?
Do they jump in one of the JavaScript libraries?
Or what would you think they should do?
NEIL TREVETT: If they're already a 3D developer
and they know OpenGL, yes, they'll
find WebGL very familiar.
And it will be very easy to come up the learning curve.
If you're coming into it fresh, I
would start with one of the proven middleware libraries,
because they can really ease the learning curve.
Now, three.js is one of the easiest.
There's a new one, Babylon.js.
And actually, there are a bunch of them out there.
And depending on what kind of application
you're trying to do, sometimes you'll
find ones that are targeted just to your kind of community.
So Google around, find the middleware library
that best suits your needs.
The default perhaps is three.js, and start with that.
You'll probably find you can get a long way, before you need
to start figuring out more details.
ALEX DANILO: OK, wonderful.
Thanks very much for that insight,
and we're looking forward to a great hardware
accelerated future on the Web.
NEIL TREVETT: Yes.
ALEX DANILO: Now, Brian and I have been working together
on the web animation spec, which I'm really excited about.
So I just wanted to ask Brian, what
do you see that web animations does for the general web
developer?
BRIAN BIRTLES: It probably does about two things.
I guess, first of all, it gives developers
access to the animation functionality of the browser.
So the browser can do optimizations that you cannot
do in JavaScript, such as running things on another
thread.
And so it gives developers access to that.
It also let's developers peek into what the browser is doing
with their regular CSS animations and so on,
so they can inspect why their CSS isn't working.
And they can also tweak it as well
and extend it in ways they couldn't do otherwise.
In addition to that, it explains what's going on.
We have CSS, and we've got SVG.
And this is a common model that explains what both of those
are doing, so that developers can
make the transition between different technologies,
as they need to.
ALEX DANILO: So we already have small animation in SVG.
And we have CSS animations and transitions.
So what actually happens with Web Animations?
Does it bring the model together?
Or they incompatible?
How does it actually work under the hood?
BRIAN BIRTLES: Yeah, so basically, we've
tried to work out what are the common features between the two
and base the model around that side.
So it's feature complete, with regards
to everything in both CSS and SVG.
It's the union of those two.
And then we aim to just layer CSS and SVG
as kind of syntactical layers on top of that.
So it's really just the one unified one
model for both of them.
ALEX DANILO: OK, great.
Now I know that Chrome has actually
implemented Web Animations, and we've
seen some really great performance improvements
on demos.
So are we going to see this in Firefox anytime soon?
BRIAN BIRTLES: Yeah, I'm working on it.
So bits have already landed in nightly.
And it's coming along with Firefox.
We're on a different subsets to Chrome initially.
But yeah, we're definitely have in sites the same subset
that Chrome has already released.
So yes, you can expect that someday soon.
ALEX DANILO: All right, cool.
So let me just ask you.
What about other browsers?
Do you think it'll come to other browsers?
BRIAN BIRTLES: I hope so.
I really hope so.
And I think, in the interim, we can use a polyfill
to work around that, although it may not
get quite the same performance.
But I think there's a lot of good reasons for browsers
to implement that, both in terms of exposing animation
through their dev tools, but also
just in order to keep up with the performance
that they'll be sitting in Chrome and Firefox.
ALEX DANILO: Awesome.
Gets started on Web Animations today.
It's usable.
It's native in Chrome.
It's coming in Firefox.
Soon, every browser should have it, fingers crossed.
And yeah, give it a go.
This year's conference, Frank, there's
been a lot of focus on hardware accelerated approaches
to web performance and web graphics.
So Internet Explorer 9, 10, and 11
have really embraced hardware acceleration.
So one of the things you spoke about
was how IE breaks up the layers in a web page
and then uses the underlying OS to do the compositing.
Can you talk a little bit about how that works?
FRANK OLIVIER: So we have an OS compositer
that we use that renders all the IE content.
It's a very nice way for us to make the browser very, very
fast and enable some key scenarios, like a SVG filter
hardware acceleration, for example.
So this is a nice way for us to, starting with IE 9 and IE 10,
set the scene for building a nice and fast touch-friendly
mobile browser.
ALEX DANILO: All right, excellent.
And another feature that I thought was really interesting
was, that currently, the IE 11 actually
enables YCbCr JPEG support.
So it actually sends YCbCr to the GPU, instead of RGB data.
Now, that is aimed at reducing memory bandwidth.
So how does a web developer actually use that feature?
FRANK OLIVIER: It's actually very simple.
All you need to do in Photoshop, when yoy do File, Save As JPEG,
is just set the compression to between 0 and 50.
And that will do that setting.
Or there's also a tool called RIOT, Radical Image
Optimization Tool.
And that can do the subsampling for you as well.
ALEX DANILO: Excellent.
And also, we all know the multiscreen world is here--
mobile phones, tablets, and desktops, and everything.
So how does IE address it, as far as a compatibility features
thing?
Across the different devices, how does that work?
FRANK OLIVIER: So like other browsers,
I think, we have a very big interest
in keeping the web platform the same across all devices.
So we run the same code across all devices.
When we did WebGL, we did it on the desktop first.
And we compiled it for mobile in one afternoon.
So it's the same code running in the same place.
ALEX DANILO: OK, brilliant.
Well, lovely to hear about it.
There you go, web developers.
Shrink you JPEGs, using the YCbCr.
It will save you space on your site.
It will run faster as a result and work beautifully
in all browsers.
Now, Eric, there's a lot of graphics
that's been happening in this conference.
There's SVG.
And there's Canvas.
And there's WebGL.
I understand you're the chair of the SVG working group.
So as a web developer, where would you use SVG, as opposed,
to say, Canvas.
And what are the advantages of it?
ERIK DAHLSTROM: So one of the main use cases
we see right now is icons and scalable vector
resources for websites, for icons,
for imagery that's meant to be panned and zoomed.
This is one use case that SVG is supremely suited
for, as an image format, which Canvas isn't.
The other thing, I guess, is smaller interactive web
applications.
Say you have a seating for a theater or something like that.
You have a seating plan, and you want
to be able to pick some seats.
You need to know where seats are,
and it's easy, if it's available in a document itself.
Just add event listeners as you would in HTML.
So for applications that aren't that complicated,
with a relatively low number of elements,
that's a good use case for SVG.
Whereas, if you have graphics that
require you to draw a lot of elements,
you have billions of rectangles or points.
Then Canvas is much more suitable for that.
ALEX DANILO: That makes sense.
And also, I know the SVG working group
has been working hard on SVG 2.
So web developers have now become
accustomed to SVG 1, which is in all the browsers.
But SVG 2 is coming.
So can you tell us roughly what SVG 2 brings to the table.
ERIK DAHLSTROM: So SVG 2 is continuing
the work we did with SVG 1.1 Second Edition, which
is basically trying to smooth over
all of the gaps between HTML and CSS and SVG,
so making the platform a bit more consistent,
dropping certain things that we have
in 1.1, which no longer apply.
We had interfaces, for example, for pausing the rendering,
to be able to update lots of elements in a DOM tree.
Turns out, browsers these days optimize for this anyway.
So those interfaces don't apply.
They don't do anything useful anymore.
So we could remove those.
And it's clean-ups like that.
And we're also trying to promote more of the existing attributes
to properties, so that you can style
like the width of a rectangle with CSS, which
makes doing certain things easier.
ALEX DANILO: OK.
And do you ever see SVG being hardware accelerated in Blink?
ERIK DAHLSTROM: Yes, I think that's the way of the future.
I mean, it's always going to have
to have some parts like a fall-back in software anyway.
But certain things-- it's coming.
It's going to be there.
ALEX DANILO: So this seems to be a recurring
theme at the conference, hardware exhilaration
for everything, especially mobile.
Well, there you have it.
That was "The Graphical Web."
And these guys are building better and better browsers just
for you.
[MUSIC PLAYING]