JavaScript和OpenGL结合创造的惊人的WebGL效果

文章简介:WebGL是一种3D绘图标准,这种绘图技术标准允许把JavaScript和OpenGL ES 2.0结合在一起,为HTML5 Canvas提供硬件3D加速渲染。WebGL技术标准免去了开发网页专用渲染插件的麻烦,可被用于创建具有复杂3D结构的网站页面,甚至可以用来设计3D网页游戏等。

WebGL是一种3D绘图标准,这种绘图技术标准允许把JavaScript和OpenGL ES 2.0结合在一起,为HTML5 Canvas提供硬件3D加速渲染。WebGL技术标准免去了开发网页专用渲染插件的麻烦,可被用于创建具有复杂3D结构的网站页面,甚至可以用来设计3D网页游戏等。
本文将为你带来8个效果惊人的WebGL效果,你可以在最新的Chrome浏览器中查看。
1. Supershape.js

supershape.js让你可以在浏览器中试验3D superformula。Superformula是一个通用的几何变形公式,涵盖了大量在自然界中发现的几何形状。在supershape.js中,除了公式参数外,你还可以选择不同的材料,并设置灯光。

2. HolyMania

在一个扭曲的隧道中,你需要控制一个球,且不能碰到隧道的边缘。看看你的最好成绩是多少。

3. Cube

基于WebGL构建,你可以在一个立方体的纽约、东京和其他城市地图上旅游。

4. Cloth Simulation

基于WebGL、GPU加速的布料模拟程序。

5. Reactive Ball

一个具有金属质感的球。这是关于光线、液态、环境地图的试验。

6. Lorenz Attractor

这不仅是堆积随机点,而是呈现出洛伦茨吸引子(洛伦茨振子的长期行为对应的分形结构)。

7. Swiss Addresses in 3D

使用WebGL,以3D形式呈现出370万瑞士人口的分布图。

8. Cell Cycle

Cell Cycle是一个用来进行webGL设计的应用,用于创建可3D打印的细胞模型。

时间: 2024-10-06 19:19:06

JavaScript和OpenGL结合创造的惊人的WebGL效果的相关文章

JavaScript实现多个重叠层点击切换效果的方法

  JavaScript实现多个重叠层点击切换效果的方法          本文实例讲述了JavaScript实现多个重叠层点击切换效果的方法.分享给大家供大家参考.具体如下: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitio

图像处理-OpenGL或Linux怎么实现笔刷效果?

问题描述 OpenGL或Linux怎么实现笔刷效果? 这种笔刷效果怎么实现? 解决方案 http://download.csdn.net/download/ssl1207/3612051 解决方案二: http://download.csdn.net/download/ssl1207/3612051

cocos2d-x opengl es shader 进行渐变色的滚动效果

问题描述 cocos2d-x opengl es shader 进行渐变色的滚动效果 学习cocos还有es的新人小白一枚,想做一段会向上滚动的渐变光,而且在经过特殊点的时候可以控制不让渐变光绘画,但是该处理的效果还要处理,只不过是有一部分不会被绘制在屏幕上,请问这个使用shader能够实现的吗,我试着编写了一下,发现渐变光不能按照自己的意思绘制,求求大神.另外如果有会渐变光混色的能教我下也行,想了两周了,还是不知道怎么画,各位大神多帮忙!

JavaScript+CSS实现仿Mootools竖排弹性动画菜单效果_javascript技巧

本文实例讲述了JavaScript+CSS实现仿Mootools竖排弹性动画菜单效果.分享给大家供大家参考.具体如下: 这里演示JavaScript+CSS仿Mootools竖排黑色动画菜单,并非使用了Mootools,但效果却和使用了Mootools差不多,动画效果平滑,操作舒服,给菜单增色不少. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-mootools-style-demo/ 具体代码如下: <!DOCTYPE html

Javascript基于jQuery UI实现选中区域拖拽效果_javascript技巧

一.效果展示 普通的三个div 鼠标拖动选中效果 选中所有的div 这样貌似看不出效果,没关系,我们有神奇的gif动画,来一个整体的动画效果感受下. 二.代码实现 整个代码其实也不难,需要用到一个博主自己封装的js文件. AreaSelect.js 考虑到代码量有点大,并且知乎没有代码折叠功能,所以这里就留一个文件名.等博主抽时间将它开源到github上面去,当然,有需要的朋友也可以直接联系博主,博主免费提供! 引入这个js后,还需要引用jquery和jquery UI相关文件. <script

javascript弹出带文字信息的提示框效果_javascript技巧

本文实例讲述了javascript弹出带文字信息的提示框效果.分享给大家供大家参考,具体如下: tooltips.js: // position of the tooltip relative to the mouse in pixel // var offsetx = 12; var offsety = 8; function newelement(newid) { if(document.createElement) { var el = document.createElement('di

JavaScript实现为input与textarea自定义hover,focus效果的方法_javascript技巧

本文实例讲述了JavaScript实现为input与textarea自定义hover,focus效果的方法.分享给大家供大家参考.具体如下: 这里演示JavaScript为input输入框和textarea文本框自定义hover,focus效果,hover也就是鼠标放上去之后的效果,focus是鼠标焦点问题,要实现 这种效果,需要JS来配合,这个例子就是很不错的,它把网页上输入框和文本框都加入了鼠标悬停和鼠标焦点效果. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.n

javascript+HTML5的canvas实现七夕情人节3D玫瑰花效果代码_javascript技巧

本文实例讲述了javascript+HTML5的canvas实现七夕情人节3D玫瑰花效果.分享给大家供大家参考.具体如下: 下面的玫瑰绘制用到了HTML 5的canvas,所以你的浏览器需要支持HTML 5.个人还是比较推荐chrome,这个效果在Firefox下也会稍卡. 效果图: 演示地址:http://demo.jb51.net/js/2015/js-flower-canvas.html 具体代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML

基于JavaScript实现单选框下拉菜单添加文件效果_javascript技巧

本节讲述单选框/下拉菜单/添加文件,综合css,html和JavaScript实现的,具体详情如下所示: 单选框: 实现的功能是:(类似平时的性格测试) 先隐藏一部分页面,然后通过点击单选框来显示. 再通过选项的选择-(每个选项有不同的积分)积分的多少来给出评语 演示代码: <html> <head> <title>DHTML技术演示---radio的使用</title> <meta http-equiv="content-Type"