Game Development Reference
In-Depth Information
0.0, 0.0, 0.0, 1.0);
}
With that shader program in place, all we need to do is call it from within our HTML
file. The three parameters we need to pay attention to are the red, green, and blue
uniforms. Whatever values we send in for those three color channels, it will reflect
on the rendering of whatever elements we apply this filter to.
<style>
div {
margin: 10px;
padding: 0;
border: 1px solid #ddd;
background: #fafafa;
width: 400px;
/**
* We can leverage CSS transitions to make
our simple
* shaders seem even more impressive
*/
transition: filter 1.0s;
filter: custom(url(simple-vert-shader.glsl)
mix(url(simple-frag-shader.glsl)
normal source-atop),
16 32,
red 1.0, green 0.0, blue 0.0);
}
div:hover {
filter: custom(url(simple-vert-shader.glsl)
mix(url(simple-frag-shader.glsl)
normal source-atop),
16 32,
red 1.0, green 1.0, blue 0.0);
}
Search WWH ::




Custom Search