glsl着色器学习（五）

news2024/9/24 19:18:43

接下来是创建buffer，设置顶点位置，法线，顶点索引等。

const cubeVertexPositions = new Float32Array([
    1, 1, -1,
    1, 1, 1, 
    1, -1, 1, 
    1, -1, -1,
    -1, 1, 1, 
    -1, 1, -1,
    -1, -1, -1,
    -1, -1, 1,
     -1, 1, 1,
     1, 1, 1,
     1, 1, -1,
     -1, 1, -1,
     -1, -1, -1,
     1, -1, -1,
     1, -1, 1,
     -1, -1, 1,
     1, 1, 1,
     -1, 1, 1,
     -1, -1, 1,
     1, -1, 1,
     -1, 1, -1,
     1, 1, -1,
     1, -1, -1,
     -1, -1, -1,
]);
const cubeVertexNormals = new Float32Array([
    1, 0, 0,
    1, 0, 0,
    1, 0, 0,
    1, 0, 0,
    -1, 0, 0,
    -1, 0, 0,
    -1, 0, 0,
    -1, 0, 0,
    0, 1, 0,
    0, 1, 0,
    0, 1, 0,
    0, 1, 0,
    0, -1, 0,
    0, -1, 0,
    0, -1, 0,
    0, -1, 0,
    0, 0, 1,
    0, 0, 1,
    0, 0, 1,
    0, 0, 1,
    0, 0, -1,
    0, 0, -1,
    0, 0, -1,
    0, 0, -1,
]);
const cubeVertexTexcoords = new Float32Array([
     1, 0,
     0, 0,
     0, 1,
     1, 1,
     1, 0,
     0, 0,
     0, 1,
     1, 1,
     1, 0,
     0, 0,
     0, 1,
     1, 1,
     1, 0,
     0, 0,
     0, 1,
     1, 1,
     1, 0,
     0, 0,
     0, 1,
     1, 1,
     1, 0,
     0, 0,
     0, 1,
     1, 1,
]);
const cubeVertexIndices = 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,
],);
 cubeVertexPositions

  1. const cubeVertexPositions = new Float32Array([])

    1. 创建一个 Float32Array 类型的数组，用于存储立方体的八个顶点在三维空间中的位置坐标。每个顶点由三个浮点数表示，分别对应 X、Y、Z 轴的坐标。这个数组中依次列出了立方体八个顶点的坐标，按照一定的顺序排列，以便在后续的渲染过程中能够正确地构建立方体的几何形状。例如1,1,-1 表示一个顶点的坐标为X轴为1，Y轴为1，Z轴为-1。通过这种方式，定义立方体的位置。

    2. 每个顶点坐标包涵X,Y,Z三个分量，每个面有4个顶点，立方体有6个面，因此需要3x4x6 = 72个分量

    3. 此图用于理解

cubeVertexNormals
  1. 创建一个 Float32Array 类型的数组，存储了立方体每个顶点的法线向量。

  2. 法线向量是垂直于物体表面的向量，对于光照计算非常重要。在这个数组中，每个顶点都有一个对应的法线向量，所以是有24个组成，每个分别由三个浮点数表示，分别对应 X、Y、Z 轴的方向分量。例如，1, 0, 0表示一个法线向量在 X 轴方向上为 1，Y 轴和 Z 轴方向为 0，即指向 X 轴正方向。

  3. 法线分量也是一样，每个顶点三个分量，一个面有4个顶点，总共6个面，也是3x4x6=72个分量

cubeVertexTexcoords

  1. 这是一个 Float32Array 类型的数组，用于存储立方体每个顶点的纹理坐标纹理坐标。用于确定如何从纹理图像中采样颜色值，并将其应用到对应的顶点上。每个顶点由两个浮点数表示，通常在范围 [0, 1] 之间，分别对应纹理图像的 U（水平方向）和 V（垂直方向）坐标。（我们通常理解的UV坐标）例如1, 0表示纹理坐标在纹理图像的右上角。

  2. 立方体有6个面，每个面由4个顶点，每个顶点需要2个纹理坐标分量，因此需要6 x 4 x 2 = 48个纹理坐标数据。

cubeVertexIndices
  1. 创建一个 Uint16Array 类型的数组，存储了绘制立方体所需的顶点索引。

  2. 由于立方体有八个顶点，但在绘制时通常使用三角形来构建表面，每个三角形需要三个顶点索引。这个数组中依次列出了构成立方体十二个面（每个面由两个三角形组成）的顶点索引。例如，0, 1, 2表示第一个三角形的三个顶点索引分别为 0、1、2，对应 cubeVertexPositions 数组中的三个顶点。通过这种方式，可以使用较少的数据量来定义复杂的几何形状，避免重复存储顶点数据。

  3. 立方体每个面由2个三角形绘制而成，每个三角形需要3个顶点索引，因此每个面需要6个索引，则总共需要2x3x6=36个分量

创建buffer缓冲区
const positionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
gl.bufferData(gl.ARRAY_BUFFER, cubeVertexPositions, gl.STATIC_DRAW);

const normalBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, normalBuffer);
gl.bufferData(gl.ARRAY_BUFFER, cubeVertexNormals, gl.STATIC_DRAW);

const texcoordBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, texcoordBuffer);
gl.bufferData(gl.ARRAY_BUFFER, cubeVertexTexcoords, gl.STATIC_DRAW);

const indexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, cubeVertexIndices, gl.STATIC_DRAW);
  1.  const positionBuffer = gl.createBuffer();
    1. 创建一个新的缓冲区对象，用于存储立方体顶点位置数据
    2. 创建的buffer缓冲区对象
  2. gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
    1. 将创建的缓冲区绑定到ARRAY_BUFFER上。后续对bufferData等方法的调用将操作这个特定的缓冲区
    2. 绑定到ARRAY_BUFFER上。
  3. gl.bufferData(gl.ARRAY_BUFFER, cubeVertexPositions, gl.STATIC_DRAW);
    1. 将存储在cubeVertexPositions数组中的立方体顶点位置数据上传到当前绑定的缓冲区。
    2. gl.STATIC_DRAW参数表示这些数据不会经常改变，适合一次性上传并多次绘制；
    3. 绑定数据

其他缓冲区也是一个道理，这里不做赘述

通过缓冲区，可以减少数据传输的开销，提高图形渲染的性能

创建并设置纹理
onst checkerTexture = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, checkerTexture);
gl.texImage2D(
    gl.TEXTURE_2D,
    0,                // mip level
    gl.LUMINANCE,     // internal format
    4,                // width
    4,                // height
    0,                // border
    gl.LUMINANCE,     // format
    gl.UNSIGNED_BYTE, // type
    new Uint8Array([  // data
      192, 128, 192, 128,
      128, 192, 128, 192,
      192, 128, 192, 128,
      128, 192, 128, 192,
    ]));
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);

const decalTexture = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, decalTexture);
gl.texImage2D(
    gl.TEXTURE_2D,
    0,                // mip level
    gl.RGBA,          // internal format
    gl.RGBA,          // format
    gl.UNSIGNED_BYTE, // type
    makeTextCanvas('F', 32, 32, 'red'));
gl.generateMipmap(gl.TEXTURE_2D);
  1. const checkerTexture = gl.createTexture();
    1. 使用Webgl的createTexture方法创建一个纹理对象，用于存储纹理；
  2. gl.bindTexture(gl.TEXTURE_2D, checkerTexture);
    1. 将创建的纹理对象绑定到TEXTURE_2D目标上，以便后续对该纹理进行操作；
  3. gl.texImage2D(gl.TEXTURE_2D,0, gl.LUMINANCE,4, 4,0, gl.LUMINANCE, gl.UNSIGNED_BYTE,new Uint8Array([...]));
    1. 定义纹理的图形数据。创建一个4x4的灰度纹理，数据由一个Unit8Array提供，其中包涵了不同灰度值的像素数据，用于形成棋盘格图案；
    2. gl.LUMINANCE表示内部格式和外部格式都是灰度
    3. gl.UNSIGNED_BYTE表示数据类型为无符号字节
  4. gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
    1. 设置纹理的缩小过滤器为最近邻过滤。当纹理缩小显示时，会选择最接近的像素，不进行差值。
  5. gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
    1. 设置纹理的方法过滤器也为最近邻过滤，当纹理被放大显示时，同样选择最接近的像素。
  6. gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
    1. 设置纹理在水平方向（S轴）的环绕模式为CLAMP_TO_EDGE，当超出纹理范围的坐标会被截断到纹理边缘颜色；
  7. gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
    1. 设置纹理在垂直方向（T轴）的环绕模式也为CLAMP_TO_EDGE
创建并设置贴花纹理
  1. const decalTexture = gl.createTexture();
    1. 创建另一个纹理对象，用于存储贴花纹理
  2. gl.bindTexture(gl.TEXTURE_2D,decalTexture);
    1. 绑定贴花纹理对象
  3. gl.texImage2D(
        gl.TEXTURE_2D,
        0,               
        gl.RGBA,        
        gl.RGBA,         
        gl.UNSIGNED_BYTE,
        makeTextCanvas('F', 32, 32, 'red'))；
    1. 定义贴花纹理的图像数据。自定义创建了一个包涵字符F的红色32x32的画布，并将其作为纹理数据。内部格式和外部格式以及数据类型分别为gl.RGBA和gl.UNSIGNED_BYTE，表示一个包涵红、绿、蓝和透明通达的纹理。
    3. const makeTextCanvas = (text, width, height, color) => {
  const ctx = document.createElement('canvas').getContext('2d')
  ctx.canvas.width = width
  ctx.canvas.height = height
  ctx.font = `bold ${height * 5 / 6 | 0}px sans-serif`
  ctx.textAlign = 'center'
  ctx.textBaseline = 'middle'
  ctx.fillStyle = color
  ctx.fillText(text, width / 2, height / 2)
  return ctx.canvas
};
  4. gl.generateMipmap(gl.TEXTURE_2D);

    1. 生成纹理的多级渐远纹理（mipmap）。多级渐远纹理可以提高纹理在不同距离下的渲染质量和性能。

  •  图片上的内容只是辅助理解
  •  到这里，我们就完成了所有的初始化代码。

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

2024.9.3C++

2024.9.3C++

自行实现Mystring类 #include <iostream> #include <cstring> using namespace std;class mystring { public:mystring(){len 0;str nullptr;}mystring(const char* s){len strlen(s);str new char[len 1];strcpy(str, s);}mystring(const mystring& othe…
阅读更多...
短时相关+FFT捕获方法的MATLAB仿真

短时相关+FFT捕获方法的MATLAB仿真

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 短时相关FFT捕获方法的MATLAB仿真 前言短时相关FFT捕获相关原理1、频偏引起的相关损失2、扇贝损失 MATLAB程序获取完整程序 前言 对于算法类的工程&#xff0c;FPGA设计&…
阅读更多...
pandas数据处理库使用

pandas数据处理库使用

文章目录 链接: [原文章链接](https://mp.weixin.qq.com/s?__bizMzkzNjI3ODkyNQ&tempkeyMTI4Nl8zM3FHVFU1NDRDL0p2SkplRTVidmhiNmh1ZWF3YXkwY3VYZlZNaWx0MXowdThFbVRUVEFEdEs5YlU2SUJLcmtXTHZpbnFmR2V6SG1rbGJyd01zYnRkdURWa1ZvNGtIU1piWDd5RFA4OUxkNmlaVmZ1QVpEd2tWR25IR…
阅读更多...
MySQL常用窗口函数总和

MySQL常用窗口函数总和

在 MySQL 中&#xff0c;窗口函数是一类用于在查询结果集中计算值的函数&#xff0c;允许用户根据数据行进行聚合或排序操作&#xff0c;同时保留行的详细信息。窗口函数在分析数据时非常有用&#xff0c;因为它们允许您在不缩小结果集的情况下对数据进行复杂的计算。 常见的窗…
阅读更多...
【文献及模型、制图分享】县域城乡融合发展对乡村旅游地实现共同富裕的影响机制——以长三角地区60个典型县为例

【文献及模型、制图分享】县域城乡融合发展对乡村旅游地实现共同富裕的影响机制——以长三角地区60个典型县为例

文献介绍 乡村旅游地是推动城乡融合、实现共同富裕的关键区域&#xff0c;精准把握县域城乡融合发展多维特征&#xff0c;系统解析其促进乡村旅游地共同富裕的机制&#xff0c;有助于丰富新时代城乡共富理论体系。基于共生理论&#xff0c;构建“共生单元—共生环境—共生结果…
阅读更多...
linux~~目录结构远程登录教程（xshell+xftp）

linux~~目录结构远程登录教程（xshell+xftp）

目录 1.目录结构 2.远程登录xshell 2.1所需工具 2.2了解虚拟机IP 2.3查看是否正常连接 2.4xshell进行连接 3.文件传输xftp7 3.1xftp6安装 3.2相关设置 3.3效果展示 3.4文件之间的传输过程 1.目录结构 bin目录里面主要存放这个我们经常使用的指令&#xff0c;例如这个…
阅读更多...
PointNet++改进策略 ：模块改进 | PAConv，位置自适应卷积提升精度

PointNet++改进策略 ：模块改进 | PAConv，位置自适应卷积提升精度

题目&#xff1a;PAConv: Position Adaptive Convolution with Dynamic Kernel Assembling on Point Clouds来源&#xff1a;CVPR2021机构&#xff1a;香港大学论文&#xff1a;https://arxiv.org/abs/2103.14635代码&#xff1a;https://github.com/CVMI-Lab/PAConv 前言 PA…
阅读更多...
从八股文到奇怪的缓存一致性问题

从八股文到奇怪的缓存一致性问题

本文是最近看阿里云开发者的一遍奇怪的缓存一致性问题的总结与心得&#xff0c;原文放在文章末尾 缓存穿透、缓存击穿、缓存雪崩 缓存穿透、缓存击穿和缓存雪崩都是系统中可能遇到的问题&#xff0c;特别在高并发场景下。 缓存穿透 与后两者不同&#xff0c;缓存穿透是查询不…
阅读更多...
10.10 层次化网络模型和综合布线系统

10.10 层次化网络模型和综合布线系统

层次化网络模型 综合布线系统 真题
阅读更多...
前端登录鉴权——以若依Ruoyi前后端分离项目为例解读

前端登录鉴权——以若依Ruoyi前后端分离项目为例解读

权限模型 Ruoyi框架学习——权限管理_若依框架权限-CSDN博客 用户-角色-菜单&#xff08;User-Role-Menu&#xff09;模型是一种常用于权限管理的设计模式&#xff0c;用于实现系统中的用户权限控制。该模型主要包含以下几个要素&#xff1a; 用户&#xff08;User&#xff09;…
阅读更多...
基于微信的热门景点推荐小程序的设计与实现(论文+源码)_kaic

基于微信的热门景点推荐小程序的设计与实现(论文+源码)_kaic

摘 要 近些年来互联网迅速发展人们生活水平也稳步提升&#xff0c;人们也越来越热衷于旅游来提高生活品质。互联网的应用与发展也使得人们获取旅游信息的方法也更加丰富&#xff0c;以前的景点推荐系统现在已经不足以满足用户的要求了&#xff0c;也不能满足不同用户自身的个…
阅读更多...
Leetcode—72. 编辑距离【中等】

Leetcode—72. 编辑距离【中等】

2024每日刷题&#xff08;158&#xff09; Leetcode—72. 编辑距离 动态规划算法思想 实现代码 class Solution { public:int minDistance(string word1, string word2) {const int m word1.length();const int n word2.length();vector<vector<int>> dp(n 1,…
阅读更多...
Multi-Mode DOA Estimation AND Relax Super Resolution DOA

Multi-Mode DOA Estimation AND Relax Super Resolution DOA

之前看到加特兰的新品发布会上&#xff0c;PPT写的一些算法信号处理流程图&#xff0c;这里记录学习一下自己的思考&#xff1a; 原始数据采样数据预处理距离维FFT通道间DDMA数据分离非相干累计RV-MAP coarse-cfar fine CFAR(multi-Mode DOA Estimation): 舱内的CPD信号处理流…
阅读更多...
分支线定向耦合器宽带化设计和ADS仿真

分支线定向耦合器宽带化设计和ADS仿真

分支线定向耦合器宽带化设计和ADS仿真 工程下载链接&#xff1a;分支线定向耦合器宽带化设计和ADS仿真-ADS工程文件 之前经常分析分支线定向耦合器&#xff0c;例如在15、ADS使用记录之耦合器设计和基于AWR的微带线分支线耦合器设计-从原理到版图中都有涉及&#xff0c;但是由…
阅读更多...
Axure中继器动态数据图表制作

Axure中继器动态数据图表制作

在Axure RP中&#xff0c;中继器&#xff08;Repeater&#xff09;是一个非常强大的工具&#xff0c;它允许设计者动态地展示和交互数据&#xff0c;进而创建各种复杂的数据可视化图表&#xff0c;如柱状图、条形图、堆叠图、散点图和对比图。以下将详细介绍如何使用中继器来设…
阅读更多...
solidworks模型导出urdf（超详细）

solidworks模型导出urdf（超详细）

目录 写在前面的话1 solidworks 文件2 安装sw2urdf插件3 完整步骤3.1 设置基准轴3.2 设置点3.3 设置坐标轴3.4 设置sw2urdf参数3.5 导出可能的问题3.6 ros2 编译3.7 成功结果画面 写在前面的话 刚进组1个月&#xff0c;我的博士研究方向是自动驾驶&#xff0c;还没入门&#x…
阅读更多...
火山引擎携手Keep，让线上健身更快更稳

火山引擎携手Keep，让线上健身更快更稳

今年年初&#xff0c;一部《热辣滚烫》又掀起了健身塑型风潮。作为健身领域的佼佼者&#xff0c;Keep 为用户提供全面的健身方案&#xff0c;以帮助用户实现健身目标。随着短视频运动的流行&#xff0c;Keep 覆盖的运动品类超过60类&#xff0c;同时不断尝试直播等新的内容承载…
阅读更多...
Oceanbase 透明加密TDE

Oceanbase 透明加密TDE

官方文档&#xff1a;数据库透明加密概述-V4.3.2-OceanBase 数据库文档-分布式数据库使用文档 OceanBase 数据库社区版暂不支持数据透明加密。 数据存储加密是指对数据和 Clog 等保存在磁盘中的数据进行无感知的加密&#xff0c;即透明加密&#xff08;简称 TDE&#xff09;。…
阅读更多...
【时时三省】(C语言基础)指针进阶 例题

【时时三省】(C语言基础)指针进阶 例题

山不在高&#xff0c;有仙则名。水不在深&#xff0c;有龙则灵。 ----CSDN 时时三省 字符数组例题&#xff1a; arr后面放了六个字符 所以这个数组的元素个数就是6 第一个arr 因为他计算的是一整个数组的大小 就是打印6 第二个arr0 arr没有单独放在它的内部 所以它计算的就是…
阅读更多...
flunet瞬态处理时均问题

flunet瞬态处理时均问题

fluent处理时均问题 最近遇到个同学&#xff0c;处理心脏跳动的时均问题&#xff0c;由于仅想取部分稳定时间段的时均数据&#xff0c;fluent的自动采样仅能对全部时间做处理&#xff0c;就存在问题了&#xff0c;网上看到两篇很详细的文章&#xff0c;记录下。 具体网址&…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023