glsl着色器学习（五）

已于 2024-09-03 19:51:39 修改
阅读量681 收藏 22
点赞数 21
文章标签： 着色器 学习
于 2024-09-03 16:07:37 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41718879/article/details/141860734
版权

接下来是创建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）。多级渐远纹理可以提高纹理在不同距离下的渲染质量和性能。

  •  图片上的内容只是辅助理解
  •  到这里，我们就完成了所有的初始化代码。
superTiger_y
关注
  • 21
    点赞
  • 踩
  • 22
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
FollowersOfLight:SFML GLSL着色器实验
06-13
《光之追随者：SFML与GLSL着色器的奇妙实验》 在计算机图形学的世界里，SFML（Simple and Fast Multimedia Library）是一个强大的跨平台库，它为开发者提供了便捷的方式来创建多媒体应用，如2D游戏。而GLSL（OpenGL...
sonobeere:使用 sonotopy 和 Qt 实时编码 GLSL 着色器
06-07
**GLSL着色器与实时编码** 在计算机图形学领域，GLSL（OpenGL Shading Language）是一种用于编写着色器的编程语言，它允许开发者直接控制GPU的行为，以实现更复杂的图形效果。GLSL通常被用于顶点着色、片段着色等...
着色器语言GLSL学习
weixin_44208404的博客
01-17 621
【代码】着色器语言GLSL学习。
glsl着色器学习（七）
localhost
09-03 638
webgl绘制立方体
glsl着色器学习（一）
localhost
09-03 586
【代码】glsl着色器学习（一）
glsl着色器学习（六）
localhost
09-03 817
准备工作已经做完，下面开始渲染。
glsl着色器学习（二）
localhost
09-03 331
书接上文，第一篇文章已经将顶点着色器和片段着色器的内容编写好了，这篇文章就创建着色器并编译。
glsl着色器学习（三）
localhost
09-03 398
前面两篇文章已经创建好了顶点着色器和片段着色器并编译成功，下面将创建program(程序)，将着色器链接起来。
glsl着色器学习（十）缩放
localhost
09-04 153
不出意外的话，没啥变化，因为设置的矩阵是[1,1,1]，将[1,1,1]改成[2,1,1]，会发现图像X轴方向放大了2倍。对二维图形进行缩放，需要用到顶点着色器，顶点着色器经过矩阵变换，会将模型空间最终转换成裁剪空间。定义了一个统一变量4x4矩阵，用来接收应用程序传递过来的矩阵数据。获取变量在着色器程序中的位置。
glsl着色器学习 （十一）旋转
localhost
09-04 154
0,0,1]三维向量表示X,Y,Z三个分量，这里表示按照Z轴旋转。是一样的，都是变化矩阵，只是将缩放矩阵替换成旋转矩阵。是将给定的矩阵，按照给定的轴旋转后返回。
glsl着色器学习（八）通用模板
localhost
09-04 185
下面是一个简单的通用WebGL模板。
[OpenGL] 着色器语言GLSL
qq_45280097的博客
03-05 1133
GLSL(Graphics Library Shader Language）)是一种类C语言,它是一种为OpenGL设计的编程语言，用于编写图形着色器程序。着色器是运行在图形处理器（GPU）上的小型程序，它们允许开发者对图形管线的各个阶段进行编程控制，以实现复杂的视觉效果和实时渲染功能。这里主要借鉴的openGL中文手册,唯一不同的是,测试示例和代码改成了Qt+OpenGL,而并非采用原生的C++版本的测试调用参考此处GLSL原生C++版本GLSL使用请点击此处。
GLSL-Shader-Editor:SFGP GLSL (3.30) 着色器编辑器
06-24
GLSL-Shader-Editor 是一个专门针对GLSL (OpenGL Shading Language) 3.30版本的着色器编辑器，旨在为开发者提供一个高效、功能丰富的开发环境。GLSL是一种编程语言，用于编写图形处理器单元(GPU)上的程序，以实现...
shaderlib:使用Spring Boot和React来存储和显示glsl着色器的School项目
03-29
在Shaderlib项目中，用户可以浏览和学习各种GLSL着色器，从而提升他们的图形编程技能。 项目结构通常包括以下部分： 1. **后端**：Spring Boot应用，包含RESTful API接口，用于处理着色器的增删改查请求。可能的...
qml-glsl-coder：基于Qt QML的GLSL片段着色器的实时编辑器
02-04
**qml-glsl-coder：基于Qt QML的GLSL片段着色器...总之，`qml-glsl-coder`是Qt QML开发者探索和实践GPU编程的有力工具，它简化了GLSL着色器的开发流程，提高了开发效率，同时也提供了学习和研究现代图形编程的平台。
glsl着色器学习 （十二）平移
最新发布
localhost
09-04 151
平移矩阵
glsl着色器学习（四）
localhost
09-03 391
前面讲到已经创建了，链接到顶点着色器和片段着色器，接着继续。
glsl着色器学习（九）屏幕像素空间和设置颜色
localhost
09-04 188
再改变一下postions三个顶点的值，因为绘制二维图形，所以只需要3组共6个顶点。运行Study.html，不出意外，每次刷新页面，都会出现不同的颜色。，使用的是裁剪空间进行绘制，这篇文章使用屏幕像素空间的坐标进行绘制。运行Study.html。得到如图所示，如果改变颜色下面讲解。设置颜色值，这里才用随机值产生颜色R/G/B/A四个分量。从着色器程序中获取u_resolution的位置。找到u_color在着色器程序中的位置。上一篇的顶点着色器大概是这样子的。改变颜色需要修改片元着色器。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

superTiger_y

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值