背景

本篇收录于《数据可视化和图形学》专栏

上文谈到在纠结中砥砺前行,写下了第一篇专栏文章对于图形学和可视化的认知篇实现了一个简略的程序。原本打算后续序列已算法和渲染方向为主.然而综合微信/QQ圈内同学反馈艰涩问题后续文章更多已论断(大节产生成果)为导向进行开展学习。

本篇不会探讨canvas与webGL的区别置信大家都懂...

本篇纲要

Canvas与WebGL简介
会canvas不会WebGL?俩者如何下手
canvas的API如何用WebGL实现(比拟区别)
小道志远,潜心修行(后续纲要)

1. Canvas 2D与WebGL简介

Canvas 2D

基本概念:

Canvas API 提供了一个通过JavaScript 和 HTML的<canvas>元素来绘制图形的形式。它能够用于动画、游戏画面、数据可视化、图片编辑以及实时视频解决等方面。

渲染(原理)流程:

WebKit为例

浏览器(JavaScript) canvas API
底层图形库 Skia(反对CPU/GPU绘制)
依据平台是否反对(策略) 选取绘制形式。

能够参考一下WebKit中用来反对Canvas的类(本文不做开展)

WebGL

基本概念:
WebGL（Web图形库）是一个JavaScript API，可在任何兼容的Web浏览器中渲染高性能的交互式3D和2D图形，而无需应用插件。WebGL通过引入一个与OpenGL ES 2.0十分统一的API来做到这一点，该API能够在HTML5 <canvas>元素中应用。这种一致性使API能够利用用户设施提供的硬件图形减速(与canvas 2D区别)。

渲染(原理)流程:

WebKit为例

Shader/ res/texture/WebGL API
drawingBuffer (绘制缓冲区)
GL库/GPU绘制

能够参考一下WebKit中用来反对Web的类(本文不做开展)

2. 会canvas不会WebGL?俩者如何下手

答复问题为导向:

Canvas 2D API简略 WebGL API看不懂是为何
学习不晓得如何动手?(API工程师?啃书?源码?)
...

依此的简略答复:

首先明确一点API越简略必定越下层(下层直白来说施展空间小,局限性大),为什么canvas 2D的API简略呢? 封装的欠缺而且大部分工作暗藏在内核的实现上。 WebGL须要思考shader,buffer,texture,program(程序),link(这块如同通明点)...总之就是难。多看看就好了。
学习这个话题太多人问了,拿我举例说也得看文档 coding 深刻的话还得学习一些他人的产出。(间接看文献也是看他人的产出,没什么较真的) 没得方法。如果说那条路更简略的话,看他人的分享(须要是零碎的分享碎片化常识对于学习的路来说并没有多大帮忙)。看框架(库)实现源码什么的,那个也只是API的封装。看的反而狐疑人生因为那个又牵扯一些别的常识,整体架构设计,数据模型,渲染,事件等等...
...留言探讨吧有须要加微信也能够

3.Canvas 2D的API如何用WebGL实现(比拟区别)

已一个简略的来学习一下,绘制一个矩形:

canvas

// html<!-- 画布 --><canvas id="myDiagram" width="200" height="200"></canvas>//js// 获取canvas元素var canvas = document.getElementById("canvas");// 获取渲染上下文var ctx = canvas.getContext("2d");// 绘制款式  红色ctx.fillStyle = "red";// API 绘制rectctx.fillRect(10,10,100,100);

WebGL

// html<!-- 画布 --><canvas id="myDiagram" width="200" height="200"></canvas>

<script src="https://webglfundamentals.org/webgl/resources/webgl-utils.js"></script>// js// 获取渲染上下文const gl = document.querySelector('#myDiagram').getContext('webgl');// 顶点 vertex shaderconst vs = `// vertex shadervoid main() {  gl_Position = vec4(0, 0, 0, 1);  // 坐标  gl_结尾都为webgl内置变量  gl_PointSize = 100.0;      // 大小} `;//片元 fragment shaderconst fs = `// fragment shadervoid main() {  gl_FragColor = vec4(0, 0, 0, 1);  // 色彩 红色}`;//  shader程序const program = webglUtils.createProgramFromSources(gl, [vs, fs]);// 应用 shader程序gl.useProgram(program);// offset 偏移 const offset = 0;// count 个数const count = 1;// gl.POINTS 内置绘制形式 // 绘制函数 drawArrays gl.drawArrays(gl.POINTS, offset, count);

4. 小道志远,潜心修行(后续纲要)

此处应该为填空题(给点意见吧好难~), 简略说下我的想法吧程序待定....

WebGL渲染2D篇
WebGL渲染3D篇
渲染优化伎俩 quadTree(2d渲染) 3d渲染...
光照和暗影 RayCasting / RayTracing...
其余 (算法类,框架解读类...)

最初

须要加微信群的请留言...我看到就会回复的贴一下上文的一些链接。

Canvas 2D 教程
WebGL教程
WebKit之WebGL原理====写的蛮细的