WebGL 和 Canvas 的关系

定义

Canvas 是 HTML5 提供的一个特性，你可以把它当做一个载体，简单的说就是一张白纸。而 Canvas 2D 相当于获取了内置的二维图形接口，也就是二维画笔。Canvas 3D 是获取基于 WebGL的图形接口，相当于三维画笔。你可以选择不同的画笔在上面作画。

OpenGL是底层的驱动级的图形接口（是显卡有直接关系的）类似于 DirectX
但是这种底层的 OpenGL 是寄生于浏览器的JavaScript无法涉及的
但是为了让 Web 拥有更强大的图形处理能力 2010年时候WebGL被推出来

WebGL 允许工程师使用JS 去调用部分封装过的 OpenGL ES2.0 标准接口去提供硬件级别的3D图形加速功能

GLSL 为 OpenGL 着色语言(GLSL――OpenGL Shading Language), 是开发人员用来在OpenGL中着色编程编写的短小的自定义程序，他们是在图形卡的GPU （Graphic Processor Unit图形处理单元）上执行的，代替了固定的渲染管线的一部分。比如：视图转换、投影转换等。GLSL（GL Shading Language）的着色器代码分成2个部分：Vertex Shader（顶点着色器）和Fragment（片断着色器），有时还会有Geometry Shader（几何着色器）。负责运行顶点着色的是顶点着色器。它可以得到当前OpenGL 中的状态，GLSL内置变量进行传递。

CSS Shaders 可以理解为是一种运行于显卡端的小程序，通常用于游戏和其他图形相关的应用。着色器有两种，一种是顶点着色器，用于控制几何体的顶点以绘制出3D表面网格；另一种是片元着色器，用于控制像素的颜色。CSS Shaders技术将允许开发者同时使用顶点着色器和片元着色器

最简单的 webgl 用法

var canvas = document.getElementById("main");var webgl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl");webgl.clearColor(0.0, 0.0, 0.0, 1.0);// 指定清空canvas的颜色webgl.clear(gl.COLOR_BUFFER_BIT);// 清空canvas

总结

Canvas就是画布，只要浏览器支持，可以在canvas上获取2D上下文和3D上下文，其中3D上下文一般就是WebGL，当然WebGL也能用于2D绘制，并且WebGL提供硬件渲染加速，性能更好。
但是 WEBGL 的支持性caniuse还不是特别好，所以在不支持 WebGL 的情况下，只能使用 Canvas 2D api，注意这里的降级不是降到 Canvas，它只是一个画布元素，而是降级使用浏览器提供的 Canvas 2D Api，这就是很多库的兜底策略，如 Three.js, PIXI 等

WebGL 和 Canvas 的关系相关推荐

WebGL、canvas、svg
文章目录 WebGL.canvas.svg 面试题 canvas 面试题 canvas位图和svg矢量图的区别 canvas的绘图原理 canvas.style.width和canvas.width区 ...
HTML5 学习总结（四）——canvas绘图、WebGL、SVG
目录一.Canvas 1.1.创建canvas元素 1.2.画线 1.3.绘制矩形 1.4.绘制圆弧 1.5.绘制图像 1.6.绘制文字 1.7.随机颜色与简单动画二.WebGL 2.1.HTML ...
[WebGL入门]二，开始WebGL之前，先了解一下canvas
注:文章译自http://wgld.org/,原作者杉本雅広(doxas),文章中如果有我的额外说明,我会加上［lufy:］,另外,鄙人webgl研究还不够深入,一些专业词语,如果翻译有误,欢迎大家指 ...
js 纯canvas实现横纵双向关系图
先看图: 需求如上图所示,为了不占用太多的空间,展示没有固定的方向,前期去找了很多antv/G6,echarts等插件,一个graph只有一个方向,要么从上往下,要么从左到右,都不满足需求,于是直接用 ...
【读书笔记】【WebKit技术内幕（三）】GPU硬件加速渲染、canvas与WebGL、 JavaScript与JavaScript 引擎、JavaScriptCore与V8
文章目录前言 Something great 第8章硬件加速机制硬件加速基础 -- *** Chromium的硬件加速机制 -- *** 其他硬件加速模块第9章 JavaScript引擎 Ja ...
小程序camera照相机使用canvas webgl 实时替换颜色
最近开发了一个小程序摄像头拍摄实时替换颜色的功能,要求是将肉眼可见红色替换成带logo的图片,原理是摄像头获取每一帧的图片数据,含有rgba 4个数值,判断rgb三个值是否属于红色范围,如果是,则替换 ...
Canvas、 SVG 和 WebGl三者之间的区别
概要: Canvas 位图,是需要自己画点的白板: SVG 矢量图,是给数据就可以绘制点.线.图形的,基于 XML 的标记语言: WebGL 3D位图,是基于 Canvas 的 3D 框架. 说明 ...
WebGL着色器内置变量gl_PointSize、gl_Position、gl_FragColor、gl_FragCoord、gl_PointCoord
WebGL着色器内置变量 WebGL中文教程网本文是WebGL教程(电子书)的2.7节内容着色器语言在GPU的着色器单元执行,javascript语言.C语言在CPU上执行,任何一种语言的语法规则 ...
学废了系列 - WebGIS vs WebGL图形编程
前工作中有不少涉及到地图的项目,我参加了几次技术评审,前端伙伴们在 WebGIS 方面的知识储备稍有不足,这次分享的主要目的是科普一些在前端领域比较常用的 WebGIS 知识.另外,我之前的工作中积攒 ...

WebGL 和 Canvas 的关系

定义

总结

WebGL 和 Canvas 的关系相关推荐

最新文章

热门文章