想和大家一起探讨一下Canvas2D和WebGL

的背景。本文收录在《数据可视化和图形学》专栏。我在纠结中谈到了前进。我写了第一篇关于图形和可视化实现的专栏。一个简单的程序。原本计划后续的序列应该着重于算法和渲染方向。不过根据微信/QQ圈同学反馈的比较晦涩的问题，后续文章会比较总结（栏目效果）开始学习。本文不会讨论canvas和webGL的区别。相信大家都明白了……这篇文章概述了Canvas和WebGL。canvas不是WebGL吗？实践（后续大纲）1.Canvas2D和WebGL简介Canvas2D的基本概念：CanvasAPI提供了一种通过JavaScript和HTML的元素绘制图形的方法。它可用于动画、游戏画面、数据可视化、图像编辑和实时视频处理。渲染（原理）过程：以WebKit为例浏览器（JavaScript）canvasAPI底层图形库Skia（支持CPU/GPU绘图）根据平台是否支持（策略）选择绘图方式。可以参考WebKit中用于支持Canvas的类（本文不再展开）WebGL基本概念：WebGL（WebGraphicsLibrary）是一种JavaScriptAPI，可以在任何兼容的Web浏览器中渲染高性能交互式3D和2D图形，无需使用插件。WebGL通过引入与OpenGLES2.0非常一致并且可以在HTML5元素中使用的API来实现这一点。这种一致性使API可以利用用户设备提供的硬件图形加速（与画布2D相反）。渲染（原理）过程：以WebKit为例Shader/res/texture/WebGLAPIdrawingBuffer（绘图缓冲区）GL库/GPU绘图可以参考WebKit中用于支持Web的类（本文不展开）2.不会画布WebGL？你是如何开始的回答问题：Canvas2DAPI很简单WebGLAPI看不懂为什么你不知道如何开始？（API工程师？吃书？源代码？）...基于这个简单的回答：先了解一点API越简单，上层越高（上层发展空间小，局限性大）。为什么canvas2DAPI简单？封装完善，大部分工作隐藏在内核的实现中。WebGL需要考虑shader、buffer、texture、program（程序）、link（这块好像是透明的）……总之，很难。只是多看看它。太多人问过我这个话题。以我为例，你得看文档编码。如果你想更多地了解它，你必须学习一些其他人的输出。（直接看文献也是看别人输出，没什么大不了的）没办法。如果那个路径比较简单，看看别人的分享（需要系统的分享，碎片化的知识对学习的路径帮助不大）。看框架（库）的源码，只是对API的封装。反而怀疑人生，因为涉及到一些其他的知识，整体架构设计，数据模型，渲染，事件等等。。。留言讨论。如果需要加微信也可以3.如何使用WebGLforCanvas2DAPI实现（差异比较）简单易学，画一个矩形：canvas//htmlcanvasid="myDiagram"width="200"height="200">//js//获取画布元素varcanvas=document.getElementById("canvas");//获取渲染上下文varctx=canvas.getContext("2d");//绘制样式红色ctx.fillStyle="red";//API绘制rectctx.fillRect(10,10,100,100);WebGL//html//js//获取渲染上下文constgl=document.querySelector('#myDiagram').getContext('webgl');//顶点vertexshaderconstvs=`//vertexshadervoidmain(){gl_Position=vec4(0,0,0,1);//坐标以gl_开头webgl内置变量gl_PointSize=100.0;//大小}`;//片段着色器常量fs=`//片段着色器无效主（）{gl_FragColor=vec4（0,0,0,1）;//Colorred}`;//shaderprogramconstprogram=webglUtils.createProgramFromSources(gl,[vs,fs]);//使用shaderprogramgl.useProgram(program);//offsetoffsetconstoffset=0;//countNumberconstcount=1;//gl.POINTS内置绘图方法//绘图函数drawArraysgl.drawArrays(gl.POINTS,offset,count);问题（好难给我提意见~），简单说说我的想法。顺序待定...WebGL渲染2D篇WebGL渲染3D篇渲染优化指quadTree（2d渲染）3d渲染...光照与阴影RayCasting/RayTracing...其他（算法、框架解读...）最后，如果需要加微信群，请留言。。。我会回复贴上上面的一些链接Canvas2D教程WebGL教程WebKitWebGL原理====写的还是挺详细的