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

2018-06-24 00:37:14来源：未知阅读 ()

一、前言

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

二、正文

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 = 3; 
  var vertexSizeBuffer = gl.createBuffer();  
  if (!vertexSizeBuffer) {
    console.log('Failed to create the buffer object');
    return -1;
  }

  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 < 0) {
    console.log('Failed to get the storage location of a_Position');
    return -1;
  }
  gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, FSIZE * 3, 0);
  gl.enableVertexAttribArray(a_Position);  


  var a_PointSize = gl.getAttribLocation(gl.program, 'a_PointSize');
  if(a_PointSize < 0) {
    console.log('Failed to get the storage location of a_PointSize');
    return -1;
  }
  gl.vertexAttribPointer(a_PointSize, 1, gl.FLOAT, false, FSIZE * 3, FSIZE * 2);
  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 = 3; 
  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 < 0) {
    console.log('Failed to get the storage location of a_Position');
    return -1;
  }
  gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, FSIZE * 5, 0);
  gl.enableVertexAttribArray(a_Position);  
  var a_Color = gl.getAttribLocation(gl.program, 'a_Color');
  if(a_Color < 0) {
    console.log('Failed to get the storage location of a_Color');
    return -1;
  }
  gl.vertexAttribPointer(a_Color, 3, gl.FLOAT, false, FSIZE * 5, FSIZE * 2);
  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 < 0) {
    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 = 4; 
  // 创建缓存区对象
  var vertexTexCoordBuffer = gl.createBuffer();
  if (!vertexTexCoordBuffer) {
    console.log('Failed to create the buffer object');
    return -1;
  }

  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 < 0) {
    console.log('Failed to get the storage location of a_Position');
    return -1;
  }
  gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, FSIZE * 4, 0);
  gl.enableVertexAttribArray(a_Position);  


  // 将纹理坐标分配给该存储位置并开启
  var a_TexCoord = gl.getAttribLocation(gl.program, 'a_TexCoord');
  if (a_TexCoord < 0) {
    console.log('Failed to get the storage location of a_TexCoord');
    return -1;
  }  
  gl.vertexAttribPointer(a_TexCoord, 2, gl.FLOAT, false, FSIZE * 4, FSIZE * 2);
  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, 1);  
 
  // 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, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, image); 

  // Step6：将0号纹理传递至取样器
  gl.uniform1i(u_Sampler, 0);
  
  gl.clear(gl.COLOR_BUFFER_BIT);  
  gl.drawArrays(gl.TRIANGLE_STRIP, 0, n); 
}