WebGL 实践篇（五）三维图形的绘制及矩阵变换、正射投影

已于 2022-04-19 17:16:00 修改
阅读量802 收藏 2
点赞数
分类专栏： WebGL 文章标签： html5
于 2022-04-19 17:15:14 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44207506/article/details/123845727
版权

一 三维“F”的绘制

1.着色器

按照上一篇提到的矩阵变换，我们可以直接在顶点着色器中加入相应的矩阵变换，这样就可以简化着色器代码，通过变量传入矩阵的值也便于之后矩阵变换的修改。

三维图形的绘制相比于二维图形只在参数类型上有一些变化（注意vec4以及mat4）：

  <script id="vertex-shader-3D" type="x-shader/x-vertex">
    attribute vec4 a_position;

    uniform mat4 u_matrix;

    void main(){
      gl_Position = u_matrix * a_position;
    }
  </script>
  <script id="fragment-shader-3D" type="x-shader/x-fragment">
    precision mediump float;
    uniform vec4 u_color;

    void main(){
      gl_FragColor = u_color;
    }
  </script>

2.绘制信息（主要是位置坐标点）

 如上图，我们可以看出要绘制的三维图形”F"所需要的矩形面总共有16个，而每个矩形面需要2个三角形。

function setGeometry(gl) {
      gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
        // left column front
        0, 0, 0,
        30, 0, 0,
        0, 150, 0,
        0, 150, 0,
        30, 0, 0,
        30, 150, 0,

        // top rung front
        30, 0, 0,
        100, 0, 0,
        30, 30, 0,
        30, 30, 0,
        100, 0, 0,
        100, 30, 0,

        // middle rung front
        30, 60, 0,
        67, 60, 0,
        30, 90, 0,
        30, 90, 0,
        67, 60, 0,
        67, 90, 0,

        // left column back
        0, 0, 30,
        30, 0, 30,
        0, 150, 30,
        0, 150, 30,
        30, 0, 30,
        30, 150, 30,

        // top rung back
        30, 0, 30,
        100, 0, 30,
        30, 30, 30,
        30, 30, 30,
        100, 0, 30,
        100, 30, 30,

        // middle rung back
        30, 60, 30,
        67, 60, 30,
        30, 90, 30,
        30, 90, 30,
        67, 60, 30,
        67, 90, 30,

        // top
        0, 0, 0,
        100, 0, 0,
        100, 0, 30,
        0, 0, 0,
        100, 0, 30,
        0, 0, 30,

        // top rung right
        100, 0, 0,
        100, 30, 0,
        100, 30, 30,
        100, 0, 0,
        100, 30, 30,
        100, 0, 30,

        // under top rung
        30, 30, 0,
        30, 30, 30,
        100, 30, 30,
        30, 30, 0,
        100, 30, 30,
        100, 30, 0,

        // between top rung and middle
        30, 30, 0,
        30, 30, 30,
        30, 60, 30,
        30, 30, 0,
        30, 60, 30,
        30, 60, 0,

        // top of middle rung
        30, 60, 0,
        30, 60, 30,
        67, 60, 30,
        30, 60, 0,
        67, 60, 30,
        67, 60, 0,

        // right of middle rung
        67, 60, 0,
        67, 60, 30,
        67, 90, 30,
        67, 60, 0,
        67, 90, 30,
        67, 90, 0,

        // bottom of middle rung.
        30, 90, 0,
        30, 90, 30,
        67, 90, 30,
        30, 90, 0,
        67, 90, 30,
        67, 90, 0,

        // right of bottom
        30, 90, 0,
        30, 90, 30,
        30, 150, 30,
        30, 90, 0,
        30, 150, 30,
        30, 150, 0,

        // bottom
        0, 150, 0,
        0, 150, 30,
        30, 150, 30,
        0, 150, 0,
        30, 150, 30,
        30, 150, 0,

        // left side
        0, 0, 0,
        0, 0, 30,
        0, 150, 30,
        0, 0, 0,
        0, 150, 30,
        0, 150, 0
      ]), gl.STATIC_DRAW)
    }

3.绘制并渲染

      webgl.useProgram(program);
      webgl.enableVertexAttribArray(positionAttributeLocation);
      webgl.bindBuffer(webgl.ARRAY_BUFFER, positionBuffer);
      webgl.vertexAttribPointer(positionAttributeLocation, 3, webgl.FLOAT, false, 0, 0);

      var matrix = m4.projection(webgl.canvas.clientWidth, webgl.canvas.clientHeight, 400);
      matrix = m4.translate(matrix, translations[0], translations[1], translations[2]);
      matrix = m4.xRotate(matrix, rotations[0]);
      matrix = m4.yRotate(matrix, rotations[1]);
      matrix = m4.zRotate(matrix, rotations[2]);
      matrix = m4.scale(matrix, scale[0], scale[1], scale[2]);

      webgl.uniformMatrix4fv(matrixUniformLocation, false, matrix);
      webgl.uniform4fv(colorUniformLocation, color);

      webgl.drawArrays(webgl.TRIANGLES, 0, 16 * 6);

注意：vertexAttribPointer的第二个参数为3是因为咱们的顶点坐标变成了3维，也就是在bufferData中设定的各面的顶点坐标(x,y,z)，而w可以使用默认值1从而能够不传（因为顶点着色器中坐标的变量类型为vec4）。而对于drawArrays中的第三个参数是指总共要绘制多少个顶点，由于我们需要绘制16个矩形，每个矩形包含两个三角形，而每个三角形又包含3个顶点，因此总共需要绘制16*6个顶点。

结果如下：

 二 三维下的矩阵变换

1.屏幕像素空间与裁剪空间之间的关系 - 投影矩阵

在像素空间中，宽取值范围在0到width，高在0到height，深度在-depth/2 到 +depth/2。让我们对裁剪空间中的宽高深度根据投影矩阵进行拆解：

x' = 2/width * x - w，x' ∈ [-1,1]

y' = -2/height * y + w，y' ∈ [-1,1]

z' = 2/depth * w，z' ∈ [-1,1]

在二维当中，z的默认值为1；而在三维当中，w的默认值为1.

因此，反推回去，像素空间中的宽高以及深度也就一目了然了。在之后矩阵变换的传值当中会传一个与width相似的值给depth。

      projection: function (width, height, depth) {
        return [
          2 / width, 0, 0, 0,
          0, -2 / height, 0, 0,
          0, 0, 2 / depth, 0,
          -1, 1, 0, 1
        ]
      },

      translation: function (tx, ty, tz) {
        return [
          1, 0, 0, 0,
          0, 1, 0, 0,
          0, 0, 1, 0,
          tx, ty, tz, 1,
        ];
      },

      xRotation: function (angleInRadians) {
        var c = Math.cos(angleInRadians);
        var s = Math.sin(angleInRadians);

        return [
          1, 0, 0, 0,
          0, c, s, 0,
          0, -s, c, 0,
          0, 0, 0, 1,
        ];
      },

      yRotation: function (angleInRadians) {
        var c = Math.cos(angleInRadians);
        var s = Math.sin(angleInRadians);

        return [
          c, 0, -s, 0,
          0, 1, 0, 0,
          s, 0, c, 0,
          0, 0, 0, 1,
        ];
      },

      zRotation: function (angleInRadians) {
        var c = Math.cos(angleInRadians);
        var s = Math.sin(angleInRadians);

        return [
          c, s, 0, 0,
          -s, c, 0, 0,
          0, 0, 1, 0,
          0, 0, 0, 1,
        ];
      },

      scaling: function (sx, sy, sz) {
        return [
          sx, 0, 0, 0,
          0, sy, 0, 0,
          0, 0, sz, 0,
          0, 0, 0, 1,
        ];
      }

2. 旋转矩阵

二维图形绕着z轴做旋转就好了，而三维图形可以绕着三个轴分别进行旋转，其内里就是将其中一个轴作为旋转轴然后根据其他两个轴来计算旋转后的坐标，原理其实差不多，这里也就不赘述了。

绕z轴旋转：

        x' = x * cos + y * sin;

        y' = x*(-sin) + y * cos;

绕x轴旋转：

        y' = y * cos + z * sin;

        z' = y*(-sin) + z * cos;

绕y轴旋转：

        x' = x * cos + z * sin;

        z' = x * (-sin) + z * cos;

三 可变量的颜色属性

1.着色器代码（利用varying变量将颜色值从顶点着色器到片段着色器）：

  <script id="vertex-shader-3D" type="x-shader/x-vertex">
    attribute vec4 a_position;
    attribute vec4 a_color;

    uniform mat4 u_matrix;

    varying vec4 v_color;

    void main(){
      gl_Position = u_matrix * a_position;
      
      v_color = a_color;
    }
  </script>
  <script id="fragment-shader-3D" type="x-shader/x-fragment">
    precision mediump float;
    varying vec4 v_color;

    void main(){
      gl_FragColor = v_color;
    }
  </script>

2.设置渲染颜色（每个面设置不同的颜色以便区分，注意颜色使用的类型与坐标使用的类型不同）：

    function setColors(gl) {
      gl.bufferData(gl.ARRAY_BUFFER, new Uint8Array([
        // left column front
        200, 70, 120,
        200, 70, 120,
        200, 70, 120,
        200, 70, 120,
        200, 70, 120,
        200, 70, 120,

        // top rung front
        200, 70, 120,
        200, 70, 120,
        200, 70, 120,
        200, 70, 120,
        200, 70, 120,
        200, 70, 120,

        // middle rung front
        200, 70, 120,
        200, 70, 120,
        200, 70, 120,
        200, 70, 120,
        200, 70, 120,
        200, 70, 120,

        // left column back
        80, 70, 200,
        80, 70, 200,
        80, 70, 200,
        80, 70, 200,
        80, 70, 200,
        80, 70, 200,

        // top rung back
        80, 70, 200,
        80, 70, 200,
        80, 70, 200,
        80, 70, 200,
        80, 70, 200,
        80, 70, 200,

        // middle rung back
        80, 70, 200,
        80, 70, 200,
        80, 70, 200,
        80, 70, 200,
        80, 70, 200,
        80, 70, 200,

        // top
        70, 200, 210,
        70, 200, 210,
        70, 200, 210,
        70, 200, 210,
        70, 200, 210,
        70, 200, 210,

        // top rung right
        200, 200, 70,
        200, 200, 70,
        200, 200, 70,
        200, 200, 70,
        200, 200, 70,
        200, 200, 70,

        // under top rung
        210, 100, 70,
        210, 100, 70,
        210, 100, 70,
        210, 100, 70,
        210, 100, 70,
        210, 100, 70,

        // between top rung and middle
        210, 160, 70,
        210, 160, 70,
        210, 160, 70,
        210, 160, 70,
        210, 160, 70,
        210, 160, 70,

        // top of middle rung
        70, 180, 210,
        70, 180, 210,
        70, 180, 210,
        70, 180, 210,
        70, 180, 210,
        70, 180, 210,

        // right of middle rung
        100, 70, 210,
        100, 70, 210,
        100, 70, 210,
        100, 70, 210,
        100, 70, 210,
        100, 70, 210,

        // bottom of middle rung.
        76, 210, 100,
        76, 210, 100,
        76, 210, 100,
        76, 210, 100,
        76, 210, 100,
        76, 210, 100,

        // right of bottom
        140, 210, 80,
        140, 210, 80,
        140, 210, 80,
        140, 210, 80,
        140, 210, 80,
        140, 210, 80,

        // bottom
        90, 130, 110,
        90, 130, 110,
        90, 130, 110,
        90, 130, 110,
        90, 130, 110,
        90, 130, 110,

        // left side
        160, 160, 220,
        160, 160, 220,
        160, 160, 220,
        160, 160, 220,
        160, 160, 220,
        160, 160, 220
      ]), gl.STATIC_DRAW);
    }

3.启用属性并传值

      webgl.enableVertexAttribArray(colorAttributeLocation);
      webgl.bindBuffer(webgl.ARRAY_BUFFER, colorBuffer);
      webgl.vertexAttribPointer(colorAttributeLocation, 3, webgl.UNSIGNED_BYTE, true, 0, 0);

注意：vertexAttribPointer的第三个参数webgl.UNSIGNED_BYTE和第四个参数true（规范化：即将取值范围设成0-1）

结果如下：

 四 正反面的绘制

1.WebGL中的正反面

WebGL中的三角形有正反面的概念，正面三角形的顶点顺序是逆时针方向，反面三角形的顶点顺序是顺时针方向。

 由上图可以看出，红色是正面，蓝色是背面。红色先绘制而蓝色后绘制的原因在于设置数据的顺序。

2.开启只绘制正面或反面

开启只绘制正面或者反面三角形（这行代码加载refreshDraw的函数里面）：

      webgl.enable(webgl.CULL_FACE);

结果如下：

 三角形的正反面是根据着色器的最终计算结果来判定的，如果将X轴缩放-1，那么一个顺时针的三角形就会变成逆时针；如果将顺时针的三角形旋转180°，那么它就会变成逆时针的三角形（相当于按旋转轴进行翻转，原来面向你的面现在背向了你，可以拿张纸实操一下更容易理解）。

结果如下：

 3.修正坐标顺序（即修正朝向）

    function setGeometry(gl) {
      gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
        // left column front
        0, 0, 0,
        0, 150, 0,
        30, 0, 0,
        0, 150, 0,
        30, 150, 0,
        30, 0, 0,

        // top rung front
        30, 0, 0,
        30, 30, 0,
        100, 0, 0,
        30, 30, 0,
        100, 30, 0,
        100, 0, 0,

        // middle rung front
        30, 60, 0,
        30, 90, 0,
        67, 60, 0,
        30, 90, 0,
        67, 90, 0,
        67, 60, 0,

        // left column back
        0, 0, 30,
        30, 0, 30,
        0, 150, 30,
        0, 150, 30,
        30, 0, 30,
        30, 150, 30,

        // top rung back
        30, 0, 30,
        100, 0, 30,
        30, 30, 30,
        30, 30, 30,
        100, 0, 30,
        100, 30, 30,

        // middle rung back
        30, 60, 30,
        67, 60, 30,
        30, 90, 30,
        30, 90, 30,
        67, 60, 30,
        67, 90, 30,

        // top
        0, 0, 0,
        100, 0, 0,
        100, 0, 30,
        0, 0, 0,
        100, 0, 30,
        0, 0, 30,

        // top rung right
        100, 0, 0,
        100, 30, 0,
        100, 30, 30,
        100, 0, 0,
        100, 30, 30,
        100, 0, 30,

        // under top rung
        30, 30, 0,
        30, 30, 30,
        100, 30, 30,
        30, 30, 0,
        100, 30, 30,
        100, 30, 0,

        // between top rung and middle
        30, 30, 0,
        30, 60, 30,
        30, 30, 30,
        30, 30, 0,
        30, 60, 0,
        30, 60, 30,

        // top of middle rung
        30, 60, 0,
        67, 60, 30,
        30, 60, 30,
        30, 60, 0,
        67, 60, 0,
        67, 60, 30,

        // right of middle rung
        67, 60, 0,
        67, 90, 30,
        67, 60, 30,
        67, 60, 0,
        67, 90, 0,
        67, 90, 30,

        // bottom of middle rung.
        30, 90, 0,
        30, 90, 30,
        67, 90, 30,
        30, 90, 0,
        67, 90, 30,
        67, 90, 0,

        // right of bottom
        30, 90, 0,
        30, 150, 30,
        30, 90, 30,
        30, 90, 0,
        30, 150, 0,
        30, 150, 30,

        // bottom
        0, 150, 0,
        0, 150, 30,
        30, 150, 30,
        0, 150, 0,
        30, 150, 30,
        30, 150, 0,

        // left side
        0, 0, 0,
        0, 0, 30,
        0, 150, 30,
        0, 0, 0,
        0, 150, 30,
        0, 150, 0
      ]), gl.STATIC_DRAW)
    }

结果如下：

4.开启深度缓冲（Z-Buffer）

由上图可以看出，呈现出来的“F”还是有些奇怪的，按常理来说有的矩形面应该会被前面的面遮挡住才对呀。这是因为我们还没有开启深度缓存，简单理解深度缓存就是为了遮挡后面元素（即深度值不大的元素）。

      webgl.clear(webgl.COLOR_BUFFER_BIT | webgl.DEPTH_BUFFER_BIT);

      webgl.enable(webgl.DEPTH_TEST);

注意：在开启深度缓冲之前要先清空深度缓冲噢~这个应该是相当于将Z值从裁剪空间([-1,1])转换到深度空间([0,1])。

结果如下（是不是正常多啦~）： 

五 正射投影

上面的涉及到的投影矩阵就是我们常说的正射投影啦，只不过真正的正射投影的函数会更完善一些，涉及到各个方向（上下左右前后），通常用ortho或者相关的函数来进行调用。

比如，ortho(left,right,bottom,top,near,far){}

具体的可以参考你所使用的外部库里面对于正射投影函数的定义。

调用时每个参数可以这样设置（作为参考）：

ortho(0,webgl.canvas.clientWidth,webgl.canvas.clientHeight,0,400,-400)

发现了吗，就是我们上面提到过的像素空间的取值范围。

Sifatasinant
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
WebGL（四）三维世界的重要矩阵
from_the_star的博客
04-21 897
三维世界与二维世界最大的区别就是有深度，也就是Z轴。但在计算机上，我们还是把三维世界场景绘制到二维的屏幕上。 本节代码在链接的ch07文件夹，矩阵相关的在lib文件夹中的cuon-matrix.js。 如何将三维世界上的物体投影到二维屏幕？ 这里的处理用到三个矩阵转换： 模型矩阵：用来移动、旋转、拉伸物体。具体矩阵使用方式看这里。 视图矩阵：获取在视点也就是相机位置观察到的场景。 投影矩阵：将三...
html绘制三维,在HTML + JS画布中绘制三维图形
weixin_33461476的博客
06-22 913
是否有任何框架/引擎能够在Canvas上绘制三维图像？在HTML + JS画布中绘制三维图形我打算画位于一个平面一些基元(不同形状的)：var dist = 2;var hexHalfW = 35;var lengthX = 20;var hexR = Math.sqrt(lengthX*lengthX+hexHalfW*hexHalfW);//40.31128874var hexDiag = 2...
根据矩阵变化实现基于 HTML5 的 WebGL 3D 自动布局
weixin_34290096的博客
11-12 248
在数学中，矩阵是以行和列排列的数字，符号或表达式的矩形阵列，任何矩阵都可以通过相关字段的标量乘以元素。矩阵的主要应用是表示线性变换，即f（x）= 4 x等线性函数的推广。例如，旋转的载体在三维空间是一个线性变换，这可以通过一个表示旋转矩阵 [R ：如果v是一个列向量描述（只有一列的矩阵）的位置在空间中的点，该产品器Rv是列矢量描述旋转后该...
webgl投影视图矩阵
最新发布
lizhan804311239的博客
05-05 649
模型矩阵、视图矩阵和透视矩阵是三维图形渲染中的关键变换矩阵，它们分别描述了物体的模型变换、相机的视角和透视投影。通过合理地组合和使用这些矩阵，我们可以实现复杂的三维场景渲染，并呈现出逼真的视觉效果。深入理解这些矩阵的原理和应用，对于掌握三维图形渲染技术具有重要意义。代码中使用的threejs的矩阵生成方式。
WebGL自学课程(8):WebGL+ArcGIS JS API实现TerrainMap
孙群
08-20 1万+
转载请注明出处 以前在Esri的博客上看到了一篇用Silverlight+Balder实现TerrainMap的文章，实现的功能是将指定的二维投影地理范围转换成三维地形图，这是链接地址http://maps.esri.com/sldemos/terrainmap/default.html，感觉很有意思，最近在看WebGL，所以就想用WebGL重新进行实现，其中用ArcGIS JS API获取
html绘制三维坐标系,canvas 学习 3---画坐标系
weixin_42665725的博客
05-30 679
无论您是新手，还是老手，本教程都值得一读。网格#c1{border:1px solid black;}window.onload = function(){var oCanvas = document.getElementById('c1')var gd = oCanvas.getContext('2d')// 你要画一个表格：// 你得思考，每个格子多大！var space = 20// 1, ...
三维图形，坐标系
03-24
渲染三维图形的过程涉及多个步骤，包括模型变换、视图变换、投影变换和屏幕映射。模型变换将几何对象从其局部坐标系转换到世界坐标系；视图变换将所有对象相对于观察者的坐标进行调整；投影变换根据透视原理将三维...
cesium视频投影示例，html,三维开发实例 前端开发
05-21
这个"cesium视频投影示例"提供了在HTML页面中利用Cesium进行三维开发的实践案例。在本文中，我们将深入探讨Cesium的核心特性、HTML与前端开发的结合以及视频投影在3D场景中的应用。 首先，Cesium是一个基于WebGL...
cesium卫星雷达示例，html,三维开发实例 前端开发
05-21
本示例聚焦于使用Cesium库进行三维开发，尤其是结合卫星雷达数据来创建生动、直观的可视化效果。Cesium是一个强大的JavaScript库，专为在Web浏览器中创建3D地球和地理空间应用而设计。 首先，我们来详细了解一下...
webgl画一个3d组合图形
12-09
WebGL是一种基于OpenGL标准的JavaScript API，用于在任何兼容的Web浏览器中进行三维图形渲染，无需插件支持。让我们深入探讨如何使用WebGL来创建一个3D组合图形。 首先，理解WebGL的基本原理至关重要。WebGL的工作...
福州大学计算机图形学综合实验（代码+报告）.zip
08-09
这个实验项目特别强调了WebGL的应用，这是一种基于OpenGL标准的JavaScript API，用于在任何兼容的Web浏览器中实现三维图形的绘制。 实验的第一部分是基于WebGL的交互式图形绘制。WebGL允许开发者在网页中直接创建...
【前端】【canvas详解 非常详细的使用方法】
PiPiFamily的博客
06-08 4317
canvas使用详细教学
在线html5制作场景,html5 canvas超逼真3d动画场景
weixin_42355204的博客
05-31 441
这是一个使用Html5 canvas制作的相当真实的3d动画场景效果。canvas由js在运行时动态生成。HTMLLook around by dragging and holding the mouse button生成canvas的javascript代码：var canvas = document.createElement('canvas');canvas.setAttribute('wi...
[WebGL入门]三十二，四元数和minMatrixb.js
lufy小屋
08-29 4803
这次结合实际应用，来继续了解一下。将三维空间中的坐标变换为四元数，然后进行旋转处理。 虽说，本次用来解说的demo，即使不使用四元数也能轻易的实现，但是使用了四元数之后，会更加的直观一些。 对于四元数周边的处理，会使用到本网站的算法库minMatrixb.js，还有另一个与矩阵相关的处理就是它的姐妹库minMatrix.js。四元数相关的处理是相对比较难的，使用minMatrixb.js能让简化四元数的计算。
glViewport()函数和glOrtho()函数的理解
热门推荐
shizhipeng的专栏
12-04 5万+
在OpenGL中有两个比较重要的投影变换函数，glViewport和glOrtho.glOrtho是创建一个正交平行的视景体。 一般用于物体不会因为离屏幕的远近而产生大小的变换的情况。比如，常用的工程中的制图等。需要比较精确的显示。 而作为它的对立情况, glFrustum则产生一个透视投影。这是一种模拟真是生活中，人们视野观测物体的真实情况。例如：观察两条平行的火车到，在过了很远之后，这两条
WebGL实践篇（八）—— 光照：方向光源（均匀的光）
weixin_44207506的博客
04-26 876
1.物体如何加入光照参数 光照均匀的光线，日照光相当于是平行于照在地面上的方向光，将方向光的向量与物体面的法向量点成即能得到两个方向的余弦值，结果为-1则方向相反，反之则方向相同。那么我们就可以知道，方向相同时（打光打在物体上，物体朝向正好在打光方向）那么物体就能被看见（明面），方向相反时（打光打在物体上，物体背对打光方向）这样物体就呈现出它的暗面。想想一幅素描画中物体的明暗面跟阴影投射就大概能理解了。 2.物体面的法向量： 正方体的每个顶点有三个法向量，正x方向向右，正y方向向上，正z方向向里。以F
webgl入门笔记(一) 基本结构和知识
ArmadaDK的博客
01-09 385
webgl基础知识和基本结构
Webgl入门笔记——投影变换
code for life
05-16 225
webgl有专门的gl-matrix库方便对三维中矩阵进行变换。 下载地址：gl-matrix 效果如下：三维效果 shader与变量 var projectionMatrix; var modelViewMatrix; var vertexShaderSource = "precision lowp float;\n" + "attribute vec3 vertexPos;\n" + "attribu
WebGL实践篇（七）三维相机及视图矩阵
weixin_44207506的博客
04-25 1292
一般来说，物体的位置是固定不动的，而我们的日常做法是将移动相机到合适的位置去拍摄这个物体（总不能把风景吸星大法过来，对它说自己过来站好拍照）。但是，在咱们这个三维空间里是有视锥体的范围，你随便移动相机那就可能要重新调节视锥体的参数，这样反而会更麻烦。因此一般来说在三维空间当中，相机应该是相对不变的。根据相机的位置再去对物体做一系列的变换。 1.相机矩阵： var radius = 200; var cameraMatrix = m4.yRotation(cameraAngle
hmtl 绘制三维图
08-20
你可以参考WebGL的官方文档和其他教程来学习更多关于绘制三维图形的知识。 引用提到了一些在绘制过程中需要注意的点，比如使用moveTo和lineTo来勾画路径，使用beginPath方法来重新开始新的绘图路径，使用save和...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值