2021-10-09---绘制动的立方体

Mr_Swilder
65 阅读1分钟 
<html>
    <head>
        <script src="./lib/webgl-debug.js" type="text/javascript"></script>
        <script src="./lib/webgl-utils.js" type="text/javascript"></script>
        <script src="./lib/cuon-utils.js" type="text/javascript"></script>
        <script src="./lib/cuon-matrix.js" type="text/javascript"></script>
    </head>
    <body>
        <canvas width="800" height="800" id='canvas'></canvas>
        <script type="text/javascript">

            const v_Shader=`
                attribute vec4 a_position;
                uniform mat4 u_ModelViewMatrix;
                attribute vec2 a_textureCoord;
                varying vec2 v_textureCoord;
                void main(){
                    gl_Position=u_ModelViewMatrix*a_position;
                    gl_PointSize=1.0;
                    v_textureCoord=a_textureCoord;
                }
            `

            const f_shader=`
                precision mediump float;
                varying vec2 v_textureCoord; 
                uniform sampler2D u_sampler;
                void main(){
                    gl_FragColor=texture2D(u_sampler,v_textureCoord);
                }
            `
            var canvas=document.getElementById('canvas')
                var gl=getWebGLContext(canvas)
                if(!gl){
                    alert('初始化webgl失败')

                }

                if(!initShaders(gl,v_Shader,f_shader)){
                    alert('初始化着色器失败')
                }
            
                this.drawCube(gl)


            function drawCube(gl){
//----------------------------------------------------------------
                var cubeArray=new Float32Array([
                    1.0, 1.0, 1.0,  -1.0, 1.0, 1.0,  -1.0,-1.0, 1.0,   1.0,-1.0, 1.0,  // v0-v1-v2-v3 front
                    1.0, 1.0, 1.0,   1.0,-1.0, 1.0,   1.0,-1.0,-1.0,   1.0, 1.0,-1.0,  // v0-v3-v4-v5 right
                    1.0, 1.0, 1.0,   1.0, 1.0,-1.0,  -1.0, 1.0,-1.0,  -1.0, 1.0, 1.0,  // v0-v5-v6-v1 up
                    -1.0, 1.0, 1.0,  -1.0, 1.0,-1.0,  -1.0,-1.0,-1.0,  -1.0,-1.0, 1.0,  // v1-v6-v7-v2 left
                    -1.0,-1.0,-1.0,  1.0,-1.0,-1.0,   1.0,-1.0, 1.0,  -1.0,-1.0, 1.0,  // v7-v4-v3-v2 down
                    1.0,-1.0,-1.0,  -1.0,-1.0,-1.0,  -1.0, 1.0,-1.0,   1.0, 1.0,-1.0   // v4-v7-v6-v5 back
                ])

                initVertexArrayBuffer(gl,cubeArray,3,'a_position')

              

    
//--------------------------------------------------------------------------------
                var textures = new Float32Array([     // 顶点的颜色
                   1.0,1.0,  0.0,1.0,   0.0,0.0,   1.0,0.0,
                   1.0,1.0,  0.0,1.0,   0.0,0.0,   1.0,0.0,
                   1.0,1.0,  1.0,0.0,   0.0,0.0,   0.0,1.0,
                   1.0,1.0,  1.0,0.0,   0.0,0.0,   0.0,1.0,
                   0.0,0.0,  1.0,0.0,   1.0,1.0,   0.0,1.0,
                   1.0,1.0,  0.0,0.0,   0.0,1.0,   1.0,1.0
                ]);
                initVertexArrayBuffer(gl,textures,2,'a_textureCoord')
//-----------------------------------------------------------------

                var index_array = new Uint8Array([       // 绘制的索引
                    0, 1, 2,   2,3,0,    // front
                    4, 5, 6,   6,7,4,    // right
                    8, 9,10,   10,11,8,    // up
                    12,13,14,  14,15,12,    // left
                    16,17,18,  18,19,16,    // down
                    20,21,22,  22,23,20     // back
                ]);
                //创建顶点缓冲区
                const elementBuffer=gl.createBuffer()
                initTexture()
                //绑定索引缓冲区
                gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, elementBuffer)
                //绑定数据
                gl.bufferData(gl.ELEMENT_ARRAY_BUFFER,index_array,gl.STATIC_DRAW)
                let currentAngle=0
                let tick=function(){
                    currentAngle=this.computeAngle(currentAngle)
                    draw(currentAngle)
                    requestAnimationFrame(tick)
                }
              
                tick()

               
               
               
            }

          

            
            function draw(currentAngle){
                var viewMatrix = new Matrix4();
                  //设置视角矩阵的相关信息（视点，视线，上方向）
                viewMatrix.setLookAt(5,5,5,0,0,0,0,1,0);


                //设置投影矩阵相关信息
                var projMat4=new Matrix4()
                projMat4.setPerspective(30,1,1,300);
                //设置旋转矩阵
                var modelMat4=new Matrix4()

               
                modelMat4.setRotate(currentAngle, 0, 0, 1)

                var modeViewMatrix = projMat4.multiply(viewMatrix.multiply(modelMat4));

               
               
             

                //获取值并赋值
                let u_ModelViewMatrix=gl.getUniformLocation(gl.program, 'u_ModelViewMatrix')
                //将试图矩阵传给u_ViewMatrix变量
                gl.uniformMatrix4fv(u_ModelViewMatrix, false, modeViewMatrix.elements);
                //开启变量
                // gl.enableVertexAttribArray(u_ModelViewMatrix)
                gl.enable(gl.DEPTH_TEST)
               // gl.drawArrays(gl.TRIANGLES, 0, 4)
               gl.clearColor(0, 0, 0, 1)
                gl.clear(gl.COLOR_BUFFER_BIT|gl.DEPTH_BUFFER_BIT)   
               gl.drawElements(gl.TRIANGLES,36, gl.UNSIGNED_BYTE, 0)
            //    requestAnimationFrame(draw(projMat4,viewMatrix))
            }

            function computeAngle(currentRotate){
                return currentRotate+=1
            }

          
           

            //初始化顶点缓冲区
            function initVertexArrayBuffer(gl,arrayData,num,attrStr){
                //创建顶点缓冲区
                const vertexBuffer=gl.createBuffer()
                 //
                //绑定顶点缓冲区
                gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer)
                //绑定数据
                gl.bufferData(gl.ARRAY_BUFFER,arrayData,gl.STATIC_DRAW)


                //获取值并赋值
                let a_var=gl.getAttribLocation(gl.program, attrStr)
                //赋值
                gl.vertexAttribPointer(a_var, num, gl.FLOAT, false, 0, 0)
                //开启变量
                gl.enableVertexAttribArray(a_var)
            }


             
            //初始化纹理贴图
            function initTexture() {
                //创建纹理
                var texture=gl.createTexture();
                //获取纹理坐标的存储地址
                var u_Sampler=gl.getUniformLocation(gl.program,"u_sampler");
                console.log(u_Sampler)
                var image=new Image();
               
                image.onload=function(){
                    loadTexture(gl,texture,image,u_Sampler);
                }
                image.src="./img/dd.jpg"

            }


            function loadTexture(gl,texture,image,u_Sampler){
                //进行y轴翻转
                gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL,1);
                //开启0号纹理单元
                gl.activeTexture(gl.TEXTURE0);
                //向纹理单元绑定纹理对象
                gl.bindTexture(gl.TEXTURE_2D,texture);
                //设置纹理参数
                gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_MIN_FILTER,gl.LINEAR)
                //配置纹理图像
                gl.texImage2D(gl.TEXTURE_2D,0,gl.RGB,gl.RGB,gl.UNSIGNED_BYTE,image);
                //将0号纹理传递给着色器
                gl.uniform1i(u_Sampler,0)
                gl.clearColor(0, 0, 0, 1)
                gl.clear(gl.COLOR_BUFFER_BIT)
                gl.drawArrays(gl.TRIANGLES, 0, 6)
            }



    
           
        </script>
    </body>
</html>

image.png

avatar
文章
阅读
粉丝