码迷,mamicode.com
首页 > Web开发 > 详细

WebGL-四

时间:2016-09-09 23:55:02      阅读:292      评论:0      收藏:0      [点我收藏+]

标签:

    上一节说的是对图形的变换,这一节主要介绍了光栅化的过程,在创建多个颜色的三角形的过程中顶点着点器的过程如下 ,首先通过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-四

标签:

原文地址:http://www.cnblogs.com/yizhuceyonghuming/p/5858330.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!