效果：

代码：

 <!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 myCanvas = document.getElementById('myCanvas');

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

         //步骤二：  定义三个点 ，并将其储存在缓存区对象

         var vertices = [

             -0.5,0.5,0.0,

             0.0,0.5,0.0,

             -0.25,0.25,0.0,

         ];

         // 2.1 创建一个空的缓冲区对象来存储顶点缓冲区

         var vertex_buffer = gl.createBuffer();

         // 2.2 绑定缓冲区对象

         gl.bindBuffer(gl.ARRAY_BUFFER,vertex_buffer);

         // 2.3 将顶点数据传递到缓冲区

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

         //步骤三： 创建和编译着色器程序

         //定点着色器

         var vertCode = "attribute vec3 coordinates;" +

                 "void main() {" +

                     "gl_Position = vec4(coordinates,1.0);" + //位置

                     "gl_PointSize = 10.0;" + //点的大小（单位像素）

                 "}";

         //片段着色器

         var fragCode = "void main() {" +

                             "gl_FragColor = vec4(1, 0.5, 0.0, 1);" + //RBGA值

                         "}";

         // 3.1 创建一个顶点着色器对象、一个片段着色器对象

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

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

         // 3.2 为两个着色器附加源代码

         gl.shaderSource(vertShader, vertCode);

         gl.shaderSource(fragShader, fragCode);

         // 3.3 编译着色器

         gl.compileShader(vertShader);

         gl.compileShader(fragShader);

         // 3.4 创建要存储的着色器程序对象

         var shaderProgram = gl.createProgram();

         // 3.5 为着色器程序附加着色器

         gl.attachShader(shaderProgram, vertShader);

         gl.attachShader(shaderProgram, fragShader);

         // 3.6 链接两个着色器

         gl.linkProgram(shaderProgram);

         // 3.7 使用组合着色器程序对象

         gl.useProgram(shaderProgram);

         //步骤四： 关联着色器程序到缓冲对象

         // 4.1 绑定缓冲区对象

 //        gl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer);

         // 4.2 获取属性(定点的坐标点)

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

         // 4.3 将缓冲区对象分配给coord变量

         // 这里是设置获取数据的规则  第二个参数3  表示每个点定点有3个数据（对应vec3）

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

         // 4.4 启用属性

         gl.enableVertexAttribArray(coord);

         //步骤五： 绘制所需的对象

         // 清除画布颜色

         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,myCanvas.width,myCanvas.height);

         // 画 三角形

         gl.drawArrays(gl.POINTS, 0, 3)

     }

 </script>

 </html>

WebGl 利用缓冲区对象画多个点的更多相关文章

  1. WebGl 利用drawArrays、drawElements画三角形

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

  2. WebGL简易教程(三)：绘制一个三角形(缓冲区对象)

    目录 1. 概述 2. 示例:绘制三角形 1) HelloTriangle.html 2) HelloTriangle.js 3) 缓冲区对象 (1) 创建缓冲区对象(gl.createBuffer( ...

  3. OpenGL顶点缓冲区对象(VBO)

    转载 http://blog.csdn.net/dreamcs/article/details/7702701 创建VBO        GL_ARB_vertex_buffer_object 扩展可 ...

  4. [译]OpenGL像素缓冲区对象

    目录概述创建PBO映射PBO例子:Streaming Texture Uploads with PBO例子:Asynchronous Readback with PBO 概述 OpenGL ARB_p ...

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

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

  6. WebGl 一个缓冲区传递颜色和坐标（矩形）

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

  7. OpenGL学习笔记3——缓冲区对象

    在GL中特别提出了缓冲区对象这一概念,是针对提高绘图效率的一个手段.由于GL的架构是基于客户——服务器模型建立的,因此默认所有的绘图数据均是存储在本地客户端,通过GL内核渲染处理以后再将数据发往GPU ...

  8. Entity Framework 实体框架的形成之旅--利用Unity对象依赖注入优化实体框架(2)

    在本系列的第一篇随笔<Entity Framework 实体框架的形成之旅--基于泛型的仓储模式的实体框架(1)>中介绍了Entity Framework 实体框架的一些基础知识,以及构建 ...

  9. 利用navigator对象在浏览器中检查插件

    利用navigator对象在浏览器中检查插件,实现的代码如下. // IE4+.firefox.chrome.safari.opera中,利用navigator检测插件 ,name为插件的名字 fun ...

随机推荐

  1. android 原生 MediaPlayer 和 MediaCodec 的区别和联系（三）

    目录:     (4)Android 官方网站 对 MediaCodec的介绍 注:编解码器特定数据(Code-specific Data,简写为csd) 部分结合网上资料加入了补充和个人理解.请悉知 ...

  2. 在AndroidStudio中数据存储第三方数据管理Bmob的使用

    ---恢复内容开始--- 在日常写代码的过程中我们比较痛苦的就是数据库的建立和使用,那么今天来介绍一下一个第三方的数据管理平台Bmonb. 一.我们首先进入Bmob的官网创建一个账号 Bome官网网址 ...

  3. UltraISO制作U盘启动盘教程

    Step 1: 首先需要安装UltraISO,完成安装后打开软碟通,文件->打开,打开我们的iso镜像 安装包可以百度搜索 Step 2:然后选择我们的U盘 Step 3:然后点击启动-> ...

  4. 面向对象进阶----->反射 getattr 和hasattr方法

    判断一个对象有没有血缘关系:isinstance() 里面写的是字类对象和父类名用来判断他们的关系 issubclass()是用来判断两个类是不是有继承的关系 ,括号内 写字类名和父类名  可以判断出 ...

  5. Intel酷睿前世今生（二）

    上一文,讲述到了酷睿构架的诞生.可以显而易见的知道,酷睿构架其实源于笔记本处理器构架.因为在当年的技术趋势中,因为提升主频而带来的负面影响如发热与高功率已经让普通消费者所不满.然而提升主频并没有提升多 ...

  6. 准备你的 In-app Billing 程序

    准备好你的内购应用 在开始使用 In-app Billing 服务之前,你需要先把包含 In-app Billing Version 3 API 的库添加到你的Android工程中.你还需要设置你的应 ...

  7. java抽象类，接口与异常

    1.抽象类: 定义;包含一个抽象方法的类称称为抽象类,抽象类在class前使用adstract关键词修饰. 抽象方法;只声明未实现的方法称为抽象方法,使用adstract关键字声明该方法. 抽象类定义 ...

  8. Linux ping命令详解

    Linux系统的ping命令是常用的网络命令,它通常用来测试与目标主机的连通性 基于IMCP协议 常见命令参数 -q 不显示任何传送封包的信息,只显示最后的结果 -n 只输出数值 -R 记录路由过程 ...

  9. Gdb调试工具/ Makfile项目管理

    gdb调试工具 gcc -g main.c -o main 常用命令 命令            简写         作用 help                h            按模块列 ...

  10. 附加进程找不到w3wp.exe进程解决方案

    在进程列表的下面,有个show processes in all sessions(显示所有用户的进程(U)),把它勾上就能看到了 ,就是这么简单.