首页 > 代码库 > WebGL-七之一

WebGL-七之一

2024-08-13 04:08:24   219人阅读

    第六章讲的是一些GL的一些语法，前面已经涉及，学习时直接跳过，来看第七章，第七章是真正意义的三维立体的出现，其实图形绘制方法是差不多的，就是Z坐标此时不再为0，所以很容易能构造出一些立体图形，但是立体图形涉及了一些其它概念。

    正射投影：就是没有那种越远越小的效果，立体感没有那么强。

    其中涉及的知识有：视点，就是相当于你的眼睛坐标位置，当然实际上你的眼睛看屏幕时时不经常动的，在这里说成眼睛原理上说的过去也容易理解所以不较真了。观察目标点：这个看书上概念没看懂，推断出是这个意思，就是将被观察物体看成一个点，通过视点和被观察点才能确定视线，因为通常我们都是改变视点，所以被观察点设为一个changzhi就行这样就可以确定看的角度了。再加上一个正向的参数，就是你的眼睛的上下左右怎么个姿势看的。这个容易理解通过这些就能可以从不同角度看物体了立体效果也出来了，通过封装好的函数setLookAt(eye_X,eye_Y,eye_Z,atX,at_Y,at_Z,up,up,up);可以实现但是美中不足的是我们经常换着换着角度就发现物体应该呈现的部分缺了，恭喜你要学新知识了，那就是截面的概念，说直白些就是将你看的物体放在一个矩形空间中通过，前后左右上下确定横截面的大小通过前后截的坐标可以实现你的视线无死角了，可以通过setOrtho(0,0,0,0,0,0);封装好的函数可以直接调用实现。有旋转效果的自己尝试尝试  地址：

http://123.206.70.64:8080/WebGL7/LookAtTrianglesWithKeys_ViewVolume.html
    效果图：
    技术分享
    代码：
<!DOCTYPE html>
<html>
  <head>
    <title>LookAtTrianglesWithKeys_ViewVolume.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="http://www.mamicode.com/styles.css">-->

    <script src="http://www.mamicode.com/js/cuon-matrix.js"></script>
    <script src="http://www.mamicode.com/js/cuon-utils.js"></script>
    <script src="http://www.mamicode.com/js/webgl-debug.js"></script>
    <script src="http://www.mamicode.com/js/webgl-utils.js"></script>
    <script type="text/javascript">
        var VSHADER_SOURCR=
            ‘attribute vec4 a_Position;\n‘+
            //‘uniform mat4 u_ModelViewMatrix;\n‘+
            ‘uniform mat4 u_ProjMatrix;\n‘+//设置前后截面的参数
            ‘uniform mat4 u_ViewMatrix;\n‘+
            ‘attribute vec4 a_Color;\n‘+
            ‘varying vec4 v_Color;\n‘+
            ‘void main(){\n‘+
                ‘gl_Position=u_ProjMatrix*u_ViewMatrix*a_Position;\n‘+
                ‘v_Color=a_Color;\n‘+ 
             ‘}\n‘;
            
        var FSHADER_SOURCE=
        ‘precision mediump float;\n‘+
            ‘varying vec4 v_Color;\n‘+
            ‘void main(){\n‘+
                ‘gl_FragColor=v_Color;\n‘+
            ‘}‘;
            
        function main(){
            var canvas=document.getElementById("webgl");
            
            var nearFar=document.getElementById("nearFar");
            
            var gl=getWebGLContext(canvas);
            if(!gl){
                console.log("上下文获取失败！！");
            }
            
            if(!initShaders(gl,VSHADER_SOURCR,FSHADER_SOURCE)){
                console.log("着色器初始化失败！！");
            }
            gl.clearColor(0,0,0,1);
            var n=initVertexBuffer(gl);
            
            
            var u_ViewMatrix=gl.getUniformLocation(gl.program,‘u_ViewMatrix‘);//获取位置
            
            var viewMatrix=new Matrix4();
            //viewMatrix.setLookAt(0.20, 0.25, 0.25, 0, 0, 0, 0, 1, 0);//shi‘dian
            document.onkeydown=function(event){
                keydwon(event,gl,n,u_ViewMatrix,viewMatrix);
            };
            
            var u_ProjMatrix=gl.getUniformLocation(gl.program,‘u_ProjMatrix‘);//获取位置
            var projMatrix=new Matrix4();
            projMatrix.setOrtho(-1, 1, -1, 1, 0, 4);
            gl.uniformMatrix4fv(u_ProjMatrix,false,projMatrix.elements);
            
            draw(gl,n,u_ViewMatrix,viewMatrix);
            
            
            /*var modelMatrix =new Matrix4();
            modelMatrix.setRotate(-10, 0, 0, 1); 
            
            var modelViewMatrix=viewMatrix.multiply(modelMatrix);//让两个矩阵相乘
            var modelViewMatrix=new Matrix4();
            modelViewMatrix.setLookAt(0.20, 0.25, 0.25, 0, 0, 0, 0, 1, 0).rotate(10, 0, 0, 1);
            gl.uniformMatrix4fv(u_ModelViewMatrix,false,modelViewMatrix.elements); */
            
            gl.clear(gl.COLOR_BUFFER_BIT);
            gl.drawArrays(gl.TRIANGLES,0,n);
            
        }
        function initVertexBuffer(gl){
            var verticesTexcoords=new Float32Array([//数组中包含顶点坐标以及颜色数值
                    0.0,0.5,-0.4, 0.4,1.0,0.4,
                -0.5,-0.5,-0.4, 0.4,1.0,0.4,
                0.5,-0.5,-0.4, 1.0,0.4,0.4,
                
                0.5,0.4,-0.2, 1.0,1,0.4,
                -0.5,0.4,-0.2, 1.0,1.0,0.4,
                0.0,-0.6,-0.2, 1.0,1.0,0.4,
                
                0.0,0.5,0.0, 0.4,0.4,1.0,
                -0.5,-0.5,0.0, 0.4,0.4,1.0,
                0.5,-0.5,0.0, 1.0,0.4,0.4
            ]);
            var n=9;
            var vertexColorBuffer=gl.createBuffer();
            if(!vertexColorBuffer){
                console.log("缓冲区创建失败！！");
                return -1;
            }
            
            gl.bindBuffer(gl.ARRAY_BUFFER,vertexColorBuffer);
            gl.bufferData(gl.ARRAY_BUFFER,verticesTexcoords,gl.STATIC_DRAW);
            
            var SIZE=verticesTexcoords.BYTES_PER_ELEMENT;
            //alert(SIZE);
            var a_Position=gl.getAttribLocation(gl.program,‘a_Position‘);
            gl.vertexAttribPointer(a_Position,3,gl.FLOAT,false,SIZE*6,0);
            gl.enableVertexAttribArray(a_Position);
            
            var a_Color=gl.getAttribLocation(gl.program,‘a_Color‘);
            gl.vertexAttribPointer(a_Color,3,gl.FLOAT,false,6*SIZE,3*SIZE);
            gl.enableVertexAttribArray(a_Color);

            return n;
        }
        var g_eyeX=0.2,g_eyeY=0.25,g_eyeZ=0.25;
        function keydwon(event,gl,n,u_ViewMatrix,viewMatrix){
            //alert(event.keyCode);
            switch(event.keyCode){
                case 39:g_eyeX+=0.01;
                    break;
                case 37:g_eyeX-=0.01;
                    break;
            }
            //else{return;}
            draw(gl,n,u_ViewMatrix,viewMatrix);
        }
        function draw(gl,n,u_ViewMatrix,viewMatrix){
        //alert();
            viewMatrix.setLookAt(g_eyeX,g_eyeY,g_eyeZ,0,0,0,0,1,0);
            gl.uniformMatrix4fv(u_ViewMatrix,false,viewMatrix.elements);
            gl.clear(gl.COLOR_BUFFER_BIT);
            gl.drawArrays(gl.TRIANGLES,0,n);
            //math.round()将数据转为整数
        }
    </script>
  </head>
  <body onl oad="main()">
    <canvas width="400" height="400" id="webgl"></canvas>
    <p id="nearFar">显示近裁截面和远裁截面</p>
  </body>
</html>

WebGL-七之一


联系
我们