WebGL可视化
文章平均质量分 67
学习webgl通用领域基础知识以及ThreeJS、BabylonJS、SpriteJS、d3.js等专用领域知识。
samllplum
有智者立长志 无志者长立志
展开
-
React中echarts 单个/多个图表自适应
项目中涉及到多个图表,需要宽度自适应屏幕的尺寸,因此想到了监听windows resize方法// 监听 window 窗口大小变化的事件window.onresize = function() { // 调用 echarts 实例对象的 resize 方法 this.myCharts.resize()}但是几经操作后发现,只有最后一个图表的尺寸会重新resize,会覆盖前几个图表的自适应,原因是this的指向不对let that=thisthis.lineChart.set原创 2021-09-10 14:27:16 · 984 阅读 · 0 评论 -
D3.js与echart.js区别及应用场景
什么是D3?D3.js的全称是Data-Driven Documents,其实就是一个数据驱动的文档的js库,简而言之就是一个数据可视化的库。那什么是数据可视化呢?举个例子:给出一组数据 [10,80,40,100,30,20,50]如果我们想要看出这组数据的大小关系,单看数据显然不够直观。那么我们可以将它转换为一种简单易懂的图表的形式(如下图)这样我们就可以更加直观的获取数据所传递给我们的信息。这个过程就叫做数据可视化。在我们平时的项目开发中经常会遇到这种情况:后端返回给我们一原创 2021-08-12 16:54:12 · 4075 阅读 · 0 评论 -
WebGLProgram
WebGLProgram是WebGL API的一部分,它由两个WebGLShaders (webgl 着色器)组成,分别为顶点着色器和片元着色器(两种着色器都是采用GLSL 语言编写的)。创建一个WebGLProgram需要调用 GL 上下文的createProgram()方法,然后调用attachShader()方法附加上着色器,之后你才能将它们连接到一个可用的程序。WebGLProgram 的创建过程请参考下面的代码:var program = gl.createProgram(...原创 2021-08-12 11:33:16 · 275 阅读 · 0 评论 -
WebGLShader
WebGLShader可以是一个顶点着色器(vertex shader)或片元着色器(fragment shader)。每个WebGLProgram都需要这两种类型的着色器。要创建一个WebGLShader需要三步: 使用WebGLRenderingContext.createShader, 通过WebGLRenderingContext.shaderSource()然后挂接GLSL源代码 ( OpenGL Shading Language,OpenGL着色语言) ...原创 2021-08-12 11:22:07 · 299 阅读 · 0 评论 -
指令式绘图系统:如何用Canvas绘制层次关系图?
Canvas 是可视化领域里非常重要且常用的图形系统,在可视化项目中,它能够帮助我们将数据内容以几何图形的形式,非常方便地呈现出来。这篇文章主要会讲解如何用它的2D上下文来完成绘图,不会去讲和它有关的所有Api,重点只是希望通过调用一些常用的API讲清楚,Canvas2D能做什么、要怎么使用,以及它的局限性是什么。最后,还会用Canvas绘制一个表示省市关系的层次关系图(Hierarchy Graph)。如何用Canvas绘制几何图形?首先,我们通过一个绘制红色正方形的简单例子,来讲一讲Canv原创 2021-08-04 11:57:01 · 2553 阅读 · 2 评论 -
Web前端与可视化有什么区别?
首先是技术栈的不同。Web 开发主要以 HTML 来描述结构,以 CSS 来描述表现,以JavaScript 来描述行为。而可视化则较少涉及 HTML 和 CSS,它更多地要同浏览器的Canvas、SVG、WebGL 等其他图形 API 打交道。这是因为,Web 开发以呈现块状内容为主,所以 HTML 是更合适的技术。而可视化开发因为需要呈现各种各样的形状、结构,所以,形状更丰富的 SVG 以及更底层的 Canvas2D 和 WebGL 就是更合适的技术了。其次,Web 开发着重于处理普通的文...原创 2021-07-26 16:01:08 · 1216 阅读 · 0 评论 -
浏览器中实现可视化的四种方式
可视化用一句话来说,本质上就是将数据信息组织起来后,以图形的方式呈现出来。在 Web 上,图形通常是通过浏览器绘制的。现代浏览器是一个复杂的系统,其中负责绘制图形的部分是渲染引擎。渲染引擎绘制图形的方式,大体上有四种。 第 1 种是传统的HTML+CSS。这种方式通常用来呈现普通的 Web 网页。第 2 种是使用SVG。SVG 和传统的HTML+CSS 的绘图方式差别不大。只不过,HTML元素在绘制矢量图形方面的能力有些不足(我们后面会讲到),而 SVG 恰好弥补了这方面的缺陷。 第 2 种是使原创 2021-07-26 14:13:13 · 2242 阅读 · 0 评论 -
学习可视化
初步学习可视化相关知识~CPU 是运算单元,GPU 是图形处理单元,通过渲染图形来完成的抽奖,这实际上就用到了可视化相关的核心技术。所以你看,可视化可不只是在绘制图表,图表只是可视化工程师日常工作产出的一部分。而就像上面这个例子一样,可视化更重要的是利用 WebGL 这样的图形系统,来更高效地实现更多有趣的图形。尤其是,当你在写一个可视化的项目,要在大屏上用浏览器渲染数以万计的元素时,也许 WebGL 或者 GPU 就是目前唯一可行的方案。总的来说,通过研究可视化,你能够比较深入地掌握图形学和 We原创 2021-07-25 16:04:54 · 357 阅读 · 0 评论