英文原文:9 IMPRESSIVE WEBGL JAVASCRIPT EFFECT SHOWCASE,翻译:iteye

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 打印的细胞模型。

原文链接:http://blog.jobbole.com/20427/

【转】8 个效果惊人的 WebGL/JavaScript 演示的更多相关文章

  1. javascript跟随滚动效果插件代码(javascript Follow Plugin)

    这篇文章介绍了javascript跟随滚动效果插件代码(javascript Follow Plugin),有需要的朋友可以参考一下Js 跟随滚动效果插件支持定义多个跟随ID,采用css fixed属 ...

  2. 这是html5中WebGL的演示

    这是html5中WebGL的演示,让我们与他人分享爱您发送短消息.每次你进入它使用不同的位置,新的爱情点被添加到全球.让世界更明亮的地方与你的朋友分享! 源文件:部分代码:<!DOCTYPE h ...

  3. 7款效果惊人的HTML5/CSS3应用

    今天是周末,我为大家收集7个比较经典的HTML5/CSS3应用,每一个都提供源代码,效果非常惊人. 1.CSS3/jQuery创意盒子动画菜单 作为前端开发者,各种各样的jQuery菜单见过不少,这款 ...

  4. 5个界面效果很炫的JavaScript UI 框架

    Web 开发很简单,Web 应用的 UI 开发却很复杂,如果能够利用一些成熟的 UI 框架可以大大的减少开发的复杂度.本文向你介绍 5 款界面效果很不错的 JS 框架. 1. ExtJS ExtJS ...

  5. jQuery警告/确认/提示弹出对话框效果(替换传统JavaScript下的提示框)

    http://www.51xuediannao.com/js/jquery/jquery_tsk/ http://www.jq22.com/demo/jqueryConfirm20160413/

  6. Flex Iris效果放大或缩小组件演示

    Iris效果通过扩展或收缩集中在目标上的矩形遮罩为效果目标设置动画.该效果可以从目标的中心放大遮罩来显示目标,也可以向中心收缩遮罩来隐藏目标.演示: 源码如下: <?xml version=&q ...

  7. 你不知道的JavaScript演示代码Github地址

    你不知道的JavaScript博文相关代码托管至Github,每次写完博客会把代码提交上去. 代码地址:https://github.com/rongbo-j/you-dont-know-js 点击D ...

  8. 9个WebGL的演示

    1.  WebGL Water This incredible demo is as fluid as you could believe.  Raise and drop the ball into ...

  9. JavaScript演示下Singleton设计模式

    单例模式的基本结构: MyNamespace.Singleton = function() { return {}; }(); 比如: MyNamespace.Singleton = (functio ...

随机推荐

  1. Laravel 修改默认日志文件名称和位置

    修改默认日志位置 我们平常的开发中可能一直把laravel的日志文件放在默认位置不会有什么影响,但如果我们的项目上线时是全量部署,每次部署都是git中最新的代码,那这个时候每次都会清空我们的日志,显示 ...

  2. Python--day72--ajax简介

    ajax的基本结构: <script> $("#b1").on("click", function () { $.ajax({ url: " ...

  3. html手机端全屏显示和溢出问题

    <meta name="viewport" content="width=1200, initial-scale=0.3"> initial-sca ...

  4. Python--day61 PyCharm连接MySQL工具的使用

    第一步:连接mysql数据工具的位置 第二步:选定数据库 第三步:下载驱动 第四步:连接数据库配置 第五步:在pycharm中查看数据库中的表 第六步:添加数据 第七步:打开用sql语句操作数据库的界 ...

  5. C# 强转会不会抛出异常

    最近遇到一个小伙伴问我,从一个很大的数强转,会不会抛出异常.实际上不会出现异常 最简单的代码是使用一个比 maxvalue 大的数,然后用它强转 long tathkDucmmsc = int.Max ...

  6. java声明异常(throws)

    在可能出现异常的方法上声明抛出可能出现异常的类型: 声明的时候尽可能声明具体的异常,方便更好的处理. 当前方法不知道如何处理这种异常,可将该异常交给上一级调用者来处理(非RuntimeExceptio ...

  7. AWS Credentials 使用

    AWS的文档系统真是烂到家了!!!!! To connect to any of the supported services with the AWS SDK for Java, you must ...

  8. element-ui—dialog使用过程中的坑

    场景一:我们将dialog写成一个可复用的公共组件用于显示不同内容(如表格操作中的修改或添加的弹窗),之后发现dialog的遮罩将弹出层(点击修改或添加后理应由一个弹窗显示出来)都盖住了,而我想要的效 ...

  9. 2019-11-20-Github-给仓库上传-NuGet-库

    title author date CreateTime categories Github 给仓库上传 NuGet 库 lindexi 2019-11-20 08:18:14 +0800 2019- ...

  10. 改善Azure App Service托管应用程序性能的几个技巧

    本文介绍了几个技巧,这些技巧可以改善Azure App Service托管应用程序的性能.其中一些技巧是你现在就可以进行的配置变更, 而其他技巧则可能需要对应用程序进行一些重新设计和重构. 开发者都希 ...