webgl之大数据量可视化性能优化

最新推荐文章于 2021-08-18 19:56:18 发布
最新推荐文章于 2021-08-18 19:56:18 发布
阅读量640 收藏
点赞数
文章标签： 大数据 前端 ViewUI
原文链接：http://www.cnblogs.com/lilei2blog/p/8643900.html
版权

准备

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>

 

效果：

结果分析

在同一图层内，可以容纳大量数据绘制，性能较好，但不支持每个对象的变化

不同图层，大量数据绘制效果较差，但支持每个对象的变化

最差的情况，每次删除所有图层，再创建图层，重新绘制

转载于:https://www.cnblogs.com/lilei2blog/p/8643900.html

weixin_30399797
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Three 之 three.js （webgl）简单的渲染策略(简单性能优化/主要根据渲染控制 render 渲染调用)
仙魁XAN
09-18 2694
Three js开发的一些知识整理，方便后期遇到类似的问题，能够及时查阅使用。本节介绍， three.js （webgl）渲染策略上进行必要的合理规划 render 的调用，从而性能上的优化，特别是在移动端，避免不必要的屏幕render 刷新，从而避免卡顿和发热情况，如果有不足之处，欢迎指出，或者你有更好的方法，欢迎留言。Three 之 three.js （webgl）性能优化、提高帧率的思路/方向整理_仙魁XAN的博客-CSDN博客_webgl 性能二、实现原理。
threejs大数据地球
12-20
精讲常用的大数据案例，对常用的大数据地球系列案例进行剖析，通过threeJS解析GeoJSON数据，将数据转换成你需要的图形，通过需求分析创建自己所需要的动态效果，如动态飞线，流量，迁徙等交互效果，通过不同的数据产生不同的文字贴图，实时更新渲染，以及点击热点进行交互互动。
mapboxgl - 用webgl展示海量数据，是否可行？
研究与专注
04-18 4915
Openlayers憋了好久，终于憋出了WebGL的渲染器，然而只支持点要素类型，要是线和面类型的要素，数据量级一上去，就没法用了。我们看看隔壁的Mapboxgl，诞生之日起就是WebGL渲染，而且openlayers新出的WebGLPoint Layer使用的WebGL渲染样式规则也借鉴了Mapboxgl的表达式（Expression）。 所以，为什么不用mapboxgl呢？当我想到这个想法的时...
WebGL在大数据可视化系统中的方法研究
08-31
本文重点研究了WebGL3D可视化技术，建立汽车模型，将信息以动态的画面效果展示出来
Three.js中WebGLRenderer和CanvasRenderer效果对比
ZolaLin的博客
06-23 4787
左边为webGLRenderer 右边为CanvasRenderer(图片来源与网络)
字图：使用WebGL可视化大型文本集合
02-05
字图使用WebGL可视化大量文本数据安装pip install wordmap基本用法要从文本文件目录创建可视化效果，可以按以下方式调用字图： wordmap --texts " data/*.txt " 该过程将在./web中创建可视化./web ，如果您启动本地...
基于WebGL的可视化地图
07-27
该示例中实现了地图的无缝下钻以及地图的多维度可视化（打点、连线、区域填充）呈现，由于地图数据量太大，所以只放了世界地图数据、中国地图数据、美国地图数据以及国内北京、山东地图数据，也就是说只能下载这么几...
graph.gl:用于图形可视化的WebGL2-Powered可视化组件
05-09
呈现由deck.gl驱动，该平台是基于WebGL的可视化框架。 使用Graph.gl，使用户能够以最小的努力构建各种类型的图形/网络应用程序，同时具有扩展现有样式和布局的能力。 动机 Uber从两年前就开始构建自己的知识图，而...
webgl-globe:WebGL Globe是一个使用WebGL可视化基于纬度经度的信息的平台
04-06
WebGL Globe是Google数据艺术团队创建的用于地理数据可视化的开放平台。 我们鼓励您复制代码，添加自己的数据并创建自己的地球仪。 在查看示例，如果您创建了地球仪，请。 我们公开发布我们最喜欢的地球仪。 WebGL ...
[24年3月48章]Three.js可视化系统课程WebGL
最新发布
03-27
一、什么是three.js？ Three.js是一个基于WebGL的轻量级3D图形库，使用JavaScript编写，Three.js允许开发者在...目前政府有大量的新基建项目，如数字孪生、智慧城市、智慧园区、智慧工厂等等都涉及到了3D可视化技术。
WebGL优化的技巧--持续更新中
Amesteur的博客
07-12 2848
Webgl性能瓶颈，图形绘制是异步的流水线绘制以及浏览器的本身的缺陷。尝试优化的方法如下： 找到性能瓶颈，尝试降低CPU或者GPU的时钟频率去测试哪个效率低 纹理受限，可以采取 减少canvas的长宽或者使用低分辨率的纹理测试；webgl 纹理绑定伸展和收缩效果时，gl.NEAREST 是最快的但会产生块状效果，gl.LINER因为是取平均值，会产生模糊 将Mip映射应用于纹理贴图 处理w...
基于WebGL的大数据二三维可视化--uber的deck.gl介绍
热门推荐
前端-后端学习之路
06-02 2万+
deck.gl是由uber开发并开源出来的基于WebGL的大数据量可视化框架。它具有提供不同类型可视化图层，GPU渲染的高性能，React和Mapbox GL集成，结合地理信息数据（GPS）的特点。下面我们就举两个例子探索一下这个神奇的库。1.第一站：将源码的例子跑起来源码在github里，首先克隆出来。npm 下载，在项目根目录下npm install(友情提醒，如果npm下载速度比较慢，可以使用
在WebGL应用中使用Web Worker提升效率
http://8.130.10.148:3000/digitaltwin/index.html
06-24 6350
Web Worker介绍：  js本身是一种单线程设计，我们无法在同一时刻并行运行多个脚本。虽然可以用setInterval，setTimeout方法来模拟多线程，但实际上这些方法都是存在于主线程使用的一个事件循环里，一旦存在一个耗时操作，就会牵制主线程的操作，导致页面卡顿。Web Worker通过引入类似线程的机制使这种问题得到了解决，通过在当前js主线程中使用worker类加载一个js文件来开辟
[Mapbox GL]实现一系列图片的动画效果
每天写一点，进步一点点
12-22 3916
使用一些图片资源实现动画效果 body { margin:0; padding:0; } #map { position:absolute; top:0; bottom:0; width:100%; } mapboxgl.accessToken = ''; var map =
转：cesuim加载倾斜摄影OSGB三维数据完整过程（超详细）
qq_36266612的博客
04-24 9121
转载一篇关于倾斜摄影数据加载报错的文章，感谢博主 原文地址：https://blog.csdn.net/qq_36377037/article/details/86591761 1、得到正确原始.osgb格式数据； （1）倾斜摄影数据仅支持 smart3d 格式的 osgb 组织方式， 数据目录必须有一个 “Data” 目录的总入口， “Data” 目录同级放置一个 metadata.xml 文件...
关于three.js渲染器THREE.WebGLRenderer()参数的介绍和使用
bigpatten的博客
08-18 8825
首先来看下THREE.WebGLRenderer可以设置的参数如下： var renderer = new THREE.WebGLRenderer({ //创建渲染器对象 // canvas: document.getElementById('can3d'), //渲染器绘制其输出的画布， alpha: false, // 画布是否包含alpha（透明度）缓冲区。默认值为false。 premultipliedAlpha: true, //渲染器是否会假设颜色具有 预乘alpha。默
白鹭引擎渲染优化 - CacheAsBitmap
一天到晚红烧鱼的博客
07-10 1235
CacheAsBitmap 这篇文章要从 egret 中的对象基类 DisplayObject 实例属性 cacheAsBitmap 说起。官方文档建议静态的UI使用建议设置 cacheAsBitmap 为 true 减少重绘次数。 如果设置为 true，则 Egret 运行时将缓存显示对象的内部位图表示形式。此缓存可以提高包含复杂矢量内容的显示对象的性能。 将 cacheAsBitmap 属性设置为 true 后，呈现并不更改，但是，显示对象将自动执行像素贴紧。执行速度可能会大大加快， 具体取决于显示对
Three.js 性能优化总结 持续更新中
pengnf
07-17 1224
Three.js 性能优化总结 数据优化篇 BIM模型， 3D大模型，先导出为GLTF格式， 然后GLTF格式，调用draco压缩算法，产生后缀为.drc文件。然后参考官网去解压.drc 文件就可以提高加载速度了 Draco 加载例子: https://storage.googleapis.com/demos.webmproject.org/draco/draco_loader_throw.html Github 例子 https://github.com/google/draco ...
前端开发中数据可视化介绍
05-27
2. D3.js：一个基于JavaScript的数据可视化库，可以根据数据生成各种形式的图形，支持大量的数据可视化技术。 3. Highcharts：一个基于JavaScript的图表库，提供了多种图表类型和丰富的配置项，支持数据动态更新。 ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值