背景< titlesplit >专栏创建很久了，想了很久如何开展这个系列（专栏输出比碎片输出难多了~）：如何精简和浓缩相关的知识体系。如何碎片化一系列知识和文章。每一章如何连接上一章和下一章，可以分离或与整体相结合。最重要的一点是如何把第一篇写对……总之一直在纠结中写不好。一天一天....草稿箱里总有十几篇文章，后来才想通的。一路上尽量征求大家的意见，加快改进速度。那么让我们开始我们的《数据可视化和图形学》本大纲介绍图形和可视化工程师/前端er如何启动GPU渲染管道webgl介绍&编码1。什么是图形？什么是数据可视化？GraphicsGraphics：用数学公式/函数将基本理论以图形的形式表达出来。简单介绍几点：说到图形，不要只想到游戏，在工业、医学、影视……领域都有很多应用。图形不仅仅指渲染，还包括数学（计算）、美术、物理……等。想要学好图形，不仅仅需要知道如何点击API，还要学习基础它背后的知识（数学/物理学）。图形人才/知识积累/文献资料/先进技术太稀缺了好吧，我们赶紧进来讨论图形吧，涉及到一点点图像处理。让我们简单地谈谈它。图像处理与图形逻辑相反，输入图形，输出数学公式/函数。数据可视化数据可视化：将数据转化为交互式图形或图像等。数据可视化的主要目的是通过图形的方式清晰有效地传达和传达信息。在讲可视化之前，更多的说是属于计算机图形学CG（computergraphics）的范畴。后来，发展势头越来越强，一步步走出去。知识图谱/医疗等方向都有数据可视化应用。2.软件工程师/前端er如何入门先简单回答一些实际问题：业务需要用到部分可视化，想深入图形/可视化，但是技术（语言，数学。..)我不知道如何开始（在各个领域）工程师）...基于这个简单的答案：业务需求驱动的可视化框架绝对是一个利器，但你会遗漏一些东西来发现它的内部美丽。有人会说，你看得懂源码吗？是的。但是这个工作量可能更大。不一定是最有效的方法。深入的图形/可视化方向丢失了。这点我也是碰壁了，所以只能说把踩过的坑分享一下。读文献、学数学、推公式……这是一个漫长的过程，需要经过浓缩、分类（分层）、重新包装，才能推向更多人的视野。（可惜相关资料很少，因为制图真的很难。。。）工程师不知如何入门？首先，在工程师这个角色的加持下。至少语言不用太担心。以前端er为例，webGL当然是起点（当然我的观点仍然是API就是API。。使用API??并不是学习图形的最好方式），但是可行的是用问题来驱动你的学习。3、GPU渲染管线清晰。不同系列的GPU渲染管线存在差异。GPU和CPU的编码没有区别。没有调试……没有内存交集……总之，你会喜欢的~请看下图：图片来源网络入侵删除CPU计算节点基本信息（数量）GPUVertexShaderforvertexdrawingprimitivesGenerationresponsibleforstructuregeneration(link/triangle)Rasterization光栅化FragmentShader片段(shading)TestingBlending混合测试(Alphatransparency)finalrender渲染(Imagerendering)光栅化：将顶点数据转换成片段的过程（简单理解就是找图形和convertthecoveredpixels）着色过程一般是线性补充（比如0-1区间会线性补充0.10.2...。）webgl引入编码WebGL（WebGraphicsLibrary）是一个JavaScriptAPI，渲染高性能交互无需使用插件即可在任何兼容的Web浏览器中显示3D和2D图形。WebGL通过引入与OpenGLES2.0非常一致并且可以在HTML5JavaScript//initshader(vertex,fragment)constvs=`//顶点着色器voidmain(){gl_Position=vec4(0,0,0,1);//居中gl_PointSize=120.0;//大小}`;constfs=`//fragmentshadervoidmain(){gl_FragColor=vec4(0,0,0,1);//black}`;//setup//createprogram&useprogramconstprogram=webglUtils.createProgramFromSources(gl,[vs,fs]);gl.useProgram(program);常量偏移量=0；constcount=1;//绘图函数drawArrays//gl.POINTS内置绘图方法//偏移offset//计数数gl.drawArrays(gl.POINTS,offset,count);soeasywebgl就学会了……哈哈没那么简单。上个系列的文章慢慢写出来，我们好难啊……系列视频能干嘛呢！请大家多多指教~视觉化的方向会多一些，数学多一些，物理多一些……一起努力吧！数学（算法）很美：四叉树，cluster-kmeans……哎呀，都是好东西……等不及要写了（脑补表情满脸坏笑~）如有需要加微信群联系我~
