【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才开始支持

效果展示

三维动画说展现出来的效果比二维动画要丰富的很多,甚至惊艳来形容:

?TankWorld :一个Web三维坦克游戏

?Clouds:一个云雾效果

?HelloRacerWebGL:一个方程式赛车游戏

?Google Body Browser:google人体解剖

?pearl boy:一个场景

?http://helloracer.com/racer-s/:一个非常酷的赛车效果

开发框架:

WebGL常见的开发框架如Three.js,目前寄托于https://github.com/mrdoob/three.js,目前比较火热,但是中文文档比较少,官网http://threejs.org 截图如下:

时间: 2024-09-28 20:41:07

【WebGL】1.WebGL简介的相关文章

WebGL 入门-WebGL简介与3D图形学

什么是WebGL? WebGL是一项使用JavaScript实现3D绘图的技术,浏览器无需插件支持,Web开发者就能借助系统显卡(GPU)进行编写代码从而呈现3D场景和对象. WebGL基于OpenGL ES 2.0,OpenGL ES 是 OpenGL 三维图形 API 的子集,针对手机.平板电脑和游戏主机等嵌入式设备而设计.浏览器内核通过对OpenGL API的封装,实现了通过JavaScript调用3D的能力.WebGL 内容作为 HTML5 中的Canvas标签的特殊上下文实现在浏览器中

【转】使用 WebGL 进行 3D 开发,第 1 部分: WebGL 简介

转自HTML5游戏开发者社区 使用 WebGL 进行 3D 开发,第 1 部分: WebGL 简介使用 WebGL 进行 3D 开发,第 2 部分: 使用 WebGL 库以更少的编码做更多的事情使用 WebGL 进行 3D 开发,第 3 部分: 添加用户交互 WebGL API 让 JavaScript 开发人员能够直接利用如今的 PC 及移动设备硬件中强大的内置 3D 图形加速功能.现代浏览器透明地支持 WebGL,它使人们可以为主流 Web 用户创建高性能的 3D 游戏.应用程序以及 3D

有关于OpenGL、OpenGL ES、WebGL的小结

转自原文 有关于OpenGL.OpenGL ES.WebGL的小结 一.   OpenGL简介 OpenGL(全写Open Graphics Library)是个定义了一个跨编程语言.跨平台的编程接口的规格,它用于三维图西象(二维的亦可).OpenGL是个专业的图形程序接口,是一个功能强大,调用方便的底层图形库. 关于其他的介绍我就不说了.这边我说一下有OpenGL的资源网站: OpenGL官网:http://www.opengl.org/resources/libraries/glut/ Ne

【转】使用 WebGL 进行 3D 开发,第 3 部分: 添加用户交互

转自HTML5游戏开发者社区 使用 WebGL 进行 3D 开发,第 1 部分: WebGL 简介使用 WebGL 进行 3D 开发,第 2 部分: 使用 WebGL 库以更少的编码做更多的事情使用 WebGL 进行 3D 开发,第 3 部分: 添加用户交互 WebGL API 为 JavaScript 开发人员提供了直接利用当今的 PC 和移动设备硬件中的强大内置 3D 图形加速功能的能力.现代浏览器已经明确支持 WebGL,WebGL 使得人们可以为主流 Web 用户创建高性能的 3D 游戏

WebGL入门教程(二)-webgl绘制三角形

前面已经介绍过了webgl,WebGL入门教程(一)-初识webgl(http://www.cnblogs.com/bsman/p/6128447.html),也知道了如何绘制一个点,接下来就用webgl画出一个三角形. 效果图: 在WebGL入门教程(一)-初识webgl中,知道如何绘制一个点 //绘制一个点 gl.drawArrays(gl.POINTS, 0, 1); 但是图形是有多个点组成,那么就应该考虑如何绘制多个点,WebGL提供了一种很方便的机制,缓冲区对象(buffer obje

认识WebGL

认识WebGL 作者:chszs,转载需注明.博客主页:http://blog.csdn.net/chszs WebGL是一个跨平台.免费的底层3D绘图API的Web标准,它基于OpenGL ES 2.0标准.WebGL是网页上渲染三维图形图像的技术,它本身是HTML5规范的一部分.WebGL通过HTML5 Canvas元素对外暴露DOM编程接口. WebGL全称是Web-based Graphics Language,它提供了使用JavaScript与GPU交互的方法. 让我们来回顾一下在We

WebGL入门教程第1篇——六色立方

WebGL入门教程第1篇——六色立方 WebGL,一项允许开发人员在浏览器里操纵GPU来显示图形的技术.让我们一起走进WebGL的世界. 读者对象 本系列适合具有基础JavaScript知识的开发人员. 准备工作 我们应该在本地搭建好web服务器,或者安装了具有预览功能的IDE.如果你安装了Visual Studio,Nivk童鞋为我们开发了WebGL代码提示功能,你可以通过以下步骤使Visual Studio支持WebGL代码提示:打开Visual Studio——点击工具——点击选项——展开

WebGL 规范(WebGL Specification)

太阳火神的美丽人生 (http://blog.csdn.net/opengl_es) 本文遵循"署名-非商业用途-保持一致"创作公用协议 转载请保留此句:太阳火神的美丽人生 -  本博客专注于 敏捷开发及移动和物联设备研究:iOS.Android.Html5.Arduino.pcDuino,否则,出自本博客的文章拒绝转载或再转载,谢谢合作. WebGL Specification Version 1.0.2, 01 March 2013 This version: https://ww

WebGL自学教程——WebGL演示样本:开始

最终开始WebGL样品演示,...... 开始 使用WebGL步骤,非常easy: 1. 获得WebGL的渲染环境(也叫渲染上下文). 2. 发挥你的想象力,利用<WebGL參考手冊>中的函数,參考<OpenGL ES 2.0编程指南>和各种已有的WebGL演示,针对获得的WebGL渲染环境进行操作,表达出你的意境. 为了获得WebGL的渲染环境.或者说,为了给WebGL一个渲染环境.我们须要在Web页面中定义一个名称为"canvas "的HTML5元素. 每一

【WebGL初学系列之五】旋转,平移,缩放

nbcoder.com地址:http://nbcoders.com/webgl-chu-xue-xi-lie-zhi-wu-ai.html 最近把WebGL做的相关Demo已经放在 http://www.nbcoders.com 上了,这样就可以直观的进行看效果. 地址:    http://lab.nbcoders.com/ixshells/ 本文旋转平移缩放Demo的地址: http://lab.nbcoders.com/ixshells/Html/ScaleRotateTranslate.