效果：

代码：

  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,
  24.              -0.5,-0.5,0.0,
  25.              0.5,-0.5,0.0,
  26.              0.5,0.5,0.0
  27.          ];
  28.          var colors = [
  29.              0,0,1,
  30.              1,0,0,
  31.              0,1,0,
  32.              1,0,1,
  33.          ];
  34.          var indices = [3,2,1,3,1,0];
  35.  
  36.          var vertex_buffer = gl.createBuffer();
  37.          gl.bindBuffer(gl.ARRAY_BUFFER,vertex_buffer);
  38.          gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
  39.  
  40.          var Index_Buffer = gl.createBuffer();
  41.          gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER,Index_Buffer);//注意  是  ELEMENT_ARRAY_BUFFER  不是  ARRAY_BUFFER
  42.          gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices), gl.STATIC_DRAW);
  43.  
  44.          var color_buffer = gl.createBuffer ();
  45.          gl.bindBuffer(gl.ARRAY_BUFFER,color_buffer);
  46.          gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW);
  47.  
  48.          //创建和编译着色器程序
  49.          var vertCode = 'attribute vec3 coordinates;'+
  50.              'attribute vec3 color;'+
  51.              'varying vec3 vColor;'+
  52.  
  53.              'void main(void) {' +
  54.              ' gl_Position = vec4(coordinates, 1.0);' +
  55.              'vColor = color;'+
  56.              '}';
  57.          var fragCode = 'precision mediump float;'+
  58.              'varying vec3 vColor;'+
  59.              'void main(void) {'+
  60.              'gl_FragColor = vec4(vColor, 1.0);'+
  61.              '}';
  62.  
  63.          var vertShader = gl.createShader(gl.VERTEX_SHADER);
  64.          gl.shaderSource(vertShader, vertCode);
  65.          gl.compileShader(vertShader);
  66.  
  67.          var fragShader = gl.createShader(gl.FRAGMENT_SHADER);
  68.          gl.shaderSource(fragShader, fragCode);
  69.          gl.compileShader(fragShader);
  70.  
  71.          var shaderProgram = gl.createProgram();
  72.          gl.attachShader(shaderProgram, vertShader);
  73.          gl.attachShader(shaderProgram, fragShader);
  74.          gl.linkProgram(shaderProgram);
  75.          gl.useProgram(shaderProgram);
  76.  
  77.          //与缓冲区对象相关联着色器程序
  78.          gl.bindBuffer(gl.ARRAY_BUFFER,vertex_buffer);//这里要注意的是  现在存在多个缓冲区  取属性值得时候  一定先告诉从哪个缓冲区取值  否则默认是最后一个bindBuffer()指定的；
  79.          var coord = gl.getAttribLocation(shaderProgram, "coordinates");
  80.          gl.vertexAttribPointer(coord, 3, gl.FLOAT, false, 0, 0);
  81.          gl.enableVertexAttribArray(coord);
  82.  
  83.          gl.bindBuffer(gl.ARRAY_BUFFER,color_buffer);//这里要注意的是  现在存在多个缓冲区  取属性值得时候  一定先告诉从哪个缓冲区取值  否则默认是最后一个bindBuffer()指定的；
  84.          var color = gl.getAttribLocation(shaderProgram, "color");
  85.          gl.vertexAttribPointer(color, 3, gl.FLOAT, false,0,0) ;
  86.          gl.enableVertexAttribArray(color);
  87.  
  88.          //绘制所需的对象
  89.          gl.clearColor(0.5, 0.5, 0.5, 0.9);
  90.          gl.enable(gl.DEPTH_TEST);
  91.          gl.clear(gl.COLOR_BUFFER_BIT);
  92.          gl.viewport(0,0,canvas.width,canvas.height);
  93.          gl.drawElements(gl.TRIANGLES, indices.length, gl.UNSIGNED_SHORT,0);
  94.  
  95.      }
  96.  
  97.  </script>
  98.  
  99.  </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. 日历视图（CalendarView）

    日历视图(Calendarview) 常用属性: android:selectedWeekBackgroundColor(设置被选中周的背景颜色) android:showWeekNumber(设置是 ...

  2. 【Android】Retrofit网络请求Service，@Path、@Query、@QueryMap...

    对Retrofit已经使用了一点时间了,是时候归纳一下各种网络请求的service了. 下面分为GET.POST.DELETE还有PUT的请求,说明@Path.@Query.@QueryMap.@Bo ...

  3. 一步一步pwn路由器之radare2使用实战

    前言 本文由 本人 首发于 先知安全技术社区: https://xianzhi.aliyun.com/forum/user/5274 前文讲了一些 radare2 的特性相关的操作方法.本文以一个 c ...

  4. 一：JavaWeb和Tomcat的安装

    1.Java Web 是java技术用来解决相关web互联网领域的技术总和. 2.Servlet是Java Servlet的简称,称为小服务程序或服务器连接器,用Java编写的服务器端程序 3.JSP ...

  5. HTML--<frameset>標簽

    <html><frameset rows="20,80"> <frame src="/example/html/frame_a.html&q ...

  6. 细说C#继承

    简介 继承(封装.多态)是面向对象编程三大特性之一,继承的思想就是摈弃代码的冗余,实现更好的重用性. 继承从字面上理解,无外乎让人想到某人继承某人的某些东西,一个给一个拿.这个语义在生活中,就像 家族 ...

  7. 使用CAReplicatorLayer [1]

    使用CAReplicatorLayer [1] 说明 https://developer.apple.com/library/ios/documentation/GraphicsImaging/Ref ...

  8. Linux fdisk命令详解[主分区/逻辑分区创建]

    fdisk常见命令参数 -b<分区大小>:指定每个分区的大小: -l:列出指定的外围设备的分区表状况: -s<分区编号>:将指定的分区大小输出到标准输出上,单位为区块: -u: ...

  9. Linux 系统开机自启的配置文件

    程序开机启动的配置文件(/etc/rc.local) # 系统级别 ntsysv # 图形界面设置自启程序 chkconfig(/etc/init.d/sshd) 处理开机启动的文件 # 用户级别 # ...

  10. QT5.8连接Mysql提示QMYSQL driver not loaded

    我们都知道在QT5.8系列里已经带了Mysql的dll文件 驱动的名字为“qsqlmysql.dll”和“qsqlmysqld.dll” 但是按照网上的各种教程和博客基本都是错的,只有个别人是对的. ...