From 388eaa42489e5e55ed6c372c70641668db47315b Mon Sep 17 00:00:00 2001
From: quez-fun <54435650+quez-fun@users.noreply.github.com>
Date: Mon, 15 Jul 2024 22:07:22 +0800
Subject: [PATCH] Update gallery.html

deleted some obsolete code; fixed control on mobile devices
---
 gallery.html | 843 +++++++++++++++++++++++----------------------------
 1 file changed, 377 insertions(+), 466 deletions(-)
diff --git a/gallery.html b/gallery.html
index 0ca341d..74b1994 100644
--- a/gallery.html
+++ b/gallery.html
@@ -4,47 +4,21 @@
   <meta name="viewport"
     content="width=device-width, height=device-height, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
   <style>
+  
     body {
-      margin: 0;
+      margin: 0 auto;
       font-family: Arial, Helvetica, sans-serif;
-      color: grey;
+      color: #444;
       overflow: hidden;
+      width: auto;
+      height: auto;
     }
-
     canvas {
       border: 0;
-      width: 100vw;
-      height: 100vh;
+      width: 100%;
+      height: 100%;
       display: block;
-
-    }
-
-    #title {
-      position: absolute;
-      left: 50%;
-      transform: translateX(-50%);
-      top: 5%;
-      display: none;
-    }
-
-    #btn {
       position: absolute;
-      left: 50%;
-      transform: translateX(-50%);
-      bottom: 5%;
-    }
-
-    button {
-      background-color: white;
-      border: 1px solid black;
-      border-radius: 10px;
-      padding: 5px 8px;
-      margin: 8px;
-    }
-
-    a {
-      text-decoration: none;
-      color: blue;
     }
 
     .progress-bar {
@@ -68,12 +42,13 @@
   </style>
 
   <body>
-    <div class="progress-bar">
-      <div class="progress-fill" style="width: 50%;"></div>
-      loading...
-    </div>
-    <canvas id="canvas"></canvas>
-    <script id="vertex-shader-3d" type="x-shader/x-vertex">
+    <!--<div>temporary mobile console area:<div id="tmpConsole"></div>-->
+      <div class="progress-bar">
+        <div class="progress-fill" style="width: 50%;"></div>
+        loading...
+      </div>
+      <canvas id="canvas"></canvas>
+      <script id="vertex-shader-3d" type="x-shader/x-vertex">
     uniform mat4 u_worldViewProjection;
 
     attribute vec4 a_position;
@@ -90,7 +65,7 @@
       //v_fogDepth = -(u_worldViewProjection * a_position).z;
     }
 </script>
-    <script id="fragment-shader-3d" type="x-shader/x-fragment">
+      <script id="fragment-shader-3d" type="x-shader/x-fragment">
     precision highp float;
 
     varying vec2 v_texCoord;
@@ -110,7 +85,7 @@
       //gl_FragColor = mix(vec4(1.0, 0.8, 0.0, 1.0), vec4(0.0, 0.0, 1.0, 1.0), fogAmount);
     }
 </script>
-    <script id="frame-vertex-shader-3d" type="x-shader/x-vertex">
+      <script id="frame-vertex-shader-3d" type="x-shader/x-vertex">
     uniform mat4 u_worldViewProjection;
     
     attribute vec4 a_position;
@@ -119,7 +94,7 @@
       gl_Position = u_worldViewProjection * a_position;
     }
 </script>
-    <script id="frame-fragment-shader-3d" type="x-shader/x-fragment">
+      <script id="frame-fragment-shader-3d" type="x-shader/x-fragment">
 
   precision highp float;
 
@@ -129,567 +104,502 @@
 
 </script>
 
-    <script src="./webgl-utils.js"></script>
-    <script src="https://webglfundamentals.org/webgl/resources/m4.js"></script>
+      <script src="./webgl-utils.js"></script>
+      <script src="https://webglfundamentals.org/webgl/resources/m4.js"></script>
 
-    <script>
-      "use strict";
+      
+      <script>
+        "use strict";
 
-      function main() {
+        function main() {
 
-        let isMouseDown = false;
+          //const tmpConsole = document.getElementById("tmpConsole");
 
-        const loader = document.getElementsByClassName("progress-bar")[0];
+          let isMouseDown = false;
 
-        //互动区
+          const loader = document.getElementsByClassName("progress-bar")[0];
 
-        const up = [0, 1, 0];
-        let aspect = window.innerWidth / window.innerHeight;
+          //互动区
 
-        let id = -1, viewMatrix = [];
+          const up = [0, 1, 0];
+          let aspect = window.innerWidth / window.innerHeight;
 
-        let cameraPosition = [0, 0, 265] /* -80*/, target = [0, 0, -1000];
-        //let cameraPosition=[-55*aspect,5*aspect,-130], target=[-50,0,-1000];
+          let id = -1, viewMatrix = [];
 
-        //let newCamPosStart = [0, 0, 10], newTargetPosStart=[100,0,-1000];
-        //类似打牌效果：
-        let newCamPosStart = [0, 0, 260], newTargetPosStart = [0, 0, -1000];
+          let cameraPosition = [0, 0, 265] /* -80*/, target = [0, 0, -1000];
+          //let cameraPosition=[-55*aspect,5*aspect,-130], target=[-50,0,-1000];
 
-        let camMov = [0, 0, 0], targetMov = [0, 0, 0];
-        let tweenCount = 20;
+          //let newCamPosStart = [0, 0, 10], newTargetPosStart=[100,0,-1000];
+          //类似打牌效果：
+          let newCamPosStart = [0, 0, 260], newTargetPosStart = [0, 0, -1000];
 
-        let isTweenReady = false, isTweening = false;
+          let camMov = [0, 0, 0], targetMov = [0, 0, 0];
+          let tweenCount = 20;
 
+          let isTweenReady = false, isTweening = false;
 
-        //gl初始化
 
-        var canvas = document.querySelector("#canvas");
-        var gl = canvas.getContext("webgl");
-        if (!gl) {
-          return;
-        }
+          //gl初始化
 
+          var canvas = document.querySelector("#canvas");
+          var gl = canvas.getContext("webgl");
+          if (!gl) {
+            return;
+          }
 
-        //贴图区
-        const picNum = 38;
-        let loaded = 0;
-        let isLoaded = false;
-        let textures = [];
-        let objects = [];
 
-        function loadImage(url, callback) {
-          var image = new Image();
-          image.src = url;
-          image.onload = callback;
-          return image;
-        }
+          //贴图区
+          const picNum = 38;
+          let loaded = 0;
+          let isLoaded = false;
+          let textures = [];
+          let objects = [];
 
+          function loadImage(url, callback) {
+            var image = new Image();
+            image.src = url;
+            image.onload = callback;
+            return image;
+          }
 
-        var images = [];
-        function loadImages(urls, callback) {
-          //var images = [];
-          var imagesToLoad = urls.length;
 
-          // Called each time an image finished
-          // loading.
-          var onImageLoad = function () {
-            --imagesToLoad;
-            // If all the images are loaded call the callback.
-            if (imagesToLoad === 0) {
-              callback(images);
-              loader.style.display = 'none';
+          var images = [];
+          function loadImages(urls, callback) {
+            //var images = [];
+            var imagesToLoad = urls.length;
+
+            // Called each time an image finished
+            // loading.
+            var onImageLoad = function () {
+              --imagesToLoad;
+              // If all the images are loaded call the callback.
+              if (imagesToLoad === 0) {
+                callback(images);
+                loader.style.display = 'none';
+              }
+            };
+
+            for (var ii = 0; ii < imagesToLoad; ++ii) {
+              var image = loadImage(urls[ii], onImageLoad);
+              images.push(image);
             }
+          }
+
+
+          gl.enable(gl.DEPTH_TEST);
+
+          const targetTexture = gl.createTexture();
+
+          /* 加入depth buffer（1/3） */
+          const depthBuffer = gl.createRenderbuffer();
+          const fb = gl.createFramebuffer();
+
+          const d = 0.1, picW = 5, picH = 8, frameW = 7, frameH = 10.5;
+          var arrays2 = {
+            position: {
+              numComponents: 3, data: [-frameW - d, frameH + d, 0, -frameW - d, frameH - d, 0, frameW - d, frameH - d, 0, frameW - d, frameH + d, 0,
+              -frameW - d, -frameH - d, 0, -frameW + d, -frameH - d, 0, -frameW + d, frameH - d, 0,
+              frameW + d, -frameH - d, 0, frameW + d, -frameH + d, 0, -frameW + d, -frameH + d, 0,
+              frameW - d, -frameH + d, 0, frameW + d, frameH + d, 0,
+                // -picW,-picH,0, picW,-picH,0, -picW,picH,0, picW,picH,0
+              ],
+            },
+            texcoord: {
+              numComponents: 2, data: [0, 1, 1, 1, 0, 0, 1, 0,
+                0, 1, 1, 1, 0, 0, 1, 0,
+                0, 1, 1, 1, 0, 0, 1, 0,
+                0, 1, 1, 1, 0, 0, 1, 0,
+                //  0, 1, 1, 1, 0, 0, 1, 0
+              ],
+            },
+            indices: {
+              numComponents: 3, data: [0, 1, 2, 0, 2, 3,
+                1, 4, 6, 4, 5, 6,
+                5, 7, 9, 7, 8, 9,
+                10, 8, 11, 11, 3, 10,
+                //    0+12, 1+12, 2+12, 1+12, 2+12, 3+12
+              ],
+            },
           };
 
-          for (var ii = 0; ii < imagesToLoad; ++ii) {
-            var image = loadImage(urls[ii], onImageLoad);
-            images.push(image);
-          }
-        }
 
+          var arrays = {
 
-        gl.enable(gl.DEPTH_TEST);
-
-        const targetTexture = gl.createTexture();
-
-        /* 加入depth buffer（1/3） */
-        const depthBuffer = gl.createRenderbuffer();
-        const fb = gl.createFramebuffer();
-
-        const d = 0.1, picW = 5, picH = 8, frameW = 7, frameH = 10.5;
-        var arrays2 = {
-          position: {
-            numComponents: 3, data: [-frameW - d, frameH + d, 0, -frameW - d, frameH - d, 0, frameW - d, frameH - d, 0, frameW - d, frameH + d, 0,
-            -frameW - d, -frameH - d, 0, -frameW + d, -frameH - d, 0, -frameW + d, frameH - d, 0,
-            frameW + d, -frameH - d, 0, frameW + d, -frameH + d, 0, -frameW + d, -frameH + d, 0,
-            frameW - d, -frameH + d, 0, frameW + d, frameH + d, 0,
-              // -picW,-picH,0, picW,-picH,0, -picW,picH,0, picW,picH,0
-            ],
-          },
-          texcoord: {
-            numComponents: 2, data: [0, 1, 1, 1, 0, 0, 1, 0,
-              0, 1, 1, 1, 0, 0, 1, 0,
-              0, 1, 1, 1, 0, 0, 1, 0,
-              0, 1, 1, 1, 0, 0, 1, 0,
-              //  0, 1, 1, 1, 0, 0, 1, 0
-            ],
-          },
-          indices: {
-            numComponents: 3, data: [0, 1, 2, 0, 2, 3,
-              1, 4, 6, 4, 5, 6,
-              5, 7, 9, 7, 8, 9,
-              10, 8, 11, 11, 3, 10,
-              //    0+12, 1+12, 2+12, 1+12, 2+12, 3+12
-            ],
-          },
-        };
-
-
-        var arrays = {
-
-          position: { numComponents: 3, data: [-picW, -picH, 0, picW, -picH, 0, -picW, picH, 0, picW, picH, 0], },
-          texcoord: { numComponents: 2, data: [0, 1, 1, 1, 0, 0, 1, 0], },
-          indices: { numComponents: 3, data: [0, 1, 2, 1, 2, 3], },
-        };
-
-        var bufferInfo = webglUtils.createBufferInfoFromArrays(gl, arrays);
-        var bufferInfo2 = webglUtils.createBufferInfoFromArrays(gl, arrays2);
-        var programInfo = webglUtils.createProgramInfo(gl, ["vertex-shader-3d", "fragment-shader-3d"]);
-        var frameProgramInfo = webglUtils.createProgramInfo(gl, ["frame-vertex-shader-3d", "frame-fragment-shader-3d"]);
-
-        function degToRad(d) {
-          return d * Math.PI / 180;
-        }
+            position: { numComponents: 3, data: [-picW, -picH, 0, picW, -picH, 0, -picW, picH, 0, picW, picH, 0], },
+            texcoord: { numComponents: 2, data: [0, 1, 1, 1, 0, 0, 1, 0], },
+            indices: { numComponents: 3, data: [0, 1, 2, 1, 2, 3], },
+          };
 
-        var fieldOfViewRadians = degToRad(60);
+          var bufferInfo = webglUtils.createBufferInfoFromArrays(gl, arrays);
+          var bufferInfo2 = webglUtils.createBufferInfoFromArrays(gl, arrays2);
+          var programInfo = webglUtils.createProgramInfo(gl, ["vertex-shader-3d", "fragment-shader-3d"]);
+          var frameProgramInfo = webglUtils.createProgramInfo(gl, ["frame-vertex-shader-3d", "frame-fragment-shader-3d"]);
 
-        var uniformsThatAreComputedForEachObject = {
-          u_worldViewProjection: m4.identity(),
-        };
+          function degToRad(d) {
+            return d * Math.PI / 180;
+          }
 
-        var pickUniforms = {
-          u_worldViewProjection: m4.identity(),
-        };
+          var fieldOfViewRadians = degToRad(60);
 
+          var uniformsThatAreComputedForEachObject = {
+            u_worldViewProjection: m4.identity(),
+          };
 
-        //fog区
-        //var fogColorLocation = gl.getUniformLocation(programInfo.program, "u_fogColor");
-        //var fogAmountLocation = gl.getUniformLocation(programInfo.program, "u_fogAmount");
+          var pickUniforms = {
+            u_worldViewProjection: m4.identity(),
+          };
 
-        var opacityLocation = gl.getUniformLocation(programInfo.program, "u_opacity");
-        function drawScene() {
 
-          resizeCanvasToDisplaySize(canvas);
-          aspect = gl.canvas.clientWidth / gl.canvas.clientHeight;
+          //fog区
+          //var fogColorLocation = gl.getUniformLocation(programInfo.program, "u_fogColor");
+          //var fogAmountLocation = gl.getUniformLocation(programInfo.program, "u_fogAmount");
 
-          //需要一个viewMatrix
+          var opacityLocation = gl.getUniformLocation(programInfo.program, "u_opacity");
+          function drawScene() {
 
-          gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+            resizeCanvasToDisplaySize(canvas);
+            aspect = gl.canvas.clientWidth / gl.canvas.clientHeight;
 
-          // Tell WebGL how to convert from clip space to pixels
-          gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
+            //需要一个viewMatrix
 
-          //gl.clearColor(1.0,1.0,1.0,1.0);
-          // Clear the canvas AND the depth buffer.
-          gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
+            gl.bindFramebuffer(gl.FRAMEBUFFER, null);
 
-          var projectionMatrix = m4.perspective(fieldOfViewRadians, aspect, 1, 2000);
+            // Tell WebGL how to convert from clip space to pixels
+            gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
 
-          var viewProjectionMatrix = m4.multiply(projectionMatrix, viewMatrix);
+            //gl.clearColor(1.0,1.0,1.0,1.0);
+            // Clear the canvas AND the depth buffer.
+            gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
 
-          gl.useProgram(programInfo.program);
+            var projectionMatrix = m4.perspective(fieldOfViewRadians, aspect, 1, 2000);
 
-          // Setup all the needed buffers and attributes.
-          webglUtils.setBuffersAndAttributes(gl, programInfo, bufferInfo);
+            var viewProjectionMatrix = m4.multiply(projectionMatrix, viewMatrix);
 
-          //webglUtils.setBuffersAndAttributes(gl, programInfo, bufferInfo2);
+            gl.useProgram(programInfo.program);
 
-          gl.enable(gl.BLEND);
-          //gl.blendFunc(gl.SRC_COLOR, gl.DST_COLOR);
-          gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
-          //gl.blendFunc(gl.ONE, gl.DST_COLOR);
-          //gl.blendFunc(gl.SRC_ALPHA, gl.DST_ALPHA);
-          //gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
+            // Setup all the needed buffers and attributes.
+            webglUtils.setBuffersAndAttributes(gl, programInfo, bufferInfo);
 
-          objects.forEach(function (object) {
+            //webglUtils.setBuffersAndAttributes(gl, programInfo, bufferInfo2);
 
-            var worldMatrix = m4.xRotation(0);
-            worldMatrix = m4.translate(worldMatrix, -object.xTranslation, object.yTranslation, object.zTranslation);
-            worldMatrix = m4.yRotate(worldMatrix, object.yRotation);
+            gl.enable(gl.BLEND);
+            //gl.blendFunc(gl.SRC_COLOR, gl.DST_COLOR);
+            gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
+            //gl.blendFunc(gl.ONE, gl.DST_COLOR);
+            //gl.blendFunc(gl.SRC_ALPHA, gl.DST_ALPHA);
+            //gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
 
-            // Multiply the matrices.
-            m4.multiply(viewProjectionMatrix, worldMatrix, uniformsThatAreComputedForEachObject.u_worldViewProjection);
+            objects.forEach(function (object) {
 
-            // Set the uniforms we just computed
-            webglUtils.setUniforms(programInfo, uniformsThatAreComputedForEachObject);
+              var worldMatrix = m4.xRotation(0);
+              worldMatrix = m4.translate(worldMatrix, -object.xTranslation, object.yTranslation, object.zTranslation);
+              worldMatrix = m4.yRotate(worldMatrix, object.yRotation);
 
-            // Set the uniforms that are specific to the this object.
-            webglUtils.setUniforms(programInfo, object.materialUniforms);
+              // Multiply the matrices.
+              m4.multiply(viewProjectionMatrix, worldMatrix, uniformsThatAreComputedForEachObject.u_worldViewProjection);
 
+              // Set the uniforms we just computed
+              webglUtils.setUniforms(programInfo, uniformsThatAreComputedForEachObject);
 
-            if (cameraPosition[0] === 0) {
-              const opacity = (Math.sin((Math.abs(cameraPosition[2]) - 5) / 10 * Math.PI) + 2) / 2;
-              gl.uniform1f(opacityLocation, opacity);
-            }
-            else {
-              const opacity = 0.45 + 2 / Math.abs(cameraPosition[0]);
-              gl.uniform1f(opacityLocation, opacity);
-              console.log(cameraPosition[0], target[0]);
-            }
+              // Set the uniforms that are specific to the this object.
+              webglUtils.setUniforms(programInfo, object.materialUniforms);
 
-            // Draw the geometry.
-            //gl.drawElements(gl.TRIANGLES, bufferInfo2.numElements, gl.UNSIGNED_SHORT, 0);
-            gl.drawElements(gl.TRIANGLES, bufferInfo.numElements, gl.UNSIGNED_SHORT, 0);
 
+              if (cameraPosition[0] === 0) {
+                const opacity = (Math.sin((Math.abs(cameraPosition[2]) - 5) / 10 * Math.PI) + 2) / 2;
+                gl.uniform1f(opacityLocation, opacity);
+              }
+              else {
+                const opacity = 0.45 + 2 / Math.abs(cameraPosition[0]);
+                gl.uniform1f(opacityLocation, opacity);
+                console.log(cameraPosition[0], target[0]);
+              }
 
-          });
+              // Draw the geometry.
+              //gl.drawElements(gl.TRIANGLES, bufferInfo2.numElements, gl.UNSIGNED_SHORT, 0);
+              gl.drawElements(gl.TRIANGLES, bufferInfo.numElements, gl.UNSIGNED_SHORT, 0);
 
 
-          //console.log('drawScene');
-        }
+            });
 
 
-        function drawFrames() {
+            //console.log('drawScene');
+          }
 
-          resizeCanvasToDisplaySize(canvas);
-          aspect = gl.canvas.clientWidth / gl.canvas.clientHeight;
 
-          //需要一个viewMatrix
+          function drawFrames() {
 
-          gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+            resizeCanvasToDisplaySize(canvas);
+            aspect = gl.canvas.clientWidth / gl.canvas.clientHeight;
 
-          // Tell WebGL how to convert from clip space to pixels
-          gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
+            //需要一个viewMatrix
 
-          //gl.clearColor(1.0,1.0,1.0,1.0);
-          // Clear the canvas AND the depth buffer.
-          //gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
+            gl.bindFramebuffer(gl.FRAMEBUFFER, null);
 
-          var projectionMatrix = m4.perspective(fieldOfViewRadians, aspect, 1, 2000);
+            // Tell WebGL how to convert from clip space to pixels
+            gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
 
-          var viewProjectionMatrix = m4.multiply(projectionMatrix, viewMatrix);
+            //gl.clearColor(1.0,1.0,1.0,1.0);
+            // Clear the canvas AND the depth buffer.
+            //gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
 
-          gl.useProgram(frameProgramInfo.program);
+            var projectionMatrix = m4.perspective(fieldOfViewRadians, aspect, 1, 2000);
 
-          // Setup all the needed buffers and attributes.
-          //webglUtils.setBuffersAndAttributes(gl, frameProgramInfo, bufferInfo);
+            var viewProjectionMatrix = m4.multiply(projectionMatrix, viewMatrix);
 
-          webglUtils.setBuffersAndAttributes(gl, programInfo, bufferInfo2);
+            gl.useProgram(frameProgramInfo.program);
 
-          gl.enable(gl.BLEND);
-          //gl.blendFunc(gl.SRC_COLOR, gl.DST_COLOR);
-          gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
-          //gl.blendFunc(gl.ONE, gl.DST_COLOR);
-          //gl.blendFunc(gl.SRC_ALPHA, gl.DST_ALPHA);
-          //gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
+            // Setup all the needed buffers and attributes.
+            //webglUtils.setBuffersAndAttributes(gl, frameProgramInfo, bufferInfo);
 
-          objects.forEach(function (object) {
+            webglUtils.setBuffersAndAttributes(gl, programInfo, bufferInfo2);
 
-            var worldMatrix = m4.xRotation(0);
-            worldMatrix = m4.translate(worldMatrix, object.xTranslation, object.yTranslation, object.zTranslation);
-            worldMatrix = m4.yRotate(worldMatrix, object.yRotation);
+            gl.enable(gl.BLEND);
+            //gl.blendFunc(gl.SRC_COLOR, gl.DST_COLOR);
+            gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
+            //gl.blendFunc(gl.ONE, gl.DST_COLOR);
+            //gl.blendFunc(gl.SRC_ALPHA, gl.DST_ALPHA);
+            //gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
 
-            // Multiply the matrices.
-            m4.multiply(viewProjectionMatrix, worldMatrix, uniformsThatAreComputedForEachObject.u_worldViewProjection);
+            objects.forEach(function (object) {
 
-            // Set the uniforms we just computed
-            webglUtils.setUniforms(frameProgramInfo, uniformsThatAreComputedForEachObject);
+              var worldMatrix = m4.xRotation(0);
+              worldMatrix = m4.translate(worldMatrix, object.xTranslation, object.yTranslation, object.zTranslation);
+              worldMatrix = m4.yRotate(worldMatrix, object.yRotation);
 
-            // Set the uniforms that are specific to the this object.
-            webglUtils.setUniforms(frameProgramInfo, object.materialUniforms);
+              // Multiply the matrices.
+              m4.multiply(viewProjectionMatrix, worldMatrix, uniformsThatAreComputedForEachObject.u_worldViewProjection);
 
+              // Set the uniforms we just computed
+              webglUtils.setUniforms(frameProgramInfo, uniformsThatAreComputedForEachObject);
 
-            //gl.uniform1f(opacityLocation, opacity);
-            //console.log(cameraPosition[2], opacity);
-            // Draw the geometry.
-            //gl.drawElements(gl.TRIANGLES, bufferInfo2.numElements, gl.UNSIGNED_SHORT, 0);
-            gl.drawElements(gl.TRIANGLES, bufferInfo2.numElements, gl.UNSIGNED_SHORT, 0);
+              // Set the uniforms that are specific to the this object.
+              webglUtils.setUniforms(frameProgramInfo, object.materialUniforms);
 
 
-          });
+              //gl.uniform1f(opacityLocation, opacity);
+              //console.log(cameraPosition[2], opacity);
+              // Draw the geometry.
+              //gl.drawElements(gl.TRIANGLES, bufferInfo2.numElements, gl.UNSIGNED_SHORT, 0);
+              gl.drawElements(gl.TRIANGLES, bufferInfo2.numElements, gl.UNSIGNED_SHORT, 0);
 
 
-          //console.log('drawScene');
-        }
+            });
+
 
-        function camPos() {
+            //console.log('drawScene');
+          }
 
-          if (id < 0) {
+          function camPos() {
 
-            var cameraMatrix = m4.lookAt(cameraPosition, target, up, m4.identity());
-            viewMatrix = m4.inverse(cameraMatrix);
+            if (id < 0) {
+
+              var cameraMatrix = m4.lookAt(cameraPosition, target, up, m4.identity());
+              viewMatrix = m4.inverse(cameraMatrix);
 
-          } /* else if (id==0){
+            } /* else if (id==0){
         cameraPosition = [0,0,0];
         target = [0,0,-1000];
       }*/
 
 
-          else {
+            else {
 
-            /*
-            cameraPosition = [(1*id-15)*aspect, id*aspect, -20*id-20];
-            target = [(1*id+5)*aspect, id*aspect, -1000];
-            */
+              /*
+              cameraPosition = [(1*id-15)*aspect, id*aspect, -20*id-20];
+              target = [(1*id+5)*aspect, id*aspect, -1000];
+              */
 
-            cameraPosition = [0, 0, -28];
-            target = [0, 0, -1000];
+              cameraPosition = [0, 0, -28];
+              target = [0, 0, -1000];
 
+            }
 
           }
 
-        }
-
-        function tweenRotate(e) {
-
-          if (!isTweening) {
-            id = e.target.id;
-            camPos();
-            tween();
-            title.innerHTML = subtitles[id];
+          function resizeCanvasToDisplaySize(canvas, multiplier) {
+            multiplier = multiplier || 2;
+            const width = canvas.clientWidth * multiplier | 0;
+            const height = canvas.clientHeight * multiplier | 0;
+            if (canvas.width !== width || canvas.height !== height) {
+              canvas.width = width;
+              canvas.height = height;
+              aspect = width / height;
+              return true;
+            }
+            return false;
+            //drawScene();
           }
 
-        }
-
-        function tween() {
-
-          if (tweenCount > 0) {
-
-            if (!isTweenReady) {
-              prepareTween();
+          let imgList = [];
+          function generateImgList() {
+            for (let i = 0; i < picNum; i++) {
+              imgList.push("./pic-v1/" + (i + 1) + ".jpg");
             }
-
-            isTweening = true;
-
-            tweenCount -= 1;
-
-            newCamPosStart[0] += camMov[0];
-            newCamPosStart[1] += camMov[1];
-            newCamPosStart[2] += camMov[2];
-
-            newTargetPosStart[0] += targetMov[0];
-            newTargetPosStart[1] += targetMov[1];
-            newTargetPosStart[2] += targetMov[2];
-
-            var cameraMatrix = m4.lookAt(newCamPosStart, newTargetPosStart, up, m4.identity());
-            viewMatrix = m4.inverse(cameraMatrix);
-
-            requestAnimationFrame(drawScene);
-
-          } else {
-            isTweenReady = false;
-            isTweening = false;
-            //这里考虑清空并初始化初始值和差值，以准备重新开始prepareTween
-            newCamPosStart = cameraPosition;
-            newTargetPosStart = target;
-            tweenCount = 10;
           }
 
-        }
 
-        function prepareTween() {
+          function init() {
 
-          const newCamPosEnd = cameraPosition;
-          const newTargetPosEnd = target;
-
-          camMov[0] = (newCamPosEnd[0] - newCamPosStart[0]) / tweenCount;
-          camMov[1] = (newCamPosEnd[1] - newCamPosStart[1]) / tweenCount;
-          camMov[2] = (newCamPosEnd[2] - newCamPosStart[2]) / tweenCount;
-
-          targetMov[0] = (newTargetPosEnd[0] - newTargetPosStart[0]) / tweenCount;
-          targetMov[1] = (newTargetPosEnd[1] - newTargetPosStart[1]) / tweenCount;
-          targetMov[2] = (newTargetPosEnd[2] - newTargetPosStart[2]) / tweenCount;
+            camPos();
 
-          isTweenReady = true;
+            generateImgList();
+            loadImages(imgList, () => {
+              for (var ii = 0; ii < picNum; ++ii) {
+                var texture = gl.createTexture();
+                gl.bindTexture(gl.TEXTURE_2D, texture);
 
-        }
+                // Set the parameters so we can render any size image.
+                gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+                gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+                gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+                gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
 
-        function resizeCanvasToDisplaySize(canvas, multiplier) {
-          multiplier = multiplier || 2;
-          const width = canvas.clientWidth * multiplier | 0;
-          const height = canvas.clientHeight * multiplier | 0;
-          if (canvas.width !== width || canvas.height !== height) {
-            canvas.width = width;
-            canvas.height = height;
-            aspect = width / height;
-            return true;
-          }
-          return false;
-          //drawScene();
-        }
+                // Upload the image into the texture.
+                gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, images[ii]);
 
-        let imgList = [];
-        function generateImgList() {
-          for (let i = 0; i < picNum; i++) {
-            imgList.push("./pic-v1/" + (i + 1) + ".jpg");
-          }
-        }
+                // add the texture to the array of textures.
+                textures.push(texture);
+                //console.log(textures);
 
 
-        function init() {
 
-          camPos();
+              }
 
-          generateImgList();
-          //tween();
-          loadImages(imgList, () => {
-            for (var ii = 0; ii < picNum; ++ii) {
-              var texture = gl.createTexture();
-              gl.bindTexture(gl.TEXTURE_2D, texture);
 
-              // Set the parameters so we can render any size image.
-              gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
-              gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
-              gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
-              gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
 
-              // Upload the image into the texture.
-              gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, images[ii]);
 
-              // add the texture to the array of textures.
-              textures.push(texture);
-              //console.log(textures);
+              for (var ii = 0; ii < picNum; ++ii) {
+                objects.push({
 
+                  yRotation: 0,
+                  xTranslation: 0,//ii-10,
+                  yTranslation: 0,
+                  zTranslation: -500 + ii * 20,
+                  materialUniforms: {
+                    u_diffuse: textures[ii],
+                    //u_opacity: 0.5,
+                  },
+                  pickIDUniform: {
+                    u_id: [(ii + 1) / 255, 0, 0, 1],
+                  }
+                });
+              }
 
+              render();
 
-            }
+            });
+          }
 
 
+          init();
 
+          let x0 = 0, x1 = 0, y0 = 0, y1 = 0;
 
-            for (var ii = 0; ii < picNum; ++ii) {
-              objects.push({
+          function onMouseDown(e) {
+            isMouseDown = true;
+            x0 = e.clientX;
+            y0 = e.clientY;
+            canvas.addEventListener('mousemove', onMouseMove, false);
+          }
 
-                yRotation: 0,
-                xTranslation: 0,//ii-10,
-                yTranslation: 0,
-                zTranslation: -500 + ii * 20,
-                materialUniforms: {
-                  u_diffuse: textures[ii],
-                  //u_opacity: 0.5,
-                },
-                pickIDUniform: {
-                  u_id: [(ii + 1) / 255, 0, 0, 1],
-                }
-              });
-            }
+          function onMouseMove(e) {
+            //console.log(e.clientX, e.clientY);
+            if (isMouseDown) {
+              x1 = e.clientX;
+              y1 = e.clientY;
 
+              const deltaX = x1 - x0;
+              const deltaY = y1 - y0;
 
-            //tween();
+              //if(deltaX > 0.5 || deltaY >0.5){
+              cameraPosition[0] -= deltaX / 25;
+              //cameraPosition[1]+=deltaY/25;
 
-            render();
+              target[0] += deltaX;
+              //target[1]-=deltaY;
 
-          });
-        }
+              if ((cameraPosition[2]) % 20 < 18) {
+                cameraPosition[2] += 0.5;
+              }
 
+              var cameraMatrix = m4.lookAt(cameraPosition, target, up, m4.identity());
+              viewMatrix = m4.inverse(cameraMatrix);
 
-        init();
+              render();
 
-        let x0 = 0, x1 = 0, y0 = 0, y1 = 0;
+              x0 = x1;
+              y0 = y1;
 
-        function onMouseDown(e) {
-          isMouseDown = true;
-          x0 = e.clientX;
-          y0 = e.clientY;
-          canvas.addEventListener('mousemove', onMouseMove, false);
-        }
+            }
 
-        function onMouseMove(e) {
-          //console.log(e.clientX, e.clientY);
-          if (isMouseDown) {
-            x1 = e.clientX;
-            y1 = e.clientY;
+          }
 
-            const deltaX = x1 - x0;
-            const deltaY = y1 - y0;
+          function onMouseUp() {
+            isMouseDown = false;
+            canvas.removeEventListener('mousemove', onMouseMove, false);
+          }
 
-            //if(deltaX > 0.5 || deltaY >0.5){
-            cameraPosition[0] -= deltaX / 25;
-            //cameraPosition[1]+=deltaY/25;
+          function onMouseWheel(e) {
+            //console.log(e.deltaY);
+            if (Math.abs(cameraPosition[0]) < 5) {
 
-            target[0] += deltaX;
-            //target[1]-=deltaY;
+              if (cameraPosition[0] > 0) {
+                cameraPosition[0] -= 0.1;
+                cameraPosition[0] = Math.max(cameraPosition[0], 0)
+              } else {
+                cameraPosition[0] += 0.1;
+                cameraPosition[0] = Math.min(cameraPosition[0], 0)
+              }
 
-            if ((cameraPosition[2]) % 20 < 18) {
-              cameraPosition[2] += 0.5;
+              target[0] = 0;//如何更加smooth
             }
-
+            cameraPosition[2] += e.deltaY / 15;
+            // console.log(cameraPosition[2]);
+            //target=[0,0,-1000];
+            cameraPosition[2] = Math.max(-480, cameraPosition[2]);
+            cameraPosition[2] = Math.min(278, cameraPosition[2]);
             var cameraMatrix = m4.lookAt(cameraPosition, target, up, m4.identity());
             viewMatrix = m4.inverse(cameraMatrix);
 
             render();
 
-            x0 = x1;
-            y0 = y1;
-
           }
 
-        }
-
-        function onMouseUp() {
-          isMouseDown = false;
-          canvas.removeEventListener('mousemove', onMouseMove, false);
-        }
-
-        function onMouseWheel(e) {
-          //console.log(e.deltaY);
-          if (Math.abs(cameraPosition[0]) < 5) {
-
-            if (cameraPosition[0] > 0) {
-              cameraPosition[0] -= 0.1;
-              cameraPosition[0] = Math.max(cameraPosition[0], 0)
-            } else {
-              cameraPosition[0] += 0.1;
-              cameraPosition[0] = Math.min(cameraPosition[0], 0)
-            }
-
-            target[0] = 0;//如何更加smooth
+          function render() {
+            drawScene();
+            drawFrames();
           }
-          cameraPosition[2] += e.deltaY / 15;
-          // console.log(cameraPosition[2]);
-          //target=[0,0,-1000];
-          cameraPosition[2] = Math.max(-480, cameraPosition[2]);
-          cameraPosition[2] = Math.min(278, cameraPosition[2]);
-          var cameraMatrix = m4.lookAt(cameraPosition, target, up, m4.identity());
-          viewMatrix = m4.inverse(cameraMatrix);
-
-          render();
 
-        }
-
-        function render() {
-          drawScene();
-          drawFrames();
-        }
+          //canvas.addEventListener('click', pick, false);
 
-        //canvas.addEventListener('click', pick, false);
+          function touchstart(e) {
 
-        function touchstart(e) {
+            //tmpConsole.innerText = 'touchstart';
 
-          x0 = e.pageX;
-          y0 = e.pageY;
+            x0 = e.pageX;
+            y0 = e.pageY;
 
-          canvas.addEventListener('mousemove', touchmove, false);
-          canvas.addEventListener('touchend', touchend, false);
-        }
+            window.addEventListener('touchmove', touchmove, false);
+            window.addEventListener('touchend', touchend, false);
+          }
 
-        function touchmove(e){
+          function touchmove(e) {
             x1 = e.pageX;
             y1 = e.pageY;
 
+            //tmpConsole.innerText = 'touchmove';
+
             const deltaX = x1 - x0;
             const deltaY = y1 - y0;
 
-            //if(deltaX > 0.5 || deltaY >0.5){
             cameraPosition[0] -= deltaX / 25;
-            //cameraPosition[1]+=deltaY/25;
 
             target[0] += deltaX;
-            //target[1]-=deltaY;
-
-            if ((cameraPosition[2]) % 20 < 18) {
-              cameraPosition[2] += 0.5;
-            }
+          
+            cameraPosition[2] += deltaY / 15;
+            cameraPosition[2] = Math.max(-480, cameraPosition[2]);
+            cameraPosition[2] = Math.min(278, cameraPosition[2]);
 
             var cameraMatrix = m4.lookAt(cameraPosition, target, up, m4.identity());
             viewMatrix = m4.inverse(cameraMatrix);
@@ -699,34 +609,35 @@
             x0 = x1;
             y0 = y1;
 
-        }
+          }
 
-        function touchend(){
-          x1 = 0;
-          x0 = 0;
-          y1 = 0;
-          y0 = 0;
-          window.removeEventListener('touchmove', touchmove, false);
-          window.removeEventListener('touchend', touchend, false);
-        }
+          function touchend() {
+            x1 = 0;
+            x0 = 0;
+            y1 = 0;
+            y0 = 0;
+            window.removeEventListener('touchmove', touchmove, false);
+            window.removeEventListener('touchend', touchend, false);
+          }
 
-        window.addEventListener('resize', render, false);
-        canvas.addEventListener('mousedown', onMouseDown, false);
+          window.addEventListener('resize', render, false);
+          canvas.addEventListener('mousedown', onMouseDown, false);
 
-        canvas.addEventListener('mouseup', onMouseUp, false);
-        //window.addEventListener('load', init, false);
+          canvas.addEventListener('mouseup', onMouseUp, false);
+          //window.addEventListener('load', init, false);
 
-        canvas.addEventListener('wheel', onMouseWheel, { passive: false });
+          canvas.addEventListener('wheel', onMouseWheel, { passive: false });
 
-        canvas.addEventListener('touchstart', touchstart, false);
+          window.addEventListener('touchstart', touchstart, false);
 
-        document.addEventListener('gesturestart', function (event) { event.preventDefault() }, false);
-      }
 
-      main();
+        }
+
+        main();
 
+        document.addEventListener('gesturestart', function (event) { event.preventDefault() }, false);
 
-    </script>
+      </script>
 
 
   </body>
