jsdoでshadertoy sandbox その3

概要

jsdoでshadertoyのコードを実行したい。
マウスも使いたい。

成果物

写真

サンプルコード

precision mediump float;
uniform vec2 iResolution;
uniform vec4 iMouse;    
uniform float iGlobalTime;
uniform sampler2D iChannel0;
uniform sampler2D iChannel1;


void mainImage(out vec4 fragColor, in vec2 fragCoord)
{
    vec2 uv = fragCoord.xy / iResolution.xy;
    bool iMouseDown = !(iMouse.z < 0.);
    vec2 iMouseClick = iMouse.zw;
    if (iMouseClick.x < 0.) 
    {
        iMouseClick.x *= -1.;
    }
    if (iMouseClick.y < 0.) 
    {
        iMouseClick.y *= -1.;
    }    
    if (uv.x < 0.5) 
    {
        fragColor = vec4(iMouse.xy / iResolution.xy, 0., 0.);
    } 
    else 
    {
        fragColor = vec4(iMouseClick.xy / iResolution.xy, 0., 0.);
    }
    float distToScreenCenter = distance(fragCoord.xy, vec2(0.5, 0.5) * iResolution.xy);
    if (distToScreenCenter < 20. && distToScreenCenter > (iMouseDown ? 0. : 18.)) 
    {
        fragColor = vec4(1., 1., 1., 0.);
    }
    float distToMouse = distance(fragCoord.xy, iMouse.xy);
    float distToMouseClick = distance(fragCoord.xy, iMouseClick.xy);
    if (distToMouse < 10. && distToMouse > 8.) 
    {
        fragColor = vec4(1.0, 1.0, 1.0, 0.);
    }
    if (distToMouseClick < 5.) 
    {
        fragColor = vec4(1.0, 1.0, 1.0, 0.);
    }    
}

void main() 
{
    vec4 color;
    mainImage(color, gl_FragCoord.xy);
    color.w = 1.0;
    gl_FragColor = color;
}   

説明

iMouseを実装した。
マウスの位置、クリックをuniform4fvで流し込む。