WebGL系列教程五(使用索引绘制彩色立方体)

目录

  • 1 前言
  • 2 立方体
  • 3 开始绘制
    • 3.1 声明顶点和颜色
    • 3.2 使用索引绘制
    • 3.3 效果
    • 3.4 完整代码
  • 4 总结

1 前言

  上一讲我们讲了如何绘制彩色的三角形,这一讲我们来说如何绘制立方体。为什么几乎所有的WebGL教程总是从开始绘制三角形开始,因为三角形是最小的面,其他的一切图形都可以用三角形来拼接。好了,废话不多说,我们直接开整。

2 立方体

  一个立方体有8个顶点,如下图所示
在这里插入图片描述
  现在我们要把立方体的重心放到坐标轴原点去,回忆一下WebGL中的坐标系,X轴向右,Y轴向上,Z轴向外,这八个顶点的坐标和对应的颜色为:

顶点XYZ坐标颜色(RGB)
v01.0,1.0,1.0,1.0,1.0,1.0
v1-1.0,1.0,1.0,1.0,0.0,1.0
v2-1.0,-1.0,1.0,1.0,0.0,1.0
v31.0,-1.0,1.0,1.0,1.0,0.0
v41.0,-1.0,-1.0,1.0,0.0,1.0
v5-1.0,-1.0,-1.0,1.0,1.0,1.0
v6-1.0,1.0,-1.0,0.0,0.0,1.0
v71.0,1.0,-1.0,0.0,1.0,1.0

3 开始绘制

3.1 声明顶点和颜色

 <script id="vertex-shader" type="x-shader/x-vertex">//声明一个点,vec3表示3维向量attribute vec3 aPosition;attribute vec4 a_Color;varying vec4 v_Color;void main(){//点的位置,将vec3补齐为vec4gl_Position = vec4(aPosition,1.0);//传递颜色v_Color = a_Color;}</script><script id="fragment-shader" type="x-shader/x-fragment">precision highp float;varying vec4 v_Color;void main(){//点的颜色,rgba形式gl_FragColor = v_Color;}</script>

3.2 使用索引绘制

  因为现在我们要使用顶点索引,因此就不能使用DrawArrays方法进行绘制了,改为使用DrawElements。

//顶点和颜色
let verticesColors = new Float32Array([1.0, 1.0, 1.0,   1.0,1.0,1.0,//v0 近平面 右上 颜色-1.0, 1.0, 1.0,   1.0,0.0,1.0,//v1 近平面 左上 颜色-1.0,-1.0, 1.0,   1.0,0.0,1.0,//v2 近平面 左下 颜色1.0,-1.0, 1.0,   1.0,1.0,0.0,//v3 近平面 右下 颜色1.0,-1.0,-1.0,   1.0,0.0,1.0,//v4 远平面 右下 颜色-1.0,-1.0,-1.0,   1.0,1.0,1.0,//v5 远平面 左下 颜色-1.0, 1.0,-1.0,   0.0,0.0,1.0,//v6 远平面 左上 颜色1.0, 1.0,-1.0,   0.0,1.0,1.0 //v7 远平面 右上 颜色
]);
//顶点索引
let indices = new Uint8Array([0,1,2,  0,2,3,//近平面4,5,6,  4,6,7,//远平面1,2,5,  1,5,6,//左平面0,3,4,  0,4,7,//右平面3,4,2,  3,5,2,//下平面0,7,6,  0,1,6 //上平面
]);
//使webgl视口和canvas画板一样大
gl.viewport(0, 0, canvas.width, canvas.height);
//开启深度检测
gl.enable(gl.DEPTH_TEST);
//顶点
let vertexColorBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER,vertexColorBuffer);
gl.bufferData(gl.ARRAY_BUFFER,verticesColors,gl.STATIC_DRAW);
let FSIZE = verticesColors.BYTES_PER_ELEMENT;
let a_Position = gl.getAttribLocation(program,'a_Position');
gl.vertexAttribPointer(a_Position,3,gl.FLOAT,false,FSIZE*6,0);
gl.enableVertexAttribArray(a_Position);
//颜色
var a_Color = gl.getAttribLocation(program, 'a_Color');
gl.vertexAttribPointer(a_Color, 3, gl.FLOAT, false, FSIZE * 6, FSIZE * 3);
gl.enableVertexAttribArray(a_Color);
//绑定索引缓冲
let indexBuffer =  gl.createBuffer();
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER,indexBuffer);
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER,indices,gl.STATIC_DRAW);
gl.drawElements(gl.TRIANGLES, 36, gl.UNSIGNED_BYTE, 0);

3.3 效果

  为了使效果明显一点,我将立方体绕Y轴旋转了60度。虽然看起来效果还不错。但仍然能看到一些问题,比如左下角和右上角为什么有一条明显的连线?那是因为每个面都是由两个三角形组成的。每个三角形都有各自的颜色,当然在拼接的地方就能看到明显的颜色分隔了。我们在这里先留个问题,怎么样使每个面只保留一种颜色呢?
在这里插入图片描述

3.4 完整代码

let canvas = document.getElementById("canvas");
let gl = canvas.getContext("webgl");
let vertexSource = document.getElementById("vertex-shader").innerText;
let fragmentSource = document.getElementById("fragment-shader").innerText;
let vertexShader = gl.createShader(gl.VERTEX_SHADER);
let fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(vertexShader,vertexSource);
gl.shaderSource(fragmentShader,fragmentSource);
gl.compileShader(vertexShader);
gl.compileShader(fragmentShader);
console.log(gl.getShaderInfoLog(vertexShader));
console.log(gl.getShaderInfoLog(fragmentShader));
let program = gl.createProgram();
gl.attachShader(program,vertexShader);
gl.attachShader(program,fragmentShader);
gl.linkProgram(program);
gl.useProgram(program);
console.log(gl.getProgramInfoLog(program));
//开始正常的逻辑,绘制立方体
// Create a cube//   v6----- v7
//   /|      /|
//  v1------v0|
//  | |     | |
//  | |v5---|-|v4
//  |/      |/
//  v2------v3//顶点和颜色
let verticesColors = new Float32Array([1.0, 1.0, 1.0,   1.0,1.0,1.0,//v0 近平面 右上 颜色-1.0, 1.0, 1.0,   1.0,0.0,1.0,//v1 近平面 左上 颜色-1.0,-1.0, 1.0,   1.0,0.0,1.0,//v2 近平面 左下 颜色1.0,-1.0, 1.0,   1.0,1.0,0.0,//v3 近平面 右下 颜色1.0,-1.0,-1.0,   1.0,0.0,1.0,//v4 远平面 右下 颜色-1.0,-1.0,-1.0,   1.0,1.0,1.0,//v5 远平面 左下 颜色-1.0, 1.0,-1.0,   0.0,0.0,1.0,//v6 远平面 左上 颜色1.0, 1.0,-1.0,   0.0,1.0,1.0 //v7 远平面 右上 颜色
]);
//顶点索引
let indices = new Uint8Array([0,1,2,  0,2,3,//近平面4,5,6,  4,6,7,//远平面1,2,5,  1,5,6,//左平面0,3,4,  0,4,7,//右平面3,4,2,  3,5,2,//下平面0,7,6,  0,1,6 //上平面
]);
//使webgl视口和canvas画板一样大
gl.viewport(0, 0, canvas.width, canvas.height);
//开启深度检测
gl.enable(gl.DEPTH_TEST);
//顶点
let vertexColorBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER,vertexColorBuffer);
gl.bufferData(gl.ARRAY_BUFFER,verticesColors,gl.STATIC_DRAW);
let FSIZE = verticesColors.BYTES_PER_ELEMENT;
let a_Position = gl.getAttribLocation(program,'a_Position');
gl.vertexAttribPointer(a_Position,3,gl.FLOAT,false,FSIZE*6,0);
gl.enableVertexAttribArray(a_Position);
//颜色
var a_Color = gl.getAttribLocation(program, 'a_Color');
gl.vertexAttribPointer(a_Color, 3, gl.FLOAT, false, FSIZE * 6, FSIZE * 3);
gl.enableVertexAttribArray(a_Color);
//绑定索引缓冲
let indexBuffer =  gl.createBuffer();
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER,indexBuffer);
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER,indices,gl.STATIC_DRAW);
//绘制三角形,36个点,立方体是6个面,每个面2个三角形,索引数组元素类型gl.UNSIGNED_BYTE,从第0个索引开始绘制
gl.drawElements(gl.TRIANGLES, 36, gl.UNSIGNED_BYTE, 0);

4 总结

  本节我们通过梳理立方体的顶点坐标和对应的颜色关系,使用索引绘制的方式,绘制除了一个彩色的立方体,关于立方体是怎么旋转的,我们会在后面的博文中进行讲解。目前我们还遗留了一个思考问题,那就是如何使立方体的每个面都保持一个颜色,希望读者认真思考,我们留在下节进行解答。

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

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

相关文章

服务器模型 Reactor 和 Proactor

Proactor 具体流程如下&#xff1a; 处理器发起异步操作&#xff0c;并关注 IO 完成事件&#xff1b;事件分离器等待操作完成事件&#xff1b;分离器等待过程中&#xff0c;内核并行执行实际的 IO 操作&#xff0c;并将结果存储入用户自定义的缓冲区&#xff0c;最后通知事件分…

【C++】C++ STL 探索:List使用与背后底层逻辑

C语法相关知识点可以通过点击以下链接进行学习一起加油&#xff01;命名空间缺省参数与函数重载C相关特性类和对象-上篇类和对象-中篇类和对象-下篇日期类C/C内存管理模板初阶String使用String模拟实现Vector使用及其模拟实现 本文将通过模拟实现List&#xff0c;从多个角度深入…

60 道 MySQL 精选面试题

基础 #1、关系型和非关系型数据库的区别&#xff1f; 关系型数据库的优点 容易理解&#xff0c;因为它采用了关系模型来组织数据。可以保持数据的一致性。数据更新的开销比较小。支持复杂查询&#xff08;带 where 子句的查询&#xff09; 非关系型数据库&#xff08;NOSQL…

微服务-nacos

nacos-注册中心 启动 服务注册到nacos

【Unity踩坑】创建新项目后提示编译错误要进入安全模式

在创建了新项目后&#xff08;比如URP&#xff0c;AR&#xff0c;VR&#xff09;&#xff0c;首次打开时提示有编译错误&#xff0c;要进入安全模式。 脚本是项目模板自带的&#xff0c;不会有问题。这时需要先选择进入安全模式&#xff0c;然后关闭项目&#xff0c;重新打开就…

9月12号作业

主要更改的代码 void Widget::read_solt() { QByteArray msg socket->readAll();//接受信息 if(QString::fromLocal8Bit(msg)msg2||msg3QString::fromLocal8Bit(msg)||msg6QString::fromLocal8Bit(msg)) { QListWidgetItem *listItem new QListWidgetItem(QString::fromL…

网络视频流解码显示后花屏问题的分析

问题描述 rtp打包的ps视频流发送到客户端后显示花屏。 数据分析过程 1、用tcpdump抓包 tcpdump -i eth0 -vnn -w rtp.pcap 2、用wireshark提取rtp的payload 保存为record.h264文件 3、用vlc播放器播放 显示花屏 4、提取关键帧 用xxd命令将h264文件转为txt文件 xxd -p…

2 创建会计科目表

定义解释 在SAP系统中&#xff0c;会计科目表是财务系统的基础数据之一&#xff0c;对于企业的财务核算和财务管理至关重要 定义&#xff1a;会计科目表是SAP系统中用于定义和分类总账科目的集合&#xff0c;它包含了所有需要在财务系统中记录和管理的会计科目。这些科目按照…

工厂安灯系统在设备管理中的重要性

在现代制造业中&#xff0c;设备管理是确保生产效率和产品质量的关键环节。随着工业4.0的推进&#xff0c;越来越多的企业开始采用智能化的设备管理系统&#xff0c;其中安灯系统作为一种有效的管理工具&#xff0c;逐渐受到重视。安灯系统最初源于日本的丰田生产方式&#xff…

内存管理篇-23 二级页表的创建过程-上

二级页表的填充过程&#xff1a;一级页表是4096项&#xff08;用虚拟地址高12位&#xff09;&#xff0c;二级页表是256项&#xff08;用虚拟地址中间10位&#xff0c;每个项能代表一个物理页&#xff0c;因此4KB*2561MB&#xff09;。因此&#xff0c;每个二级页表映射1MB的空…

Java stream使用与执行原理

stream简介 Stream: A sequence of elements supporting sequential and parallel aggregate operations stream为sequential即单线程串行操作&#xff0c;parallelStream支持并行操作&#xff0c;本文只讨论sequential的stream。 stream常用操作 Datastatic class Course {pr…

HarmonyOS应用开发( Beta5.0)HOS-用户认证服务:面部识别

介绍 User Authentication Kit&#xff08;用户认证服务&#xff09;提供了基于用户在设备本地注册的人脸和指纹来认证用户身份的能力。 用户向应用/系统服务请求访问某些个人数据或执行某些敏感操作时&#xff0c;应用/系统服务将调用系统用户身份认证控件对用户身份进行认证…

MySQL之库和表操作

目录 一&#xff1a;对库的操作 1.创建数据库 2.查看数据库列表 3.显示创建数据库的语句 4.删除数据库 5.字符集与校验集 6.确认当前所处的数据库 7.修改数据库 8.备份和恢复 9.查看连接情况 二:对表的操作 1.创建表 2.查看表 3.删除表 4.修改表 接下来的日…

Java 设计模式-状态模式

目录 一. 概述 二. 主要角色 三. 代码示例 四. 优缺点 优点&#xff1a; 缺点&#xff1a; 五. 常见应用场景 一. 概述 状态模式是一种行为设计模式&#xff0c;它允许一个对象在其内部状态改变时改变它的行为。对象看起来好像修改了它的类。状态模式把所有的与一个特定…

信息安全工程师(1)计算机网络分类

一、按分布范围分类 广域网&#xff08;WAN&#xff09;&#xff1a; 定义&#xff1a;广域网的任务是提供长距离通信&#xff0c;运送主机所发送的数据。其覆盖范围通常是直径为几十千米到几千千米的区域&#xff0c;因此也被称为远程网。特点&#xff1a;连接广域网的各个结点…

利用高德+ArcGIS优雅获取任何感兴趣的矢量边界

荷花十里&#xff0c;清风鉴水&#xff0c;明月天衣。 四时之景不同&#xff0c;乐亦无穷尽也。今天呢&#xff0c;梧桐君给大家讲解一下&#xff0c;如何利用高德地图&#xff0c;随机所欲的获取shp边界数据。 文章主要分成以下几个步骤&#xff1a; 首先搜索你想获取的矢量…

【文献阅读】Unsupervised Machine Learning for Bot Detection on Twitter

Abstract 引入新特征&#xff0c;并降低所提模型的复杂性&#xff0c;从而提高基于聚类算法的机器人识别准确性。 最小化数据集维度和选择重要特征来实现的。 实验证明该方法的特征可以与四种不同的聚类技术&#xff08;agglomerating、k-medoids、DBSCAN 和 K-means&#x…

企业数字化转型、建设和升级面临的主要难题和解决之道(2)

用爱编程30年&#xff0c;倾心打造工业和智能智造软件研发平台SCIOT,用创新的方案、大幅的让利和极致的营销&#xff0c;致力于为10000家的中小企业实现数字化转型&#xff0c;打造数字化企业和智能工厂&#xff0c;点击上边蓝色字体&#xff0c;关注“AI智造AI编程”或文末扫码…

rocm Linpack 编译构建系统解析

0. 购买amd显卡&#xff0c;安装rocm 1, 编译 rocHPL 下载源码&#xff1a; $ git clone --recursive https://github.com/ROCm/rocHPL.git 编译&#xff1a; $ cd rocHPL/ $ ./install.sh --prefix${PWD}/../local/ 会自动 git clone blit,ucx,opempi, $ ./mpirun_rochpl …