Question

我正在研究WebGL，并且对模型视图和投影矩阵这个非常基本的问题感到困惑。

在下面的代码段中，如果我使用以下行设置点位置，那么这些点会呈现：

gl_Position = vec4(aVertexPosition, 1.0);

但是，如果我尝试使用投影矩阵和模型视图矩阵，则点会消失：

gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);

如果uPMatrix和uMVMatrix是身份矩阵（正如我认为的那样，因为我没有故意操纵它们），那么应该设置gl_Position值并且应该渲染点（以下作品）：

gl_Position = mat4(1.0) * mat4(1.0) * vec4(aVertexPosition, 1.0);

但是，在render()循环中记录uPMatrix和uMVMatrix值，我可以看到投影矩阵（uPMatrix）值不是单位矩阵！有谁知道为什么会这样？完整片段如下：

＆＃13;

var canvas,
    gl,
    fs,
    vs,
    glProgram,
    vertexBuffer,
    vertexIndexBuffer,
    colorBuffer,
    positionVal,
    colorVal,
    points = [],
    mvMatrix = mat4.create(),
    pMatrix = mat4.create(),
    angle = 0.00;

function initWebgl() {
  canvas = document.querySelector('canvas');
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
  try {
    gl = canvas.getContext('webgl')
  } catch(err) {
    alert('Your browser does not support Webgl')
  }
  // set the default background color
  gl.clearColor(0.9, 0.9, 0.9, 1.0)
  gl.clear(gl.COLOR_BUFFER_BIT|gl.DEPTH_BUFFER_BIT);
  gl.enable(gl.DEPTH_TEST);
}

function initCamera() {
  // set camera area, fov, near clip, far clip, and translation
  gl.viewport(0, 0, canvas.width, canvas.height)
  mat4.perspective(45, canvas.width/canvas.height, 0.1, 100.0, pMatrix);
  mat4.identity(mvMatrix);
  mat4.translate(mvMatrix, [0, 0, 0]);
}

function initShaders() {
  vs = buildShader('#shader-vs', gl.VERTEX_SHADER)
  fs = buildShader('#shader-fs', gl.FRAGMENT_SHADER)
}

function buildShader(selector, type) {
  var src = document.querySelector(selector).innerHTML;
  var shader = gl.createShader(type)
  gl.shaderSource(shader, src)
  gl.compileShader(shader)
  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
    console.warn('Shader error', selector, gl.getShaderInfoLog(shader))
  }
  return shader;
}

function initProgram() {
  glProgram = gl.createProgram()
  gl.attachShader(glProgram, vs)
  gl.attachShader(glProgram, fs)
  gl.linkProgram(glProgram)
  if (!gl.getProgramParameter(glProgram, gl.LINK_STATUS)) {
    console.warn('Program link error')
  }
  gl.useProgram(glProgram)
}

function updatePositions() {
  mat4.identity(mvMatrix)
  //mat4.translate(mvMatrix, [0.0, 0.0, 0.0])
  //mat4.rotate(mvMatrix, angle, [0.0, 0.0, 0.0])
  angle += 0.01;
}

function getBuffers() {
  // vertex buffer
  points = [
    -0.5, 0.5, 0.0,
    0.0, 0.0, 0.0,
    -0.5, -0.5, 0.0,
  ]
  var vertexData = new Float32Array(points);
  vertexBuffer = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
  gl.bufferData(gl.ARRAY_BUFFER, vertexData, gl.STATIC_DRAW)
}

function drawBuffers() {
  // identify and bind vertex position attributes
  var aVertexPosition = gl.getAttribLocation(glProgram, 'aVertexPosition')
  gl.enableVertexAttribArray(aVertexPosition)
  gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer)
  gl.vertexAttribPointer(aVertexPosition, 3, gl.FLOAT, false, 0.0, 0.0)

  // draw the data
  gl.drawArrays(gl.POINTS, 0, 3)
}

function getMatrixUniforms() {
  glProgram.pMatrixUniform = gl.getUniformLocation(glProgram, 'uPMatrix')
  glProgram.mvMatrixUniform = gl.getUniformLocation(glProgram, 'uMVMatrix')
}

function setMatrixUniforms() {
  gl.uniformMatrix4fv(glProgram.pMatrixUniform, false, pMatrix)
  gl.uniformMatrix4fv(glProgram.mvMatrixUniform, false, mvMatrix)
}

function render() {
  updatePositions()
  drawBuffers()
  setMatrixUniforms()
  requestAnimationFrame(render, canvas)
}

initWebgl()
initCamera()
initShaders()
initProgram()
getMatrixUniforms()
getBuffers()
render()

＆＃13;

* {
  margin: 0;
  padding: 0;
}

body, html {
  height: 100%;
  width: 100%;
  overflow: hidden;
  background: skyblue;
}

＆＃13;

<script src="https://rawgit.com/duhaime/955402641534b89babd41c8de8bc91f6/raw/5d86d54f7237f4cf2b206dcf0a3d453ba95acd1d/gl-matrix.js"></script>

<script id='shader-vs' type='x-shader/x-vertex'>
  attribute vec3 aVertexPosition;

  uniform mat4 uMVMatrix;
  uniform mat4 uPMatrix;

  varying highp vec3 vPos;

  void main() {
    gl_PointSize = 5.0;
    
    // this works
    gl_Position = vec4(aVertexPosition, 1.0);
    
    // this makes all points disappear
    //gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
    
    vPos = vec3(aVertexPosition);
  }
</script>

<script id='shader-fs' type='x-shader/x-fragment'>
  varying highp vec3 vPos;

  void main() {
    highp vec3 blue = vec3(1.0, 1.0, 1.0);
    highp vec3 red = vec3(1.0, 0.0, 0.0);
    gl_FragColor = vec4(mix(blue, red, 1.0), 1.0);
  }
</script>

<canvas />

＆＃13;

Answer 1

gl-matrix库用零初始化矩阵，我只是将模型视图矩阵而不是投影矩阵转换为单位矩阵。我应该将投影矩阵初始化为单位矩阵：

function initCamera() {
  // set camera area, fov, near clip, far clip, and translation
  gl.viewport(0, 0, canvas.width, canvas.height)
  mat4.perspective(45, canvas.width/canvas.height, 0.1, 100.0, pMatrix);
  mat4.identity(mvMatrix);
  mat4.identity(pMatrix);
  mat4.translate(mvMatrix, [0, 0, 0]);
}

[用户是否习惯将mv和p矩阵初始化为标识矩阵？]

GLSL：使用gl-matrix投影+模型视图矩阵时，点消失

1 个答案: