webgl学习笔记三

2019独角兽企业重金招聘Python工程师标准>>>

##1.矩阵变换库 理解矩阵变换的原理即可，在实际开发中，最好借用矩阵变换库，以我看的这本书中的矩阵库为例，它提供以下方法

##2.复合变换 我们将三角形先平移再旋转

特意翻了一下大学的线性代数，矩阵的乘法是符合乘法的结合律和分配律的。最后，不同变换矩阵相乘得到的结果就是复合矩阵，这样的变换称之为模型变换或者建模变换。

##3.修改多种值 前面我们只是通过缓存修改顶点的坐标值，如果同时修改坐标和尺寸，应该怎样做？有两种方案：

• 建立多个缓存对象，依次传递不同的数据。
• 通过一个缓存对象传递多种值。

简单考虑一下，方案二肯定性能更高。通过vertexAttribPointer()方法实现：

    var verticesSizes = new Float32Array([
    // Coordinate and size of points
     0.0,  0.5,  10.0,  // the 1st point
    -0.5, -0.5,  20.0,  // the 2nd point
     0.5, -0.5,  30.0   // the 3rd point
  ]);
//position
  gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, FSIZE * 3, 0);
//size
  gl.vertexAttribPointer(a_PointSize, 1, gl.FLOAT, false, FSIZE * 3, FSIZE * 2);

##4.修改颜色值 片元着色器只能使用uniform(不变的)变量和varying(变化的)变量，而不能使用attribute变量。因此我们需要将颜色值传入到顶点着色器中，然后通过varying变量传递给片元着色器。在webgl中，如果顶点着色器和片元着色器中都定义有命名和类型都相同的varying变量，那么顶点着色器赋值给varying变量的值会自动传入到片元着色器中。

##5.光栅化

图形装配：将孤立的点装配成几何图形，几何图形的形状由gl.drawArrays()函数第一个参数决定。

光栅化：将装配好的几何图形转化为片元。

片元着色器的处理是逐片元的，经过片元着色器光栅化之后生成的片元是带有位置信息的，可以通过片元着色的内置变量来访问片元的坐标，

##6.彩色的图形 当为不同顶点设置不同颜色之后，产生的图形是渐变的，彩色的。这是因为我们在顶点着色器中定义的varying变量在传给片元着色器之前会进行内插值。将颜色值和像素的坐标联系在了一起。

##7.纹理 除了给几何图形赋予不同颜色之外，还可以给图形贴图，这样的图片称之为纹理。纹理的像素值成为纹素。

###7.1纹理坐标 纹理坐标是纹理图像上的坐标，通过纹理坐标我们可以在图像上获得纹素颜色。为了和xy坐标区分，webgl中纹理坐标为st坐标系统（也有很多地方成为uv坐标）。如下图，纹理坐标与纹理自身大小无关。

###7.2纹理贴图 为了将纹理贴到几何图形上，我们需要建立映射关系，如图：

var verticesTexCoords = new Float32Array([
    // Vertex coordinates, texture coordinate
    -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,
  ]);

###7.3配置和加载纹理

• 创建纹理对象

  var texture = gl.createTexture();   // Create a texture object

删除时可以使用gl.deleteTexture();

• 获取取样器的存储位置，该变量用来接收纹理图像

  var u_Sampler = gl.getUniformLocation(gl.program, 'u_Sampler');

• 加载图像

var image = new Image();  // Create the image object
  // Register the event handler to be called on loading an image
  image.onload = function(){ loadTexture(gl, n, texture, u_Sampler, image); };
  // Tell the browser to load an image
  image.src = '../resources/sky.jpg';

• 纹理进行y轴翻转 因为图片的y轴和纹理坐标的t轴是相反的，因此在使用之前，需要进行y轴翻转

  gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, 1); // Flip the image's y axis

该函数的具体用法，见pixelStorei

• 激活纹理单元 webgl通过一种纹理单元的机制来使用多张纹理，每个纹理单元有一个单元号来管理一张纹理。系统支持的纹理单元数量和硬件以及浏览器的webgl实现有关。但是默认至少都是有8个纹理单元的。内置变量TEXTURE0，TEXTURE1,....TEXTURE7各自表示一个纹理单元

// Enable texture unit0
  gl.activeTexture(gl.TEXTURE0);

• 绑定纹理对象

// Bind the texture object to the target
  gl.bindTexture(gl.TEXTURE_2D, texture);

• 配置参数

转载于:https://my.oschina.net/xiaoweibaer/blog/829780