【笔记】WebGL编程指南学习（4）

最新推荐文章于 2024-03-21 20:19:47 发布

界明城

最新推荐文章于 2024-03-21 20:19:47 发布

阅读量1.3k

点赞数

分类专栏：计算机图形学文章标签：拓扑学图形渲染 javascript 算法

本文链接：https://blog.csdn.net/wangxiaochaun/article/details/123623119

版权

计算机图形学专栏收录该内容

21 篇文章 28 订阅

订阅专栏

WebGL编程指南学习（4）

4. 最后一块拼图

在学会处理顶点，包括处理顶点的坐标、Javascript和WebGL管线的数据通信、坐标变换之后，还需要处理顶点的其他数据——如颜色等。此外，还需要处理将图像（或纹理）映射到图形或三维对象表面上。这就是WebGL的最后一块拼图。

将顶点的其他（非坐标）数据（如颜色）传入顶点着色器
发生在顶点着色器和片元着色器之间的从图形到片元的转化，又称为图元光栅化
将图像（或称纹理）映射到图形或三维对象的表面上

4.1 将非坐标数据传入顶点着色器

4.1.1 第一个例程：绘制不同尺寸的点

回顾：顶点坐标传入着色器的仪式感

创建缓冲区对象；
将缓冲区对象绑定到target上；
将顶点坐标数据写入缓冲区对象；
将缓冲区对象分配给对应的attribute变量
开启attribute变量

顶点相关数据送入顶点着色器的步骤是一模一样的

注意：WebGL系统创建的缓冲区对象是不同的，然后分配给不同的attribute变量

新加代码如下：

    // 将顶点size写入顶点着色器
    gl.bindBuffer(gl.ARRAY_BUFFER, sizeBuffer);
    gl.bufferData(gl.ARRAY_BUFFER, sizes, gl.STATIC_DRAW);
    var a_PointSize = gl.getAttribLocation(gl.program, 'a_PointSize');
    gl.vertexAttribPointer(a_PointSize, 1, gl.FLOAT, false, 0, 0);
    gl.enableVertexAttribArray(a_PointSize);

![在这里插入图片描述](https://img-blog.csdnimg.cn/45c69ad2915a493ea0d92b43f705b617.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA55WM5piO5Z-O,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center)

问题：使用多个缓冲区对象传递多种数据，适合数据量不大的情况。当顶点数据很多时，有没有高效的办法？

答：可以把顶点的所有相关数据打包到同一个缓冲区对象中

再问：那打包到一起以后，怎么将它们分配给不同的attribute啊？

答：有办法的，而且不止一种办法

交错组织（iterleaving）

首先，顶点坐标和点的尺寸统一写进结构化数组verticesSizes里
然后，通过BYTES_PER_ELEMENT获得数组每个元素的大小，方面后续按地址查找
再次，活用vertexAttribPointer里的stride（步长）和offset（步长内的偏移），正确找到不同类型的数据（坐标、点的尺寸）
其他与正常写法相同

// 顶点坐标和点的尺寸
var verticesSizes = new Floay32Array([
  0.0, 0.5, 10.0 // 第一个点
  -0.5, -0.5, 20.0 // 第二个点
  0.5, -0.5, 30.0 // 第三个点
])

// 获取结构化数组元素的大小
var FSIZE = verticesSizes.BYTES_PER_ELEMENT;
...
// 获取a_Position的存储位置，分配缓冲区并开启
var a_Position = gl.getAttribLocation(gl.program, 'a_Position');
...
gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, FSIZE * 3, 0);
gl.enableVertexAttribArray(a_Position);
// 步长为3（3个float，其中坐标是第一个，所以offset是0
// 获取a_PointSize的存储位置，分配缓冲区并开启
var a_PointSize = gl.getAttribLocation(gl.program, 'a_PointSize');
...
gl.vertexAttribPointer(a_PointSize, 1, gl.FLOAT, false, FSIZE * 3, FSIZE * 2)
gl.enableVertexAttribArray(a_PointSize);
// 步长为3， offset是当前步长内偏移两个元素

gl.vertexAttribPointer(location, size, type, normalized, stride, offset)

size: 指定缓冲区中每个顶点的分量个数（1到4）
normalized：是否将非浮点数归一化
stride：指定相邻两个顶点间的字节数，默认为0
offset：指定缓冲区对象中的偏移量（以字节为单位）

4.1.2 第二个例程：修改颜色

方法和前面一样，只不过将顶点尺寸数据改为顶点颜色
顶点的颜色数据从JavaScript传给顶点着色器中的attribute变量，但真正影响绘制颜色的gl_FragColor在片元着色器中

顶点着色器使用varying变量向片元着色器传输数据（uniform变量也可以）

在这里插入图片描述

要点

顶点着色器只能接受attribute，所以需要转运一下，把attribute转给varying
只要顶点着色器和片元着色器里的varying变量名一样，就算是对上了
varying变量只能是float的（以及相关的veci，mati）

4.2 顶点着色器和片元着色器之间的数据传输细节

4.2.1 几何形状的装配和光栅化

提问：就给了3个点的坐标，怎么就变成了三角形呢？三角形的内部像素是怎么填充的？

答：很多细节被掩盖了

在这里插入图片描述

在顶点着色器和片元着色器中间，还有两个步骤：图形装备和光栅化过程

图形装配：将孤立的顶点坐标装配成几何图形，几何图形的类别由gl.drawArray()的第一个参数决定；
光栅化：将装配好的几何图形转化为片元

在这里插入图片描述

gl_Position实际上是几何图形装配（geometric shape assembly，或图元装配，primitive assembly process）的输入，装配输出数据叫图元（primitives）
片元数目就是图元最终在屏幕上所覆盖的像素数，是光栅化过程决定的

4.2.2 调用片元着色器

光栅化结束后，程序就开始逐片元地调用片元着色器。假设光栅化最终决定图片覆盖了屏幕上的10个像素，那么片元着色器就要被调用10次，每调用一次，处理一个片元
对每个片元，片元着色器计算该片元的颜色，并写入颜色缓冲区。所有片元被处理完成后，颜色缓冲区输出到浏览器

在这里插入图片描述

光栅化过程生成的片元都是带有坐标信息的，调用片元着色器时，这些坐标信息也随着片元传了进去。可以通过片元着色器中的内置变量来访问片元的坐标

vec4 gl_FragCoord // 该内置变量的第1个和第2个分量表示片元在<canvas>坐标系统（窗口）中的坐标值

// 使用gl_FragCoord参与颜色计算
// Fragment Shader
var FSHADER_SOURCE = 
'precision mediump float;\n' +
'uniform float u_Width;\n' +
'uniform float u_Height;\n' +
'void main(){\n' +
'   gl_FragColor = vec4(gl_FragCoord/u_Width, 0.0, gl_FragCoord.y/u_Height, 1.0);\n' +
'}\n';

// 从JavaScript传数据
    var u_Width = gl.getUniformLocation(gl.program, 'u_Width');
    ...
    var u_Height = gl.getUniformLocation(gl.program, 'u_Height');
    ...
    // 传递u_Width和u_Height
    gl.uniform1f(u_Width, gl.drawingBufferWidth);
    gl.uniform1f(u_Height, gl.drawingBufferHeight);

在这里插入图片描述

4.2.3 varying变量的作用和内插过程

提问：为什么把v_Color赋给每个顶点，最后得到的三角形是渐变的呢？

回答：我们把顶点的颜色付给了顶点着色器中的varying变量，v_Color，它的值被传给片元着色器中的同名、同类型的变量

但是，更准确地说，顶点着色器中的v_Color在传入片元着色器前，经过了内插过程。因此，片元着色器中的v_Color变量和顶点着色器的v_Color实际上并不是一回事——它是变化的（varying）！

4.3 为图形贴上图像

为每个小图元设置不同的颜色和位置，可以模拟真实的场景——但是太繁琐了！

使用纹理映射，可以简单地将一张图像映射到一个几何图形的表面上去。此时，这张图片又可称为纹理图像或纹理
纹理映射，就是根据纹理图像，为光栅化后的每个片元涂上合适的颜色
组成纹理图像的像素又可称为纹素（texels）

4.3.1 WebGL中纹理映射的步骤

准备好映射到几何图形上的纹理图像
为几何图形配置纹理映射的方式
加载纹理图像，对其进行一些配置，以在WebGL中使用它
在片元着色器中将相应的纹素从纹理中抽取出来，并将纹素的颜色赋给片元

说明

第2步指定映射方式，就是确定“几何图形的某个片元”的颜色如何取决于“纹理图像中哪个（或哪几个）像素”的问题。利用图形的顶点坐标来确定屏幕上哪部分被纹理图像覆盖；利用纹理坐标确定纹理图像的哪部分覆盖到几何图形上

纹理坐标

WebGL的纹理坐标是二维的（st坐标系统），s轴水平向右，t轴垂直向上。左下角（0.0，0.0）；右下角（1.0，0.0）；右上角（1.0，1.0）
通过纹理图像的纹理坐标与几何形体顶点坐标间的映射关系，确定怎样将纹理图像贴上去

4.3.2 例程：纹理映射

顶点着色器：varying变量，TexCoord，传递纹理坐标

var VSHADER_SOURCE = 
'attribute vec4 a_Position;\n' +
'attribute vec2 a_TexCoord;\n' +
'varying vec2 v_TexCoord;\n' +
'void main(){\n' +
'   gl_Position = a_Position;\n' +
'   v_TexCoord = a_TexCoord;\n' +
'}\n';

片元着色器：接收TexCoord，还有纹理采样器u_Sampler，调用texture2D从纹理图像抽取纹素颜色，赋给当前片元

var FSHADER_SOURCE = 
'precision mediump float;\n' +
'uniform sampler2D u_Sampler;\n' +
'varying vec2 v_TexCoord;\n' +
'void main(){\n' +
'   gl_FragColor = texture2D(u_Sampler, v_TexCoord);\n' +
'}\n';

设置纹理坐标、创建顶点缓冲区并分配属性

function main(){
...
    var n = initVertexBuffers(gl);
...
    gl.clearColor(0.0, 0.0, 0.0, 1.0);

    // 设置纹理
    if (!initTextures(gl, n)){
        console.log('Failed to intialize the texture.');
        return;
    }
}

function initVertexBuffers(gl){
    var verticesTexCoords = new Float32Array([
        // 顶点坐标，纹理坐标
        -0.5, 0.5, 0.0, 1.0,
        -0.5, -0.5, 0.0, 0.0,
        0.5, 0.5, 1.0, 1.0,
        0.5, -0.5, 1.0, 0.0,
    ]);
    var n = 4;

    // 创建VBO
...
    // 传入顶点着色器
    var FSIZE = verticesTexCoords.BYTES_PER_ELEMENT;
    var a_Position = gl.getAttribLocation(gl.program, 'a_Position');
...
    gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, FSIZE * 4, 0);
    gl.enableVertexAttribArray(a_Position);
    var a_TexCoord = gl.getAttribLocation(gl.program, 'a_TexCoord');
...
    gl.vertexAttribPointer(a_TexCoord, 2, gl.FLOAT, false, FSIZE * 4, FSIZE * 2);
    gl.enableVertexAttribArray(a_TexCoord);

    return n;
}

准备待加载的纹理图像，并命令浏览器读取它

function initTextures(gl, n){
    var texture = gl.createTexture(); // 创建纹理对象
...
    // 找到u_Sampler
    var u_Sampler = gl.getUniformLocation(gl.program, 'u_Sampler');
...
    // 创建图像对象
    var image = new Image();
...
    // 注册事件处理器，响应图像加载调用
    image.onload = function(){loadTexture(gl, n, texture, u_Sampler, image);};
    // 告诉浏览器加载图像
    image.src = '../resources/sky.jpg';

    return true;
}

监听纹理图像的加载时间，加载纹理图像

function loadTexture(gl, n, texture, u_Sampler, image){
    gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, 1); // 沿着y轴翻转图像
    // 启用纹理单元0
    gl.activeTexture(gl.TEXTURE0);
    // 绑定纹理对象
    gl.bindTexture(gl.TEXTURE_2D, texture);
    
    // 设置纹理参数
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
    // 设置纹理图像
    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, image);

    // 设置纹理单元0的采样器
    gl.uniform1i(u_Sampler, 0);

...
}

设置纹理坐标（initVertexBuffers）

没啥好说的

配置和加载纹理（initTextures）

gl.createTexture()创建纹理对象；纹理对象管理WebGL系统中的纹理
u_Sampler（取样器，采样器），用来接收纹理图像
与OpenGL不同，WebGL加载纹理图像是异步的。浏览器发起加载图请求，与图像加载这两个步骤是异步的

为WebGL配置纹理（loadTexture）

使用纹理前，需要给它沿着Y轴翻转一下，因为WebGL纹理坐标系统的t轴的方向和传统图片的坐标系统的Y轴是反的->gl.pixelStorei(pname, param)
激活纹理单元gl.activeTexture()。WebGL通过纹理单元机制同时使用多个纹理
- 系统支持的纹理单元个数取决于硬件和浏览器的WebGL实现。默认至少支持8个纹理单元，gl.TEXTURE0...gl.TEXTURE7
绑定纹理对象，WebGL支持两种类型的纹理：二维纹理gl.TEXTURE_2D和立方体纹理gl.TEXTURE_CUBE_MAP ; 注意gl.bindTexture 做了两件事，开启纹理对象，以及将纹理对象绑定到纹理单元上。所以纹理缓冲这里没有enable函数
配置纹理对象的参数gl.texParameteri(target, pname, param)
- 通过pname指定4中纹理参数:
  - gl.TEXTURE_MAG_FILTER：放大方法，当纹理绘制范围比纹理大时，如何填充空隙
  - gl.TEXTURE_MIN_FILTER：缩小方法，当纹理绘制范围比纹理小时，如何提出像素
  - gl.TEXTURE_WRAP_S|gl.TEXTURE_WRAP_T：水平|垂直填充方法，如何对纹理图像左右侧|上下方区域进行填充
- 通过param指定具体方式
  - 可以赋给放大和缩小方法的参数：gl.LINEAR 线性加权；gl.NEAREST 最近邻像素的颜色值
  - 可以赋给水平|垂直填充方法的参数：gl.REPEAT 平铺重复; gl.MIRRORED_REPEAR 镜像对称式的重复；gl.CLAMP_TO_EDGE 使用纹理图像边缘值拉伸
  - 缩小方法有一种特殊的参数：gl.NEAREST_MINMAP_LINEAR，构造金字塔纹理
将纹理图像分配给纹理对象gl.texImage2D(target, level, internalformat, format, type, image)
- target TEXTURE_2D还是TEXTURE_CUBE_MAP
- level 金字塔纹理的层级
- internalformat 图像的内部格式
  - RGB，对jpg格式；RGBA，对PNG格式，LUMINANCE，灰度图像；还有其他
- format 纹理数据的格式，必须使用与internalformat相同的值
- type 纹理数据的类型
将纹理单元传递给片元着色器gl.uniform1i()
- 必须将着色器中表示纹理对象的uniform变量声明为一种特殊的、专为纹理对象的数据类型（sampler2D|samplerCube）
- initTexture()将u_Sampler传给了loadTexture()
- 必须通过指定纹理单元编号将纹理对象传给u_Sampler，第二个参数指定了纹理单元编号
从顶点着色器向片元着色器传输纹理坐标
- 通过使用varying变量，传递的纹理坐标是内插后的
- 片元着色器根据纹理坐标，从纹理图像（u_Sampler）抽取出纹素的颜色，然后涂到当前的片元上
在片元着色器中获取纹理像素颜色（vec4 texture2D(sampler2D u_Sampler, vec 2 v_TexCoord))
- u_Sampler, 指定纹理单元编号
- v_TexCoord, 指定纹理坐标
- 返回值是纹理坐标处像素的颜色，格式由internalformat参数决定

在这里插入图片描述

使用WebGL加载图像

使用WebGL加载本地图像有问题，所以尝试加载在线图像
经过研究，发现在线图像存在跨域请求（CrossDomain）问题，需要图片网站授权访问
参考文献：WebGLFundamentals<-- 宝藏网站！

界明城

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
【笔记】WebGL编程指南学习（4）

WebGL编程指南学习（4）4. 最后一块拼图在学会处理顶点，包括处理顶点的坐标、Javascript和WebGL管线的数据通信、坐标变换之后，还需要处理顶点的其他数据——如颜色等。此外，还需要处理将图像（或纹理）映射到图形或三维对象表面上。这就是WebGL的最后一块拼图。将顶点的其他（非坐标）数据（如颜色）传入顶点着色器发生在顶点着色器和片元着色器之间的从图形到片元的转化，又称为图元光栅化将图像（或称纹理）映射到图形或三维对象的表面上4.1 将非坐标数据传入顶点着色器4.1.1 第一个例
复制链接

扫一扫