Question

I’m looking at Learning WebGL website and porting their code. I came across a line of code that I’d like to produce with DartVectorMath library:

var pMatrix = createPerspectiveMatrix4(45.0, canvas.width/canvas.height, 0.1, 100.0);

What should createPerspectiveMatrix4 be?

I’ve tried various different things and this is the last one I tried:

  var zNear = 0.1;
  var zFar = 10000;
  double yTop = Math.tan(45.0 * Math.PI / 180.0 / 2.0) * zNear;
  double xRight = canvas.width / canvas.height * yTop;
  double zDepth = zFar - zNear;

  var row1 = new vec4(zNear / xRight, 0.0, 0.0, 0.0);
  var row2 = new vec4(0.0, zNear / yTop, 0.0, 0.0);
  var row3 = new vec4(0.0, 0.0, -(zFar + zNear) / zDepth, -(2 * zNear * zFar) / zDepth);
  var row4 = new vec4(0.0, 0.0, -1.0, 0.0);

  var pMatrix = new mat4(row1, row2, row3, row4);

I simply see nothing rendered on the screen.

The full source is as follows:

import 'dart:html';
import 'dart:math' as Math;
import 'package:vector_math/vector_math_browser.dart';

main() {
  var canvas = query('#back-buffer');
  WebGLRenderingContext gl = canvas.getContext('experimental-webgl');
  gl.viewport(0, 0, canvas.width, canvas.height);

  gl.clearColor(0.0, 0.0, 0.0, 1.0);
  gl.enable(WebGLRenderingContext.DEPTH_TEST);

  // VERTEX SHADER.
  var vertexShader = gl.createShader(WebGLRenderingContext.VERTEX_SHADER);
  gl.shaderSource(vertexShader, """attribute vec3 aVertexPosition;

uniform mat4 uMVMatrix;
uniform mat4 uPMatrix;

void main(void) {
    gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
}""");

  gl.compileShader(vertexShader);

  // FRAGMENT SHADER.
  var fragmentShader = gl.createShader(WebGLRenderingContext.FRAGMENT_SHADER);
  gl.shaderSource(fragmentShader, """precision mediump float;

void main(void) {
    gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
}""");

  gl.compileShader(fragmentShader);

  WebGLProgram shaderProgram = gl.createProgram();
  gl.attachShader(shaderProgram, vertexShader);
  gl.attachShader(shaderProgram, fragmentShader);
  gl.linkProgram(shaderProgram);
  gl.useProgram(shaderProgram);

  int vertexPositionAttribute = gl.getAttribLocation(shaderProgram, "aVertexPosition");
  gl.enableVertexAttribArray(vertexPositionAttribute);

  WebGLUniformLocation pMatrixUniform  = gl.getUniformLocation(shaderProgram, "uPMatrix");
  WebGLUniformLocation mvMatrixUniform  = gl.getUniformLocation(shaderProgram, "uMVMatrix");

// init buffers
  WebGLBuffer triangleVertexPositionBuffer = gl.createBuffer();
  gl.bindBuffer(WebGLRenderingContext.ARRAY_BUFFER, triangleVertexPositionBuffer);
  var vertices = [
                  0.0,  1.0,  0.0,
                  -1.0, -1.0,  0.0,
                  1.0, -1.0,  0.0
                  ];
  Float32Array floa = new Float32Array.fromList(vertices);
  gl.bufferData(WebGLRenderingContext.ARRAY_BUFFER, floa, WebGLRenderingContext.STATIC_DRAW);

  gl.enable(WebGLRenderingContext.DEPTH_TEST);

  // draw  scene
  gl.viewport(0, 0, canvas.width, canvas.height);
  gl.clearColor(1.0, 0.0, 0.0, 1.0);
  gl.clear(WebGLRenderingContext.COLOR_BUFFER_BIT | WebGLRenderingContext.DEPTH_BUFFER_BIT);


  var zNear = 0.1;
  var zFar = 10000;
  double yTop = Math.tan(45.0 * Math.PI / 180.0 / 2.0) * zNear;
  double xRight = canvas.width / canvas.height * yTop;
  double zDepth = zFar - zNear;

  var row1 = new vec4(zNear / xRight, 0.0, 0.0, 0.0);
  var row2 = new vec4(0.0, zNear / yTop, 0.0, 0.0);
  var row3 = new vec4(0.0, 0.0, -(zFar + zNear) / zDepth, -(2 * zNear * zFar) / zDepth);
  var row4 = new vec4(0.0, 0.0, -1.0, 0.0);

  var pMatrix = new mat4(row1, row2, row3, row4);

  var mvMatrix = new mat4.translation(new vec3(-1.5, 0.0, -7.0));

  gl.bindBuffer(WebGLRenderingContext.ARRAY_BUFFER, triangleVertexPositionBuffer);
  gl.vertexAttribPointer(vertexPositionAttribute, 3, WebGLRenderingContext.FLOAT, false, 0, 0);
  gl.uniformMatrix4fv(pMatrixUniform, false, pMatrix.copyAsArray());
  gl.uniformMatrix4fv(mvMatrixUniform, false, mvMatrix.copyAsArray());
  gl.drawArrays(WebGLRenderingContext.TRIANGLES, 0, 3);

}

So, how do I create perspectives in DartVectorMath?

Answer 1

See makePerspective found in src/common/opengl.dart.