【WebGL】1.WebGL简介
OpenGL和WebGL基本概念
OPEN GL:一个跨编程语言、跨平台的编程接口规格的专业的图形程序接口。它用于三维图像(二维的亦可),是一个功能强大,调用方便的底层图形库。
WebGL:一个3D图形标准融合了Javascript和OPEN GL ES2.0为HTML5 Canvas提供了硬件3D加速渲染Web开发人员就可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型了,还能创建复杂的导航和数据视觉化
OpenGL是一个底层库,他是一个和语言和平台无关图形程序接口(包括二维和三维)可以有多种实现方式,而WebGL则是跟Web有关,是一个Web层面的标准,在WebGL标注下,我们可以通过javascript来实现调用OpenGL等底层图形库进行三维动画制作,是不是相当cool
当然目前由于硬件的限制,Web层面的三维动画开发才刚刚开始,也许几年之后硬件有了很大的发展,说不定WebGL会火热起来

他们之间的关系如上所示
WebGL的特点
1. WebGL最大的特点就是他是浏览器自带的标准,也就是不需要安装任何插件和组件,不同于flash和siverlight,这对于他来说是一个很大的优势
2. 其次WebGL通过统一的、标准的、跨平台的OpenGL接口实现,从而可以利用底层的图形硬件加速功能进行的图形渲染
支持情况
从图中可以看到,Webkit浏览器基本都是支持的,IE直到11才开始支持
效果展示
三维动画说展现出来的效果比二维动画要丰富的很多,甚至惊艳来形容:
开发框架:
WebGL常见的开发框架如Three.js,目前寄托于https://github.com/mrdoob/three.js,目前比较火热,但是中文文档比较少,官网http://threejs.org 截图如下:

【WebGL】1.WebGL简介的更多相关文章
- WebGL 入门-WebGL简介与3D图形学
什么是WebGL? WebGL是一项使用JavaScript实现3D绘图的技术,浏览器无需插件支持,Web开发者就能借助系统显卡(GPU)进行编写代码从而呈现3D场景和对象. WebGL基于OpenG ...
- CSGrandeur的WebGL学习——WebGL教程
在线查看:http://csgrandeur.gitbooks.io/webgl-learn/content/ 离线mobi:http://files.cnblogs.com/files/CSGran ...
- Javascript高级编程学习笔记(98)—— WebGL(4) WebGL上下文(2)
错误 Javascript与WebGL之间的一个最大区别在于,WebGL的操作一般不会抛出错误 如果希望获取WebGL的错误信息,那么就需要手动调用 gl.getError() 方法 该方法会返回以 ...
- Javascript高级编程学习笔记(97)—— WebGL(3) WebGL上下文(1)
WebGL上下文 在支持WebGL的浏览器中,WebGL的名字为 "experimental-webgl",这是由于 webgl 的规范仍未制定完成 制定完成后名字就会改为简单的 ...
- 【WebGL】WebGL API 详解
基于 WebGL Specifications 最全面的API释疑. 类型以及对象定义 这部分内容主要定义一部分类型和数据结构. typedef unsigned long GLenum; typed ...
- 有关于OpenGL、OpenGL ES、WebGL的小结
转自原文 有关于OpenGL.OpenGL ES.WebGL的小结 一. OpenGL简介 OpenGL(全写Open Graphics Library)是个定义了一个跨编程语言.跨平台的编程接口 ...
- WebGL入门教程(五)-webgl纹理
前面文章: WebGL入门教程(一)-初识webgl WebGL入门教程(二)-webgl绘制三角形 WebGL入门教程(三)-webgl动画 WebGL入门教程(四)-webgl颜色 这里就需要用到 ...
- WebGL入门教程(二)-webgl绘制三角形
前面已经介绍过了webgl,WebGL入门教程(一)-初识webgl(http://www.cnblogs.com/bsman/p/6128447.html),也知道了如何绘制一个点,接下来就用web ...
- WebGL入门教程(一)-初识webgl
一.WebGL和传统网页的区别: 普通网页组成成分:HTML.JavaScript: WebGL网页组成成分:HTML5.JavaScript和GLSL ES(着色器语言 OpenGL ES): 二. ...
- WebGL自学教程——WebGL演示样本:开始
最终开始WebGL样品演示,...... 开始 使用WebGL步骤,非常easy: 1. 获得WebGL的渲染环境(也叫渲染上下文). 2. 发挥你的想象力,利用<WebGL參考手冊>中的 ...
随机推荐
- 对java NIO 通道的一些了解
@引言 reactor(反应器)模式 使用单线程模拟多线程,提高资源利用率和程序的效率,增加系统吞吐量.下面例子比较形象的说明了什么是反应器模式: 一个老板经营一个饭店, 传统模式 - 来一个客人安排 ...
- SparkSQL程序设计
1.创建Spark Session val spark = SparkSession.builder . master("local") .appName("spark ...
- C++基础---结构体(struct)
转自:http://blog.csdn.net/cainv89/article/details/48447225 1. 结构体(struct) 1.1 结构体的概念 结构体(struct):是由一系列 ...
- 企业和开发人员究竟该如何适应web标准?
以下几点注意事项仅供参考:完善的前期策划和分析完善的前期逻辑模型以及项目规范性文档的制定尽可能将行政性干预移到策划阶段(按照国内的情况,做到这一点可能很困难)尽可能向后兼容,在项目规范性文档制定阶段对 ...
- ARTS Week 001
Algorithm Leetcode 1. Two Sum Given an array of integers, return indices of the two numbers such tha ...
- js事件委托篇(附js一般写法和js、jq事件委托写法)
参考: jQuery代码优化:事件委托篇 使用该技术能让你避免对特定的每个节点添加事件监听器:相反,事件监听器被添加在他们的父元素上,事件监听器会分析从子元素上冒泡上来的事件,并找到是哪个子元素事件. ...
- oracle查看被锁的表以及解锁表
在oracle 上面查看别锁定的表,以及解锁表的sql: select t3.object_name,t3.owner,t2.machine,t2.sid,t2.serial# from v$lock ...
- Sql Server数据库链接字符串参数说明
DataSource,//要连接到的 SQL Server 实例的名称或网络地址 FailoverPartner,//在主服务器停机时要连接到的伙伴服务 ...
- Bigdecimal: Non-terminating decimal expansion; no exact representable decimal result.
做除法没有指定保留小数点后几位,就会抛出此异常. 因为会除不尽 Non-terminating decimal expansion; no exact representable decimal re ...
- Quartz(自动任务)中的触发器Trigger
1.Quartz中的触发器TriggerJob 包含了要执行任务的逻辑,但是 Job 对何时该执行却一无所知.这个事情留给了 Trigger.Quartz Trigger 继承了抽象的 org.qua ...