WebGL – Mouse Events

I extended the Full Screen Quad example to handle mouse location with a little visual feedback when you click and drag.

Click To Show Running WebGL

mouseevents

    precision mediump float;
    uniform vec2 uViewportSize;
    uniform vec2 uMouseLocation;
    uniform float uMouseRadius;
    varying vec2 vUV;

    void main(void) {
      vec4 orig_color = vec4(vUV.x, vUV.y, 1.0, 1.0);
      vec4 mouse_color = vec4(1, 0, 0, 1.0);

      float dist = length(
                          vec2(gl_FragCoord) - 
                          vec2(uMouseLocation.x - uMouseRadius,
                               uMouseLocation.y + uMouseRadius
                              )
                         );
      float t =  clamp(dist/uMouseRadius, 0.0, 1.0);

      gl_FragColor = mix(mouse_color, orig_color, t);
    }

   ...
    function initShaders() {
       ...
        shaderProgram.MouseLocationUniform=gl.getUniformLocation(shaderProgram,
                                                             "uMouseLocation");
        shaderProgram.MouseRadiusUniform=gl.getUniformLocation(shaderProgram,
                                                             "uMouseRadius");
    }


   
    function setUniforms() {
        ...
        gl.uniform2f(
                    shaderProgram.MouseLocationUniform, 
                    mouse[0], 
                    mouse[1]
                    );
        gl.uniform1f(
                    shaderProgram.MouseRadiusUniform, 
                    mouseRadius 
                    );

    }



    

    var mouse = [250,250];
    var mouseRadius = 10;
    var currentAngle = [0,0]; // [x-axis, y-axis] degrees

    function webGLStart() {
        ...
        initEventHandlers(canvas, mouse, currentAngle);

        ...
        var tick = function() {
          drawScene();
          requestAnimationFrame(tick,canvas);
        };
        tick();
    }

    function initEventHandlers(canvas, mousePosition, currentAngle)
    {
      var lastX = -1;
      var lastY = -1;
      var dragging = false;

      canvas.onmousedown = function(ev) {  //Mouse is pressed
        var x = ev.clientX;
        var y = ev.clientY;

        var rect = ev.target.getBoundingClientRect();
        if(rect.left <= x 
            &amp;&amp; x <= rect.right 
            &amp;&amp; rect.top <= y 
            &amp;&amp; y <= rect.bottom
          ) {
          lastX = x; 
          lastY = y;
          mousePosition[0] = x;
          mousePosition[1] = canvas.height - y;
          dragging = true;

        }
      };

      canvas.onmouseup = function(ev){ //Mouse is released
        dragging = false;
      }

      canvas.onmousemove = function(ev) { //Mouse is moved
        var x = ev.clientX;
        var y = ev.clientY;
        if(dragging) {
          //put some kind of dragging logic in here
          //Here is a roation example
          var factor = 100/canvas.height;
          var dx = factor * (x - lastX);
          var dy = factor * (y - lastY);
          //Limit x-axis roation angle to -90 to 90 degrees
          currentAngle[0] = Math.max(Math.min(currentAngle[0] + dy, 90), -90);
          currentAngle[1] = currentAngle[1] + dx;

          mousePosition[0] = x;
          mousePosition[1] = canvas.height - y;

        }
        lastX = x;
        lastY = y;

      }
    }
    webGLStart();