WebGL学习笔记四点一
上一章是对图形的变换，这一章的第一节主要介绍了光栅化的过程，在创建多个颜色的三角形的过程中顶点着点器的过程如下 ，1、首先通过attribute的变量从javascript中获取数据，根据drawArrays()的第一个参数将获取的第一个个点的坐标值放入图形装配区，然后将值传入片元着点器，进行光栅化，就是将顶点所围城的图形内一个个像素的分片，这些分片带有本身的坐标信息然后再颜色缓冲区上色，有多少片元就调用多少次的片元着色器。重点是片元都带有坐标信息可以通过片元着色器的内置对象gl_FragCoord（gl_FragCoord.xgl_FragCoord.y）为不同片元着色.浏览网址http://123.206.70.64:8080/WebGL5/ColoredTriangle.html
效果图
上代码：
<html>
<head>
<title>ColoredTriangle.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<script src="js/cuon-matrix.js"></script>
<script src="js/cuon-utils.js"></script>
<script src="js/webgl-debug.js"></script>
<script src="js/webgl-utils.js"></script>
<script type="text/javascript">
var VSHADER_SOURCE=//定点着色器
'attribute vec4 a_Position;\n'+//定义vec4的变量 并且声明该变量是attribute型的
'attribute float a_PointSize;\n'+
'attribute vec4 a_Color;\n'+
'varying vec4 v_Color;\n'+
'void main(){\n'+
'gl_Position=a_Position;\n'+//将attribute的变量赋值给内部
'gl_PointSize=a_PointSize;\n'+
'v_Color=a_Color;\n'+//将数据传给片元着色器
'}\n';
var FSHADER_SOURCE=//片元着色器
'precision mediump float;\n' +
'uniform float u_Width;\n'+
'uniform float u_Height;\n'+
'void main(){\n'+
'gl_FragColor=vec4(gl_FragCoord.x/400.0,0.0,gl_FragCoord.y/400.0,1.0);\n'+//从定点着色器中接收数据
'}\n';
function main(){
var canvas=document.getElementById("webgl");
var gl=getWebGLContext(canvas);
if(!gl){
console.log("gl load fail!");
return;
}
if(!initShaders(gl,VSHADER_SOURCE,FSHADER_SOURCE)){//初始化着色器
console.log("fail init shader()!");
return ;
}
var n=initVertexBuffers(gl);
if(n<0){
console.log("failed to set the positions of the vertices");
return;
}
gl.clearColor(0.0,0.0,0.0,1.0);
gl.clear(gl.COLOR_BUFFER_BIT);
gl.drawArrays(gl.TRIANGLES,0,n);
}
function initVertexBuffers(gl){
var verticesColors=new Float32Array([
0,0.5,2,1,0,0,
-0.5,-0.5,4,0,1,0,
0.5,-0.5,6,0,0,1,
-0.25,0,8,1,0,0,
0.25,0,10,0,1,0,
0,-0.5,12,0,0,1,]);//类型化数组
var n=6;//点的个数
var vertexColorBuffer=gl.createBuffer();//在webGL中创建缓冲区
if(!vertexColorBuffer){
console.log("failed to create the buffer object!");
return -1;
}
gl.bindBuffer(gl.ARRAY_BUFFER,vertexColorBuffer);//将缓冲区与ARRAY_BUFFER绑定就是指定了缓冲区的用途
gl.bufferData(gl.ARRAY_BUFFER,verticesColors,gl.STATIC_DRAW);//往缓冲区写数据 STATIC_DRAW对缓冲区优化
var FSize=verticesColors.BYTES_PER_ELEMENT;//数组中每个元素的字节大小
//alert(FSize);
var a_Position=gl.getAttribLocation(gl.program,'a_Position');
gl.vertexAttribPointer(a_Position,2,gl.FLOAT,false,6*FSize,0);//将缓冲区的数据传入分配给attribute对象 2是定点的分量个数 3*FSize表示相邻两个顶点间相距的字节数也可以理解为每隔3*FSize字节取俩值 是这些 0表示它的其实 偏移量就是从哪开始的
gl.enableVertexAttribArray(a_Position);//开启attribute变量
//设置点的颜色
//设置点的大小
var a_PointSize=gl.getAttribLocation(gl.program,'a_PointSize');
gl.vertexAttribPointer(a_PointSize,1,gl.FLOAT,false,6*FSize,2*FSize);
gl.enableVertexAttribArray(a_PointSize);
return n;
}
</script>
</head>
<body onload="main()">
<canvas id="webgl" width="600" height="400"></canvas>
</body>
</html>
WebGL学习笔记四点一的更多相关文章
- WebGL学习笔记四点二
前几章对图形图形内部多是 以纯色填充,但是现实中已经有许多好的图片了我们没必要一点点画,这一章第五章就是将图片以纹理的形式加载到片元中,主要过程如下,首先是定义点的坐标的attribute变量用于在j ...
- webgl学习笔记五-纹理
写在前面 建议先阅读下前面我的三篇文章. webgl学习笔记一-绘图单点 webgl学习笔记二-绘图多点 webgl学习笔记三-平移旋转缩放 术语 : 纹理 :图像 图形装配区域 :顶点着色器顶点坐标 ...
- webgl学习笔记四-动画
写在前面 建议先阅读下前面我的三篇文章. webgl学习笔记一-绘图单点 webgl学习笔记二-绘图多点 webgl学习笔记三-平移旋转缩放 下面我们将讲解下如何让一个正方形动起来~不断擦除和重绘 ...
- webgl学习笔记三-平移旋转缩放
写在前面 建议先阅读下前面我的两篇文章. webgl学习笔记一-绘图单点 webgl学习笔记二-绘图多点 平移 1.关键点说明 顶点着色器需要加上 uniform vec4 u_Translation ...
- webgl学习笔记二-绘图多点
写在前面 建议先看下第一篇webgl学习笔记一-绘图单点 第一篇文章,介绍了如何用webgl绘图一个点.接下来本文介绍的是如何绘制多个点.形成一个面. webgl提供了一种很方便的机制,即缓冲区对象, ...
- WebGL学习笔记二——绘制基本图元
webGL的基本图元点.线.三角形 gl.drawArrays(mode, first,count) first,代表从第几个点开始绘制即顶点的起始位置 count,代表绘制的点的数量. mode,代 ...
- WebGL学习笔记（2）
根据上一篇学习笔记,理解WebGL的工作原理及基本调用代码后,可以开始研究3D顶点对象的缩放.旋转.以及对对象进行可交互(鼠标或键盘控制)的旋转或者缩放. 要理解对象的旋转/缩放需要首先学习矩阵的计算 ...
- WEBGL学习笔记（七）：实践练手1-飞行类小游戏之游戏控制
接上一节,游戏控制首先要解决的就是碰撞检测了 这里用到了学习笔记(三)射线检测的内容了 以鸟为射线原点,向前.上.下分别发射3个射线,射线的长度较短大概为10~30. 根据上一节场景的建设,我把y轴设 ...
- WebGL学习笔记（3）
根据上篇笔记,在对3D对象可进行普通的控制后,以及学习了http://hiwebgl.com的教程第10章内容:世界模型的载入以及控制镜头移动,经过多次调试矩阵代码,已经可以实现在世界中旋转镜头/控制 ...
随机推荐
- iOS 计算源码行数
如果要统计ios开发代码,包括头文件的,终端命令进入项目目录下,命令如下 1.列出每个文件的行数 find . -name "*.m" -or -name "*.h&qu ...
- 在用AJAX跨域请求时遇到的问题
刚刚接触ajax就遇到一个词--跨域. 在我百度了各种资料以后总结了一句话:“只要不是在一个协议.域.名端口下,都属于跨域(127.0.0.1本地也属于跨域)”. 在做ajax请求的时候,请求不到并且 ...
- PHP/Laravel轻松上传超大文件
我们知道,在以前,文件上传采用的是直接传整个文件的方式,这种方式对付一些小文件是没有问题的.而当需要上传大文件时,此种方式不仅操作繁琐,需要修改web服务器和后端语言的配置,而且会大量占用服务器的内存 ...
- PHP中的call_user_func()与call_user_func_array()简单理解
原文地址:http://small.aiweimeng.top/index.php/archives/52.html call_user_func:把一个参数作为回调函数调用 用法说明: call_u ...
- Ubuntu14.04 64位机上安装OpenCV2.4.13(CUDA8.0)版操作步骤
Ubuntu14.04 64位机上安装CUDA8.0的操作步骤可以参考http://blog.csdn.net/fengbingchun/article/details/53840684,这里是在已经 ...
- 4011: [HNOI2015]落忆枫音
4011: [HNOI2015]落忆枫音 链接 分析: 原来是一个DAG,考虑如何构造树形图,显然可以给每个点找一个父节点,所以树形图的个数就是$\prod\limits_u deg[u]$. 那么加 ...
- hive streaming 使用的时候的一些心得
hive streaming 报错的解决方案: 1.把使用到hive streaming 的sql 分解,例如:select transform a,b,c,d using 'python cc.py ...
- springboot之assembly的文件配置
一.在使用springboot框架的时候,存在一个问题.就是我们配置yaml文件,需要单独提出来做参数修改.当然这个是可以通过spring.profiles.active的方式来配置dev,prod等 ...
- Jmeter接口测试（七）用例数据分离
之前我们的用例数据都是配置在 Jmeter Http 请求中,每次需要增加,修改用例都需要打开 jmeter 重新编辑,当用例越来越多的时候,用例维护起来就越来越麻烦,有没有好的方法来解决这种情况呢? ...
- 利用for循环如何判定是水仙花数
水仙花数业内的大家可能听说过,但是对于初学者来讲,对于水仙花数还是比较陌生的. 首先要知道的是水仙花数的计算公式:153=1**3+5**3+3**3: 如何去判定这个数是否为水仙花数,最好的办法就是 ...