WebGL

想必各位看官大大都了解过，进行3D图形渲染，主要依赖显卡（GPU）为我们提供强大的运算支持。GPU也像不同CPU架构具备不同的指令集一样，不同的显卡厂商也为不同的GPU型号提供了不同的底层指令逻辑，所支持的能力也不尽相同。为了简化方便图形应用开发和硬件适配的工作量，诞生了一些可以让不同应用方便调用的图形库，用以抹平底层硬件实现的差异，例如OpenGL、 Direct3D、Vulkan......

基本概念

WebGL（Web Graphics Library，Web图形库）， 是一个JavaScript API，可在任何兼容的Web浏览器中渲染高性能的交互式3D和2D图形，而无需使用插件。 WebGL通过引入一个与OpenGL ES 2.0非常一致的API来做到这一点，该API可以在HTML5 元素中使用。这种一致性使API可以利用用户设备提供的硬件图形加速。通过这些接口，开发者可以直接跟GPU进行通信。

目前支持 WebGL 的浏览器有：Firefox 4+, Google Chrome 9+, Opera 12+, Safari5.1+, Internet Explorer 11+和Microsoft Edge build 10240+；然而, WebGL一些特性也需要用户的硬件设备支持。

WebGL 2 API引入了对大部分的OpenGL ES 3.0功能集的支持; 它是通过WebGL2RenderingContext界面提供的。

WebGL 程序分为 2 部分：

使用 Javascript 编写的运行在CPU的程序
使用 GLSL 编写的运行在GPU的着色器程序

着色器程序接收CPU传过来的数据，并进行一定处理，最终渲染成丰富多彩的应用样式。

3D坐标系

渲染流程

WebGL 能绘制的基本图元只有 3 种，分别是点、线段、三角形，对应了物理世界中的点线面。所有复杂的图形或者立方体，都是先用点组成基本结构，然后用三角形将这些点构成的平面填充起来，最后由多个平面组成几何体。

但现实情况是，如果想生成满足各种应用场景的复杂形状，几何结构会非常复杂，代码写起来也会非常复杂。这时候就会有看官会问了：那我写个

浅识WebGL和Three.js相关推荐

【瑞数5】浅谈某普期刊JS逆向的环境检测点
[瑞数5]浅谈某普期刊JS逆向的环境检测点前言 JS加载流程第一个JS 第二个JS 第三个JS AST简单解混淆环境检测前奏异步执行JS流程高潮运行结果总结鸣谢前言这几天把某期刊 ...
Web3D编程入门总结——WebGL与Three.js基础介绍
1 /*在这里对这段时间学习的3D编程知识做个总结,以备再次出发.计划分成"webgl与three.js基础介绍"."面向对象的基础3D场景框架编写".&quo ...
浅识Flutter 基本组件之TextField组件输入框decoration属性
浅识Flutter 基本组件之TextField组件输入框decoration属性 decoration InputDecoration控制输人框提示信息样式的常用属性 InputDecoratio ...
浅识Flutter 基本组件Scaffold
浅识Flutter 基本组件Scaffold 1. body 2. backgroundColor 3. appBar Scaffold是Flutter开发中实现Material Design布局结构 ...
浅识Flutter 基本组件MaterialAPP的theme属性 app主题
浅识Flutter 基本组件MaterialAPP的theme属性 app主题 ThemeData属性及描述设置主题 theme属性用于指定应用程序的主题(即共享颜色和字体样式). 例如,需要将应用 ...
浅识Flutter 基本组件Scaffold的 drawer属性 app创建头像
浅识Flutter 基本组件Scaffold的 drawer属性 app创建头像在项目开发中使用本地图片资源文件的步骤. 1.在项目下创建一个文件夹image 2.将本地图片放入images文件夹里 ...
Hbuilder开发app实战-识岁06-face++的js实现【完结】
前言因为识岁app比較简单.所以这节就完结吧, 当然另一些能够优化完好的地方,可是个人兴趣不是非常大, 有想继续完好的,源代码在这里:https://github.com/uikoo9/shisui ...
浅谈webGl vr全景模式
开讲之前解释一下这些词,以免没学习过webGl的同学还要再去找百度 webGL=> 是一种3D绘图协议,这种绘图技术标准允许把JavaScript和OpenGL ES 2.0结合在一起,通过增加 ...
关于WebGL，Three.js，OpenGL，Direct3D，CSS3D，GPU
OpenGL OpenGL(英语:Open Graphics Library,译名:开放图形库或者"开放式图形库")是用于渲染2D.3D矢量图形的跨语言.跨平台的应用程序编程接口( ...

浅识WebGL和Three.js

WebGL

基本概念

3D坐标系

渲染流程

浅识WebGL和Three.js相关推荐

最新文章

热门文章