美文网首页
2021-10-09 绘制动的立方体

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

作者: MrSwilder | 来源:发表于2021-10-09 15:41 被阅读0次
<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

相关文章

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

  • 2021-10-09 绘制立方体

  • 三相异步电动机制动控制(一)

    三相异步电动机制动控制有机械制动(电磁抱闸制动)和电气制动控制。电气制动有反接制动、能耗制动和再生制动等。单向运行...

  • 制动系统

    制动系统主要由制动踏板、制动主缸及助力器、制动压力调节控制单元、制动轮缸及制动器组成,制动系统的作用是车辆运动时减...

  • 【2018-10-03】数据立方体技术

    立方体物化:完全立方体(所有方体的所有单元)、冰山立方体(部分物化的立方体)、闭立方体(仅由闭单元组成的立方体)、...

  • 科目二 笔记

    制动踏板,就是脚刹,用于汽车减速和停车,踩下制动踏板,产生制动作用,抬起踏板制动作用解除。注意:此时的制动就是之是...

  • 科目一

    汽车制动:1 行车制动:脚下的制动踏板,控制四轮。2 驻车制动:手刹车,停车防止前滑后溜。3 发动机制动:抢档,用...

  • 30three.js补间动画Tween.js和选择物体

    演示地址:程序中有三个立方体。点击某个立方体开始运行。再次点击任意立方体则运行的立方体停止。 再次点击任意立方体则...

  • 驾考篇——科一、科四核心笔记

    发动机制动,行车制动。即使之前考过,在遇到行车制动时又有所遗忘。行车制动器即脚刹,驻车制动器即手刹。 错车道,高速...

  • 切片法求解立方体打洞问题 - 单个面打洞

    切片法求解立方体打洞问题 - 单个面打洞。 切片法求解立方体打洞问题:5×5×5 的立方体由棱长为1的小立方体组成...

网友评论

      本文标题:2021-10-09 绘制动的立方体

      本文链接:https://www.haomeiwen.com/subject/ptvqoltx.html