WEBGL看完你就会了（16）---进入三维世界

简cere

于 2025-07-04 20:30:00 发布

阅读量274

点赞数 4

CC 4.0 BY-SA版权

分类专栏： 3D 文章标签： webgl

本文链接：https://blog.youkuaiyun.com/qq_28004379/article/details/147042393

3D 专栏收录该内容

18 篇文章

订阅专栏

读书不觉已春深，一寸光阴一寸金。

三维看物

三维就是现在生活的世界，举个例子，如图所示。当人在路上看前面房子
在这里插入图片描述
我们首先要知道

人在哪里看【视点】
人沿着观察方向的射线【视线】
房子的位置【目标点】
人是站着看(三角形下面是长发形)，还是倒立看（长方形下面是三角形），还是左/右边侧着看–【上方向：目的就是将人固定住，不然看出来的效果不一样。】

我们可以通过一个视图矩阵，表示观察者的状态。包括了人的视点，目标点，上方向等信息。而cuon-matrix.js中提供函数函数
在这里插入图片描述

原理

当人从A走到A‘在看物体，和人不动，物体从B移动到B’的效果是一样的。
在这里插入图片描述

实际上，现实生活中，人会动，物体不会动。但放在三维中，物体可以移动的话，那么也就等价三维对象的平移旋转等变化。只不过它两个的方向是相反的！

问题一：既然等价，为啥不直接写选择就行?
因为看的地方不一定是一个地方，而且可能物体还旋转了再看。
所有用公式：
某点看旋转后的顶点坐标 = 视图矩阵旋转矩阵原顶点矩阵。

void main() {
        gl_Position =  u_ViewMatrix * u_ModelMatrix * a_Position;
        v_Color = a_Color;
 }

这种写法虽然可以，但顶点数量很多的时候，程序需要额外开销去计算，不然直接写一个与原顶点坐标相乘，其他在JS中处理

void main() {
        gl_Position =  u_ModelViewMatrix * a_Position;
        v_Color = a_Color;
 }

原理都知道了，上代码，为了看起来简单不加model旋转了

上代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body onload="main()">
  <canvas id="webgl" width="400" height="400">
    Please use a browser that supports "canvas"
  </canvas>
</body>
<!-- <script src="../lib/webgl-utils.js"></script>
    <script src="../lib/webgl-debug.js"></script>
    <script src="../lib/cuon-utils.js"></script> -->
<script src="../lib/cuon-matrix.js"></script>
<script>
  function initShaders(gl, vshader, fshader) {
    const vertexShader = gl.createShader(gl.VERTEX_SHADER);
    const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
    gl.shaderSource(vertexShader, vshader);
    gl.shaderSource(fragmentShader, fshader);
    gl.compileShader(vertexShader);
    gl.compileShader(fragmentShader);

    const program = gl.createProgram();
    gl.attachShader(program, vertexShader);
    gl.attachShader(program, fragmentShader);

    gl.linkProgram(program);
    gl.useProgram(program);
    gl.program = program;
    return true;
  }
</script>
<script>

  var VSHADER_SOURCE =
    `
 attribute vec4 a_Position;
 attribute vec4 a_Color;
 uniform mat4 u_ViewMatrix;
 varying vec4 v_Color;
 void main() {
        gl_Position = u_ViewMatrix * a_Position;
        v_Color = a_Color;
 }
`

  var FSHADER_SOURCE =
    `
    precision mediump float;
    varying vec4 v_Color;
    void main() {
        gl_FragColor = v_Color;
    }
`

  function main() {
    const canvas = document.getElementById('webgl');
    const gl = canvas.getContext('webgl');
    initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)

    let n = initVertexBuffers(gl)

    gl.clearColor(0, 0, 0, 1)

    var u_ViewMatrix = gl.getUniformLocation(gl.program, 'u_ViewMatrix');


    var viewMatrix = new Matrix4();
    // 设置人和看物体的坐标
    viewMatrix.setLookAt(0.25, 0.25, 0.25, 0, 0, 0, 0, 1, 0)
    gl.uniformMatrix4fv(u_ViewMatrix, false, viewMatrix.elements);

    gl.clear(gl.COLOR_BUFFER_BIT);
    gl.drawArrays(gl.TRIANGLES, 0, n);

  }

  function initVertexBuffers(gl) {
    var verticesColors = new Float32Array([
      // 放三个三角形，只是Z坐标不同
      0.0, 0.5, -0.4, 0.4, 1.0, 0.4, // The back green one
      -0.5, -0.5, -0.4, 0.4, 1.0, 0.4,
      0.5, -0.5, -0.4, 0.4, 1.0, 0.4,

      0.0, 0.5, -0.2, 1.0, 0.4, 0.4, // The middle red one
      -0.5, -0.5, -0.2, 1.0, 0.4, 0.4,
      0.5, -0.5, -0.2, 1.0, 0.4, 0.4,

      0.0, 0.5, 0.0, 0.4, 0.4, 1.0,  // The front blue one 
      -0.5, -0.5, 0.0, 0.4, 0.4, 1.0,
      0.5, -0.5, 0.0, 0.4, 0.4, 1.0,
    ]);
    var n = 9;


    var vertexColorbuffer = gl.createBuffer();


    gl.bindBuffer(gl.ARRAY_BUFFER, vertexColorbuffer);
    gl.bufferData(gl.ARRAY_BUFFER, verticesColors, gl.STATIC_DRAW);

    var FSIZE = verticesColors.BYTES_PER_ELEMENT;

    var a_Position = gl.getAttribLocation(gl.program, 'a_Position');

    gl.vertexAttribPointer(a_Position, 3, gl.FLOAT, false, FSIZE * 6, 0);
    gl.enableVertexAttribArray(a_Position);

    
    var a_Color = gl.getAttribLocation(gl.program, 'a_Color');

    gl.vertexAttribPointer(a_Color, 3, gl.FLOAT, false, FSIZE * 6, FSIZE * 3);
    gl.enableVertexAttribArray(a_Color);

    gl.bindBuffer(gl.ARRAY_BUFFER, null);

    return n;
  }

</script>

</html>

在这里插入图片描述

键盘控制旋转

我们可以设置键盘事件，当点击左右键的时候，控制人的X坐标

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body onload="main()">
  <canvas id="webgl" width="400" height="400">
    Please use a browser that supports "canvas"
  </canvas>
</body>
<!-- <script src="../lib/webgl-utils.js"></script>
    <script src="../lib/webgl-debug.js"></script>
    <script src="../lib/cuon-utils.js"></script> -->
<script src="../lib/cuon-matrix.js"></script>
<script>
  function initShaders(gl, vshader, fshader) {
    const vertexShader = gl.createShader(gl.VERTEX_SHADER);
    const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
    gl.shaderSource(vertexShader, vshader);
    gl.shaderSource(fragmentShader, fshader);
    gl.compileShader(vertexShader);
    gl.compileShader(fragmentShader);

    const program = gl.createProgram();
    gl.attachShader(program, vertexShader);
    gl.attachShader(program, fragmentShader);

    gl.linkProgram(program);
    gl.useProgram(program);
    gl.program = program;
    return true;
  }
</script>
<script>

  var VSHADER_SOURCE =
    `
 attribute vec4 a_Position;
 attribute vec4 a_Color;
 uniform mat4 u_ViewMatrix;
 varying vec4 v_Color;
 void main() {
        gl_Position = u_ViewMatrix * a_Position;
        v_Color = a_Color;
 }
`

  var FSHADER_SOURCE =
    `
    precision mediump float;
    varying vec4 v_Color;
    void main() {
        gl_FragColor = v_Color;
    }
`

  function main() {
    const canvas = document.getElementById('webgl');
    const gl = canvas.getContext('webgl');
    initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)

    let n = initVertexBuffers(gl)

    gl.clearColor(0, 0, 0, 1)

    var u_ViewMatrix = gl.getUniformLocation(gl.program, 'u_ViewMatrix');


    var viewMatrix = new Matrix4();



    // 设置人和看物体的坐标
    // viewMatrix.setLookAt(0.25, 0.25, 0.25, 0, 0, 0, 0, 1, 0)
    // gl.uniformMatrix4fv(u_ViewMatrix, false, viewMatrix.elements);

    // gl.clear(gl.COLOR_BUFFER_BIT);
    // gl.drawArrays(gl.TRIANGLES, 0, n);

    document.onkeydown = function(ev){ keydown(ev, gl, n, u_ViewMatrix, viewMatrix); };

    draw(gl, n, u_ViewMatrix, viewMatrix);   // Draw the triangles

  }

  function initVertexBuffers(gl) {
    var verticesColors = new Float32Array([
      // 放三个三角形，只是Z坐标不同
      0.0, 0.5, -0.4, 0.4, 1.0, 0.4, // The back green one
      -0.5, -0.5, -0.4, 0.4, 1.0, 0.4,
      0.5, -0.5, -0.4, 0.4, 1.0, 0.4,

      0.0, 0.5, -0.2, 1.0, 0.4, 0.4, // The middle red one
      -0.5, -0.5, -0.2, 1.0, 0.4, 0.4,
      0.5, -0.5, -0.2, 1.0, 0.4, 0.4,

      0.0, 0.5, 0.0, 0.4, 0.4, 1.0,  // The front blue one 
      -0.5, -0.5, 0.0, 0.4, 0.4, 1.0,
      0.5, -0.5, 0.0, 0.4, 0.4, 1.0,
    ]);
    var n = 9;


    var vertexColorbuffer = gl.createBuffer();


    gl.bindBuffer(gl.ARRAY_BUFFER, vertexColorbuffer);
    gl.bufferData(gl.ARRAY_BUFFER, verticesColors, gl.STATIC_DRAW);

    var FSIZE = verticesColors.BYTES_PER_ELEMENT;

    var a_Position = gl.getAttribLocation(gl.program, 'a_Position');

    gl.vertexAttribPointer(a_Position, 3, gl.FLOAT, false, FSIZE * 6, 0);
    gl.enableVertexAttribArray(a_Position);

    // Assign the buffer object to a_Color and enable the assignment
    var a_Color = gl.getAttribLocation(gl.program, 'a_Color');

    gl.vertexAttribPointer(a_Color, 3, gl.FLOAT, false, FSIZE * 6, FSIZE * 3);
    gl.enableVertexAttribArray(a_Color);

    gl.bindBuffer(gl.ARRAY_BUFFER, null);

    return n;
  }



var g_EyeX = 0.20, g_EyeY = 0, g_EyeZ = 0.2; // Eye position
function keydown(ev, gl, n, u_ViewMatrix, viewMatrix) {
    if(ev.keyCode == 39) { // The right arrow key was pressed
      g_EyeX += 0.01;
    } else
    if (ev.keyCode == 37) { // The left arrow key was pressed
      g_EyeX -= 0.01;
    } else { return; } // Prevent the unnecessary drawing
    draw(gl, n, u_ViewMatrix, viewMatrix);    
}
function draw(gl, n, u_ViewMatrix, viewMatrix) {

  viewMatrix.setLookAt(g_EyeX, g_EyeY, g_EyeZ, 0, 0, 0, 0, 1, 0);
 
  gl.uniformMatrix4fv(u_ViewMatrix, false, viewMatrix.elements);
 
  gl.clear(gl.COLOR_BUFFER_BIT);
 
  gl.drawArrays(gl.TRIANGLES, 0, n);
}

</script>

</html>

试试效果吧~