我想与你讨论一下Canvas2D 与WebGL - SegmentFault 思否

Canvas 2D的API如何用WebGL实现(比较区别) 注册登录问答专栏课程招聘活动发现✓使用“Bing”搜本站使用“Google”搜本站使用“百度”搜本站站内搜索注册登录首页专栏前端读书会文章详情2我想与你讨论一下Canvas2D与WebGLwlove发布于2021-07-05English背景本篇收录于《数据可视化和图形学》专栏上文谈到在纠结中砥砺前行,写下了第一篇专栏文章对于图形学和可视化的认知篇实现了一个简单的程序。

本来打算后续序列已算法和渲染方向为主.但是综合微信/QQ圈内同学反馈晦涩问题后续文章更多已结论(小节产生效果)为导向进行展开学习。

本篇不会讨论canvas与webGL的区别相信大家都懂...本篇大纲Canvas与WebGL简介会canvas不会WebGL?俩者如何下手canvas的API如何用WebGL实现(比较区别)大道志远,潜心修行(后续大纲)1.Canvas2D与WebGL简介Canvas2D基本概念:CanvasAPI提供了一个通过JavaScript和HTML的元素来绘制图形的方式。

它可以用于动画、游戏画面、数据可视化、图片编辑以及实时视频处理等方面。

渲染(原理)流程:WebKit为例浏览器(JavaScript)canvasAPI底层图形库Skia(支持CPU/GPU绘制)根据平台是否支持(策略)选取绘制方式。

可以参考一下WebKit中用来支持Canvas的类(本文不做展开)WebGL基本概念:WebGL（Web图形库）是一个JavaScriptAPI，可在任何兼容的Web浏览器中渲染高性能的交互式3D和2D图形，而无需使用插件。

WebGL通过引入一个与OpenGLES2.0非常一致的API来做到这一点，该API可以在HTML5元素中使用。

这种一致性使API可以利用用户设备提供的硬件图形加速(与canvas2D区别)。

渲染(原理)流程:WebKit为例Shader/res/texture/WebGLAPIdrawingBuffer(绘制缓冲区)GL库/GPU绘制可以参考一下WebKit中用来支持Web的类(本文不做展开)2.会canvas不会WebGL?俩者如何下手回答问题为导向:Canvas2DAPI简单WebGLAPI看不懂是为何学习不知道如何入手?(API工程师?啃书?源码?)...依此的简单回答:首先明白一点API越简单肯定越上层(上层直白来说发挥空间小,局限性大),为什么canvas2D的API简单呢?封装的完善而且大部分工作隐藏在内核的实现上。

WebGL需要考虑shader,buffer,texture,program(程序),link(这块好像透明点)...总之就是难。

多看看就好了。

学习这个话题太多人问了,拿我举例说也得看文档coding深入的话还得学习一些别人的产出。

(直接看文献也是看别人的产出,没什么较真的)没得办法。

如果说那条路更简单的话,看别人的分享(需要是系统的分享碎片化知识对于学习的路来说并没有多大帮助)。

看框架(库)实现源码什么的,那个也只是API的封装。

看的反而怀疑人生因为那个又牵扯一些别的知识,整体架构设计,数据模型,渲染,事件等等......留言讨论吧有需要加微信也可以3.Canvas2D的API如何用WebGL实现(比较区别)已一个简单的来学习一下,绘制一个矩形:canvas//html //js //获取canvas元素 varcanvas=document.getElementById("canvas"); //获取渲染上下文 varctx=canvas.getContext("2d"); //绘制样式红色 ctx.fillStyle="red"; //API绘制rect ctx.fillRect(10,10,100,100); WebGL//html //js //获取渲染上下文 constgl=document.querySelector('#myDiagram').getContext('webgl'); //顶点vertexshader constvs=` //vertexshader voidmain(){ gl_Position=vec4(0,0,0,1);//坐标gl_开头都为webgl内置变量 gl_PointSize=100.0;//大小 } `; //片元fragmentshader constfs=` //fragmentshader voidmain(){ gl_FragColor=vec4(0,0,0,1);//颜色红色 } `; //shader程序 constprogram=webglUtils.createProgramFromSources(gl,[vs,fs]); //使用shader程序 gl.useProgram(program); //offset偏移 constoffset=0; //count个数 constcount=1; //gl.POINTS内置绘制方式 //绘制函数drawArrays gl.drawArrays(gl.POINTS,offset,count); 4.大道志远,潜心修行(后续大纲)此处应该为填空题(给点意见吧好难~),简单说下我的想法吧顺序待定....WebGL渲染2D篇WebGL渲染3D篇渲染优化手段quadTree(2d渲染)3d渲染...光照和阴影RayCasting/RayTracing...其他(算法类,框架解读类...)最后需要加微信群的请留言...我看到就会回复的贴一下上文的一些链接。

Canvas2D教程WebGL教程WebKit之WebGL原理====写的蛮细的前端javascriptwebglcanvas图形学阅读3.4k发布于2021-07-05赞2收藏2分享本作品系原创，采用《署名-非商业性使用-禁止演绎4.0国际》许可协议前端读书会真的真的要学习一直学习。

相信付出一定会有回报的那天。

关注专栏wlovewx:wywin20226.9k声望1.8k粉丝关注作者0条评论得票最新提交评论评论支持部分Markdown语法：**粗体**_斜体_[链接](http://example.com)`代码`-列表>引用。

你还可以使用@来通知其他用户。

wlovewx:wywin20226.9k声望1.8k粉丝关注作者文章目录跟随宣传栏▲22