使用 WebGL 创建 3D 对象

WebGL Demoicon-default.png?t=N7T8https://mdn.github.io/dom-examples/webgl-examples/tutorial/sample5/index.html

现在让我们给之前的正方形添加五个面从而可以创建一个三维的立方体。最简单的方式就是通过调用方法 gl.drawElements() 使用顶点数组列表来替换之前的通过方法gl.drawArrays() 直接使用顶点数组。而顶点数组列表里保存着将会被引用到一个个独立的顶点。

其实现在会存在这样一个问题:每个面需要 4 个顶点,而每个顶点会被 3 个面共享。我们会创建一个包含 24 个顶点的数组列表,通过使用数组下标来索引顶点,然后把这些用于索引的下标传递给渲染程序而不是直接把整个顶点数据传递过去,这样来减少数据传递。那么也许你就会问:那么使用 8 个顶点就好了,为什么要使用 24 个顶点呢?这是因为每个顶点虽然被 3 个面共享但是它在每个面上需要使用不同的颜色信息。24 个顶点中的每一个都会有独立的颜色信息,这就会造成每个顶点位置都会有 3 份副本。

定义立方体顶点位置

首先,更新 initBuffers() 函数中代码来创建立方体的顶点位置缓存区。现在的代码看起来和渲染正方形时的代码很相似,只是比之前的代码更长因为现在有了 24 个顶点(每个面使用 4 个顶点):

备注: 在“init-buffers.js”文件 initPositionBuffer() 函数中,用下面代码替换 positions

JSCopy to Clipboard

const positions = [// Front face-1.0, -1.0, 1.0, 1.0, -1.0, 1.0, 1.0, 1.0, 1.0, -1.0, 1.0, 1.0,// Back face-1.0, -1.0, -1.0, -1.0, 1.0, -1.0, 1.0, 1.0, -1.0, 1.0, -1.0, -1.0,// Top face-1.0, 1.0, -1.0, -1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, -1.0,// Bottom face-1.0, -1.0, -1.0, 1.0, -1.0, -1.0, 1.0, -1.0, 1.0, -1.0, -1.0, 1.0,// Right face1.0, -1.0, -1.0, 1.0, 1.0, -1.0, 1.0, 1.0, 1.0, 1.0, -1.0, 1.0,// Left face-1.0, -1.0, -1.0, -1.0, -1.0, 1.0, -1.0, 1.0, 1.0, -1.0, 1.0, -1.0,
];

由于我们给顶点添加了 Z 分量,因此我们需要将 vertexPosition 属性的 numComponents 更新为 3。

备注: 在“draw-scene.js”文件 setPositionAttribute() 函数中,将 numComponents 从 2 改为 3:

JSCopy to Clipboard

const numComponents = 3;

定义顶点颜色

然后我们还要为每个顶点定义颜色。下面的代码首先为每个面定义颜色,然后用一个循环语句为每个顶点定义颜色信息。

备注: 在“init-buffers.js”文件 initColorBuffer() 函数中,用下面代码替换 colors 定义:

JSCopy to Clipboard

const faceColors = [[1.0, 1.0, 1.0, 1.0], // Front face: white[1.0, 0.0, 0.0, 1.0], // Back face: red[0.0, 1.0, 0.0, 1.0], // Top face: green[0.0, 0.0, 1.0, 1.0], // Bottom face: blue[1.0, 1.0, 0.0, 1.0], // Right face: yellow[1.0, 0.0, 1.0, 1.0], // Left face: purple
];// Convert the array of colors into a table for all the vertices.var colors = [];for (var j = 0; j < faceColors.length; ++j) {const c = faceColors[j];// Repeat each color four times for the four vertices of the facecolors = colors.concat(c, c, c, c);
}

定义元素(三角形)数组

既然已经创建好了顶点数组,接下来就要创建元素(三角形)数组了。

备注: 在“init-buffer.js”文件中添加下面的函数:

JSCopy to Clipboard

function initIndexBuffer(gl) {const indexBuffer = gl.createBuffer();gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);// This array defines each face as two triangles, using the// indices into the vertex array to specify each triangle's// position.const indices = [0,1,2,0,2,3, // front4,5,6,4,6,7, // back8,9,10,8,10,11, // top12,13,14,12,14,15, // bottom16,17,18,16,18,19, // right20,21,22,20,22,23, // left];// Now send the element array to GLgl.bufferData(gl.ELEMENT_ARRAY_BUFFER,new Uint16Array(indices),gl.STATIC_DRAW,);return indexBuffer;
}

indices 数组声明每一个面都使用两个三角形来渲染。通过立方体顶点数组的索引指定每个三角形的顶点。那么这个立方体就是由 12 个三角形组成的了。

备注: 在“init-buffers.js”文件 initBuffers()函数中,添加下面的代码替换之前的 return 代码片段:

JSCopy to Clipboard

const indexBuffer = initIndexBuffer(gl);return {position: positionBuffer,color: colorBuffer,indices: indexBuffer,
};

渲染立方体

接下来就需要在 drawScene() 函数里添加代码使用立方体顶点索引数据来渲染这个立方体了。代码里添加了对 gl.bindBuffer() 和 gl.drawElements()的调用:

备注: 在 drawScene() 函数中,gl.useProgram 代码前添加如下代码:

JSCopy to Clipboard

// Tell WebGL which indices to use to index the vertices
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, buffers.indices);

备注: 在“draw-scene.js”文件 drawScene() 函数中,用下面这段代码替换之前 gl.drawArrays()

JSCopy to Clipboard

{const vertexCount = 36;const type = gl.UNSIGNED_SHORT;const offset = 0;gl.drawElements(gl.TRIANGLES, vertexCount, type, offset);
}

立方体的每个面都由 2 个三角形组成,那就是每个面需要 6 个顶点,或者说总共 36 个顶点,尽管有许多重复的。然而,因为索引数组的每个元素都是简单的整数类型,所以每一帧动画需要传递给渲染程序的数据也不是很多。

最后,让我们把变量 squareRotation 替换成 cubeRotation 并添加 X 轴的第二个旋转。

备注: 在“webgl-demo.js”文件的头部,把变量 squareRotation 替换成 cubeRotation

JSCopy to Clipboard

let cubeRotation = 0.0;

备注: 在 drawScene() 函数声明中,将变量 squareRotation 替换成 cubeRotation

JSCopy to Clipboard

function drawScene(gl, programInfo, buffers, cubeRotation) {

备注: 在 drawScene() 函数中,用下面代码替换之前的 mat4.rotate 函数:

JSCopy to Clipboard

mat4.rotate(modelViewMatrix, // destination matrixmodelViewMatrix, // matrix to rotatecubeRotation, // amount to rotate in radians[0, 0, 1],
); // axis to rotate around (Z)
mat4.rotate(modelViewMatrix, // destination matrixmodelViewMatrix, // matrix to rotatecubeRotation * 0.7, // amount to rotate in radians[0, 1, 0],
); // axis to rotate around (Y)
mat4.rotate(modelViewMatrix, // destination matrixmodelViewMatrix, // matrix to rotatecubeRotation * 0.3, // amount to rotate in radians[1, 0, 0],
); // axis to rotate around (X)

备注: 在 main() 函数中,替换 drawScene() 函数调用参数中的 squareRotation 为 cubeRotation

JSCopy to Clipboard

drawScene(gl, programInfo, buffers, cubeRotation);
cubeRotation += deltaTime;

到现在为止,我们已经创建了一个颜色生动的并且会在场景中移动和旋转的立方体,这一定很酷吧。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/36904.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

检测SD NAND文件系统异常和修复的方法

目录 1、打开命令提示符&#xff1a; 2、运行chkdsk命令&#xff1a; 3、命令参数说明&#xff1a; chkdsk是Windows中的一个命令行工具&#xff0c;用于检查磁盘上的文件系统错误和修复坏块。MK米客方德为您提供指导&#xff0c;以下是使用chkdsk的步骤&#xff1a; 1、打开…

综合IT运维管理解决方案

综合IT运维管理解决方案 在信息化和数字化高速发展的时代&#xff0c;企业的IT运维管理已经成为保障业务连续性和提升运营效率的关键环节。高效的IT运维管理不仅能够降低运维成本&#xff0c;还能提升服务质量和用户满意度。本文将详细介绍综合IT运维管理解决方案&#xff0c;…

eBPF技术揭秘:DeepFlow如何引领故障排查,提升运维效率

DeepFlow 实战&#xff1a;eBPF 技术如何提升故障排查效率 目录 DeepFlow 实战&#xff1a;eBPF 技术如何提升故障排查效率 微服务架构系统中各个服务、组件及其相互关系的全景 零侵扰分布式追踪&#xff08;Distributed Tracing&#xff09;的架构和工作流程 关于零侵扰持…

华为od 2024 | 什么是华为od,od 薪资待遇,od机试题清单

目录 专栏导读华为OD机试算法题太多了&#xff0c;知识点繁杂&#xff0c;如何刷题更有效率呢&#xff1f; 一、逻辑分析二、数据结构1、线性表① 数组② 双指针 2、map与list3、队列4、链表5、栈6、滑动窗口7、二叉树8、并查集9、矩阵 三、算法1、基础算法① 贪心思维② 二分查…

Spring Session将HttpSession保存到Redis中,实现重启应用会话不丢失

这篇文章介绍一下在springboot项目中整合Spring Session&#xff0c;将session会话信息保存到Redis中&#xff0c;防止重启应用导致会话丢失。 第一步 创建一个springboot项目&#xff0c;添加spring-session-redis的依赖&#xff0c;因为要用到reids&#xff0c;所以要把redi…

扩散模型中的UNET

目录 一、为什么UNET模型可以用于去噪网络二、扩散模型中的UNET是一个条件去噪网络&#xff0c;怎么实现的三、UNET用于分割和用去去噪的区别 一、为什么UNET模型可以用于去噪网络 下采样部分: 能够提取图像的深层次特征&#xff0c;这些特征往往包含图像的重要结构和信息&…

原型开发:加速需求验证与设计优化

目录 前言1. 原型开发的意义1.1 定义与概述1.2 原型的类型 2. 原型开发的优势2.1 明确需求2.2 提升用户满意度2.3 降低开发风险 3. 原型开发的挑战3.1 过多的原型开发3.2 资源投入与管理3.3 期望管理 4. 优化原型开发流程4.1 明确目标与范围4.2 选择合适的工具和方法4.3 加强用…

【MySQL基础篇】概述及SQL指令:DDL及DML

数据库是一个按照数据结构来组织、存储和管理数据的仓库。以下是对数据库概念的详细解释&#xff1a;定义与基本概念&#xff1a; 数据库是长期存储在计算机内的、有组织的、可共享的、统一管理的大量数据的集合。 数据库不仅仅是数据的简单堆积&#xff0c;而是遵循一定的规则…

C++之STL(十一)

1、迭代器适配器 2、插入迭代器 #include <iostream> #include <vector> #include <algorithm> #include <list> using namespace std;void showVec(const vector<int>& v) {for (vector<int>::const_iterator it v.begin(); it ! v.…

视频压缩怎么压缩最小,怎么把视频压缩的很小

压缩视频怎么压缩到很小&#xff1f;视频是我们在生活中不可或缺的一部分&#xff0c;随着制作视频的小伙伴越来越多&#xff0c;大家都想把制作好的视频上传到一些平台或传给别人&#xff0c;有时候我们会遇到视频内存过大的问题&#xff0c;今天我给大家介绍一个快速把视频压…

SQLite:一个极简使用教程

SQLite是一个轻量级的、文件系统基础的数据库&#xff0c;它被设计为配置简单、易于部署。SQLite数据库存储在一个单一的磁盘文件中&#xff0c;这意味着数据库的创建和维护都非常简单。 1. SQLite特点 轻量级&#xff1a;SQLite不需要一个独立的服务器进程。它是一个嵌入式SQ…

万物皆可爬——亮数据代理IP+Python爬虫批量下载百度图片助力AI训练

&#x1f482; 个人网站:【 摸鱼游戏】【神级代码资源网站】【导航大全】&#x1f91f; 一站式轻松构建小程序、Web网站、移动应用&#xff1a;&#x1f449;注册地址&#x1f91f; 基于Web端打造的&#xff1a;&#x1f449;轻量化工具创作平台&#x1f485; 想寻找共同学习交…

注意!!2024下《网络规划设计师》易混淆知识点来了,赶紧码住

宝子们&#xff0c;在复习软考网络规划设计师中&#xff0c;是不是觉得有很多知识点含义比较相近&#xff0c;很多友友刚看的时候&#xff0c;估计会像我一样把它们弄混&#xff0c;作为一个软考老鸟&#xff0c;在这里给大家整理了网规学习过程中易混淆的知识点&#xff0c;大…

Detailed Steps for Troubleshooting ORA-00600 [kdsgrp1] (文档 ID 1492150.1)

Detailed Steps for Troubleshooting ORA-00600 [kdsgrp1] (文档 ID 1492150.1)​编辑转到底部 In this Document Purpose Troubleshooting Steps References APPLIES TO: Oracle Database - Enterprise Edition Oracle Database Cloud Schema Service - Version N/A and lat…

Ngnix内存池——高并发实现高效内存管理

目录 一、高并发下传统方式的弊端 1、常用的内存操作函数 2、弊端一 3、弊端二 4、弊端三 5、弊端四 二、弊端解决之道 1、内存管理维度分析 2、内存管理组件选型 三、高并发内存管理最佳实践 1、内存池技术 2、内存池如何解决弊端 3、高并发内存池如何实现 四、…

《数字图像处理与机器视觉》案例二(基于边缘检测和数学形态学焊缝图像处理)

一、前言 焊缝是评价焊接质量的重要标志&#xff0c;人工检测方法存在检测标准不统一&#xff0c;检测精度低&#xff0c;焊缝视觉检测技术作为一种重要的质量检测方法&#xff0c;正逐渐在各行各业中崭露头角。把焊缝准确的从焊接工件中准确分割出来是焊缝评价的关键一步&…

linux上git的使用

目录 1.测试是否安装有git 2.下载项目到本地 3.三板斧 1.将代码放在创建的目录中 2.提交改动到本地 3.提交代码到远端 4.注意点 以及补充内容 1.测试是否安装有git 如果输入git --help 会显示下面一大串那么就是已经安装&#xff0c;否则需要自行手动安装 yum install g…

洁盟超声波清洗机怎么样?横向测评希亦、洁盟、苏泊尔超声波清洗机谁是实力派

生活中大多数人戴眼镜&#xff0c;但是很多人都不注意眼镜的保养&#xff0c;导致镜片越来越模糊&#xff0c;从而引发多边的状况发生&#xff0c;比如长久戴模糊不清的眼镜&#xff0c;视力会受到影响随之下降。甚至是眼镜长期不清洗&#xff0c;上面的灰尘、细菌会影响眼部健…

彩虹PLM系统在航空航天业的应用与实践

彩虹PLM系统在航空航天业的应用与实践 彩虹PLM系统作为航空航天业的卓越解决方案&#xff0c;已经在众多企业中得到了广泛的应用和实践。该系统通过其独特的功能和优势&#xff0c;为航空航天企业带来了显著的管理效益和市场竞争力提升。 彩虹PLM系统 在应用方面&#xff0c;彩…

1.2 离散LTI系统的时域分析

目录 离散系统的定义 离散LTI系统的时域描述h[k] 离散系统的分类 线性与非线性系统 时变与非时变系统 因果与非因果系统 稳定与不稳定系统 滑动平均系统 LTI——Linear and Time-invariant System 线性时不变系统 离散系统的定义 离散LTI系统的时域描述h[k] 离…