使用lookAt和透视图转换的WebGL和glMatrix最小示例

// 获取WebGL上下文
const canvas = document.getElementById('canvas');
const gl = canvas.getContext('webgl');

// 定义顶点着色器代码
const vertexShaderSource = `
  attribute vec3 aPosition;
  uniform mat4 uModelViewMatrix;
  uniform mat4 uProjectionMatrix;
  
  void main() {
    gl_Position = uProjectionMatrix * uModelViewMatrix * vec4(aPosition, 1.0);
  }
`;

// 定义片元着色器代码
const fragmentShaderSource = `
  void main() {
    gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
  }
`;

// 创建顶点着色器
const vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, vertexShaderSource);
gl.compileShader(vertexShader);

// 创建片元着色器
const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, fragmentShaderSource);
gl.compileShader(fragmentShader);

// 创建着色器程序
const program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
gl.useProgram(program);

// 定义顶点数据
const vertices = [
  -0.5, -0.5, 0.0,
  0.5, -0.5, 0.0,
  0.0, 0.5, 0.0
];

// 创建顶点缓冲区
const vertexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);

// 获取顶点着色器中的属性变量位置
const aPositionLocation = gl.getAttribLocation(program, 'aPosition');
gl.enableVertexAttribArray(aPositionLocation);
gl.vertexAttribPointer(aPositionLocation, 3, gl.FLOAT, false, 0, 0);

// 设置相机位置、目标点和上方向
const eye = [0, 0, 1];
const target = [0, 0, 0];
const up = [0, 1, 0];
const viewMatrix = glMatrix.mat4.create();
glMatrix.mat4.lookAt(viewMatrix, eye, target, up);

// 设置透视投影
const fov = glMatrix.glMatrix.toRadian(45);
const aspect = canvas.width / canvas.height;
const near = 0.1;
const far = 100.0;
const projectionMatrix = glMatrix.mat4.create();
glMatrix.mat4.perspective(projectionMatrix, fov, aspect, near, far);

// 获取顶点着色器中的uniform变量位置
const uModelViewMatrixLocation = gl.getUniformLocation(program, 'uModelViewMatrix');
const uProjectionMatrixLocation = gl.getUniformLocation(program, 'uProjectionMatrix');

// 设置uniform变量的值
gl.uniformMatrix4fv(uModelViewMatrixLocation, false, viewMatrix);
gl.uniformMatrix4fv(uProjectionMatrixLocation, false, projectionMatrix);

// 清空画布并绘制三角形
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);
gl.drawArrays(gl.TRIANGLES, 0, 3);