效果：

代码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>WebGl  一个缓冲区传递颜色和坐标（矩形）</title>
  6. </head>
  7. <body>
  8.  
  9. <canvas id="myCanvas" width="500" height="300" style='border:1px solid red'></canvas>
  10.  
  11. </body>
  12.  
  13. <script>
  14.  
  15.     window.onload = function () {
  16.  
  17.         //获取上下文
  18.         var canvas = document.getElementById('myCanvas');
  19.         var gl = canvas.getContext('webgl');
  20.  
  21.         //定义矩形数据 并 将其储存在缓存对象
  22.         var vertices = [
  23.             -0.5,0.5,0.0,    0.0,0.0,1.0,//(x,y,z)(r,g,b)分别代表坐标和颜色
  24.             -0.5,-0.5,0.0,   1.0,0.0,0.0,
  25.             0.5,-0.5,0.0,    0.0,1.0,0.0,
  26.             0.5,0.5,0.0,     1.0,0.0,1.0,
  27.         ];
  28.  
  29.         var indices = [3,2,1,3,1,0];
  30.  
  31.         var vertex_buffer = gl.createBuffer();
  32.         gl.bindBuffer(gl.ARRAY_BUFFER,vertex_buffer);
  33.         gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
  34.  
  35.         var Index_Buffer = gl.createBuffer();
  36.         gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER,Index_Buffer);//注意  是  ELEMENT_ARRAY_BUFFER  不是  ARRAY_BUFFER
  37.         gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices), gl.STATIC_DRAW);
  38.         //bufferData 参数详解
  39.         //数据类型，可以是 gl.ARRAY_BUFFER , gl.ELEMENT_ARRAY_BUFFER
  40.         //数据
  41.         //缓冲类型，有这么几种可以供我们选择 GL_STREAM_DRAW , GL_STATIC_DRAW ,GL_DYNAMIC_DRAW
  42.         //缓冲区的数据偶尔变动用GL_STREAM_DRAW ，缓冲区的数据不变用GL_STATIC_DRAW，缓冲区数据经常变动用GL_DYNAMIC_DRAW
  43.  
  44.         //创建和编译着色器程序
  45.         var vertCode = 'attribute vec3 coordinates;'+
  46.             'attribute vec3 color;'+
  47.             'varying vec3 vColor;'+
  48.  
  49.             'void main(void) {' +
  50.             ' gl_Position = vec4(coordinates, 1.0);' +
  51.             'vColor = color;'+
  52.             '}';
  53.         var fragCode = 'precision mediump float;'+
  54.             'varying vec3 vColor;'+
  55.             'void main(void) {'+
  56.             'gl_FragColor = vec4(vColor, 1.0);'+
  57.             '}';
  58.  
  59.         var vertShader = gl.createShader(gl.VERTEX_SHADER);
  60.         gl.shaderSource(vertShader, vertCode);
  61.         gl.compileShader(vertShader);
  62.  
  63.         var fragShader = gl.createShader(gl.FRAGMENT_SHADER);
  64.         gl.shaderSource(fragShader, fragCode);
  65.         gl.compileShader(fragShader);
  66.  
  67.         var shaderProgram = gl.createProgram();
  68.         gl.attachShader(shaderProgram, vertShader);
  69.         gl.attachShader(shaderProgram, fragShader);
  70.         gl.linkProgram(shaderProgram);
  71.         gl.useProgram(shaderProgram);
  72.  
  73.         //与缓冲区对象相关联着色器程序
  74.  
  75.         // vertices中每个元素的字节数 ,这里是 float 类型, 所以是 4 个字节
  76.         var bytes = new Float32Array(vertices).BYTES_PER_ELEMENT;
  77.  
  78.         var coord = gl.getAttribLocation(shaderProgram, "coordinates");
  79.         gl.vertexAttribPointer(coord, 3, gl.FLOAT, false, bytes*6, 0);
  80.         gl.enableVertexAttribArray(coord);
  81.  
  82.         var color = gl.getAttribLocation(shaderProgram, "color");
  83.         gl.vertexAttribPointer(color, 3, gl.FLOAT, false, bytes*6, bytes*3) ;
  84.         gl.enableVertexAttribArray(color);
  85.  
  86.         //绘制所需的对象
  87.         gl.clearColor(0.5, 0.5, 0.5, 0.9);
  88.         gl.enable(gl.DEPTH_TEST);
  89.         gl.clear(gl.COLOR_BUFFER_BIT);
  90.         gl.viewport(0,0,canvas.width,canvas.height);
  91.         gl.drawElements(gl.TRIANGLES, indices.length, gl.UNSIGNED_SHORT,0);
  92.  
  93.     }
  94.  
  95.     // vertexAttribPointer(location, int size, enum type, bool normalized, long stride, long offset) 参数详解
  96.     //Location − 它指定一个属性变量的存储位置。根据这个方案，必须通过由getAttribLocation()方法返回的值
  97.     //Size − 它指定在缓冲对象每顶点部件的数量
  98.     //Type − 它指定数据的类型
  99.     //Normalized − 这是一个布尔值。如果为真，非浮动数据被归一化到[0,1]。否则，它被归一化到[-1,1]
  100.     //Stride − 它指定不同顶点数据元素之间的字节数，或默认为零步幅（字节）
  101.     //Offset − 它指定在缓冲器对象，以指示数据从顶点的哪个存储字节偏移(字节)
  102.  
  103. </script>
  104.  
  105. </html>

WebGl 一个缓冲区传递颜色和坐标（矩形）的更多相关文章

  1. WebGl 多缓冲区传递颜色和坐标（矩形）

    效果: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

  2. WebGl 利用缓冲区对象画多个点

    效果: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

  3. 推荐一个iOS关于颜色的库-Wonderful

    Wonderful 这个库主要是与UIColor息息相连的,其中一共包含四个子文件,UIColor+Wonderful,UIColor+Separate,SXColorGradientView,SXM ...

  4. Intent(三)向下一个活动传递数据

    向下传递活动很简单,可以我采用putExtra()方法的重载,把我们想要传递的数据暂时放在intent中,启动活动时从这里取就可以了. 首先我们在MainActivity(主活动)显式声明intent ...

  5. 如何在linux Shell脚本里面把一个数组传递到awk内部进行处理

    前段时间和几位同事讨论过一个问题:Shell脚本里面怎样把一个数组传递到awk内部进行处理? 当时没有找到方法.前两天在QQ群里讨论awk的时候,无意间又聊起这个话题.机缘巧合之下找到一个思路,特此分 ...

  6. Intent 隐式跳转，向下一个活动传递数据，向上一个活动返回数据。

    一.每个Intent只能指定一个action,多个Category. 使用隐式跳转,我们不仅可以跳转到自己程序内的活动,还可以启动其他程序的活动.使得Android多个程序之间的功能共享成为可能. 例 ...

  7. Android开发：向下一个activity传递数据，返回数据给上一个activity

    1.向下一个activity传递数据 activity1 Button button=(Button) findViewById(R.id.button1); button.setOnClickLis ...

  8. WPF 一个简单的颜色选择器

    原文:WPF 一个简单的颜色选择器 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/BYH371256/article/details/8340999 ...

  9. Android基础Activity篇——Intent向下一个活动传递数据

    1.向下一个活动传递数据 String data ="bilibilbilbilbili"; Intent intent1=new Intent(this,secondActivi ...

随机推荐

  1. Vue小案例（一）

    案例需求: 创建一个品牌展示表格,表头有编号(id),品牌名称(name),创建时间(time)和操作,需要实现的功能是对数据的增删操作,和时间的格式化. 思路分析:在开发之前需要想清楚要用到Vue中 ...

  2. jQuery的安装

    一.jQuery的安装 下载 jQuery 有两个版本的 jQuery 可供下载: Production version - 用于实际的网站中,已被精简和压缩. Development version ...

  3. ASP.NET错误处理的方式（一）

    对Web应用程序来说,发生不可预知的错误和异常在所难免,我们必须为Web程序提供错误处理机制.当错误发生时,我们必须做好两件事情:一是将错误信息记录日志,发邮件通知网站维护人员,方便技术人员对错误进行 ...

  4. 企业级Apache详解

    安装Apache #Apache安装 rpm -qa|grep httpd yum install httpd #2编译安装: -->推荐安装 cd /root/software yum -y ...

  5. TCP/IP 协议图--TCP/IP 基础

    1. TCP/IP 的具体含义 从字面意义上讲,有人可能会认为 TCP/IP 是指 TCP 和 IP 两种协议.实际生活当中有时也确实就是指这两种协议.然而在很多情况下,它只是利用 IP 进行通信时所 ...

  6. Salesforce和SAP Netweaver里数据库表的元数据设计

    从Salesforce官网可以了解到Salesforce的force.com平台里数据库表的设计:https://developer.salesforce.com/page/Multi_Tenant_ ...

  7. 对一串用":"和";"拼接的汉字字符串排序

    近日在项目中遇到一个需求,要求显示的下拉菜单select选项的汉字字符进行排序,项目是前后端分离Ajax交互的,前端页面初始化时请求后端拿到菜单数据.项目中的所有菜单数据均是后端提供的. 场景是后端请 ...

  8. 怎么在Linux环境下通过VS Code调试Python 3+？

    今天突然想写一写Python了,于是就开始弄.使用源码包安装好Python3.6.6之后,发现Linux下只能通过python3来调用python 3.6.6.如果直接使用python的话,调用的是系 ...

  9. bzoj4037 [HAOI2015]数字串拆分

    Description 你有一个长度为n的数字串.定义f(S)为将S拆分成若干个1~m的数的和的方案数,比如m=2时,f(4)=5,分别为4=1+1+1+1你可以将这个数字串分割成若干个数字(允许前导 ...

  10. UIView 中 hidden、alpha、clear color 与 opaque 的区别

    透明度与图层混合相关,影响到图片绘制的效率. hidden 此属性为 BOOL 值,用来表示 UIView 是否隐藏.关于隐藏大家都知道就是让 UIView 不显示而已,但是需要注意的是: 当前 UI ...