效果:

代码:

 <!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. 菜单Menu(AS开发实战第四章学习笔记)

    4.5 菜单Menu Android的菜单主要分两种,一种是选项菜单OptionMenu,通过按菜单键或点击事件触发,另一种是上下文菜单ContextMenu,通过长按事件触发.页面的布局文件放在re ...

  2. Qt获取控件位置,坐标总结

    总结的结果是: QMouseEvent中两类坐标系统,一类是窗口坐标,一类是显示器坐标.   总结一:经过试验,QMouseEvent::globalPos()  和 QCursor::pos()效果 ...

  3. 2.MySQL 数据类型

    MySQL 数据类型 MySQL中定义数据字段的类型对你数据库的优化是非常重要的. MySQL支持多种类型,大致可以分为三类:数值.日期/时间和字符串(字符)类型. 数值类型 MySQL支持所有标准S ...

  4. resin下发布项目报错java.lang.NoSuchMethodError: javax.persistence.Table.indexes()[Ljavax/persistence/Index

    我的resin版本为4.0.56; 项目在tomcat下启动正常,打包在resin下发布时报错:java.lang.NoSuchMethodError: javax.persistence.Table ...

  5. 【 PostgreSQL】工作中常用SQL语句干货

    接触gp数据库近一年的时间,语法上和其他数据库还是有些许不同,工作中常用的操作语句分享给大家! -- 建表语句 create table ods.ods_b_bill_m ( acct_month t ...

  6. 一、python小功能记录——监听键盘事件

    1.监听键盘按键 from pynput.keyboard import Listener def press(key): print(key.char) with Listener(on_press ...

  7. DB2问题记录本

    1.System.Data.OleDb.OleDbException (0x80004005): 未指定的错误. 场景:部署网站到IIS上,使用oledb连接DB2数据库报错,开发环境正常 解决方案: ...

  8. rabbitmq集群步骤

    这里选用三台主机,主机名分别是hidden1, hidden2, hidden3 主机名一定要修改成不一样的,要不然加入集群的时候会加入不成功 修改完主机名后,在/etc/hosts文件中加入对应的解 ...

  9. perceptron感知机 mtalab

    data=load('data.txt'); x=[data(:,1),data(:,2)]; y=data(:,3); k=length(y); %绘制散点图 for j=1:k if y(j)== ...

  10. December 22nd 2016 Week 52nd Thursday

    The best hearts are always the bravest. 心灵最高尚的人,往往也是最勇敢的人. Keep conscience clear, don't let too many ...