编程语言
首页 > 编程语言> > 【笔记】WebGL编程指南学习（4）

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

作者：互联网

WebGL编程指南学习（4）

4. 最后一块拼图

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

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

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

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

  1. 创建缓冲区对象；
  2. 将缓冲区对象绑定到target上；
  3. 将顶点坐标数据写入缓冲区对象；
  4. 将缓冲区对象分配给对应的attribute变量
  5. 开启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://www.icode9.com/i/ll/?i=45c69ad2915a493ea0d92b43f705b617.png?,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA55WM5piO5Z-O,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center)

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

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

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

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

交错组织（iterleaving）

// 顶点坐标和点的尺寸
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)

4.1.2 第二个例程：修改颜色

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

在这里插入图片描述

要点

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

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

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

答：很多细节被掩盖了

在这里插入图片描述

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

在这里插入图片描述

4.2.2 调用片元着色器

在这里插入图片描述

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 为图形贴上图像

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

4.3.1 WebGL中纹理映射的步骤

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

说明

纹理坐标

4.3.2 例程：纹理映射

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';

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）

为WebGL配置纹理（loadTexture）

在这里插入图片描述

使用WebGL加载图像

标签：WebGL,编程,笔记,纹理,片元,坐标,顶点,gl,着色器
来源： https://blog.csdn.net/wangxiaochaun/article/details/123623119