WebGl 利用缓冲区对象画多个点
效果:
代码:
<!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 利用缓冲区对象画多个点的更多相关文章
- WebGl 利用drawArrays、drawElements画三角形
效果: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...
- WebGL简易教程(三):绘制一个三角形(缓冲区对象)
目录 1. 概述 2. 示例:绘制三角形 1) HelloTriangle.html 2) HelloTriangle.js 3) 缓冲区对象 (1) 创建缓冲区对象(gl.createBuffer( ...
- OpenGL顶点缓冲区对象(VBO)
转载 http://blog.csdn.net/dreamcs/article/details/7702701 创建VBO GL_ARB_vertex_buffer_object 扩展可 ...
- [译]OpenGL像素缓冲区对象
目录概述创建PBO映射PBO例子:Streaming Texture Uploads with PBO例子:Asynchronous Readback with PBO 概述 OpenGL ARB_p ...
- WebGl 多缓冲区传递颜色和坐标(矩形)
效果: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...
- WebGl 一个缓冲区传递颜色和坐标(矩形)
效果: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...
- OpenGL学习笔记3——缓冲区对象
在GL中特别提出了缓冲区对象这一概念,是针对提高绘图效率的一个手段.由于GL的架构是基于客户——服务器模型建立的,因此默认所有的绘图数据均是存储在本地客户端,通过GL内核渲染处理以后再将数据发往GPU ...
- Entity Framework 实体框架的形成之旅--利用Unity对象依赖注入优化实体框架(2)
在本系列的第一篇随笔<Entity Framework 实体框架的形成之旅--基于泛型的仓储模式的实体框架(1)>中介绍了Entity Framework 实体框架的一些基础知识,以及构建 ...
- 利用navigator对象在浏览器中检查插件
利用navigator对象在浏览器中检查插件,实现的代码如下. // IE4+.firefox.chrome.safari.opera中,利用navigator检测插件 ,name为插件的名字 fun ...
随机推荐
- Android解析WindowManagerService(一)WMS的诞生
前言 此前我用多篇文章介绍了WindowManager,这个系列我们来介绍WindowManager的管理者WMS,首先我们先来学习WMS是如何产生的.本文源码基于Android 8.0,与Andro ...
- js API列表
// 主要是ES的API和一小部分浏览器的API. // 新加入标准的API有可能是浏览器事实上早已实现的. // ECMAScript目前是每年都会发布新版本(目前已经相对稳定,每年都会又增 ...
- JDK配置步骤
1.安装jkd1.6.0以上版本. 2.安装结束后,运行cmd.键入: java -version判断JDK是否安装成功,如下图所示. 3.首先需要到官网上下载JDK这款软件,本人下载的是jdk-6u ...
- Week1——JavaEE
本科目标 首先,对我来说自己想走的方向是JavaWeb后台开发,因此JavaEE对我来说也是比较重要的,想学好这门课.进一步巩固自己现有的基础知识,完善自己的项目经验,更加熟悉开发流程.在框架方面我还 ...
- Visual Staudio 2015 打开指定文件,定位到指定文件目录下
Visual Staudio 2015 项目定位文件位置 每次使用的Visual Staudio 2015 写代码的时候总是打开了.cs文件或xaml文件时, 还要手动去找该 文件位置,每次都要翻好大 ...
- 如何检索某个字段在sqlserver中的哪个些存储过程中?很简单的SQL语句。
SELECT obj.Name 存储过程名, sc.TEXT 存储过程内容 FROM syscomments sc INNER JOIN sysobjects obj ON sc.Id = obj.I ...
- iOS设计模式 - 适配器
iOS设计模式 - 适配器 效果 说明 1. 为了让客户端尽可能的通用,我们使用适配器模式来隔离客户端与外部参数的联系,只让客户端与适配器通信. 2. 本教程实现了适配器模式的类适配器与对象适配器两种 ...
- Linux下的Mysql的双向同步
在主从复制的基础上实现双向同步 [更多参考] https://www.cnblogs.com/shuidao/p/3551238.html http://blog.csdn.net/i_bruce/a ...
- MySQL 数据库--索引原理与慢查询优化
索引的原理 本质都是:通过不断地缩小想要获取数据的范围来筛选出最终想要的结果,同时把随机的事件变成顺序的事件,也就是说,有了这种索引机制,我们可以总是用同一种查找方式来锁定数据. 索引的数据结构 b+ ...
- MP4个人制作