在WebGL中，可以使用矩阵在屏幕空间中绘制对象偏移吗？

问题描述

我有一个简单的对象，它在0、0、0处绘制3d小控件。如果相机位于0、0、0的中心，则它将小控件绘制在屏幕中心。

我想“提起”这个Gizmo，并在屏幕坐标的屏幕右下角渲染它，而不旋转它。基本上，我希望Gizmo显示屏幕中心的旋转而不会阻塞视图，而不必专注于特定点。所以我想消除模型矩阵之类的东西。

通过转换投影矩阵，我可以进行以下工作：

this.gl.uniformMatrix4fv(this.modelMatrixUniform,false,modelMatrix);
this.gl.uniformMatrix4fv(this.viewMatrixUniform,viewMatrix);

const bottomRightMat = mat4.create();
mat4.translate(bottomRightMat,projectionMatrix,[5,-3,0]);
this.gl.uniformMatrix4fv(this.projectionMatrixUniform,bottomRightMat);
this.gl.drawElements(this.gl.LINES,this.indexBuffer.getLength(),this.gl.UNSIGNED_SHORT,0);

但是小控件已被旋转到新位置。红线仍应指向下方和左侧，因为那是屏幕中心的X轴正方向。另外，数字5和3是任意的，我认为它们不能在不同的变焦或相机位置使用。

有没有一种方法可以指定一个以屏幕中心为中心并在屏幕空间中进行转换的矩阵变换？

解决方法

一种方法是在渲染对象时更改视口。

// size of area in bottom right
const miniWidth = 150;
const miniHeight = 100;
gl.viewport(gl.canvas.width - miniWidth,gl.canvas.height - miniHeight,miniWidth,miniHeight);

// now draw. you'll need to zoom in,like set the camera closer
// or move the object closer or add a scale matrix after the projection
// matrix as in projection * scale * view * ...

您将需要一个与新视口的宽高比匹配的投影矩阵，并且您需要缩放对象，将相机靠近或在投影和视图矩阵之间添加2D比例。 请记住，将视口放回完整的画布以渲染场景的其余部分。

const vs = `
attribute vec4 position;
uniform mat4 u_worldViewProjection;
void main() {
  gl_Position = u_worldViewProjection * position;
}
`;

const fs = `
precision mediump float;
void main() {
  gl_FragColor = vec4(vec3(0),1);
}
`

const gl = document.querySelector("canvas").getContext("webgl");
const programInfo = twgl.createProgramInfo(gl,[vs,fs]);

const bufferInfo = twgl.createBufferInfoFromArrays(gl,{
  position: [
    -1,-1,1,],indices: {
    numComponents: 2,data: [
      0,2,3,4,5,6,7,},});

function render(time) {
  time *= 0.001;
  twgl.resizeCanvasToDisplaySize(gl.canvas);
  gl.viewport(0,gl.canvas.width,gl.canvas.height);

  const fov = 90 * Math.PI / 180;
  const zNear = 0.5;
  const zFar = 100;
  const projection = mat4.perspective(mat4.create(),fov,gl.canvas.clientWidth / gl.canvas.clientHeight,zNear,zFar);
  const eye = [0,10];
  const target = [0,0];
  const up = [0,0];
  const view = mat4.lookAt(mat4.create(),eye,target,up);

  drawCube([-8,0],projection,view);
  drawCube([-4,view);
  drawCube([ 0,view);
  drawCube([ 4,view);
  drawCube([ 8,view);

  const iconAreaWidth  = 100;
  const iconAreaHeight = 75;
  gl.viewport(
      gl.canvas.width - iconAreaWidth,iconAreaWidth,iconAreaHeight);     
  const iconProjection = mat4.perspective(mat4.create(),iconAreaWidth / iconAreaHeight,zFar);
  // compute the zoom size need to make things the sngs
  const scale = gl.canvas.clientHeight / iconAreaHeight;
  mat4.scale(iconProjection,iconProjection,[scale,scale,1]);
  drawCube([ 0,view);

  function drawCube(translation,view) {
    const viewProjection = mat4.multiply(mat4.create(),view);
    const world = mat4.multiply(
       mat4.create(),mat4.fromTranslation(mat4.create(),translation),mat4.fromRotation(mat4.create(),time,[0.42,0.56,0.70]));
    const worldViewProjection = mat4.multiply(mat4.create(),viewProjection,world);

    gl.useProgram(programInfo.program);
    twgl.setBuffersAndAttributes(gl,programInfo,bufferInfo);
    twgl.setUniforms(programInfo,{
      u_worldViewProjection: worldViewProjection,});
    twgl.drawBufferInfo(gl,bufferInfo,gl.LINES);
  }
  
  requestAnimationFrame(render);
}
requestAnimationFrame(render);

body { margin: 0; }
canvas { width: 100vw; height: 100vh; display: block; background: #CDE; }

<canvas></canvas>
<script src="https://twgljs.org/dist/4.x/twgl-full.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gl-matrix/2.8.1/gl-matrix.js"></script>

另一种方法是计算偏心的视锥投影矩阵。代替mat4.perspective使用mat4.frustum

function perspectiveWithCenter(
    fieldOfView,width,height,near,far,centerX = 0,centerY = 0) {
  const aspect = width / height;

  // compute the top and bottom of the near plane of the view frustum
  const top = Math.tan(fieldOfView * 0.5) * near;
  const bottom = -top;

  // compute the left and right of the near plane of the view frustum
  const left = aspect * bottom;
  const right = aspect * top;

  // compute width and height of the near plane of the view frustum
  const nearWidth = right - left;
  const nearHeight = top - bottom;

  // convert the offset from canvas units to near plane units
  const offX = centerX * nearWidth / width;
  const offY = centerY * nearHeight / height;

  const m = mat4.create();
  mat4.frustum(
        m,left + offX,right + offX,bottom + offY,top + offY,far);
  return m;
}

因此要绘制小控件集，请调用类似

  const gizmoCenterX = -gl.canvas.clientWidth  / 2 + 50;
  const gizmoCenterY =  gl.canvas.clientHeight / 2 - 50;
  const offsetProjection = perspectiveWithCenter(
      fov,gl.canvas.clientWidth,gl.canvas.clientHeight,zFar,gizmoCenterX,gizmoCenterY);

const vs = `
attribute vec4 position;
uniform mat4 u_worldViewProjection;
void main() {
  gl_Position = u_worldViewProjection * position;
}
`;

const fs = `
precision mediump float;
void main() {
  gl_FragColor = vec4(vec3(0),});

function perspectiveWithCenter(
    fieldOfView,far);
  return m;
}

function render(time) {
  time *= 0.001;
  twgl.resizeCanvasToDisplaySize(gl.canvas);
  gl.viewport(0,gl.canvas.height);

  const fov = 90 * Math.PI / 180;
  const zNear = 0.5;
  const zFar = 100;
  const projection = perspectiveWithCenter(
      fov,view);

  const gizmoCenterX = -gl.canvas.clientWidth  / 2 + 50;
  const gizmoCenterY =  gl.canvas.clientHeight / 2 - 50;
  const offsetProjection = perspectiveWithCenter(
      fov,gizmoCenterY);
  drawCube([ 0,offsetProjection,gl.LINES);
  }
  
  requestAnimationFrame(render);
}
requestAnimationFrame(render);

body { margin: 0; }
canvas { width: 100vw; height: 100vh; display: block; background: #CDE; }

<canvas></canvas>
<script src="https://twgljs.org/dist/4.x/twgl-full.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gl-matrix/2.8.1/gl-matrix.js"></script>