pixi.js mode7

by lain8dono

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/2.2.0/pixi.dev.js"></script>
<div id="twist"></div>sdf

CSS

html,body {
    margin:0px;
}

CoffeeScript

Mode7 = (angle) ->
  PIXI.AbstractFilter.call this
  @passes = [this]
  @uniforms =
    sin1:{type: "1f",value: 0}
    sin2:{type: "1f",value: 0}
    cos1:{type: "1f",value: 0}
    cos2:{type: "1f",value: 0}
    scale:{type: "1f",value: 1.545}
    distance:{type: "1f",value: 2.5}
    lookY:{type: "1f",value: 0.5}
  @setAngle angle
    
  @fragmentSrc = ['''
    precision mediump float;
    varying vec2 vTextureCoord;
    varying vec4 vColor;
    uniform vec4 dimensions;
    uniform sampler2D uSampler;
    
    precision highp float;
    uniform highp float sin1;
    uniform highp float sin2;
    uniform highp float cos1;
    uniform highp float cos2;
    
    
    uniform highp float scale;
    uniform highp float lookY;
    uniform highp float distance;
    
    void main(void) {
        vec2 uv = vTextureCoord;
        vec2 warped;

        // perform mode7 transform on uvs
        warped = vec2(uv.x-0.5, 1.0)
               / vec2(uv.y+lookY-0.5, uv.y+lookY-0.5);
        warped.y -= distance-0.04;
        warped /= scale;

        // rotate the new uvs
        //warped *= mat2(sin1, sin2, cos1, cos2);
        warped *= mat2(sin1, sin2, cos1, cos2);
        // centred
        warped += vec2(0.5, 0.5);
        /* set the uvs to repeat in space
        warped = vec2(mod(warped.x, 1.0), mod(warped.y, 1.0)); // */
        
        bool isDraw = uv.y > 0.5 - lookY;
        //isDraw = warped.x >= 0.0 && warped.y >= 0.0  && warped.x <= 1.0 &&warped.y<=1.0;
        
        if (isDraw){
           gl_FragColor = texture2D(uSampler, warped);
        }else{
            gl_FragColor = vec4(0.0,0.0,0.0,0.0);
        }
        /*uv = uv*mat2(
            1.0, 0.0,
            0.0, 1.0
        );*/
        //gl_FragColor = texture2D(uSampler, uv);
    }
    '''
  ]
  return

Mode7:: = Object.create(PIXI.AbstractFilter::)
Mode7::constructor = Mode7
Mode7::setAngle = (v) ->
    v = (v-90)/180*Math.PI
    @uniforms.sin1.value = -Math.sin(v)
    @uniforms.cos1.value =...