CSS Shaderを使ってみる

README

# CSS Shaderを使ってみる。

このデモは[CSS custom filter](http://adobe.github.com/web-platform/samples/css-customfilters/)を使っています。  
現状対応してるのは *Chromeのみ* です。  
さらに、*chrome://flags から 「CSS Shaderを使う」をオンにしないと正常に表示されません*。

調べたり、分かったことは[Qiitaで記事にしてまとめる](http://qiita.com/items/0a976320d057aff259cc)予定。

jsdoit.css

body, div {
    margin: 0;
}

#shader-test {
/*    -webkit-filter: custom(url(sample.vs) mix(url(sample.fs) normal source-atop), 100 100, frequency 2.0, phase 270.0, amplitude 40.0, txf rotateX(30deg), amount 1);*/
/*    -webkit-transition: all 0.3s ease-in-out;*/
}

#shader-test:hover {
/*    width: 50px;*/
/*    -webkit-filter: custom(url(sample.vs) mix(url(sample.fs) normal source-atop), 100 100, frequency 10.0, phase 270.0, amplitude 40.0, txf rotateX(30deg), amount 1);*/
}

jsdoit.html

<div id="container">
    <div id="shader-test">
        <iframe width="450" height="480" src="http://css-eblog.com/" frameborder="0"></iframe>
    <!-- /#shader-test --></div>
<!-- /#container --></div>

<script id="vs" type="x-shader/x-vertex">
precision mediump float;

attribute vec4 a_position;
attribute vec2 a_meshCoord;
attribute vec2 a_texCoord;

uniform mat4 u_projectionMatrix;

// These uniform values are passed in using CSS.
uniform mat4 txf;
uniform float phase;
uniform float amplitude;
uniform float frequency;

varying vec4 v_color;

const float PI = 3.1415;
const float degToRad = PI / 180.0;

void main() {
    vec4 pos = a_position;
    
    float phi = degToRad * phase;
    pos.z = amplitude * cos(pos.x * PI * frequency + phi);
    
    v_color = vec4(0.0, 0.0, 0.0, min(0.75, 1.0 - (pos.z / 50.0)));

    gl_Position = u_projectionMatrix * txf * pos;
}
</script>
<script id="fs" type="x-shader/x-fragment">
precision mediump float;

// This uniform value is passed in using CSS.
uniform float amount;
    
varying vec4 v_color;

void main() {
    //const mat4 identityMatrix = mat4(1.0);
    //const mat4 grayscaleMatrix = mat4(1.0);
    //const mat4 grayscaleMatrix = mat4(0.33, 0.33, 0.33, 0.0,
    //                                  0.33, 0.33, 0.33, 0.0,
    //                                 0.33, 0.33, 0.33, 0.0,
    //                                   0.0,  0.0,  0.0, 1.0);

    css_MixColor = v_color;
    //css_ColorMatrix[0] = mix(identityMatrix[0], grayscaleMatrix[0], amount);
    //css_ColorMatrix[1] = mix(identityMatrix[1], grayscaleMatrix[1], amount);
    //css_ColorMatrix[2] = mix(identityMatrix[2], grayscaleMatrix[2], amount);
    //css_ColorMatrix[3] = mix(identityMatrix[3], grayscaleMatrix[3], amount);
}
</script>

jsdoit.js

do (win = window, doc = window.document, exports = window) ->

    {cos, sin, random, PI} = Math

    $ = (selector) ->
        doc.querySelector selector

    getSource = (id) ->
        target = $ id
        text = target.innerHTML
        blob = new Blob [text]
        url = webkitURL.createObjectURL blob
        return url

    init = ->
        box = $ '#shader-test'
        rect = box.getBoundingClientRect()
        base = rect.width

        phase = 270
        amplitude = 40
        angle = 0
        frequency = 3.0
        degToRad = PI / 180

        vs = getSource '#vs'
        fs = getSource '#fs'

        do _loop = ->
            #amplitude = ~~(cos((angle = ++angle % 360) * degToRad) * 40)
            phase += 20
            requestAnimationFrame _loop
            box.style.webkitFilter = "custom(url(#{vs}) mix(url(#{fs}) normal source-atop), 100 100, frequency #{frequency}, phase #{phase}, amplitude #{amplitude}, txf rotateX(30deg) rotateY(25deg), amount 1)"

    doc.addEventListener 'DOMContentLoaded', init, false