webGL的基本图元点、线、三角形

gl.drawArrays(mode, first,count)

　　first，代表从第几个点开始绘制即顶点的起始位置

　　count，代表绘制的点的数量。

　　mode，代表图元类型。

　　　　（1）gl.POINTS——点

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3.     <head>
  4.         <meta content="text/html; charset=utf-8" http-equiv="Content-Type"/>
  5.         <title>WebGL</title>
  6.     </head>
  7.     <body style="background: #000">
  8.         <canvas id="canvas"></canvas>
  9.     </body>
  10.     <!-- 顶点着色器源码 -->
  11.     <script type="shader-source" id="vertexShader">
  12.         //接收顶点坐标 (x, y)
  13.         attribute vec2 a_Position;
  14.         void main(){
  15.                gl_Position = vec4(a_Position, 0, 1);
  16.                gl_PointSize = 10.0;
  17.         }
  18.     </script>
  19.  
  20.     <!-- 片元着色器源码 -->
  21.     <script type="shader-source" id="fragmentShader">
  22.         void main(){
  23.                gl_FragColor = vec4(0.0, 0.0, 1.0, 1.0);
  24.         }
  25.     </script>
  26.     <script type="text/javascript" src="helper.js"></script>
  27.     <script type="text/javascript">
  28.  
  29.         var canvas = getCanvas('#canvas');
  30.         resizeCanvas(canvas);
  31.         var gl = getContext(canvas);
  32.         //创建顶点着色器
  33.         var vertexShader = createShaderFromScript(gl, gl.VERTEX_SHADER,'vertexShader');
  34.         //创建片元着色器
  35.         var fragmentShader = createShaderFromScript(gl, gl.FRAGMENT_SHADER,'fragmentShader');
  36.         //创建着色器程序
  37.         var program = createSimpleProgram(gl ,vertexShader, fragmentShader);
  38.         // 使用刚创建好的着色器程序。
  39.         gl.useProgram(program);
  40.  
  41.         //创建缓冲区
  42.         var positions= new Float32Array([
  43.             0.0,0.5,
  44.             0.5,0.0,
  45.             0.5,0.5,
  46.             0.0,0.9,
  47.             -0.5,0.5,
  48.             -0.5,0.0,
  49.             ]);
  50.         var a_Position = gl.getAttribLocation(program, 'a_Position')
  51.         var buffer = gl.createBuffer();
  52.         gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
  53.         gl.bufferData(gl.ARRAY_BUFFER, positions, gl.STATIC_DRAW);
  54.  
  55.         //每次取两个数据
  56.         var size = 2;
  57.         //每个数据的类型是32位浮点型
  58.         var type = gl.FLOAT;
  59.         //不需要归一化数据
  60.         var normalize = false;
  61.         // 每次迭代运行需要移动数据数 * 每个数据所占内存 到下一个数据开始点。
  62.         var stride = 0;
  63.         // 从缓冲起始位置开始读取
  64.         var offset = 0;
  65.         // 将 a_Position 变量获取数据的缓冲区指向当前绑定的 buffer。
  66.         gl.vertexAttribPointer(a_Position, size, type, normalize, stride, offset);
  67.         gl.enableVertexAttribArray(a_Position);
  68. 　　　　　　
  69.         var primitiveType = gl.POINTS;
  70.         var offset = 0;
  71.         var count = 6;
  72.         gl.drawArrays(primitiveType, offset, count);
  73.  
  74.     </script>
  75. </html>

　　　　gl.LINES——线段

　　　　　　一系列单独的线段

　　　　将上面代码的primitiveType赋值部分改为：  primitiveType = gl.LINES;

　　　　gl.LINE_STRIP——线条

　　　　　　一系列连接的线段

　　　　将上面代码的primitiveType赋值部分改为： primitiveType = gl.LINE_STRIP;

　　　　gl.LINE_LOOP——回路线条

　　　　　　一系列连接的线段，最后一个点会与开始的点相连接(vn,v0),线段会闭合

　　　　　将上面代码的primitiveType赋值部分改为：primitiveType = gl.LINE_LOOP;

　　　　gl.TRIANGLES——基本三角形

　　　　　　是一个个独立的三角形

　　　　将上面代码的primitiveType赋值部分改为： primitiveType = gl.TRIANGLES;

　　　　gl.TRIANGLE_STRIP——三角带

　　　　　　一些列条带状的三角形，前三个点构成第一个三角形，从第二个点开始的三个点构成第二个三角形

　　　　将上面代码的primitiveType赋值部分改为： primitiveType = gl.TRIANGLE_STRIP;

　　　　gl.TRIANGLE_FAN——三角扇

　　　　　　以第一个顶点作为所有三角形的顶点进行绘制的

　　　　将上面代码的primitiveType赋值部分改为： primitiveType = gl.TRIANGLE_FAN;

helper.js

  1. var random = Math.random;
  2. function randomColor() {
  3.   return {
  4.     r: random() * 255,
  5.     g: random() * 255,
  6.     b: random() * 255,
  7.     a: random() * 1
  8.   };
  9. }
  10. function $$(str) {
  11.   if (!str) return null;
  12.   if (str.startsWith('#')) {
  13.     return document.querySelector(str);
  14.   }
  15.   let result = document.querySelectorAll(str);
  16.   if (result.length == 1) {
  17.     return result[0];
  18.   }
  19.   return result;
  20. }
  21. function getCanvas(id) {
  22.   return $$(id);
  23. }
  24. function resizeCanvas(canvas, width, height) {
  25.   if (canvas.width !== width) {
  26.     canvas.width = width ? width : window.innerWidth;
  27.   }
  28.   if (canvas.height !== height) {
  29.     canvas.height = height ? height : window.innerHeight;
  30.   }
  31. }
  32.  
  33. function getContext(canvas) {
  34.   return canvas.getContext('webgl') || canvas.getContext('experimental-webgl');
  35. }
  36. function createSimpleProgram(gl, vertexShader, fragmentShader) {
  37.   if (!vertexShader || !fragmentShader) {
  38.     console.warn('着色器不能为空');
  39.     return;
  40.   }
  41.   let program = gl.createProgram();
  42.   gl.attachShader(program, vertexShader);
  43.   gl.attachShader(program, fragmentShader);
  44.   gl.linkProgram(program);
  45.   let success = gl.getProgramParameter(program, gl.LINK_STATUS);
  46.   if (success) {
  47.     return program;
  48.   }
  49.   console.error(gl.getProgramInfoLog(program));
  50.   gl.deleteProgram(program);
  51. }
  52.  
  53. function createShader(gl, type, source) {
  54.   let shader = gl.createShader(type);
  55.   gl.shaderSource(shader, source);
  56.   gl.compileShader(shader);
  57.   //检测是否编译正常。
  58.   let success = gl.getShaderParameter(shader, gl.COMPILE_STATUS);
  59.   if (success) {
  60.     return shader;
  61.   }
  62.   console.error(gl.getShaderInfoLog(shader));
  63.   gl.deleteShader(shader);
  64. }
  65. function createShaderFromScript(gl, type, scriptId) {
  66.   let sourceScript = $$('#' + scriptId);
  67.   if (!sourceScript) {
  68.     return null;
  69.   }
  70.   return createShader(gl, type, sourceScript.innerHTML);
  71. }

说明：

　使用缓冲区对象的流程：

  1. a.创建缓冲区对象（gl.createBuffer()）;
  2. b.把缓冲区对象（gl.bindBuffer()）绑定到目标对象上（gl.ARRAY_BUFFER）;
  3. c.将数据写入缓冲区对象（gl.bufferData()）;
  4. d.将缓冲区对象分配给attribute变量（gl.vertexAttribPointer()）;
  5. e.开启attribute变量（gl.enableVertexAttribrray()）;

　gl.bindBuffer(parms1,parms2)；

　　　　parms1：

　　　　　　gl.ARRAY_BUFFER ——包含顶点属性的缓冲区

　　　　　　gl.ELEMENT_ARRAY_BUFFER——用于元素索引的缓冲区

　　　　parms2：需要绑定的缓冲区对象

　gl.bufferData(parms1,parms2,parms3);

　　　　params1：

　　　　　　gl.ARRAY_BUFFER或gl.ELEMENT_ARRAY_BUFFER

　　　　parms2：顶点数据

　　　　parms3：绘制方式

　　　　　　gl.STATIC_DRAW：内容应由应用程序指定一次，并多次用作WebGL绘图和图像规范命令的源。

　　　　　　gl.STREAM_DRAW：内容应由应用程序指定一次，并且最多使用几次作为WebGL绘图和图像规范命令的源。

　　　　　　gl.DYNAMIC_DRAW：内容旨在由应用程序重复指定，并多次用作WebGL绘图和图像规范命令的源。

　gl.vertexAttribPointer(parms1,parms2,parms3,parms4,parms5,parms6);

　　　　params1：指定要修改的顶点属性的索引

　　　　params2：指定每个顶点属性的组件数。必须是1,2,3或4

　　　　params3：指定数组中每个组件的数据类型

    • gl.BYTE：带符号的8位整数，其值为[-128,127]
    • gl.SHORT：带符号的16位整数，其值为[-32768,32767]
    • gl.UNSIGNED_BYTE：无符号8位整数，值为[0,255]
    • gl.UNSIGNED_SHORT：无符号16位整数，值为[0,65535]
    • gl.FLOAT：32位IEEE浮点数

　　　　params4：指定整数数据值是否应被归一化到一定的范围内被转换为一个浮点数时

　　　　params5：指定连续顶点属性开头之间的偏移量

　　　　params6：指定顶点属性数组中第一个组件的偏移量

相关文章

WebGL学习笔记一

WebGL学习笔记二——绘制基本图元的更多相关文章

  1. webgl学习笔记二-绘图多点

    写在前面 建议先看下第一篇webgl学习笔记一-绘图单点 第一篇文章,介绍了如何用webgl绘图一个点.接下来本文介绍的是如何绘制多个点.形成一个面. webgl提供了一种很方便的机制,即缓冲区对象, ...

  2. WebGL学习笔记二

    前一章就是第二章主要学的是通过WebGL实现先是在webGL内赋值,但是不实用后来通过定义attribute和uniform存储限定符来将javascript中的数据传到webGL中,大致的流程是1. ...

  3. webgl学习笔记五-纹理

    写在前面 建议先阅读下前面我的三篇文章. webgl学习笔记一-绘图单点 webgl学习笔记二-绘图多点 webgl学习笔记三-平移旋转缩放 术语 : 纹理 :图像 图形装配区域 :顶点着色器顶点坐标 ...

  4. webgl学习笔记四-动画

    写在前面 建议先阅读下前面我的三篇文章. webgl学习笔记一-绘图单点 webgl学习笔记二-绘图多点 webgl学习笔记三-平移旋转缩放   下面我们将讲解下如何让一个正方形动起来~不断擦除和重绘 ...

  5. webgl学习笔记三-平移旋转缩放

    写在前面 建议先阅读下前面我的两篇文章. webgl学习笔记一-绘图单点 webgl学习笔记二-绘图多点 平移 1.关键点说明 顶点着色器需要加上 uniform vec4 u_Translation ...

  6. qml学习笔记(二)：可视化元素基类Item详解（上半场anchors等等）

    原博主博客地址:http://blog.csdn.net/qq21497936本文章博客地址:http://blog.csdn.net/qq21497936/article/details/78516 ...

  7. WPF的Binding学习笔记(二)

    原文: http://www.cnblogs.com/pasoraku/archive/2012/10/25/2738428.htmlWPF的Binding学习笔记(二) 上次学了点点Binding的 ...

  8. AJax 学习笔记二(onreadystatechange的作用)

    AJax 学习笔记二(onreadystatechange的作用) 当发送一个请求后,客户端无法确定什么时候会完成这个请求,所以需要用事件机制来捕获请求的状态XMLHttpRequest对象提供了on ...

  9. [Firefly引擎][学习笔记二][已完结]卡牌游戏开发模型的设计

    源地址:http://bbs.9miao.com/thread-44603-1-1.html 在此补充一下Socket的验证机制:socket登陆验证.会采用session会话超时的机制做心跳接口验证 ...

随机推荐

  1. sed命令基本用法

    sed是一个非交互式文本编辑器,它可对文本文件和标准输入进行编辑sed 适用于以下三种场合:编辑相对交互式文本编辑器而言太大的文件编辑命令太复杂,在交互式文本编辑器中难以输入的情况对文本扫描一遍,但是 ...

  2. 学习：STL_vector容器

    vector基本概念: 功能: vector数据结构和数组非常相似,也称为单端数组 vector与普通数组区别: 不同之处在于数组是静态空间,而vector可以动态扩展 动态扩展: 并不是在原空间之后 ...

  3. CentOS7配置VIP

    CentOS7 两台做vip飘逸,实现虚拟ip的跳转 两台机器 首先下载ipvsadm 和 keepalived yum -y install ipvsadm keepalived vim /etc/ ...

  4. FFT代码详解

    关于FFT原理部分的介绍,在网上已经有很多了,所以在此只讲代码实现部分的内容. 原理可以参考https://www.cnblogs.com/RabbitHu/p/FFT.html 推荐看完它的原理解释 ...

  5. MongoDB shell 2 副本集方法

    rs.initiate()   rs.addArb()   rs.help()   rs.printReplicationInfo() 查看到副本集操作日志 rs.remove() 减少副本集节点 r ...

  6. 8259A的初始化（单片）

    1.单片8259A的初始化流程图: 在单片的初始化中不需要ICW3,因为ICW3是指明主片和从片的连接情况的. 2.程序解析: (1)ICW1 MOV AL,13H (2)ICW2 MOV AL,08 ...

  7. CF 900D Unusual Sequences

    题目链接 \(Description\) 给定\(x,y\),求有多少个数列满足\(gcd(a_i)=x且\sum a_i=y\).答案对\(10^9+7\)取模. \(1≤x,y≤10^9\) \( ...

  8. yarn和npm的对比，以及项目中使用方式

    相比npm 的优点 1.npm安装是串行,而yarn是并行,速度大大提升 2.已经下载过的包会被缓存,无需重复下载,更关键的是,支持离线安装 3.精准的版本控制,加上验证每个包的完整性,保证每次安装的 ...

  9. mac 下使用Charles抓包华为手机app

    安装Charles:https://www.cnblogs.com/sea-stream/p/11577418.html 需要保证手机与电脑连接同一个Wi-Fi设置mac charles,打开代理 2 ...

  10. mac 安装注册Charles

    软件去官网下载安装即可. 下载地址:https://www.charlesproxy.com/download/ 适用于Charles任意版本的注册码Charles 4.2.7 目前是最新版,可用. ...