thanks to run hi nice to be here just why was watching that last presentation one of the things that really struck me that Jeremy said was about dropping sugar on top of like our tool sets so I want to basically give you guys a bit of sugar to drop on your sites to make them sweet so you're going to walk away with really nice websites if you start using this stuff and people used to say you know we try and build lickable web apps and I never understood it but now I do okay so I'm going to talk a little bit about CSS filters this is not the old style filters that used to be an ie a long time ago but these are the current proper filters okay so basically this is how a page gets built like you start with a tree right you lay it out your style it you do CSS you render it and you can do things like say this got this tree you might you know and belly should a bit more do a bit more styling and then there's a final stage that you can apply this is a CSS filter and what the filter is is the second last stage it's just before you pop the pixel to the screen you apply a filter so here I've got this like tree that I've built if I like apply filter I'm going to just like blur it and shift its color a little bit and it just does that and that's just before you send it off to the screen of course this is your web browser drawing the beautifully filtered page that you've just built and of course it can look sharp so that's it that's basically I'm finished Thanks 12 minutes left ok so anyway these are the web directions code so this is the code this is an example of a very very complicated filter like which has a whole lot of stages and this is kind of the worst possible case we've got a couple of prefixed filter things we've got non prefix filter but of course you guys who actually building sites that you know actually have deadlines want to build stuff you don't want to be writing this because it's far too complicated so let's start with some basic ideas right the first thing is that this is built on top of SVG filters so filters are kind of inherited from SVG into CSS land because when SVG had them they were really clanking complicated to use so you can imagine n SVG filter is like a Lego block and a CSS filter is like you know the Millennium Falcon like it's just you know all put together nicely so it's really simple to use so let's just take a look okay here's some code and an image right so it's that simple you just have a class they're like you know blur me and it's basically if we apply the class to the image it says you know blow it by four pixels and you end up with this thing on the right that looks just fantastic couldn't be easier the beauty of this of course is that if your browser just happens to not support CSS filters it'll gracefully degrade you just might get the blur so in general it's kind of it's just an embellishment it's like a bit of sugar to make your site look nicer so the way filters work that was kind of an example of one filter now there are a bunch of different preset filters in CSS filters and then combine left to right so you can list a whole lot of them one after the other and so your original pixel pixelated the image will get one Phil replied then the next one then the next one so as you can see here I've spun around the hue 180 degrees and then applied sepia so the final filter the final image looks like CPR but of course you swap those two around you get a completely different result so you're actually doing the sepia first and then you hear rotating the CPS so it gives you a different color ok so order it is very important ok so the CSS shorthands as I said before we're just a way to like package up the SVG filters apply them to your content without you having to do all sorts of nasty xml and namespaces and all these sort of things now what's happening of course in all the browsers people are shifting the filter workload on to the GPU so once these are kind of pre count effects like blur for example works a lot better GPU than it runs on a cpu and so this is something everybody but developing sites needs to keep in mind that performance of filters especially on mobile sites varies greatly so test a lot as we say nothing ever comes for free so this is a very geeky slide here you have to apologize for the deferred rendering limits complexity that will not work bullet point that's probably everybody's looking at this game what okay what I I'll just explain this quickly for the super geeks who want to know what this means on a standard GPU and unlike your desktop workstation or something there are thousands of parallel cause they can split the job out to all these parallel cause in parallel so for something like a blur you might do 10,000 operations in parallel and that's the key to the GPU speed on a mobile device like your you know your Android phone or your iPhone or whatever they have a completely different style of GPU and that GPU buffers up commands and kind of tried to do as little work as it can before it actually does the final render the downside of this is that it uses more memory on the GPU and so if you do start doing crazy things with hardware accelerated filters on a mobile device you'll probably run out of ram and the you know the site will crash and people won't be very happy okay so I'm just gonna dive into the future that was the past we're just going to dive into the very near future which is happening now there's this thing that adobe has been heavily pushing and done a lot of the web browser makers are keen to hear about and it's called custom filters now what a custom filter is is does anyone know what WebGL is put your hand up yes all right okay so WebGL is a way to basically you know do 3d stuff do vertex and fragment shaders and do funky looking sites and that's that's great if you're writing a game but if you got web content and you want to manipulate the web content it's not really all that useful so um filter effects the current filter effect pixel-based things then we have the custom fillers which are shaders and shaders is kind of a 3d concept a GPU concept that doesn't map very well to the real world but let's just have a peek see if I've got a picture to explain it okay so what you've got here is here you have like real web content so there's like text and in you know an image this is actually SVG file so what happens with custom filters is you can actually get your render of your dong and manipulate it like you would a 3d scene with WebGL so instead of you know all JavaScript doing again you can actually like lay out your site you can do something like a page flip or a page turn or you know other kind of funky effects and that's what these are about so let's just have a little look at what that would really look like okay so here is a shader effectively working so this is this is basically an SVG file that's been sliced up and if you see all these triangles the what happens is the vertex shader is the thing that moves the positions of the corners of the triangles so you basically slice up your web page some guys some geek right a bit of you know shader code passes it to the CSS custom filter and this thing goes flickering around and doing all these funky things which is you know very very cool I think you know people like Flipboard could probably use this to do that trademark flip or I've seen it used for page-turning I've seen all sorts of crazy applications of this stuff okay so let's just go back to reality for a moment and this is kind of the last thing I really want to talk about is accelerated SVG filters now as I said before all this filter stuff started you know the stuff that's infancy in SVG kind of climbed up the tree got chucked into CSS got meshed together and then of course SVG became the poor cousin of CSS filters because everybody was sitting there jumping on the CSS bandwagon and SVG was you know left crawling along behind but of course geeks being geeks have been working really hard and they've been working on accelerating SVG filters and the whole purpose of this is to be able to actually make super complicated filters that do anything because the building blocks like the Lego blocks of SVG filters let you change crazy things together and you can do some really crazy things if you have the time so we have a look at a bit more code so it's very simple to use SVG filters from CSS so what you actually have is you have filter URL bracket ID and so we have for example here we have like a video we're going to apply a convolution filter to the video so the CSS is just that little tiny block at the top and down the bottom you can see the horrible XML which is actually the convolution filter and there's convolution and blur filter here as well and so if you know somebody that can write the bits of the meat of the filter you can actually just call it from CSS and it does magical things as i will show you so let's just have a look now this is a video this is running in Canary and this is today this is not a demo this is actually real so we can apply a blur to the live video and it works well in fact we can apply point light and I put like a a listener on the mouse move event as you can see I can actually shift the light so this is real-time running on the GPU shifting the light over this low video scene similarly you can do lots of other nice SVG effects like spotlight so it's like doing a little glow in a spotlight so these are the kind of effects that you would see in a game like with WebGL you know people do lighting they do models but this is now on web content this is on live video morphology is just another SVG primitive inverse flip the colors around which I don't know how useful that is but it works now convolution now with convolution you can do all sorts of crazy thing convolution is a mathematical concept of a couple of functions either sharing with each other but it basically lets you make almost anything you like you can do edge detection you can do crazy things so we can do a convolution with a blur and offset is another one now this is where it's just basically taking the video and offsetting it and blurring it change it to black and white if you have a bit of nostalgia or if you want to think you're in like a you know a cartoony noir movie you can do that works better with people blue Phil is just kind of you know doing a chroma key ish kind of effect now displacements an interesting one what you can actually do is you can take an image a RGB image and you can use one of the channels of that image to be a pixel offset for the thing that you're looking at so when you apply that filter on top of something else it actually more stood in a whole different direction this has been used for a lot of effects like people with macs you know when you close your window down the whole we know kind of goes twinks goes down that's a warp and that's the kind of thing you can do with the displacement filter blur of course we've seen blur but it's there go so that's pretty much all I really wanted to show you um so you guys get some sugar throughout on your site people who run their they want to lick it that will go this is unreal this makes my site so sweet and if you happen to hit that site want to Brett with a browser that doesn't support the CSS filters well it'll fall back gracefully and it'll still work right so in any case thank you for listening to me and if you want to find out more i'll be around the next couple days you
