WebGL-一

WebGL也是用来做3D的，WebGL（全写Web Graphics Library）是一种3D绘图标准，这种绘图技术标准允许把JavaScript和OpenGL ES 2.0结合在一起，通过增加OpenGL ES 2.0的一个JavaScript绑定，WebGL可以为HTML5 Canvas提供硬件3D加速渲染，这样Web开发人员就可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型了，还能创建复杂的导航和数据视觉化。可被用于创建具有复杂3D结构的网站页面，甚至可以用来设计3D网页游戏等等。

WebGL完美地解决了现有的Web交互式三维动画的两个问题：第一，它通过HTML脚本本身实现Web交互式三维动画的制作，无需任何浏览器插件支持;第二，它利用底层的图形硬件加速功能进行的图形渲染，是通过统一的、标准的、跨平台的OpenGL接口实现的。

开始先从实现2D做起，这里有一个入门级的程序，可以通过在画板上的不同位置点击而获取不同颜色的点，以画板中心为坐标原点四个象限有不同的颜色，访问地址  http://123.206.70.64:8080/WebGL2/ColoredPoints.html。

下面是效果图：

时间： 2024-10-09 15:19:17

WebGL-一的相关文章

20个不可思议的 WebGL 示例和演示

WebGL 是一项在网页浏览器呈现3D画面的技术,有别于过去需要安装浏览器插件,通过 WebGL 的技术,只需要编写网页代码即可实现3D图像的展示.WebGL 可以为 Canvas 提供硬件3D加速渲染,这样 Web 开发人员就可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型了.在这篇文章中20个不可思议的 WebGL 示例来增强你对于这个新技术的理解. 1. Aquarium Image Source:www.webglsamples.org Created by Greggman an

WebGL递归处理和移动?旋转?缩放

3D世界只有三种运动方式:移动.旋转.放大缩小. 使用setTimeout函数可以实现反复的循环处理,那么具体的做法是怎样的呢?setTimeout函数的第一个参数是调用的函数,第二个参数是需要经过多长时间(毫秒)后调用这个函数.如果第一个参数指定为当前所运行的函数的话,那么就可以实现持续循环了.    ?函数A被调用    ?在函数A中,使用setTimeout,并传入函数A作为参数    ?经过指定的时间后,函数A被调用    按照上面的步骤,把WebGL中绘图部分写成递归函数,就可以持续循

初学WebGL引擎-BabylonJS：第0篇-起因

学习WebGL的BabylonJS是在一次偶然的情况下进行的,主要为了满足个人对全栈开发的欲望. 言归正传,下面开始简单说说相关过程 WebGL是什么?WebGL是基于html的客户端页面技术,基于html5的canvas(画布)展开的实施渲染.可完成游戏开发,场景演示等很多效果 为什么不选择threejs?因为太火,所以不喜欢(容我任性一下).最后选择了有微软基因的babylonJS引擎完成我的目标. 学习前提:国内对于Babylon相对太少,很多事情需要摸索,作者我目前仅仅是会初略的JS与J

无插件纯Web 3D机房，HTML5+WebGL倾力打造

前言 最近项目开发任务告一段落,刚好有时间整理这大半年的一些成果.使用html5时间还不久,对js的认识还不够深入.没办法,以前一直搞java,对js的一些语言特性和概念一时还转换不过来. 上一篇介绍了项目中做的一个彩虹爆炸图,主要用了 html5的canvas的2d绘制技术.这一回我想介绍一下项目中的一个亮点技术:html5的3D,以及如何用它打造精美的3D机房监控系统. 目标效果图 下图是客户给找的一张的效果参考图,希望机房至少能达到下面的3D效果. 懂的人都知道,这可是一张设计公司出的装修

三、在Canvas中使用WebGL

上一篇介绍了如何在<canvas>标签中绘制2d图形:接下来,我们看看如何在<canvas>中使用WebGL来绘制3d图形. 我们开始编写一个最短的WebGL程序:Hello WebGL;这个程序的功能非常简单,使用指定颜色清空<canvas>标签的绘图区下图显示了程序运行的效果,清空(用黑色)了<canvas>定义的矩形区域. 我们来看下代码,先看一下Hello WebGL.html: 1 <!doctype html> 2 <html&

[WebGL入门]二十四，补色着色

注:文章译自http://wgld.org/,原作者杉本雅広(doxas),文章中如果有我的额外说明,我会加上［lufy:］,另外,鄙人webgl研究还不够深入,一些专业词语,如果翻译有误,欢迎大家指正. 本次的demo的运行结果 着色方法 上次介绍了反射光,反射光是实现光泽的不可缺少的概念,到此为止,基本的光照效果都已经封装完毕了. 光照的效果主要就是扩散光,环境光和反射光三种方法,灵活运用这三种光照,应该就能实现非常逼真的照明效果了. 前几篇一直在说光照,这次稍微换个视点,看一下着色,着色是

WebGL 支持检测与已支持浏览器版本汇总

太阳火神的美丽人生 (http://blog.csdn.net/opengl_es) 本文遵循"署名-非商业用途-保持一致"创作公用协议 转载请保留此句:太阳火神的美丽人生 -  本博客专注于 敏捷开发及移动和物联设备研究:iOS.Android.Html5.Arduino.pcDuino,否则,出自本博客的文章拒绝转载或再转载,谢谢合作. 是否我的浏览器支持 WebGL http://caniuse.com 在页面搜索 webgl,找到  WebGL - 3D Canvas grap

如何在WebGL全景图上做标记

WebGL可以用来做3D效果的全景图呈现,例如故宫的全景图.但有时候我们不仅仅只是呈现全景图,还需要增加互动.故宫里边可以又分了很多区域,例如外朝中路.外朝西路.外朝东路等等.我们需要在3D图上做一些标记表示某个小的区域.当点击这个标记时,界面切换到对应标记区域的全景图.下图是实现此功能的一个小DEMO: 如何实现这样的功能?通过本篇的介绍,我们可以了解到以上交互过程的代码实现方式.这里我先提出几个问题 1).如何获取3D全景图某个地址的3D坐标? 2).如何将获取的地址的3D坐标转换为屏幕上的

three.js是什么，能干嘛，和webgl什么关系

如今浏览器的功能越来越强大,而且这些功能可能通过JavaScript直接调用.你可以用HTML5标签轻松地添加音频和视频,而且可以在HTML5画布上创建各种交互组件.现在这个功能集合里又有了一个新成员,即支持webGL.通过webgl可以直接使用显卡的计算资源,创建高性能的二维和三维计算机图形,然后在JavaScript里直接使用webGL编程,创建三维场景并生成动画,这个过程非常复杂,而且容易出错.three.js库可以简化这个过程. ----摘自<Three.js开发指南> 看了上面的摘文

webgl 网站demo

网络上的一些经典的WebGL资源网站和WebGL开源引擎整理 http://www.babylonjs.com/ http://threejs.org/ http://www.finalmesh.com/webglexamples.htm http://www.glge.org/category/demos/ http://www.visualiser.fr/index.php http://www.babylonjs.com/Demos/Retail/ http://oos.moxiecode