webgl之大數據量可視化性能優化

本文轉載自查看原文 2018-03-25 12:44 3792 網絡/ 空間地理

准備

webgl采用three.js

性能查看采用每秒播放的“幀數”

四種場景

4萬個圖層進行旋轉操作

代碼：

<html>
  <head>
    <title>My first three.js app</title>
    <style>
      body { margin: 0; }
      canvas { width: 100%; height: 100% }
    </style>
  </head>
  <body>
   <div id="container"></div>
    <script src="http://davidscottlyons.com/threejs-intro/iframes/three/three.min.js"></script>
    <script src="http://davidscottlyons.com/threejs-intro/iframes/three/libs/stats.min.js"></script>

    <script>
      var scene = new THREE.Scene();
      var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );

      var renderer = new THREE.WebGLRenderer();
      renderer.setSize( window.innerWidth, window.innerHeight );
      document.body.appendChild( renderer.domElement );

      var cubes = []

      var material = new THREE.PointsMaterial( { color: 0x00ff00 ,size:1} );

      var container = document.getElementById( 'container' );
        container.appendChild( renderer.domElement );

      stats = new Stats();
      stats.domElement.style.position = 'absolute';
        stats.domElement.style.top = '0px';
        stats.domElement.style.zIndex = 100;
        container.appendChild( stats.domElement );


      for(x=-100;x<100;x++ ){
        for(y=-100;y<100;y++){
          var geometry = new THREE.Geometry();
          geometry.vertices.push(new THREE.Vector3(x*2,y*2,1))
          
          var cube = new THREE.Points( geometry, material );
          scene.add( cube );
          cubes.push(cube);
        }
      }

      /**
      var geometry = new THREE.Geometry();
      geometry.vertices.push(new THREE.Vector3(1,1,1))
      var material = new THREE.PointsMaterial( { color: 0x00ff00 ,size:1} );
      var cube = new THREE.Points( geometry, material );
      scene.add( cube );
      */

      camera.position.z = 300;

      var animate = function () {
        requestAnimationFrame( animate );
         stats.update();

        //cube.rotation.x += 0.1;
        //cube.rotation.z += 0.1;

        cubes.forEach(function(cube){
          cube.rotation.y += 0.1;
          cube.rotation.z += 0.1;
        })

        renderer.render(scene, camera);
      };

      animate();
    </script>
  </body>
</html>

效果：

4萬個點一個圖層旋轉塗層

代碼：

<html>
  <head>
    <title>My first three.js app</title>
    <style>
      body { margin: 0; }
      canvas { width: 100%; height: 100% }
    </style>
  </head>
  <body>
    <div id="container"></div>
    <script src="http://davidscottlyons.com/threejs-intro/iframes/three/three.min.js"></script>
    <script src="http://davidscottlyons.com/threejs-intro/iframes/three/libs/stats.min.js"></script>
    <script>
      var scene = new THREE.Scene();
      var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );

      var renderer = new THREE.WebGLRenderer();
      renderer.setSize( window.innerWidth, window.innerHeight );
      document.body.appendChild( renderer.domElement );

      var cubes = []
      var geometry = new THREE.Geometry();

      var container = document.getElementById( 'container' );
        container.appendChild( renderer.domElement );

      stats = new Stats();
      stats.domElement.style.position = 'absolute';
        stats.domElement.style.top = '0px';
        stats.domElement.style.zIndex = 100;
        container.appendChild( stats.domElement );

      
      for(x=-100;x<100;x++ ){
        for(y=-100;y<100;y++){
          
          geometry.vertices.push(new THREE.Vector3(x,y,1))
          
          
          
        }
      }

      

      var material = new THREE.PointsMaterial( { color: 0x00ff00 ,size:1} );

      var cube = new THREE.Points( geometry, material );

      scene.add( cube );


      /**
      var geometry = new THREE.Geometry();
      geometry.vertices.push(new THREE.Vector3(1,1,1))
      var material = new THREE.PointsMaterial( { color: 0x00ff00 ,size:1} );
      var cube = new THREE.Points( geometry, material );
      scene.add( cube );
      */

      camera.position.z = 200;

      var animate = function () {
        requestAnimationFrame( animate );

        cube.rotation.y += 0.1;
        cube.rotation.z += 0.1;
        stats.update();

/**
        cubes.forEach(function(cube){
          cube.rotation.y += 0.1;
          cube.rotation.z += 0.1;
        })
*/

        renderer.render(scene, camera);
      };

      animate();
    </script>
  </body>
</html>

效果：

4萬個圖層，每次動畫都重新創建4萬個圖層

代碼：

<html>
  <head>
    <title>My first three.js app</title>
    <style>
      body { margin: 0; }
      canvas { width: 100%; height: 100% }
    </style>
  </head>
  <body>
    <div id="container"></div>
    <script src="http://davidscottlyons.com/threejs-intro/iframes/three/three.min.js"></script>
    <script src="http://davidscottlyons.com/threejs-intro/iframes/three/libs/stats.min.js"></script>
    <script>
      var scene = new THREE.Scene();
      var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );

      var renderer = new THREE.WebGLRenderer();
      renderer.setSize( window.innerWidth, window.innerHeight );
      document.body.appendChild( renderer.domElement );

      var cubes = []

      var am = 100

var material = new THREE.PointsMaterial( { color: 0x00ff00 ,size:1} );
      for(x=-am;x<am;x++ ){
        for(y=-am;y<am;y++){
          var geometry = new THREE.Geometry();
          geometry.vertices.push(new THREE.Vector3(x*2,y*2,1))
          
          var cube = new THREE.Points( geometry, material );
          scene.add( cube );
          cubes.push(cube);
        }
      }

      /**
      var geometry = new THREE.Geometry();
      geometry.vertices.push(new THREE.Vector3(1,1,1))
      var material = new THREE.PointsMaterial( { color: 0x00ff00 ,size:1} );
      var cube = new THREE.Points( geometry, material );
      scene.add( cube );
      */

      camera.position.z = 200;

      var container = document.getElementById( 'container' );
        container.appendChild( renderer.domElement );

      stats = new Stats();
        stats.domElement.style.position = 'absolute';
        stats.domElement.style.top = '0px';
        stats.domElement.style.zIndex = 100;
        container.appendChild( stats.domElement );

      var animate = function () {
        requestAnimationFrame( animate );

        //cube.rotation.x += 0.1;
        //cube.rotation.z += 0.1;

        cubes.forEach(function(c){scene.remove(c)})

       cubes = []

        for(x=-am;x<am;x++ ){
        for(y=-am;y<am;y++){
          var r = Math.random() * 10;
          var geometry = new THREE.Geometry();
          geometry.vertices.push(new THREE.Vector3(x*r,y*r,1))
          //var material = new THREE.PointsMaterial( { color: 0x00ff00 ,size:1} );
          var cube = new THREE.Points( geometry, material );
          scene.add( cube );
          cubes.push(cube);
        }
      }

      stats.update();

        renderer.render(scene, camera);
      };

      animate();
    </script>
  </body>
</html>

效果：

4萬個圖層，每次動畫改變每個圖層的位置

代碼：

<html>
  <head>
    <title>My first three.js app</title>
    <style>
      body { margin: 0; }
      canvas { width: 100%; height: 100% }
    </style>
  </head>
  <body>
    <div id="container"></div>
    <script src="http://davidscottlyons.com/threejs-intro/iframes/three/three.min.js"></script>
    <script src="http://davidscottlyons.com/threejs-intro/iframes/three/libs/stats.min.js"></script>
    <script>
      var scene = new THREE.Scene();
      var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );

      var renderer = new THREE.WebGLRenderer();
      renderer.setSize( window.innerWidth, window.innerHeight );
      document.body.appendChild( renderer.domElement );

      var cubes = []

      var am = 100

var material = new THREE.PointsMaterial( { color: 0x00ff00 ,size:1} );
      for(x=-am;x<am;x++ ){
        for(y=-am;y<am;y++){
          var geometry = new THREE.Geometry();
          geometry.vertices.push(new THREE.Vector3(x*2,y*2,1))
          
          var cube = new THREE.Points( geometry, material );
          scene.add( cube );
          cubes.push(cube);
        }
      }

      /**
      var geometry = new THREE.Geometry();
      geometry.vertices.push(new THREE.Vector3(1,1,1))
      var material = new THREE.PointsMaterial( { color: 0x00ff00 ,size:1} );
      var cube = new THREE.Points( geometry, material );
      scene.add( cube );
      */

      camera.position.z = 200;

      var flag = true;

      var container = document.getElementById( 'container' );
        container.appendChild( renderer.domElement );

      stats = new Stats();
        stats.domElement.style.position = 'absolute';
        stats.domElement.style.top = '0px';
        stats.domElement.style.zIndex = 100;
        container.appendChild( stats.domElement );

      var animate = function () {
        requestAnimationFrame( animate );

        //cube.rotation.x += 0.1;
        //cube.rotation.z += 0.1;

        var r = Math.random() * 20;
        cubes.forEach(function(c){
          if (flag ){

c.translateX(r)
          c.translateY(r)
          c.translateZ(r)
          }else{

            c.translateX(-r)
          c.translateY(-r)
          c.translateZ(-r)
          }
          
        })


      stats.update();
      if (flag) flag=false
      else flag = true

        renderer.render(scene, camera);
      };

      animate();
    </script>
  </body>
</html>

效果：

結果分析

在同一圖層內，可以容納大量數據繪制，性能較好，但不支持每個對象的變化

不同圖層，大量數據繪制效果較差，但支持每個對象的變化

最差的情況，每次刪除所有圖層，再創建圖層，重新繪制

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 kettle大數據量讀寫mysql性能優化大數據量下js性能優化 oracle性能優化----處理大數據量數據 MySQL大數據量分頁性能優化【MYSQL】mysql大數據量分頁性能優化 sql優化之大數據量分頁查詢（mysql）數據庫性能優化一：數據庫自身優化（大數據量）數據庫性能優化一：數據庫自身優化（大數據量） SQL優化-大數據量分頁優化記一次大數據量后台服務的性能優化