Game Development Reference
In-Depth Information
must master (or find someone who's already mastered it) in order to take full advant-
age of the HTML5 revolution.
To specify custom shaders to be used for our CSS filters, we simply call the custom
function as the value of the filter attribute, pass in our vertex and fragment shaders,
followed by any possible variables to be used by the vertex shader. External vari-
ables used by the fragment shader are passed in from the vertex shader, so we can't
pass anything into it directly from CSS.
div {
margin: 10px;
padding: 0;
border: 1px solid #ddd;
background: #fafafa;
width: 400px;
filter: custom(url(simple-vert-shader.glsl)
mix(url(simple-frag-shader.glsl) normal
source-atop,
16 32,
lightPosition 0.0 0.0 1.0;
}
There are three parts to the preceding filter definition. First, we call
custom
to indic-
ate that we'll be using our own shaders. The first argument we pass to this function
is the vertex shader. The extension of this file is not important, as the contents of the
file will be compiled and sent to the GPU. A lot of the time, you will see other de-
velopers using file extensions for their shaders such as
.glsl
or
.vs
and
.fs
(for
vertex shader and fragment shader, respectively). Note that the fragment shader is
sent through the
mix()
function, as opposed to just being sent directly through the
url()
function, as is the case with the vertex shader. Lastly, we specify the number
of rows and columns that will make up the element's content mesh. The vertices that
make up this mesh are created by the browser automatically. Finally, the last set of
arguments passed with our custom filter are uniform values (accompanied by their
names) for the vertex shader to use.
Since GLSL itself is beyond the scope of this topic, we will stay away from a thorough
example of these custom shaders. Instead, we will look at a symbolic example, which
