WebGL入门教程(四)-webgl颜色
前面文章:
WebGL入门教程(一)-初识webgl
WebGL入门教程(二)-webgl绘制三角形
WebGL入门教程(三)-webgl动画
颜色效果图:
操作步骤:
1.创建HTML5 canvas
2.获取画布 canvas 的 ID
3.获取WebGL
4.编译着色器
5.使用缓冲区对象向顶点传入多个顶点数据
6.绘制图像
以上1~3参考:http://www.cnblogs.com/bsman/p/6128447.html
4.编译着色器
改顶点着色器,片着色器
//顶点着色器程序
var VSHADER_SOURCE =
"attribute vec4 a_Position;" +
"attribute vec4 a_Color;" +
"varying vec4 v_Color;" +
"void main(){" +
"gl_Position = a_Position;" +
"v_Color = a_Color;" +
"}"; //片元着色器
var FSHADER_SOURCE =
"precision mediump float;" +
"varying vec4 v_Color;" +
"void main() {" +
"gl_FragColor = v_Color;" +
"}";
解释:定义修改颜色的变量 varying,其中"v_Color = a_Color;" 表示将颜色数据传给片元着色器;"gl_FragColor = v_Color;"表示从顶点着色器接收数据;
5.使用缓冲区对象向顶点传入多个顶点数据
function initBuffers(gl,shaderProgram) {
//顶点坐标和颜色
var vertices = new Float32Array([
0.0, 0.5, 1.0, 0.0, 0.0,
-0.5, -0.5, 0.0, 1.0, 0.0,
0.5, -0.5, 0.0, 0.0, 1.0,
]);
var n = 3;//点的个数
//创建缓冲区对象
var vertexBuffer = gl.createBuffer(); //将缓冲区对象绑定到目标
gl.bindBuffer(gl.ARRAY_BUFFER,vertexBuffer);
//向缓冲区写入数据
gl.bufferData(gl.ARRAY_BUFFER,vertices,gl.STATIC_DRAW);
//获取单个字节
var FSIZE = vertices.BYTES_PER_ELEMENT; //获取坐标点
var a_Position = gl.getAttribLocation(shaderProgram, 'a_Position');
//将缓冲区对象分配给a_Position变量
gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, FSIZE*5, 0);
//连接a_Position变量与分配给它的缓冲区对象
gl.enableVertexAttribArray(a_Position); //获取Color坐标点
var a_Color = gl.getAttribLocation(shaderProgram, 'a_Color');
//将缓冲区对象分配给a_Position变量
gl.vertexAttribPointer(a_Color, 3, gl.FLOAT, false, FSIZE*5, FSIZE*2);
//连接a_Position变量与分配给它的缓冲区对象
gl.enableVertexAttribArray(a_Color);
return n;
}
其中 vertexAttribPointer 方法注意此时数组中有多种数据,有坐标和颜色,此时就应该修改第五个(跨度)和第六个参数(位移)的值
第一个参数:指定待分配attribute变量的存储位置
第二个参数:指定缓存区中每个顶点的分量个数(1~4)
第三个参数:类型有,gl.UNSIGNED_BYTE无符号字节,gl.SHORT短整数,gl.UNSIGNED_SHORT无符号短整数,gl.INT整型,gl.UNSIGNED_INT无符号整型,gl.FLOAT浮点型。
第四个参数:表示是否将非浮点型的数据归到[0,1][-1,1]区间
第五个参数:相邻两个顶点的字节数。默认为0
第六个参数:表示缓存区对象的偏移量(以字节为单位),就是attribute变量从缓冲区中的何处开始存储。
6.绘制图像
var n = initBuffers(gl,shaderProgram); if(n<0){
console.log('Failed to set the positions');
return;
}
// 清除指定<画布>的颜色
gl.clearColor(0.0, 0.0, 0.0, 1.0); // 清空 <canvas>
gl.clear(gl.COLOR_BUFFER_BIT); gl.drawArrays(gl.TRIANGLES, 0, n);
WebGL入门教程(四)-webgl颜色的更多相关文章
- WebGL入门教程(五)-webgl纹理
前面文章: WebGL入门教程(一)-初识webgl WebGL入门教程(二)-webgl绘制三角形 WebGL入门教程(三)-webgl动画 WebGL入门教程(四)-webgl颜色 这里就需要用到 ...
- WebGL入门教程(三)-webgl动画
前面文章: WebGL入门教程(一)-初识webgl WebGL入门教程(二)-webgl绘制三角形 WebGL动画有移动.旋转和缩放,我们将移动.旋转和缩放图形,然后将其绘制到屏幕上,称为变换(tr ...
- WebGL入门教程(二)-webgl绘制三角形
前面已经介绍过了webgl,WebGL入门教程(一)-初识webgl(http://www.cnblogs.com/bsman/p/6128447.html),也知道了如何绘制一个点,接下来就用web ...
- WebGL简易教程(四):颜色
目录 1. 概述 2. 示例:绘制三角形 1) 数据的组织 2) varying变量 3. 结果 4. 理解 1) 图形装配和光栅化 2) 内插过程 5. 参考 1. 概述 在上一篇教程<Web ...
- Elasticsearch入门教程(四):Elasticsearch文档CURD
原文:Elasticsearch入门教程(四):Elasticsearch文档CURD 版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接: ...
- 无废话ExtJs 入门教程四[表单:FormPanel]
无废话ExtJs 入门教程四[表单:FormPanel] extjs技术交流,欢迎加群(201926085) 继上一节内容,我们在窗体里加了个表单.如下所示代码区的第28行位置,items:form. ...
- PySide——Python图形化界面入门教程(四)
PySide——Python图形化界面入门教程(四) ——创建自己的信号槽 ——Creating Your Own Signals and Slots 翻译自:http://pythoncentral ...
- RabbitMQ入门教程(四):工作队列(Work Queues)
原文:RabbitMQ入门教程(四):工作队列(Work Queues) 版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https:/ ...
- JasperReports入门教程(四):多数据源
JasperReports入门教程(四):多数据源 背景 在报表使用中,一个页面需要打印多个表格,每个表格分别使用不同的数据源是很常见的一个需求.假如我们现在有一个需求如下:需要在一个报表同时打印所有 ...
随机推荐
- 【CentOS7之防火墙命令】
1.CentOS7的发现带了很多行的指令和新的技术.并且在帮助的中文解释也增多了很多这意味着Linux在中国的发展越来越呈现普及.今天来介绍下CentOS7的新防火墙firewall. 更多的可查看: ...
- codevs3304 水果姐逛水果街
题目描述 Description 水果姐今天心情不错,来到了水果街. 水果街有n家水果店,呈直线结构,编号为1~n,每家店能买水果也能卖水果,并且同一家店卖与买的价格一样. 学过oi的水果姐迅速发现了 ...
- 第4天--linux内核学习
驱动使用方式1.编译到内核中 * make uImage进入到系统后mknod /dev/led c 500 0 创建设备节点 2.编译为模块 M make module进入到系统后 mknod /d ...
- 用swing也可以做出好看的界面
用Swing做出的例子:JavaFX做出的界面:后来又做出了自己编写的一套基于Synth的L&F,其与直接在代码中重绘某个组件不同,最大优点是具有可插拔性,即在不改变原有程序代码的情况下,用户 ...
- python动态创建类的声明
动态创建类的声明 使用内置函数type,原型:class type(name, bases, dict)name是类的名字,相当于__class__bases是类的基类,元组,可以有多个基类,但是基类 ...
- python 调用dll中c或c++语言的带指针方法,
在项目开发中遇到了,python需要去调用一个动态链接库dll中的c++方法.这个方法的参数为一个指针类型的参数,一个bool类型参数, 在python中并未对数字类型进行区分. int LP_Agc ...
- Android 数字签名
一个ApK如果要安装到手机上,必须要一个数字签名,不过你是debug也好,release也好,这个数字签名来源一个叫做证书的东西,在我们debug的时候,开发工具已经帮我们生成了一个叫做debug.k ...
- JS打开新页面跳转
有时候使用js进行页面跳转,想使用 a 标签中 target="_blank" 形式,跳转打开一个新的页面. 可以使用以下脚本,创建一个 a标签,然后模拟点击操作. 代码如下: ...
- a标签产生间隙,<a> 包裹 <img> 产生 4px 间隙
图片文字等inline元素默认是和父级元素的baseline对齐的,而baseline又和父级底边有一定距离(这个距离和 font-size,font-family 相关),所以设置 vertical ...
- 在程序中执行shell命令
在linux系统下的操作中我们会经常用到shell命令来进行,一开始学习进程的时候对于shell命令也进行了思考,认为shell命令就是一个进程的外壳,经过了后来的学习对于这一点也有了更多的认识. 用 ...