上一章是对图形的变换，这一章的第一节主要介绍了光栅化的过程，在创建多个颜色的三角形的过程中顶点着点器的过程如下 ，1、首先通过attribute的变量从javascript中获取数据，根据drawArrays()的第一个参数将获取的第一个个点的坐标值放入图形装配区，然后将值传入片元着点器，进行光栅化，就是将顶点所围城的图形内一个个像素的分片，这些分片带有本身的坐标信息然后再颜色缓冲区上色，有多少片元就调用多少次的片元着色器。重点是片元都带有坐标信息可以通过片元着色器的内置对象gl_FragCoord（gl_FragCoord.xgl_FragCoord.y）为不同片元着色.浏览网址http://123.206.70.64:8080/WebGL5/ColoredTriangle.html

效果图

上代码：

<!DOCTYPE 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学习笔记四点一的更多相关文章

  1. WebGL学习笔记四点二

    前几章对图形图形内部多是 以纯色填充,但是现实中已经有许多好的图片了我们没必要一点点画,这一章第五章就是将图片以纹理的形式加载到片元中,主要过程如下,首先是定义点的坐标的attribute变量用于在j ...

  2. webgl学习笔记五-纹理

    写在前面 建议先阅读下前面我的三篇文章. webgl学习笔记一-绘图单点 webgl学习笔记二-绘图多点 webgl学习笔记三-平移旋转缩放 术语 : 纹理 :图像 图形装配区域 :顶点着色器顶点坐标 ...

  3. webgl学习笔记四-动画

    写在前面 建议先阅读下前面我的三篇文章. webgl学习笔记一-绘图单点 webgl学习笔记二-绘图多点 webgl学习笔记三-平移旋转缩放   下面我们将讲解下如何让一个正方形动起来~不断擦除和重绘 ...

  4. webgl学习笔记三-平移旋转缩放

    写在前面 建议先阅读下前面我的两篇文章. webgl学习笔记一-绘图单点 webgl学习笔记二-绘图多点 平移 1.关键点说明 顶点着色器需要加上 uniform vec4 u_Translation ...

  5. webgl学习笔记二-绘图多点

    写在前面 建议先看下第一篇webgl学习笔记一-绘图单点 第一篇文章,介绍了如何用webgl绘图一个点.接下来本文介绍的是如何绘制多个点.形成一个面. webgl提供了一种很方便的机制,即缓冲区对象, ...

  6. WebGL学习笔记二——绘制基本图元

    webGL的基本图元点.线.三角形 gl.drawArrays(mode, first,count) first,代表从第几个点开始绘制即顶点的起始位置 count,代表绘制的点的数量. mode,代 ...

  7. WebGL学习笔记（2）

    根据上一篇学习笔记,理解WebGL的工作原理及基本调用代码后,可以开始研究3D顶点对象的缩放.旋转.以及对对象进行可交互(鼠标或键盘控制)的旋转或者缩放. 要理解对象的旋转/缩放需要首先学习矩阵的计算 ...

  8. WEBGL学习笔记（七）：实践练手1-飞行类小游戏之游戏控制

    接上一节,游戏控制首先要解决的就是碰撞检测了 这里用到了学习笔记(三)射线检测的内容了 以鸟为射线原点,向前.上.下分别发射3个射线,射线的长度较短大概为10~30. 根据上一节场景的建设,我把y轴设 ...

  9. WebGL学习笔记（3）

    根据上篇笔记,在对3D对象可进行普通的控制后,以及学习了http://hiwebgl.com的教程第10章内容:世界模型的载入以及控制镜头移动,经过多次调试矩阵代码,已经可以实现在世界中旋转镜头/控制 ...

随机推荐

  1. MapReduce -- 好友推荐

    MapReduce实现好友推荐: 张三的好友有王五.小红.赵六; 同样王五.小红.赵六的共同好友是张三; 在王五和小红不认识的前提下,可以通过张三互相认识,给王五推荐的好友为小红, 给小红推荐的好友是 ...

  2. 大数据入门：Maven项目的创建及相关配置

    目录 Maven项目的创建及相关配置 一.Maven的介绍 1.Maven是什么: 2.Maven作用: 3.Maven项目的目录结构: 4.Maven的三点坐标: 5.maven的pom文件: 6. ...

  3. 通过R语言统计考研英语（二）单词出现频率

    通过R语言统计考研英语(二)单词出现频率 大家对英语考试并不陌生,首先是背单词,就是所谓的高频词汇.厚厚的一本单词,真的看的头大.最近结合自己刚学的R语言,为年底的考研做准备,想统计一下最近考研英语( ...

  4. python,使用枚举类，面向对象高级编程

    python #针对常量 #枚举类型定义一个class类型,然后,每个常量都是class的一个唯一实例. from enum import Enum Month = Enum('Month', ('J ...

  5. jQuery学习-显示与隐藏

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  6. Linux下多线程编程中信号量介绍及简单使用

    在Linux中有两种方法用于处理线程同步:信号量和互斥量. 线程的信号量是一种特殊的变量,它可以被增加或减少,但对其的关键访问被保证是原子操作.如果一个程序中有多个线程试图改变一个信号量的值,系统将保 ...

  7. [BZOJ3451]normal 点分治，NTT

    [BZOJ3451]normal 点分治,NTT 好久没更博了,咕咕咕. BZOJ3451权限题,上darkbzoj交吧. 一句话题意,求随机点分治的期望复杂度. 考虑计算每个点对的贡献:如果一个点在 ...

  8. 关于Mybatis的Example(and ,or )应用

    近期的一个项目中遇到Mybatis的Example的and or 的应用,感觉有必要记录一下(个人见解,有问题请指出.谢谢) 1.在Example中的每一个Criteria相当于一个括号,把里面的内容 ...

  9. pycharm导入路径问题

    博主在导入自定义模块式出现模块下有红色波浪线,如下: 例如from conf import setting 导入时会从当前目录下找找到youkuClient就不会再往下找了,所以引入模块的路径不能夸路 ...

  10. linux下查看端口是否被占用以及查看所有端口

    1.查看服务器端口是否被占用 >lsof  -i:8081 2.查看服务器所有端口 >netstat -ntlp 3.查看服务器是否开放某端口 tcp端口:>netstat -ntp ...