共计 2407 个字符，预计需要花费 7 分钟才能阅读完成。
背景
本篇收录于《数据可视化和图形学》专栏
上文谈到在 纠结 中砥砺前行, 写下了第一篇专栏文章对于图形学和可视化的认知篇 实现了一个简略的程序。原本打算后续序列已算法和渲染方向为主. 然而综合微信 /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 绘制 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. 小道志远, 潜心修行(后续纲要)
此处应该为填空题(给点意见吧 好难~), 简略说下我的想法吧 程序待定 ….
- WebGL 渲染 2D 篇
- WebGL 渲染 3D 篇
- 渲染优化伎俩 quadTree(2d 渲染) 3d 渲染 …
- 光照和暗影 RayCasting / RayTracing…
- 其余 (算法类, 框架解读类 …)
最初
须要加微信群的请留言 … 我看到就会回复的 贴一下上文的一些链接。
- Canvas 2D 教程
- WebGL 教程
- WebKit 之 WebGL 原理 ==== 写的蛮细的
