小白学webgl合集-绘制有透视颜色不一样的立方体

最新推荐文章于 2024-07-12 16:27:40 发布
最新推荐文章于 2024-07-12 16:27:40 发布
阅读量328 收藏 5
点赞数 4
文章标签： javascript 开发语言 ecmascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/TTTT2222111/article/details/140084698
版权

效果

原理

结合透视矩阵和视觉矩阵进行绘制

知识点

01透视矩阵

透视矩阵将视图空间中的坐标转换为裁剪空间中的坐标，使得更远的物体看起来更小。

function perspectiveMatrix(fov, aspect, near, far) {
  const f = 1.0 / Math.tan(fov / 2);
  const nf = 1 / (near - far);
  
  return new Float32Array([
    f / aspect, 0, 0, 0,
    0, f, 0, 0,
    0, 0, (far + near) * nf, -1,
    0, 0, (2 * far * near) * nf, 0
  ]);
}
参数解释

函数 perspectiveMatrix 创建并返回一个透视投影矩阵，用于3D图形的透视投影。以下是每个参数的详细说明：

  1. fov（Field of View, 视野）：

    • 视野角度，即观察者在垂直方向上能够看到的视角。通常以弧度表示，角度单位可以通过 Math.PI / 180 转换为弧度。
    • 例如，45 * Math.PI / 180 表示45度的视角。

  2. aspect（Aspect Ratio, 纵横比）：

    • 视图的宽高比，即视图的宽度除以高度。它决定了横向和纵向的缩放比例。
    • 例如，如果视口的宽度是800像素，高度是600像素，则 aspect = 800 / 600 = 4 / 3。

  3. near（Near Clipping Plane, 近裁剪平面）：

    • 近裁剪平面的距离，即从观察者到最近可见物体的距离。该值必须大于0。
    • 例如，设置为0.1表示从0.1单位距离开始可见物体。

  4. far（Far Clipping Plane, 远裁剪平面）：

    • 远裁剪平面的距离，即从观察者到最远可见物体的距离。该值必须大于 near 值。
    • 例如，设置为100.0表示到100单位距离结束可见物体。

02视图矩阵

视图矩阵将世界空间中的坐标转换为视图空间中的坐标，表示相机的视点。

function lookAtMatrix(eye, center, up) {
  const zAxis = normalize(subtractVectors(eye, center));
  const xAxis = normalize(cross(up, zAxis));
  const yAxis = normalize(cross(zAxis, xAxis));

  return new Float32Array([
    xAxis[0], yAxis[0], zAxis[0], 0,
    xAxis[1], yAxis[1], zAxis[1], 0,
    xAxis[2], yAxis[2], zAxis[2], 0,
    -dot(xAxis, eye), -dot(yAxis, eye), -dot(zAxis, eye), 1
  ]);
}

function normalize(v) {
  const length = Math.sqrt(v[0] * v[0] + v[1] * v[1] + v[2] * v[2]);
  return [v[0] / length, v[1] / length, v[2] / length];
}

function subtractVectors(a, b) {
  return [a[0] - b[0], a[1] - b[1], a[2] - b[2]];
}

function cross(a, b) {
  return [
    a[1] * b[2] - a[2] * b[1],
    a[2] * b[0] - a[0] * b[2],
    a[0] * b[1] - a[1] * b[0]
  ];
}

function dot(a, b) {
  return a[0] * b[0] + a[1] * b[1] + a[2] * b[2];
}
参数解释

函数 lookAtMatrix 用于生成一个视图矩阵，用于将场景从世界空间转换到观察者空间。它通常用于实现相机的视图转换，使得相机看向特定的方向。这个函数的参数如下：

  1. eye：

    • 相机的位置，表示观察者所在的点。
    • 例如 [1, 1, 1] 表示相机位于 (1, 1, 1) 的位置。

  2. center：

    • 视点，表示相机所看向的目标点。
    • 例如 [0, 0, 0] 表示相机看向 (0, 0, 0) 的位置。

  3. up：

    • 上方向向量，表示哪一个方向是相机的“上”方向。通常为 [0, 1, 0]，表示正Y方向。
函数 lookAtMatrix 用于生成一个视图矩阵，用于将场景从世界空间转换到观察者空间。它通常用于实现相机的视图转换，使得相机看向特定的方向。这个函数的参数如下：

eye：

相机的位置，表示观察者所在的点。
例如 [1, 1, 1] 表示相机位于 (1, 1, 1) 的位置。
center：

视点，表示相机所看向的目标点。
例如 [0, 0, 0] 表示相机看向 (0, 0, 0) 的位置。
up：

上方向向量，表示哪一个方向是相机的“上”方向。通常为 [0, 1, 0]，表示正Y方向。

逻辑

设置透视矩阵和视觉矩阵

 代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>立方体绘制</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      canvas {
        margin: 50px auto 0;
        display: block;
        background: yellow;
      }
    </style>
    <script src="test.js"></script>
  </head>
  <body>
    <canvas id="canvas" width="400" height="400"></canvas>
    <script>
      // 获取
      const canvas = document.getElementById('canvas')
      const gl = canvas.getContext('webgl')
      // 定义片源着色器和顶点着色器
      const vsSource = `
        attribute vec4 apos;
        attribute vec4 acolor;
        varying vec4 vcolor;
        uniform mat4 u_projectionMatrix;
      uniform mat4 u_viewMatrix;
        void main() {
          gl_Position =u_projectionMatrix * u_viewMatrix * apos;
          vcolor = acolor;
        }
      `
      const fsSource = `
        precision mediump float;
        varying vec4 vcolor;
        void main() {
          gl_FragColor = vcolor;
        }
      `
      //   初始化webgl
      const program = initShader(gl, vsSource, fsSource)
      gl.useProgram(program)
      // 获取 uniform 位置
      const u_projectionMatrixLocation = gl.getUniformLocation(program, 'u_projectionMatrix')
      const u_viewMatrixLocation = gl.getUniformLocation(program, 'u_viewMatrix')
      // 创建透视矩阵和视图矩阵
      const fov = Math.PI / 4 // 45度视角
      const aspect = canvas.width / canvas.height
      const near = 0.1
      const far = 10.0
      // lookAtMatrix 函数通过计算相机的位置、目标点和上方向，生成一个视图矩阵
      const projectionMatrix = perspectiveMatrix(fov, aspect, near, far)
      const viewMatrix = lookAtMatrix([3, 1, 7], [0, 0, 0], [0, 1, 0])
      function lookAtMatrix(eye, center, up) {
        const zAxis = normalize(subtractVectors(eye, center))
        const xAxis = normalize(cross(up, zAxis))
        const yAxis = normalize(cross(zAxis, xAxis))

        return new Float32Array([
          xAxis[0],
          yAxis[0],
          zAxis[0],
          0,
          xAxis[1],
          yAxis[1],
          zAxis[1],
          0,
          xAxis[2],
          yAxis[2],
          zAxis[2],
          0,
          -dot(xAxis, eye),
          -dot(yAxis, eye),
          -dot(zAxis, eye),
          1
        ])
      }

      function normalize(v) {
        const length = Math.sqrt(v[0] * v[0] + v[1] * v[1] + v[2] * v[2])
        return [v[0] / length, v[1] / length, v[2] / length]
      }

      function subtractVectors(a, b) {
        return [a[0] - b[0], a[1] - b[1], a[2] - b[2]]
      }

      function cross(a, b) {
        return [a[1] * b[2] - a[2] * b[1], a[2] * b[0] - a[0] * b[2], a[0] * b[1] - a[1] * b[0]]
      }

      function dot(a, b) {
        return a[0] * b[0] + a[1] * b[1] + a[2] * b[2]
      }

      function perspectiveMatrix(fov, aspect, near, far) {
        const f = 1.0 / Math.tan(fov / 2)
        const nf = 1 / (near - far)

        return new Float32Array([f / aspect, 0, 0, 0, 0, f, 0, 0, 0, 0, (far + near) * nf, -1, 0, 0, 2 * far * near * nf, 0])
      }

      // 设置投影矩阵和视图矩阵
      gl.uniformMatrix4fv(u_projectionMatrixLocation, false, projectionMatrix)
      gl.uniformMatrix4fv(u_viewMatrixLocation, false, viewMatrix)
      // 创建缓存区
      function initBuffer(gl, program) {
        const aposLocation = gl.getAttribLocation(program, 'apos')
        const acolorLocation = gl.getAttribLocation(program, 'acolor')
        const verticesColors = new Float32Array([
          // 前面 (红色)
          -0.5,
          -0.5,
          0.5,
          1,
          0,
          0,
          1, // 左下
          0.5,
          -0.5,
          0.5,
          1,
          0,
          0,
          1, // 右下
          0.5,
          0.5,
          0.5,
          1,
          0,
          0,
          1, // 右上
          -0.5,
          0.5,
          0.5,
          1,
          0,
          0,
          1, // 左上

          // 后面 (绿色)
          -0.5,
          0.5,
          -0.5,
          0,
          1,
          0,
          1, // 左上
          -0.5,
          -0.5,
          -0.5,
          0,
          1,
          0,
          1, // 左下
          0.5,
          -0.5,
          -0.5,
          0,
          1,
          0,
          1, // 右下
          0.5,
          0.5,
          -0.5,
          0,
          1,
          0,
          1, // 右上

          // 左面 (蓝色)
          -0.5,
          -0.5,
          -0.5,
          0,
          0,
          1,
          1, // 后下
          -0.5,
          0.5,
          -0.5,
          0,
          0,
          1,
          1, // 后上
          -0.5,
          0.5,
          0.5,
          0,
          0,
          1,
          1, // 前上
          -0.5,
          -0.5,
          0.5,
          0,
          0,
          1,
          1, // 前下

          // 右面 (洋红色)
          0.5,
          -0.5,
          -0.5,
          1,
          0,
          1,
          1, // 后下
          0.5,
          0.5,
          -0.5,
          1,
          0,
          1,
          1, // 后上
          0.5,
          0.5,
          0.5,
          1,
          0,
          1,
          1, // 前上
          0.5,
          -0.5,
          0.5,
          1,
          0,
          1,
          1, // 前下

          // 顶面 (黄色)
          -0.5,
          0.5,
          0.5,
          1,
          1,
          0,
          1, // 前左
          0.5,
          0.5,
          0.5,
          1,
          1,
          0,
          1, // 前右
          0.5,
          0.5,
          -0.5,
          1,
          1,
          0,
          1, // 后右
          -0.5,
          0.5,
          -0.5,
          1,
          1,
          0,
          1, // 后左

          // 底面 (青色)
          -0.5,
          -0.5,
          0.5,
          0,
          1,
          1,
          1, // 前左
          0.5,
          -0.5,
          0.5,
          0,
          1,
          1,
          1, // 前右
          0.5,
          -0.5,
          -0.5,
          0,
          1,
          1,
          1, // 后右
          -0.5,
          -0.5,
          -0.5,
          0,
          1,
          1,
          1 // 后左
        ])

        const indices = new Uint16Array([
          // 前面
          0, 1, 2, 0, 2, 3,
          // 后面
          4, 5, 6, 4, 6, 7,
          // 左面
          8, 9, 10, 8, 10, 11,
          // 右面
          12, 13, 14, 12, 14, 15,
          // 顶面
          16, 17, 18, 16, 18, 19,
          // 底面
          20, 21, 22, 20, 22, 23
        ])

        const vertexColorBuffer = gl.createBuffer()
        gl.bindBuffer(gl.ARRAY_BUFFER, vertexColorBuffer)
        gl.bufferData(gl.ARRAY_BUFFER, verticesColors, gl.STATIC_DRAW)

        const indexBuffer = gl.createBuffer()
        gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer)
        gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indices, gl.STATIC_DRAW)

        const FSIZE = verticesColors.BYTES_PER_ELEMENT
        // 启用顶点属性并指向顶点缓冲区中的数据
        gl.vertexAttribPointer(aposLocation, 3, gl.FLOAT, false, FSIZE * 7, 0)
        gl.enableVertexAttribArray(aposLocation)

        gl.vertexAttribPointer(acolorLocation, 4, gl.FLOAT, false, FSIZE * 7, FSIZE * 3)
        gl.enableVertexAttribArray(acolorLocation)
      }
      initBuffer(gl, program)
      // 启用深度测试
      // 清除缓冲区时同时清除颜色缓冲区和深度缓冲区：
      gl.enable(gl.DEPTH_TEST)
      gl.clearColor(0, 0, 0, 1)
      gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT)
      gl.drawElements(gl.TRIANGLES, 36, gl.UNSIGNED_SHORT, 0)
    </script>
  </body>
</html>

一只规划转行狗的转行日记
关注
  • 4
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
WebGL 从0到1绘制一个立方体
dabaooooq的博客
09-16 357
我们来绘制如下图所示的立方体（图右侧显示了立方体每个顶点的坐标），其8个顶点的颜色分别为白色、品红色（亮紫色）、红色、黄色、绿色、青色（蓝绿色）、蓝色、黑色。你也许知道，为每个顶点定义颜色后，表面上的颜色会根据顶点颜色内插出来，形成一种光滑的渐变效果（“色体”，相当于二维的“色轮”）。绘制三角形，我们都是调用gl.drawArrays（）方法来进行绘制操作的。考虑一下，如何用该函数绘制出一个立方体呢。我们只能使用gl.TRIANGLES、gl.TRIANGLE_STRIP或者gl.TRIANGLE_FAN模
《交互式计算机图形学-基于WebGL的自顶向下方法》（第七版）课后答案翻译
02-18
2.15节提到了颜色立方体和麦克斯韦三角形，这是颜色空间的重要概念。2.19节至2.22节讨论了法线检测、多边形细分以及四面体的体积和表面积，这些都是在3D几何体分析中的基本计算。 第三章开始涉及坐标变换和运动学...
WebGL入门(二十二)-通过顶点索引绘制渐变色的立方体
点燃火柴的博客
03-30 1302
通过顶点索引绘制渐变色的立方体1.demo效果2.相关知识点2.1 顶点索引原理2.2 gl.drawElements() 方法3.demo代码 1.demo效果 如上，通过顶点索引绘制出了一个渐变色的立方体 2.相关知识点 2.1 顶点索引原理 如上，立方体有8个顶点，v0~v7；6个面，前、后、上、下、左、右；以最前面的面为例，由四个顶点v0-v1-v2-v3拼出的两个三角形组成，这两个三角形使用的顶点索引分别是 （0,1,2）和（0,2,3）。通过三角形的顶点索引，可以取到对应索引的顶点坐标和颜色
webgl三维绘制——彩色立方体
qq_37987033的博客
02-26 788
webgl的知识储备了这么多，从现在开始将会正式进入立方体的绘制，本文介绍如何在webgl中绘制一个三维立方体。
WebGL入门(二十三)-绘制每个面指定颜色的立方体
点燃火柴的博客
03-31 663
绘制每个面指定颜色的立方体1.demo效果2.相关知识点2.1 每个面指定颜色原理2.2 定义顶点坐标、顶点颜色、顶点索引数组3.demo代码 1.demo效果 如上，绘制了不同面指定颜色的立方体 2.相关知识点 2.1 每个面指定颜色原理 前一篇文章中，是创建顶点信息的时候同时把顶点颜色信息也放在了顶点数组中，这样我们根据索引取到顶点后既可以获取坐标信息又可以获取颜色信息，但是如果你想将立方体的前表面（顶点v0-v1-v2-v3组成的面）涂成红色，将上表面（顶点v0-v5-v6-v1组成的面）涂成蓝色，
gl-matrix插件实现的立方体矩阵脉冲动画变换效果源码.zip
11-02
在这个文件中，开发者可能会创建一个或多个矩阵，用gl-matrix的函数来更新这些矩阵，然后使用WebGL将立方体渲染到画布上。WebGL是一种基于OpenGL标准的JavaScript API，可以直接在浏览器中绘制3D图形，无需任何插件...
canvasCube:画布中的立方体
06-06
由于立方体的每个面都有不同的颜色，我们还需要在绘制时改变填充色或边框色。 ```javascript function drawCube() { // 遍历每个面，计算坐标并绘制 for (let i = 0; i ; i++) { // 计算坐标，这会涉及透视变换 ...
四川大学计算机图形学第四，五次作业
12-21
第四次作业的主题是“透视视图下的cube”，这意味着学生需要使用编程技术（可能包括WebGL）来绘制一个立方体，并应用透视投影来呈现。透视投影的计算涉及到视点位置、视口大小、投影平面和消失点的设置。理解这些...
WebGL书本源代码.rar
07-10
1. **基础渲染**：如设置画布、创建上下文、绘制几何体（如立方体、球体）。 2. **坐标系统和投影**：理解世界坐标、视口坐标和屏幕坐标，以及透视和正交投影的区别。 3. **顶点着色器和片段着色器**：这是WebGL的...
更新商品前端接口编写
最新发布
weixin_55639995的博客
07-12 152
那么在vue运行的时候,会加载所有的ref属性特征的元素还有组件。标签中ref的作用就是将 该组件注册到vue对象的ref属性中。使用插槽,那个scope就是代表着一行的数据。然后里面的选项遍历的是 js定义的数据。如果文字显示过多可以使用 文本隐藏显示。表单绑定还有表单数据的绑定。数据绑定使用的表单绑定状态。写form表单然后封装数据。状态的选择使用的是选择框。副标题使用的是文本域。状态页面使用,下拉框。富文本选择器使用组件。使用后端枚举类型去写。
vue 自定义滚动条同步拖动（移动端）
u014206461的博客
07-12 78
vue 自定义滚动条同步拖动（移动端）
什么是防抖和节流？如何理解它们并在不同的场景条件下灵活运用？
Vinca@的博客
07-08 872
防抖（Debouncing）和节流（Throttling）是两种常见的性能优化技术，常用于控制某些操作（例如事件处理器）的频率，从而减少资源消耗并提高性能。防抖：在事件停止触发后的指定时间内执行函数。适用于需要等用户停止操作后再处理事件的场景。节流：在指定时间间隔内最多执行一次函数。适用于需要限制函数执行频率的场景。滚动停止后的操作：使用防抖。滚动过程中的持续操作：使用节流。根据具体需求选择适合的优化技术可以有效提高应用性能和用户体验。
前端javascript中的排序算法之插入排序
峰会路转的博客
07-09 172
【代码】前端javascript中的排序算法之插入排序。
lightchart 和百度echarts 有什么区别, 各自优势是什么
huanghm88的专栏
07-08 196
总体而言，Lightchart和百度Echarts都是强大的图表库，选择使用哪个取决于具体的需求和个人偏好。如果您对界面简洁和定制化有较高要求，可以选择Lightchart；社区活跃：百度Echarts拥有广泛的用户群体和开发者社区，用户可以通过社区获取到丰富的文档、教程和示例，解决问题和获取帮助。易于使用：Lightchart提供了方便易用的API和丰富的文档和示例，使用户能够快速上手并灵活使用图表库。成熟稳定：百度Echarts已经发布了多个版本，经过了长时间的发展和优化，具有较高的稳定性和可靠性。
vue3 + element-plus 表格行内编辑，如何实现表单校验？
yyXieDaiMa的博客
07-09 371
使用el-form表单自身的校验功能：通过el-from绑定对应表格行的prop， 实现校验。
vue引入sm-crypto通过sm4对文件进行加解密，用户输入密码
cc1314_工作、学习有感
07-12 81
通过sm4对文件进行加解密，用户输入密码
vue2 、 vue3首屏优化，减少白屏时间
m0_56104994的博客
07-09 302
vue2、vue3首屏优化,减少白屏时间
前端 JS 经典：迭代器
weixin_64684095的博客
07-12 124
如果在最后一个值返回后再调用 next()方法，那么返回的对象中属性 done 的值为 true，属性 value 则包含迭代器最终返回的值（如果没有相关数据则返回 undefined）。可迭代对象具有 Symbol.iterator 属性，通过指定的函数可以返回一个作用于附属对象的迭代器。JavaScript 中有一些内置的可迭代对象，如数组、字符串、集合（Set）、映射（Map）等，它们都具有默认的迭代器。在 JavaScript 中，迭代器是一个对象，它定义了一个序列，并在终止时可能返回一个返回值。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值