设为首页 加入收藏

TOP

【WebGL】《WebGL编程指南》读书笔记——第三章
2017-10-16 18:19:16 】 浏览:873
Tags:WebGL 编程 指南 读书 笔记 第三章

一、前言

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

二、正文

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

 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; // 顶点个数 //创建缓冲区对象 var vertexBuffer = gl.createBuffer(); if (!vertexBuffer) { console.log('Failed to create the buffer object'); return -1; }
// 绑定缓冲区对象(Buffer类型,Buffer对象)
// gl.ARRAY_BUFFER 缓存区对象包含了顶点的数据
// gl.ELEMENT_ARRAY_BUFFER 缓存区对象包含了顶点的索引值
  gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);

// 向缓冲区对象写入数据(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;
}

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

// 开启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章的读书笔记。


编程开发网
】【打印繁体】【投稿】【收藏】 【推荐】【举报】【评论】 【关闭】 【返回顶部
上一篇前端HTML以及HTML5(基本标签) 下一篇Javascript 之 跨域

评论

帐  号: 密码: (新用户注册)
验 证 码:
表  情:
内  容:

最新文章

热门文章

C 语言

C++基础

windows编程基础

5580
dref=0
5580
515v s276e="text-align:center;font-size:12px;color:#FFF;width:44px;height:20px;overflow:hidden;" id="DiggDo_1>
VC++中list::list抵械现<体所占空间大小
d515v 0
5580
2div>3509e="text-align:center;font-size:12px;color:#FFF;width:44px;height:20px;overflow:hidden;" id="DiggDo_1>
顶一下
5580430le="text-align:center;font-size:12px;color:#FFF;width:44px;height:20px;overflow:hidden;" id="DiggDo_119123">/www.cppentry.com/do/job.php?job=digg&type=vote&id=167630" target="C5356"hidden;" id="DiggDo_1>5356"he:12px;color:#FFF;">顶一下
5580390le="text-align:center;font-size:12px;color:#FFF;width:44px;height:20px;overflow:hidden;" id="DiggDo_119123">顶一下
<5div>

windows编程基础C/C++面试题目

1
9026p:/939e="text-align:center;font-size:12px;color:#FFF;width:44px;height:20px;overflow:hidden;" id="DiggDo_1>
顶一下
C++自定义MyStriLinux、操作..