Game Development Reference
In-Depth Information
In the following screenshot, the image on the left is a regular piece of HTML, with a
heading and an image. On the right, we applied a CSS filter that inverted the colors.
That entire effect was achieved with a single line of code.
Note that we can apply multiple filters to the same element by just simply listing ad-
ditional filters as the value of the CSS property. Also, keep in mind that even though
it only takes a single line of code to add one of these exciting filters to our applica-
tions, each filter used means work that the browser will need to do on top of all that
it's already doing. Thus, the more we use these filters, the more we can expect per-
formance to drop accordingly.
Using custom filters
In order to input our own filtering functions for the browser to use when rendering our
application, we need to create the shader program that does what we want. Thank-
fully, these shader programs are written in the same shading language that we use
in WebGL. If you thought learning JavaScript, CSS, and HTML was a lot of work
already, I'm sorry to say, but go ahead and add GLSL to the list of languages you
Search WWH ::




Custom Search