效果：

代码：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>WebGl  多缓冲区传递颜色和坐标（矩形）</title>

 </head>

 <body>

 <canvas id="myCanvas" width="500" height="300" style='border:1px solid red'></canvas>

 </body>

 <script>

     window.onload = function () {

         //获取上下文

         var canvas = document.getElementById('myCanvas');

         var gl = canvas.getContext('webgl');

         //定义矩形数据 并 将其储存在缓存对象

         var vertices = [

             -0.5,0.5,0.0,

             -0.5,-0.5,0.0,

             0.5,-0.5,0.0,

             0.5,0.5,0.0

         ];

         var colors = [

             0,0,1,

             1,0,0,

             0,1,0,

             1,0,1,

         ];

         var indices = [3,2,1,3,1,0];

         var vertex_buffer = gl.createBuffer();

         gl.bindBuffer(gl.ARRAY_BUFFER,vertex_buffer);

         gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);

         var Index_Buffer = gl.createBuffer();

         gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER,Index_Buffer);//注意  是  ELEMENT_ARRAY_BUFFER  不是  ARRAY_BUFFER

         gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices), gl.STATIC_DRAW);

         var color_buffer = gl.createBuffer ();

         gl.bindBuffer(gl.ARRAY_BUFFER,color_buffer);

         gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW);

         //创建和编译着色器程序

         var vertCode = 'attribute vec3 coordinates;'+

             'attribute vec3 color;'+

             'varying vec3 vColor;'+

             'void main(void) {' +

             ' gl_Position = vec4(coordinates, 1.0);' +

             'vColor = color;'+

             '}';

         var fragCode = 'precision mediump float;'+

             'varying vec3 vColor;'+

             'void main(void) {'+

             'gl_FragColor = vec4(vColor, 1.0);'+

             '}';

         var vertShader = gl.createShader(gl.VERTEX_SHADER);

         gl.shaderSource(vertShader, vertCode);

         gl.compileShader(vertShader);

         var fragShader = gl.createShader(gl.FRAGMENT_SHADER);

         gl.shaderSource(fragShader, fragCode);

         gl.compileShader(fragShader);

         var shaderProgram = gl.createProgram();

         gl.attachShader(shaderProgram, vertShader);

         gl.attachShader(shaderProgram, fragShader);

         gl.linkProgram(shaderProgram);

         gl.useProgram(shaderProgram);

         //与缓冲区对象相关联着色器程序

         gl.bindBuffer(gl.ARRAY_BUFFER,vertex_buffer);//这里要注意的是  现在存在多个缓冲区  取属性值得时候  一定先告诉从哪个缓冲区取值  否则默认是最后一个bindBuffer()指定的；

         var coord = gl.getAttribLocation(shaderProgram, "coordinates");

         gl.vertexAttribPointer(coord, 3, gl.FLOAT, false, 0, 0);

         gl.enableVertexAttribArray(coord);

         gl.bindBuffer(gl.ARRAY_BUFFER,color_buffer);//这里要注意的是  现在存在多个缓冲区  取属性值得时候  一定先告诉从哪个缓冲区取值  否则默认是最后一个bindBuffer()指定的；

         var color = gl.getAttribLocation(shaderProgram, "color");

         gl.vertexAttribPointer(color, 3, gl.FLOAT, false,0,0) ;

         gl.enableVertexAttribArray(color);

         //绘制所需的对象

         gl.clearColor(0.5, 0.5, 0.5, 0.9);

         gl.enable(gl.DEPTH_TEST);

         gl.clear(gl.COLOR_BUFFER_BIT);

         gl.viewport(0,0,canvas.width,canvas.height);

         gl.drawElements(gl.TRIANGLES, indices.length, gl.UNSIGNED_SHORT,0);

     }

 </script>

 </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. Unity 发布的 WebGL 使用SendMessage传递多个参数

    如果要实现Unity与浏览器的数据交互一般都会采用两种方式 方法一: Application.ExternalCall("SayHello","helloworld&qu ...

  4. lufylegend:图片的加载和显示

    <!DOCTYPE HTML> <html> <head> <meta charset="utf-8" /> <script ...

  5. WebGL 纹理颜色原理

    本文由云+社区发表 作者:ivweb qcyhust 导语 WebGL绘制图像时,往着色器中传入颜色信息就可以给图形绘制出相应的颜色,现在已经知道顶点着色器和片段着色器一起决定着向颜色缓冲区写入颜色信 ...

  6. WEBGL学习【三】颜色选择

    <html lang="zh-CN"> <head> <title>NeHe's WebGL</title> <meta ch ...

  7. WebGL简易教程(四)：颜色

    目录 1. 概述 2. 示例:绘制三角形 1) 数据的组织 2) varying变量 3. 结果 4. 理解 1) 图形装配和光栅化 2) 内插过程 5. 参考 1. 概述 在上一篇教程<Web ...

  8. webgl自学笔记——几何图形

    3D应用的基础元素: 1.canvas,它是渲染场景的占位符.标准html的canvas元素 2.Objects,这里指的是组成一个场景的所有3d实体.这些实体都由三角形组成.webgl中使用Buff ...

  9. WebGL画一个10px大小的点

    WebGL程序在屏幕上同时使用HTML和javascript来创建和显示三维图形.WebGL中新引入的<canvas>元素标签,它定义了网页上的绘图区域. 由于<canvas> ...

随机推荐

  1. Windows access Linux / Ubuntu via Remote Desktop via xrdp

    Windows 多用户远程桌面连接到 Ubuntu / Linux Access Ubuntu from Windows remotely   Follow these steps : Step 1 ...

  2. JVM知识（三）：内存模型和可见性

    这篇文章我们将根据JVM的内存模型探索java当中变量的可见性以及不同的java指令在并发时可能发生的指令重排序的情况.来聊聊java线程对一个变量的更新怎么通知另一个线程,及volatile的作用和 ...

  3. UML 运用于开发过程——总结

    UML -- 统一的图形语言 用例图:需求捕获,测试依据类图:静态系统结构对象图:对象之间的关联构件图:构件之间的关联部署图:构建的物理部署 以上几种图的作用:描述系统结构 顺序图:捕获时间顺序协作图 ...

  4. armel和armhf区别

    出于低功耗.封装限制等种种原因,之前的一些ARM架构处理器因为内部资源宝贵,加入浮点运算单元是十分奢侈的,因为需要额外的软件实现.之前的ARM处理器架构是什么样的?(http://www.cnblog ...

  5. ExpressRoute 先决条件和清单

    若要使用 ExpressRoute 连接到 Azure 服务,需确认是否符合以下部分中所列的要求. 帐户要求 使用中的有效 Azure 帐户.需有此帐户才能设置 ExpressRoute 线路. 连接 ...

  6. 从Azure上构建Linux应用程序映像

    下图描述了总体的虚拟机的VHD映像生成以及发布到 Azure Azure 镜像市场的全过程: 具体步骤如下: 从Azure管理平台上Linux申请虚拟机, 安装和配置您要发布的应用软件产品,制作成映像 ...

  7. Oracle案例10——HWM（高水位线）性能优化

    最近BI同事反馈说一张表的数据查询非常慢,这个表数据总共不到1W行数据,这么一说我们首先想到的是高水位带来的性能问题,即高水位线下占用过多数据块,而这些数据块其实是部分数据占用,大多数是空闲的数据块. ...

  8. asp.net mvc多级目录结构和多级area实现技巧

    今天在工作要实现这个多级area.其原因是这个项目需要多级的功能,大的类别里有小的类别,小的类别里有具体的功能项,每一个功能项还有若干动作Action,所以在菜单和mvc工程的结构上都需要有体现多级的 ...

  9. 阿里云CentOS 7服务器挂载数据盘

    本次使用的是centOS 7.4 64位操作系统 第一步:查看磁盘情况 我们发现,我总共有三个磁盘,分别为/dev/vda(100G)./dev/vdb(200G)./dev/vdc(100G),而被 ...

  10. VB ASP 使用 now() 时默认格式调整方法

    修改注册表 [HKEY_USERS\.DEFAULT\Control Panel\International] "sShortDate"="yyyy-M-d" ...