WEBGL学习【十】运动模型

其他 2018-07-11 02:44:50 阅读次数: 0 
<!DOCTYPE HTML>
<html lang="en">
<head>
    <title>LWEBGL6.2, Animated WebGL Scene with Key Input.</title>
    <script src="./lib/webgl-debug.js"></script>
    <script src="./lib/glMatrix.js"></script>
    <script src="./lib/webgl-utils.js"></script>

    <meta charset="utf-8">

    <script id="shader-vs" type="x-shader/x-vertex">
      attribute vec3 aVertexPosition;
      attribute vec2 aTextureCoordinates;

      uniform mat4 uMVMatrix;
      uniform mat4 uPMatrix;

      varying vec2 vTextureCoordinates;

      void main() {
        gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
        vTextureCoordinates = aTextureCoordinates;
      }
    </script>

    <script id="shader-fs" type="x-shader/x-fragment">
      precision mediump float;

      varying vec2 vTextureCoordinates;
      uniform sampler2D uSampler;
      void main() {
        gl_FragColor = texture2D(uSampler, vTextureCoordinates);
      }
    </script>

    <script type="text/javascript">
        // globals
        var gl;
        var pwgl = {};
        // Keep track of ongoing image loads to be able to handle lost context
        pwgl.ongoingImageLoads = [];
        // Keep track of pressed down keys in a list
        pwgl.listOfPressedKeys = [];
        var canvas;

        function createGLContext(canvas) {
            var names = ["webgl", "experimental-webgl"];
            var context = null;
            for (var i=0; i < names.length; i++) {
                try {
                    context = canvas.getContext(names[i]);
                } catch(e) {}
                if (context) {
                    break;
                }
            }
            if (context) {
                context.viewportWidth = canvas.width;
                context.viewportHeight = canvas.height;
            } else {
                alert("Failed to create WebGL context!");
            }
            return context;
        }

        function loadShaderFromDOM(id) {
            var shaderScript = document.getElementById(id);

            // If we don't find an element with the specified id
            // we do an early exit
            if (!shaderScript) {
                return null;
            }

            // Loop through the children for the found DOM element and
            // build up the shader source code as a string
            var shaderSource = "";
            var currentChild = shaderScript.firstChild;
            while (currentChild) {
                if (currentChild.nodeType == 3) { // 3 corresponds to TEXT_NODE
                    shaderSource += currentChild.textContent;
                }
                currentChild = currentChild.nextSibling;
            }

            var shader;
            if (shaderScript.type == "x-shader/x-fragment") {
                shader = gl.createShader(gl.FRAGMENT_SHADER);
            } else if (shaderScript.type == "x-shader/x-vertex") {
                shader = gl.createShader(gl.VERTEX_SHADER);
            } else {
                return null;
            }

            gl.shaderSource(shader, shaderSource);
            gl.compileShader(shader);

            if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS) &&
                !gl.isContextLost()) {
                alert(gl.getShaderInfoLog(shader));
                return null;
            }
            return shader;
        }

        function setupShaders() {
            var vertexShader = loadShaderFromDOM("shader-vs");
            var fragmentShader = loadShaderFromDOM("shader-fs");

            var shaderProgram = gl.createProgram();
            gl.attachShader(shaderProgram, vertexShader);
            gl.attachShader(shaderProgram, fragmentShader);
            gl.linkProgram(shaderProgram);

            if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS) &&
                !gl.isContextLost()) {
                alert("Failed to link shaders: " + gl.getProgramInfoLog(shaderProgram));
            }

            gl.useProgram(shaderProgram);

            pwgl.vertexPositionAttributeLoc =
                gl.getAttribLocation(shaderProgram, "aVertexPosition");
            pwgl.vertexTextureAttributeLoc =
                gl.getAttribLocation(shaderProgram, "aTextureCoordinates");
            pwgl.uniformMVMatrixLoc =
                gl.getUniformLocation(shaderProgram, "uMVMatrix");
            pwgl.uniformProjMatrixLoc =
                gl.getUniformLocation(shaderProgram, "uPMatrix");
            pwgl.uniformSamplerLoc =
                gl.getUniformLocation(shaderProgram, "uSampler");

            gl.enableVertexAttribArray(pwgl.vertexPositionAttributeLoc);
            gl.enableVertexAttribArray(pwgl.vertexTextureAttributeLoc);

            //创建模型视图投影矩阵
            pwgl.modelViewMatrix = mat4.create();
            pwgl.projectionMatrix = mat4.create();
            pwgl.modelViewMatrixStack = [];
        }

        function pushModelViewMatrix() {
            var copyToPush = mat4.create(pwgl.modelViewMatrix);
            pwgl.modelViewMatrixStack.push(copyToPush);
        }

        function popModelViewMatrix() {
            if (pwgl.modelViewMatrixStack.length == 0) {
                throw "Error popModelViewMatrix() - Stack was empty ";
            }
            pwgl.modelViewMatrix = pwgl.modelViewMatrixStack.pop();
        }

        function setupFloorBuffers() {
            pwgl.floorVertexPositionBuffer = gl.createBuffer();
            gl.bindBuffer(gl.ARRAY_BUFFER, pwgl.floorVertexPositionBuffer);

            var floorVertexPosition = [
                // Plane in y=0
                5.0,   0.0,  5.0,  //v0
                5.0,   0.0, -5.0,  //v1
                -5.0,   0.0, -5.0,  //v2
                -5.0,   0.0,  5.0]; //v3

            gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(floorVertexPosition),
                gl.STATIC_DRAW);

            pwgl.FLOOR_VERTEX_POS_BUF_ITEM_SIZE = 3;
            pwgl.FLOOR_VERTEX_POS_BUF_NUM_ITEMS = 4;

            pwgl.floorVertexTextureCoordinateBuffer = gl.createBuffer();
            gl.bindBuffer(gl.ARRAY_BUFFER, pwgl.floorVertexTextureCoordinateBuffer);
            var floorVertexTextureCoordinates = [
                2.0, 0.0,
                2.0, 2.0,
                0.0, 2.0,
                0.0, 0.0
            ];

            gl.bufferData(gl.ARRAY_BUFFER,
                new Float32Array(floorVertexTextureCoordinates),
                gl.STATIC_DRAW);

            pwgl.FLOOR_VERTEX_TEX_COORD_BUF_ITEM_SIZE = 2;
            pwgl.FLOOR_VERTEX_TEX_COORD_BUF_NUM_ITEMS = 4;

            pwgl.floorVertexIndexBuffer = gl.createBuffer();
            gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, pwgl.floorVertexIndexBuffer);
            var floorVertexIndices = [0, 1, 2, 3];

            gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(floorVertexIndices),
                gl.STATIC_DRAW);

            pwgl.FLOOR_VERTEX_INDEX_BUF_ITEM_SIZE = 1;
            pwgl.FLOOR_VERTEX_INDEX_BUF_NUM_ITEMS = 4;
        }

        function setupCubeBuffers() {
            pwgl.cubeVertexPositionBuffer = gl.createBuffer();
            gl.bindBuffer(gl.ARRAY_BUFFER, pwgl.cubeVertexPositionBuffer);

            var cubeVertexPosition = [
                // Front face
                1.0,  1.0,  1.0, //v0
                -1.0,  1.0,  1.0, //v1
                -1.0, -1.0,  1.0, //v2
                1.0, -1.0,  1.0, //v3

                // Back face
                1.0,  1.0, -1.0, //v4
                -1.0,  1.0, -1.0, //v5
                -1.0, -1.0, -1.0, //v6
                1.0, -1.0, -1.0, //v7

                // Left face
                -1.0,  1.0,  1.0, //v8
                -1.0,  1.0, -1.0, //v9
                -1.0, -1.0, -1.0, //v10
                -1.0, -1.0,  1.0, //v11

                // Right face
                1.0,  1.0,  1.0, //12
                1.0, -1.0,  1.0, //13
                1.0, -1.0, -1.0, //14
                1.0,  1.0, -1.0, //15

                // Top face
                1.0,  1.0,  1.0, //v16
                1.0,  1.0, -1.0, //v17
                -1.0,  1.0, -1.0, //v18
                -1.0,  1.0,  1.0, //v19

                // Bottom face
                1.0, -1.0,  1.0, //v20
                1.0, -1.0, -1.0, //v21
                -1.0, -1.0, -1.0, //v22
                -1.0, -1.0,  1.0, //v23
            ];

            gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(cubeVertexPosition),
                gl.STATIC_DRAW);

            pwgl.CUBE_VERTEX_POS_BUF_ITEM_SIZE = 3;
            pwgl.CUBE_VERTEX_POS_BUF_NUM_ITEMS = 24;

            // Setup buffer with texture coordinates
            pwgl.cubeVertexTextureCoordinateBuffer = gl.createBuffer();
            gl.bindBuffer(gl.ARRAY_BUFFER, pwgl.cubeVertexTextureCoordinateBuffer);
            var textureCoordinates = [
                //Front face
                0.0, 0.0, //v0
                1.0, 0.0, //v1
                1.0, 1.0, //v2
                0.0, 1.0, //v3

                // Back face
                0.0, 1.0, //v4
                1.0, 1.0, //v5
                1.0, 0.0, //v6
                0.0, 0.0, //v7

                // Left face
                0.0, 1.0, //v8
                1.0, 1.0, //v9
                1.0, 0.0, //v10
                0.0, 0.0, //v11

                // Right face
                0.0, 1.0, //v12
                1.0, 1.0, //v13
                1.0, 0.0, //v14
                0.0, 0.0, //v15

                // Top face
                0.0, 1.0, //v16
                1.0, 1.0, //v17
                1.0, 0.0, //v18
                0.0, 0.0, //v19

                // Bottom face
                0.0, 1.0, //v20
                1.0, 1.0, //v21
                1.0, 0.0, //v22
                0.0, 0.0, //v23
            ];

            gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(textureCoordinates),
                gl.STATIC_DRAW);
            pwgl.CUBE_VERTEX_TEX_COORD_BUF_ITEM_SIZE = 2;
            pwgl.CUBE_VERTEX_TEX_COORD_BUF_NUM_ITEMS = 24;

            pwgl.cubeVertexIndexBuffer = gl.createBuffer();
            gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, pwgl.cubeVertexIndexBuffer);
            var cubeVertexIndices = [
                0, 1, 2,      0, 2, 3,    // Front face
                4, 6, 5,      4, 7, 6,    // Back face
                8, 9, 10,     8, 10, 11,  // Left face
                12, 13, 14,   12, 14, 15, // Right face
                16, 17, 18,   16, 18, 19, // Top face
                20, 22, 21,   20, 23, 22  // Bottom face
            ];
            gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(cubeVertexIndices),
                gl.STATIC_DRAW);
            pwgl.CUBE_VERTEX_INDEX_BUF_ITEM_SIZE = 1;
            pwgl.CUBE_VERTEX_INDEX_BUF_NUM_ITEMS = 36;
        }

        function textureFinishedLoading(image, texture) {
            gl.bindTexture(gl.TEXTURE_2D, texture);
            gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);

            gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE,
                image);

            gl.generateMipmap(gl.TEXTURE_2D);

            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);

            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.MIRRORED_REPEAT);
            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.MIRRORED_REPEAT);
            gl.bindTexture(gl.TEXTURE_2D, null);
        }

        function loadImageForTexture(url, texture) {
            var image = new Image();
            image.onload = function() {
                pwgl.ongoingImageLoads.splice(pwgl.ongoingImageLoads.indexOf(image), 1);
                textureFinishedLoading(image, texture);
            }
            pwgl.ongoingImageLoads.push(image);
            image.src = url;
        }


        function setupTextures() {
            // Texture for the table
            pwgl.woodTexture = gl.createTexture();
            loadImageForTexture("./resources/wood_128x128.jpg", pwgl.woodTexture);

            // Texture for the floor
            pwgl.groundTexture = gl.createTexture();
            loadImageForTexture("./resources/wood_floor_256.jpg", pwgl.groundTexture);

            // Texture for the box on the table
            pwgl.boxTexture = gl.createTexture();
            loadImageForTexture("./resources/wicker_256.jpg", pwgl.boxTexture);

            //创建一个立方体
            pwgl.colorCube = gl.createTexture();
            loadImageForTexture("./resources/xiuxiuba.bmp", pwgl.colorCube);
        }

        function setupBuffers() {
            setupFloorBuffers();
            setupCubeBuffers();
        }

        function uploadModelViewMatrixToShader() {
            gl.uniformMatrix4fv(pwgl.uniformMVMatrixLoc, false, pwgl.modelViewMatrix);
        }

        function uploadProjectionMatrixToShader() {
            gl.uniformMatrix4fv(pwgl.uniformProjMatrixLoc,
                false, pwgl.projectionMatrix);
        }

        function drawFloor() {
            // Bind position buffer
            gl.bindBuffer(gl.ARRAY_BUFFER, pwgl.floorVertexPositionBuffer);
            gl.vertexAttribPointer(pwgl.vertexPositionAttributeLoc,
                pwgl.FLOOR_VERTEX_POS_BUF_ITEM_SIZE,
                gl.FLOAT, false, 0, 0);

            // Bind texture coordinate buffer
            gl.bindBuffer(gl.ARRAY_BUFFER, pwgl.floorVertexTextureCoordinateBuffer);
            gl.vertexAttribPointer(pwgl.vertexTextureAttributeLoc,
                pwgl.FLOOR_VERTEX_TEX_COORD_BUF_ITEM_SIZE,
                gl.FLOAT, false, 0, 0);

            gl.activeTexture(gl.TEXTURE0);
            gl.bindTexture(gl.TEXTURE_2D, pwgl.groundTexture);

            gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, pwgl.floorVertexIndexBuffer);
            gl.drawElements(gl.TRIANGLE_FAN, pwgl.FLOOR_VERTEX_INDEX_BUF_NUM_ITEMS,
                gl.UNSIGNED_SHORT, 0);
        }

        function drawCube(texture) {
            // Bind position buffer
            gl.bindBuffer(gl.ARRAY_BUFFER, pwgl.cubeVertexPositionBuffer);
            gl.vertexAttribPointer(pwgl.vertexPositionAttributeLoc,
                pwgl.CUBE_VERTEX_POS_BUF_ITEM_SIZE,
                gl.FLOAT, false, 0, 0);

            // bind texture coordinate buffer
            gl.bindBuffer(gl.ARRAY_BUFFER, pwgl.cubeVertexTextureCoordinateBuffer);
            gl.vertexAttribPointer(pwgl.vertexTextureAttributeLoc,
                pwgl.CUBE_VERTEX_TEX_COORD_BUF_ITEM_SIZE,
                gl.FLOAT, false, 0, 0);

            gl.activeTexture(gl.TEXTURE0);
            gl.bindTexture(gl.TEXTURE_2D, texture);

            // Bind index buffer and draw cube
            gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, pwgl.cubeVertexIndexBuffer);

            gl.drawElements(gl.TRIANGLES, pwgl.CUBE_VERTEX_INDEX_BUF_NUM_ITEMS,
                gl.UNSIGNED_SHORT, 0);
        }

        function drawTable(){
            // Draw a simple table by modifying the modelview matrix
            // (translate and scale) and then use the function drawCube()
            // to draw a table top and four table legs.

            pushModelViewMatrix();
            mat4.translate(pwgl.modelViewMatrix, [0.0, 1.0, 0.0], pwgl.modelViewMatrix);
            mat4.scale(pwgl.modelViewMatrix, [2.0, 0.1, 2.0], pwgl.modelViewMatrix);
            uploadModelViewMatrixToShader();
            // Draw the actual cube (now scaled to a cuboid) with woodTexture
            drawCube(pwgl.woodTexture);
            popModelViewMatrix();

            // Draw the table legs
            for (var i=-1; i<=1; i+=2) {
                for (var j= -1; j<=1; j+=2) {
                    pushModelViewMatrix();
                    mat4.translate(pwgl.modelViewMatrix, [i*1.9, -0.1, j*1.9],
                        pwgl.modelViewMatrix);
                    mat4.scale(pwgl.modelViewMatrix, [0.1, 1.0, 0.1],
                        pwgl.modelViewMatrix);
                    uploadModelViewMatrixToShader();
                    drawCube(pwgl.woodTexture);
                    popModelViewMatrix();
                }
            }
        }


        /*pwgl.fps = 0;
        pwgl.lastTime = 0;
        pwgl.frameCount = 0;*/

        function update_fps() {
            ++pwgl.frameCount;

            var curTime = Date.now();
            if (curTime - pwgl.lastTime > 1000) // 取固定时间间隔为1秒
            {
                pwgl.fps = pwgl.frameCount;
                pwgl.frameCount = 0;
                pwgl.lastTime = curTime;
            }
            return pwgl.fps;
        }

        function draw(currentTime) {
            /*if (pwgl.y < 2) {
                // First move the box vertically from its original position on top of
                // the table (where y = 2.7) to 5 units above the floor (y = 5).
                // Let this movement take 3 seconds
                pwgl.y = 2.7 + (currentTime - pwgl.animationStartTime)/3000 * (5.0-2.7);    //NAN(不是一个数字)
                pwgl.y = 2.7+1;
                //document.writeln(pwgl.y.toString());
                //pwgl.y = Math.random()*0.8;
            }
            else {
                // Then move the box in a circle where one revolution takes 2 seconds
                pwgl.angle = (currentTime - pwgl.animationStartTime)/
                    2000*2*Math.PI % (2*Math.PI);

                pwgl.x = Math.cos(pwgl.angle) * pwgl.circleRadius;
                pwgl.z = Math.sin(pwgl.angle) * pwgl.circleRadius;
                //document.writeln(pwgl.x+"   "+pwgl.z);
            }*/


            update_fps();

            //重复绘制
            pwgl.requestId = requestAnimFrame(draw);
            if (currentTime === undefined) {
                currentTime = Date.now();
                //document.writeln(currentTime+'    '+new Date().getTime());  两种获取时间的方法是等价的
            }

            handlePressedDownKeys();
            pwgl.yRot += 0.01;

            // Update FPS if a second or more has passed since last FPS update
            if(currentTime - pwgl.previousFrameTimeStamp >= 0) {
                //pwgl.fpsCounter.innerHTML = pwgl.nbrOfFramesForFPS;
                //pwgl.fpsCounter.innerHTML = "<a href=''>12212</a>";


                pwgl.nbrOfFramesForFPS = 0;
                pwgl.previousFrameTimeStamp = currentTime;
            }
            //pwgl.fpsCounter.innerHTML = "<a href=''>12212</a>";
            //计算我的当前的FPS
            pwgl.fpsCounter.innerHTML = pwgl.fps;

            gl.viewport(0, 0, gl.viewportWidth, gl.viewportHeight);
            gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
            mat4.perspective(60, gl.viewportWidth / gl.viewportHeight,
                1, 100.0, pwgl.projectionMatrix);
            mat4.identity(pwgl.modelViewMatrix);
            mat4.lookAt([8, 5, 10],[0, 0, 0], [0, 1,0], pwgl.modelViewMatrix);

            //让场景动起来
            mat4.rotateY(pwgl.modelViewMatrix, pwgl.yRot,pwgl.modelViewMatrix);
            /* mat4.translate(pwgl.modelViewMatrix,
                 [pwgl.x, pwgl.y, pwgl.z], pwgl.modelViewMatrix);*/
            uploadModelViewMatrixToShader();
            uploadProjectionMatrixToShader();
            gl.uniform1i(pwgl.uniformSamplerLoc, 0);

            drawFloor();

            // Draw table
            pushModelViewMatrix();
            mat4.translate(pwgl.modelViewMatrix, [0.0, 1.1, 0.0], pwgl.modelViewMatrix);
            uploadModelViewMatrixToShader();
            drawTable();
            popModelViewMatrix();


            pushModelViewMatrix();
            mat4.translate(pwgl.modelViewMatrix,
                [0, 2.7, 0], pwgl.modelViewMatrix);
            mat4.scale(pwgl.modelViewMatrix, [0.5, 0.5, 0.5], pwgl.modelViewMatrix);
            uploadModelViewMatrixToShader();
            drawCube(pwgl.colorCube);
            popModelViewMatrix();


            // Calculate the position for the box that is initially
            // on top of the table but will then be moved during animation
            pushModelViewMatrix();
            if (currentTime === undefined) {
                currentTime = Date.now();
            }
            if (pwgl.animationStartTime === undefined) {
                pwgl.animationStartTime = currentTime;
            }

            //让桌子上面的立方体飘起来哈
            // Update the position of the box
            if (pwgl.y < 5) {
                // First move the box vertically from its original position on top of
                // the table (where y = 2.7) to 5 units above the floor (y = 5).
                // Let this movement take 3 seconds
                //pwgl.y = 2.7 + (currentTime - pwgl.animationStartTime)/3000 * (5.0-2.7);
                pwgl.y = 2.7+3;
            }
            else {
                // Then move the box in a circle where one revolution takes 2 seconds
                pwgl.angle = (currentTime - pwgl.animationStartTime)/
                    2000*2*Math.PI % (2*Math.PI);

                pwgl.x = Math.cos(pwgl.angle) * pwgl.circleRadius;
                pwgl.z = Math.sin(pwgl.angle) * pwgl.circleRadius;
            }


            /*var num = (currentTime - pwgl.animationStartTime)/3000 * (5.0-2.7);
            //document.writeln(pwgl.y);////2.7
            //document.writeln("num="+num.toString());
            pwgl.y = 2.7 + (currentTime - pwgl.animationStartTime)/3000 * (5.0-2.7);
            //document.writeln("pwgl"+pwgl.y.toString());
            pwgl.angle = (currentTime - pwgl.animationStartTime)/
                2000*2*Math.PI % (2*Math.PI);*/
            //document.writeln("pwgl.angle"+pwgl.angle);


            //移动我的这个盒子
            mat4.translate(pwgl.modelViewMatrix,
                [pwgl.x, pwgl.y, pwgl.z], pwgl.modelViewMatrix);
            mat4.scale(pwgl.modelViewMatrix, [0.5, 0.5, 0.5], pwgl.modelViewMatrix);
            uploadModelViewMatrixToShader();
            drawCube(pwgl.boxTexture);
            popModelViewMatrix();

            /* mat4.translate(pwgl.modelViewMatrix,
                 [0, 2.7, 0], pwgl.modelViewMatrix);
             mat4.scale(pwgl.modelViewMatrix, [0.5, 0.5, 0.5], pwgl.modelViewMatrix);
             uploadModelViewMatrixToShader();
             drawCube(pwgl.boxTexture);
             popModelViewMatrix();*/

            // Update number of drawn frames to be able to count fps
            pwgl.nbrOfFramesForFPS++;
        }

        function handleContextLost(event) {
            event.preventDefault();
            cancelRequestAnimFrame(pwgl.requestId);

            // Ignore all ongoing image loads by removing
            // their onload handler
            for (var i = 0; i < pwgl.ongoingImageLoads.length; i++) {
                //丢失的上下文就忽略
                pwgl.ongoingImageLoads[i].onload = undefined;
            }
            pwgl.ongoingImageLoads = [];
        }


        function init() {
            // Initialization that is performed during first startup and when the
            // event webglcontextrestored is received is included in this function.
            setupShaders();
            setupBuffers();
            setupTextures();
            gl.clearColor(0.0, 0.0, 0.0, 1.0);
            gl.enable(gl.DEPTH_TEST);

            // Initialize some varibles for the moving box
            pwgl.x = 0.0;
            pwgl.y = 2.7;
            pwgl.z = 0.0;
            pwgl.circleRadius = 4.0;
            pwgl.angle = 0;

            pwgl.fps = 0;
            pwgl.lastTime = 0;
            pwgl.frameCount = 0;

            pwgl.yRot = 0;
            // Initialize some variables related to the animation
            pwgl.animationStartTime = undefined;
            pwgl.nbrOfFramesForFPS = 0;
            pwgl.previousFrameTimeStamp = Date.now();
        }

        //上下文回复后就重新初始化变量，并且启动动画
        function handleContextRestored(event) {
            init();
            pwgl.requestId = requestAnimFrame(draw,canvas);
        }

        function handleKeyDown(event) {
            pwgl.listOfPressedKeys[event.keyCode] = true;

            // If you want to have a log for keydown you can uncomment the two lines below.
            // console.log("keydown - keyCode=%d, charCode=%d",
            //             event.keyCode, event.charCode);
        }

        function handleKeyUp(event) {
            pwgl.listOfPressedKeys[event.keyCode] = false;

            // If you want to have a log for keyup you can uncomment the two lines below.
            // console.log("keyup - keyCode=%d, charCode=%d",
            //             event.keyCode, event.charCode);
        }

        function handleKeyPress(event) {
            // If you want to have a log for keypress you can uncomment the two lines below.
            // console.log("keypress - keyCode=%d, charCode=%d",
            //             event.keyCode, event.charCode);
        }

        function handlePressedDownKeys() {
            if (pwgl.listOfPressedKeys[38]) {
                // Arrow up, increase radius of circle
                pwgl.circleRadius += 0.1;
            }
            if (pwgl.listOfPressedKeys[40]) {
                // Arrow down, decrease radius of circle
                pwgl.circleRadius -= 0.1;
                if (pwgl.circleRadius < 0) {
                    pwgl.circleRadius = 0;
                }
            }
        }

        function handleMouseMove(event) {
            // If you want to test mousemove you can uncomment the two lines below.
            // console.log("handleMouseMove, clientX=%d, clientY=%d",
            //             event.clientX, event.clientY);
        }

        function handleMouseDown(event) {
            // If you want to test mousedown you can uncomment the two lines below.
            // console.log("handleDown, clientX=%d, clientY=%d, button=%d",
            //              event.clientX, event.clientY, event.button);
        }

        function handleMouseUp(event) {
            // If you want to test mouseup you can uncomment the two lines below.
            // console.log("handleMouseUp, clientX=%d, clientY=%d, button=%d",
            //              event.clientX, event.clientY, event.button);

        }

        function startup() {
            canvas = document.getElementById("myGLCanvas");
            canvas = WebGLDebugUtils.makeLostContextSimulatingContext(canvas);

            canvas.addEventListener('webglcontextlost', handleContextLost, false);
            canvas.addEventListener('webglcontextrestored', handleContextRestored, false);
            document.addEventListener('keydown', handleKeyDown, false);
            document.addEventListener('keyup', handleKeyUp, false);
            document.addEventListener('keypress', handleKeyPress, false);
            document.addEventListener('mousemove', handleMouseMove, false);
            document.addEventListener('mousedown', handleMouseDown, false);
            document.addEventListener('mouseup', handleMouseUp, false);

            gl = createGLContext(canvas);
            init();

            pwgl.fpsCounter = document.getElementById("fps");

            //Uncomment the three lines of code below to be able to test lost context
            /*window.addEventListener('mousedown', function() {
                canvas.loseContext();
            });*/

            // Draw the complete scene
            draw();
        }
    </script>

</head>

<body onload="startup();">
<canvas id="myGLCanvas" width="500" height="500"></canvas>
<div id="fps-counter">
    FPS: <span id="fps">--</span>
</div>
</body>


</html>

猜你喜欢

转载自blog.csdn.net/m0_37981569/article/details/78512967
今日推荐
国产云输入法——仅华为无云端数据上传安全问题
开源日报 | 工业开源项目OGG 1.0；姐姐，你要和我一起配置火狐吗；苹果AI遥遥落后？Fedora 40
开放签电子签章：停止新增，优化体验，前进更进（五一假期前工作）
开源日报 | 中学生开源前端动画引擎；全球首个Llama3 8B中文版开源模型；联想电脑恐出局；Linus讽刺AI炒作
“百模大战”必有一战 | 2024中国“百模大战”竞争格局分析
最强开源大模型 Llama 3 上架 Gitee AI
周排行
自媒体文章如何提高原创度以及如何检测原创度
开启qq邮箱的smtp服务
Qt程序单次启动（QSingleApplication类）
国外的外包网站
更新IDEA主题——放飞代码风格
cocos2dx 实现搓牌效果（翻牌效果），包括铺平动画
dict和json之间的互相转换
angular的一些思考
. Fibonacci数列是这样定义的： F[0] = 0 F[1] = 1 for each i ≥ 2: F[i] = F[i-1] + F[i-2] 因此，Fibonacci数列就形如：0, 1
洛谷P1064 金明的预算方案
每日归档
更多
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)
2024-04-21(0)
2024-04-20(6)
2024-04-19(5)
2024-04-18(0)
2024-04-17(5)
2024-04-16(70)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022