【WebGL】《WebGL编程指南》读书笔记——第5章

2024-04-02 08:47:16

一、前言

终于到了第五章了，貌似开始越来越复杂了。

二、正文

Example1：使用一个缓冲区去赋值多个顶点数据（包含坐标及点大小）

function initVertexBuffers(gl) {

  var verticesSizes = new Float32Array([

     0.0,  0.5,  10.0,

    -0.5, -0.5,  20.0,

     0.5, -0.5,  30.0

  ]);

  var n = ;

  var vertexSizeBuffer = gl.createBuffer();

  if (!vertexSizeBuffer) {

    console.log('Failed to create the buffer object');

    return -;

  }

  gl.bindBuffer(gl.ARRAY_BUFFER, vertexSizeBuffer);

  gl.bufferData(gl.ARRAY_BUFFER, verticesSizes, gl.STATIC_DRAW);

  var FSIZE = verticesSizes.BYTES_PER_ELEMENT;

  var a_Position = gl.getAttribLocation(gl.program, 'a_Position');

  if (a_Position < ) {

    console.log('Failed to get the storage location of a_Position');

    return -;

  }

  gl.vertexAttribPointer(a_Position, , gl.FLOAT, false, FSIZE * , );

  gl.enableVertexAttribArray(a_Position);  

  var a_PointSize = gl.getAttribLocation(gl.program, 'a_PointSize');

  if(a_PointSize < ) {

    console.log('Failed to get the storage location of a_PointSize');

    return -;

  }

  gl.vertexAttribPointer(a_PointSize, , gl.FLOAT, false, FSIZE * , FSIZE * );

  gl.enableVertexAttribArray(a_PointSize);

  gl.bindBuffer(gl.ARRAY_BUFFER, null);

  return n;

}

Example2：使用varying变量从顶点着色器传输颜色信息给片元着色器

var VSHADER_SOURCE =

  'attribute vec4 a_Position;\n' +

  'attribute vec4 a_Color;\n' +  //attribute变量

  'varying vec4 v_Color;\n' +   // varying变量

  'void main() {\n' +

  '  gl_Position = a_Position;\n' +

  '  gl_PointSize = 10.0;\n' +

  '  v_Color = a_Color;\n' +  // 将attribute变量赋给varying变量

  '}\n';

var FSHADER_SOURCE =

  '#ifdef GL_ES\n' +

  'precision mediump float;\n' +

  '#endif GL_ES\n' +

  'varying vec4 v_Color;\n' +    //同名varying变量

  'void main() {\n' +

  '  gl_FragColor = v_Color;\n' + //！！！！！

  '}\n';

function initVertexBuffers(gl) {

  var verticesColors = new Float32Array([

    // 顶点坐标 与 颜色

     0.0,  0.5,  1.0,  0.0,  0.0,

    -0.5, -0.5,  0.0,  1.0,  0.0,

     0.5, -0.5,  0.0,  0.0,  1.0,

  ]);

  var n = ;

  var vertexColorBuffer = gl.createBuffer();

  if (!vertexColorBuffer) {

    console.log('Failed to create the buffer object');

    return false;

  }

  gl.bindBuffer(gl.ARRAY_BUFFER, vertexColorBuffer);

  gl.bufferData(gl.ARRAY_BUFFER, verticesColors, gl.STATIC_DRAW);

  var FSIZE = verticesColors.BYTES_PER_ELEMENT;

  var a_Position = gl.getAttribLocation(gl.program, 'a_Position');

  if (a_Position < ) {

    console.log('Failed to get the storage location of a_Position');

    return -;

  }

  gl.vertexAttribPointer(a_Position, , gl.FLOAT, false, FSIZE * , );

  gl.enableVertexAttribArray(a_Position);

  var a_Color = gl.getAttribLocation(gl.program, 'a_Color');

  if(a_Color < ) {

    console.log('Failed to get the storage location of a_Color');

    return -;

  }

  gl.vertexAttribPointer(a_Color, , gl.FLOAT, false, FSIZE * , FSIZE * );

  gl.enableVertexAttribArray(a_Color);  

  return n;

}

Example3：纹理（将图片的纹理赋给webgl对象）

var VSHADER_SOURCE =

  'attribute vec4 a_Position;\n' +

  'attribute vec2 a_TexCoord;\n' +  // 声明一个attribute变量

  'varying vec2 v_TexCoord;\n' +    // 声明一个varying变量

  'void main() {\n' +

  '  gl_Position = a_Position;\n' +

  '  v_TexCoord = a_TexCoord;\n' +  // attribute变量赋给varying变量

  '}\n';

var FSHADER_SOURCE =

  '#ifdef GL_ES\n' +

  'precision mediump float;\n' +

  '#endif\n' +

  'uniform sampler2D u_Sampler;\n' +

  'varying vec2 v_TexCoord;\n' +

  'void main() {\n' +

  // texture2D(sampler2D sampler, vec2 coord)
  // (纹理单元编号，纹理坐标) 这里是赋值的关键

  '  gl_FragColor = texture2D(u_Sampler, v_TexCoord);\n' +

  '}\n';

function main() {

  var canvas = document.getElementById('webgl');

  var gl = getWebGLContext(canvas);

  if (!gl) {

    console.log('Failed to get the rendering context for WebGL');

    return;

  }

  if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) {

    console.log('Failed to intialize shaders.');

    return;

  }

  // 设置顶点缓存

  var n = initVertexBuffers(gl);

  if (n < ) {

    console.log('Failed to set the vertex information');

    return;

  }

  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([

    //webgl顶点坐标, 纹理坐标相应点

    -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 = ; 
  // 创建缓存区对象

  var vertexTexCoordBuffer = gl.createBuffer();

  if (!vertexTexCoordBuffer) {

    console.log('Failed to create the buffer object');

    return -;

  }

  gl.bindBuffer(gl.ARRAY_BUFFER, vertexTexCoordBuffer);

  gl.bufferData(gl.ARRAY_BUFFER, verticesTexCoords, gl.STATIC_DRAW);

  var FSIZE = verticesTexCoords.BYTES_PER_ELEMENT;

  var a_Position = gl.getAttribLocation(gl.program, 'a_Position');

  if (a_Position < ) {

    console.log('Failed to get the storage location of a_Position');

    return -;

  }

  gl.vertexAttribPointer(a_Position, , gl.FLOAT, false, FSIZE * , );

  gl.enableVertexAttribArray(a_Position);  

  // 将纹理坐标分配给该存储位置并开启

  var a_TexCoord = gl.getAttribLocation(gl.program, 'a_TexCoord');

  if (a_TexCoord < ) {

    console.log('Failed to get the storage location of a_TexCoord');

    return -;

  }

  gl.vertexAttribPointer(a_TexCoord, , gl.FLOAT, false, FSIZE * , FSIZE * );

  gl.enableVertexAttribArray(a_TexCoord);  

  return n;

}

function initTextures(gl, n) {
 // Step1：设置纹理对象

  var texture = gl.createTexture();

  if (!texture) {

    console.log('Failed to create the texture object');

    return false;

  }

  // Step2: 获取u_Sampler（取样器）存储位置

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

  if (!u_Sampler) {console.log('Failed to get the storage location of u_Sampler');

    return false;

  }

  // Step3: 创建图片对象

  var image = new Image();

  if (!image) {console.log('Failed to create the image object');

    return false;

  }

  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) {
  // Step1：对图像进行y轴反转

  gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, );  

  // Step2: 开启0号纹理单元（textunit0~7）

  gl.activeTexture(gl.TEXTURE0);

  // Step3: 绑定纹理对象（target，texture）   
  // target可以是：gl.TEXTURE或gl.TEXTURE_CUBE_MAP

  gl.bindTexture(gl.TEXTURE_2D, texture);

  // Step4: 设置纹理参数(target,pname,param)
  // gl.TEXTURE_MAG_FILTER (纹理放大) 默认值： gl.LINEAR
  // gl.TEXTURE_MIN_FILTER (纹理缩小) 默认值： gl.NEAREST_MIPMAP_LINEAR
  // gl.TEXTURE_WRAP_S (纹理水平填充)  默认值： gl.REPEAT(平铺式) 
  //                                         gl.MIRRORED_REPEAT (镜像对称)
  //                                         gl.CLAMP_TO_EDGE (使用纹理图像边缘值)
  // gl.TEXTURE_WRAP_T (纹理垂直填充)  默认值： gl.REPEAT
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);

  // Step5：配置纹理图片(target,level,internalformat,format,type,image)
  // level: 0
  // internalformat：图像的内部格式
  // format: 纹理数据的格式，必须与internalformat一致
  // type: 纹理数据的类型
  // image：包含纹理的图像的image对象

  gl.texImage2D(gl.TEXTURE_2D, , gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, image); 

  // Step6：将0号纹理传递至取样器

  gl.uniform1i(u_Sampler, );

  gl.clear(gl.COLOR_BUFFER_BIT);

  gl.drawArrays(gl.TRIANGLE_STRIP, , n);

}

三、结尾

以上代码均来自《WebGL编程指南》。

码农公寓

相关文章