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

2018-06-24 00:30:51来源:未知 阅读 ()

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

一、前言

        根据前面一章的内容,继续第三章的学习。

二、正文

      一起绘制三个点,这里要使用到缓存了

 var n = initVertexBuffers(gl);  //返回绘制点的个数 n
  if (n < 0) {
    console.log('Failed to set the positions of the vertices');
    return;
  }

  gl.clearColor(0, 0, 0, 1);
  gl.clear(gl.COLOR_BUFFER_BIT);
  gl.drawArrays(gl.POINTS, 0, n); //(mode,first,count)
function initVertexBuffers(gl) {
  var vertices = new Float32Array([
    0.0, 0.5,   
-0.5, -0.5,
0.5, -0.5 ]); var n = 3; // 顶点个数 // Step1:创建缓冲区对象 var vertexBuffer = gl.createBuffer(); if (!vertexBuffer) { console.log('Failed to create the buffer object'); return -1; }
// Step2:绑定缓冲区对象(Buffer类型,Buffer对象)
// gl.ARRAY_BUFFER 缓存区对象包含了顶点的数据
// gl.ELEMENT_ARRAY_BUFFER 缓存区对象包含了顶点的索引值
  gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);

// Step3: 向缓冲区对象写入数据(Buffer类型,顶点数据,写入标识符)
// gl.STATIC_DRAW STATIC意味着一次修改,多次使用
// gl.STREAM_DRAW STREAM意味着一次修改,一次使用,因为每个数据帧都不同
// gl.DYNAMIC_DRAW DYNAMIC意味着多次修改,多次使用
// DRAW 意味着数据会被送往GPU进行绘制

gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
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;
}

// Step4: 将缓冲区对象分配给a_Position变量(location,size,type,normalized,stride,offset)
// location: 变量的存储位置
// size: 提供的顶点参数的个数
// type: 数据格式类型
// normalized: 是否归一化
// stride: 相邻两个顶点间的字节数
// offset:偏移值
  gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0); 

// Step5: 开启a_Position变量
gl.enableVertexAttribArray(a_Position);
return n; }

      

        gl.drawArrays(mode,first,count)中mode分为以下几种:

  1. gl.POINTS-> v0,v1,v2,......
  2. gl.LINKS-> (v0,v1) 、(v2,v3) 、(v4,v5) ... ...
  3. gl.LINE_STRIP -> (v0,v1) 、(v1,v2) 、(v2,v3) ... ...
  4. gl.TRIANGLES-> (v0,v1,v2) 、(v3,v4,v5) 、(v6,v7,v8) ... ...
  5. gl.TRIANGLES_STRIP-> (v0,v1,v2) 、(v1,v2,v3) 、(v2,v3,v4) ... ...

       

        平移矩阵:

 

        旋转矩阵:

 

        缩放矩阵:

 

var xformMatrix = new Float32Array([
     cosB, sinB, 0.0, 0.0,
    -sinB, cosB, 0.0, 0.0,
      0.0,  0.0, 1.0, 0.0,
      0.0,  0.0, 0.0, 1.0
  ]);

  var u_xformMatrix = gl.getUniformLocation(gl.program, 'u_xformMatrix');
  if (!u_xformMatrix) {
    console.log('Failed to get the storage location of u_xformMatrix');
    return;
  }

 // 用于uniform变量,将矩阵数据传给uniform矩阵变量的存储位置,
// uniformMatrix4fv(location,transpose,array)其中transpose必须为false
gl.uniformMatrix4fv(u_xformMatrix, false, xformMatrix);

 

三、结尾

       以上代码除部分注释外均来自于《WEBGL编程指南》,周日希望能更新个第4章的读书笔记。

标签:

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

上一篇:AngularJS获取项目中定义的json文件

下一篇:JS 函数作用域及变量提升那些事!