背景
本篇收录于《数据可视化和图形学》专栏
上文谈到在 纠结 中砥砺前行,写下了第一篇专栏文章对于图形学和可视化的认知篇 实现了一个简略的程序。原本打算后续序列已算法和渲染方向为主.然而综合微信/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原理====写的蛮细的
发表回复