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

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

新老客户大回馈,云服务器低至5折

一、前言

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

 

二、正文

        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); }

 

三、结尾

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

 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:es6 语法 (类与对象)

下一篇:es6 语法 (Promise)