背景

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

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

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

本篇纲要

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

1. Canvas 2D 与 WebGL 简介

Canvas 2D

基本概念:

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

渲染 (原理) 流程:

WebKit 为例

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

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

WebGL

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

渲染 (原理) 流程:

WebKit 为例

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

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

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

答复问题为导向:

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

依此的简略答复:

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

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 绘制 rect
ctx.fillRect(10,10,100,100);
    

WebGL

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

<!– webgl utils –>

<script src="https://webglfundamentals.org/webgl/resources/webgl-utils.js"></script>



// js
// 获取渲染上下文
const gl = document.querySelector('#myDiagram').getContext('webgl');

// 顶点 vertex shader
const vs = `
// vertex shader
void main() {gl_Position = vec4(0, 0, 0, 1);  // 坐标  gl_结尾都为 webgl 内置变量
  gl_PointSize = 100.0;      // 大小
} 
`;
// 片元 fragment shader
const fs = `
// fragment shader
void 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. 小道志远, 潜心修行(后续纲要)

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

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

最初

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

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