如何在模型视图转换后获取正在绘制的对象的二维尺寸以在 webgl 上进行命中测试

function main() {
  const gl = document.querySelector('canvas').getContext('webgl2');
  if (!gl) {
    return alert('need WebGL2');
  }
  
  const vs = `#version 300 es
in vec2 aPosition;

uniform mat3 uMatrix;

void main() {

  vec2 position = (uMatrix * vec3(aPosition, 1)).xy;

  gl_Position = vec4(position, 0, 1);

}
  `;
  const fs = `#version 300 es
  precision mediump float;
  uniform vec4 color;
  out vec4 outColor;
  void main() {
    outColor = color;
  }

  `;
  
  const programInfo = twgl.createProgramInfo(gl, [vs, fs]);
  
  // create a quad that starts at 0,0 and is 20 units wide and 10 tall
  const bufferInfo = twgl.createBufferInfoFromArrays(gl, {
    aPosition: {
      numComponents: 2,
      data: [
        0, 0,
        0, 10,
        20, 0,
        
        20, 0,
        0, 10,
        20, 10,
      ],
    }
  });
  const vao = twgl.createVAOFromBufferInfo(gl, programInfo, bufferInfo);
  
  let mouseClipX = 0;
  let mouseClipY = 0;
  const infoElem = document.querySelector('#info');
  
  function render(time) {
    t = time / 1000;
    
    twgl.resizeCanvasToDisplaySize(gl.canvas);
    gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
    
    gl.useProgram(programInfo.program);
    gl.bindVertexArray(vao);
    
    let mat = m3.projection(gl.canvas.width, gl.canvas.height);
    
    mat = m3.translate(
       mat, 
       150 + Math.sin(t * 0.1) * 100,
       75 + Math.cos(t * 0.2) * 50);
    mat = m3.rotate(mat, t * 0.3);
    mat = m3.scale(
       mat, 
       2 + Math.sin(t * 0.4) * 0.5,
       2 + Math.cos(t * 0.5) * 0.5);
       
       
    // convert clipspace mouse to aPosition relative values
    // 'mat' takes aPosition and converts to clip space
    // so the inverse of 'mat' would take clip space and
    // convert back to aPosition space.
    const invMat = m3.inverse(mat);
    const p = m3.transformPoint(invMat, [mouseClipX, mouseClipY]);
    
    // now check in aPosition space. It's a 20x10 rect starting at 0,0 so
    const inbox = p[0] >= 0 && p[0] < 20 &&
                  p[1] >= 0 && p[1] < 10;
       
    
    twgl.setUniforms(programInfo, {
      uMatrix: mat,
      color: inbox ? [1, 0, 0, 1] : [0, 0, 1, 1],
    });
    twgl.drawBufferInfo(gl, bufferInfo);
        
    infoElem.textContent = inbox ? 'mouse in rect' : 'no hit';
    
    requestAnimationFrame(render);    
  }
  requestAnimationFrame(render);
  
  gl.canvas.addEventListener('mousemove', (event) => {
    // convert canvas relative mouse coordinates to clip space
    mouseClipX = (event.offsetX / gl.canvas.clientWidth ) *  2 - 1;
    mouseClipY = (event.offsetY / gl.canvas.clientHeight) * -2 + 1;  // note we flip Y
  });
}


main();

canvas { border: 1px solid black; }

<script src="https://twgljs.org/dist/4.x/twgl-full.min.js"></script>
<script src="https://webgl2fundamentals.org/webgl/resources/m3.js"></script>
<canvas></canvas>
<pre id="info"></pre>