WebGL 是一项在网页浏览器呈现3D画面的技术,有别于过去需要安装浏览器插件,通过 WebGL 的技术,只需要编写网页代码即可实现3D图像的展示。WebGL 可以为 Canvas 提供硬件3D加速渲染,这样 Web 开发人员就可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型了。在这篇文章中20个不可思议的 WebGL 示例来增强你对于这个新技术的理解。
1. Aquarium
Image Source:www.webglsamples.org
Created by Greggman and Human Engines. The aquarium runs almost entirely based on a clock.That means the position of the camera and every fish will be the same across machines if their clocks are in sync. When in networked mode each machine keeps its clock in sync by periodically asking the server for the current time.
2. 3 Dreams of Black
Image Source:www.ro.me
A Semi-Intereactive film authored by Chris Milk. It was developed using technology developed by Google and other sources.
It works with chrome mixing 2D and 3D computer graphics, showcasing the song “Black” by Danger Mouse and Daniel Luppi ,with Norah Jones and Jack White.
3. Cube
Image Source:www.playmapscube.com
A WebGL innovative game inspired with Google maps technology. It consists of elements you see in Google Maps and analog labyrinth games combined with amazing controls that can break an experience.
4. Chemdoodle
Image Source:www.web.chemdoodle.com
Chemdoodle is a scientific visualization which lets you pick one of a number of medicines and see a 3D display of its chemical structure on compatible browsers, developed by iChemLabs.
5. Chrysaora
Image Source:www.aleksandarrodic.com
A dynamic Jellyfish WebGL demo built with Vladimir Vuki?evi?’s mjs matrix library. It showcases simulated skeletons, partial server-side simulation and synchronization with WebSocket, and camera facing a particle system and volumetric light effect.
6. WebGL Bookcase
Image Source:www.workshop.chromeexperiments.com
Google Books’ new flashy interface styled after a helix. Within the spiral books are sorted by subject and clicking on any book takes you to the entry in Google Books.
7. Just a Reflektor
Image Source:www.justareflektor.com
Just a Reflektor is a band Arcade Fire music video which was collaborated by Google. Using your mouse you can adjust various real-time filters and effects. This WebGL will require a webcam or simply your mouse.
8. WebGL Earth
Image Source:www.webglearth.com
An open source software enabling exploration, zooming and “playing” with the 3D globe in a web browser. The project is sustained through the support and cooperation of the developer community.
9. 3Dtin
Image Source:www.3dtin.com
3Dtin is an easy to use tool for creating shapes with a natural voxel-oriented 3D pixel approach, with the feature to export your project in 3D printing services.
10. The Biodigital Human
Image Source:www.biodigitalhuman.com
The BioDigital Human is a virtual 3D body that brings to life thousands of medically accurate anatomy objects and health conditions, in an interactive Web-based platform.
11. WebGL Rubik’s Cube
Image Source:www.randelshofer.ch
A Rubik’s Cube applets from Java to WebGL developed by Werner Randelshofer. Parts of the code are from the WebGL demo repository. Codes use in this WebGL are copyrighted by Apple Inc. and by Google Inc. and is used under permission.
12. GLGE
Image Source:www.glge.org
A framework for making WebGL developed by by Paul Brunt. It is a javascript library intended to ease the use of WebGL; which is basically a native browser javascript API giving direct access to openGL ES2, allowing for the use of hardware accelerated 2D/3D applications without having to download any plugins.
13. Ctrl+[P]aper
Image Source:www.grouek.com
Digital studio Grouek designed this Web GL website, that allows anyone to create its paper toy in 3 easy steps. Once you’re done, print the PDF, cut, fold and glue following instructions. In less time than you think, a beautiful, unique, self-created paper toy will proudly stand on your desktop.
14. A holiday message
Image Source:www.itsamessage.com
Developed by @thespite and @mrdoob. It will first require you to put on your address before proceeding. Once entered you’ll see a beautiful 3D scene that has a holiday greetings on it, where as you can move along using your mouse to view the whole 3D models.
15. Materials: Cars
Image Source:www.alteredqualia.com
With this WebGL you can choose to view 3D looks of Bugatti Veyron, Lamborghini Gallardo, Ferrari F50 and Chevrolet Camaro in your browser. Pick your ride and enjoy the view. Guest what, you can even choose their colors.
16. Quake 3
Image Source:www.media.tojicode.com
Developed by Brandon Jones, it is an impressive WebGL game demo complete with music. You can play it by just using your keyboard and mouse.
17. WebGL Image Filter
Image Source:www.evanw.github.io
A WebGL graphic editor application by Evan Wondrasek ,with a smooth and fast interface. You can play around with filter effects like the brightness and contrast, similar to the features you see in Photoshop.
18. From Dust
Image Source:www.bing.com
A WebGL game originally released a couple years ago on some traditional gaming platforms. Ubisoft has ported this game to WebGL and contains amusing and amazing effects and controls on it.
19. Acko.net
Image Source:www.acko.net
A WebGL that offers 3D logo on the header with a basic setting of a site when scrolled down. It offers a possibility that WebGL can be used as a practical setting to a website or software application.
20. WebGL Terrain
Image Source:www.alteredqualia.com
A WebGL demo with dynamic procedural terrain using 3d simplex nois. It features birds from ro.me and the background sound by Kevin Maclead.
本文链接:20个不可思议的 WebGL 示例和演示
编译来源:梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源
20个不可思议的 WebGL 示例和演示的更多相关文章
-
支持Ajax跨域访问ASP.NET Web Api 2(Cors)的简单示例教程演示
随着深入使用ASP.NET Web Api,我们可能会在项目中考虑将前端的业务分得更细.比如前端项目使用Angularjs的框架来做UI,而数据则由另一个Web Api 的网站项目来支撑.注意,这里是 ...
-
2018-06-21 中文代码示例视频演示Python入门教程第五章 数据结构
知乎原链 续前作: 中文代码示例视频演示Python入门教程第四章 控制流 对应在线文档: 5. Data Structures 这一章起初还是采取了尽量与原例程相近的汉化方式, 但有些语义较偏(如T ...
-
2018-06-20 中文代码示例视频演示Python入门教程第四章 控制流
知乎原链 续前作: 中文代码示例视频演示Python入门教程第三章 简介Python 对应在线文档: 4. More Control Flow Tools 录制中出了不少岔子. 另外, 输入法确实是一 ...
-
web 9个令人震惊的WebGL示例
20个使用WebGL和Three.js实现的网页场景 https://www.open-open.com/news/view/9d8136 20个使用WebGL和Three.js实现的网页场景 htt ...
-
未来的 Web:九个不可思议的 WebGL 应用试验
WebGL 技术允许把 JavaScript 和 OpenGL ES 2.0 结合在一起,通过增加 OpenGL ES 2.0 的一个 JavaScript 绑定,WebGL 可以为 HTML5 Ca ...
-
Linux 常用命令解析和Bash Shell使用示例脚本演示
摘要 Linux命令是基于文本格式输入输出的一种程序,依照Unix哲学中强调的程序功能简单,输入宽松,输出严谨,各种程序组合能够具有更强大的功能,而具有这样的灵活性的主要原因是Linux规定程序 ...
-
2018-06-20 中文代码示例视频演示Python入门教程第三章 简介Python
知乎原链 Python 3.6.5官方入门教程中示例代码汉化后演示 对应在线文档: 3. An Informal Introduction to Python 不知如何合集, 请指教. 中文代码示例P ...
-
Java8中时间日期库的20个常用使用示例
除了lambda表达式,stream以及几个小的改进之外,Java 8还引入了一套全新的时间日期API,在本篇教程中我们将通过几个简单的任务示例来学习如何使用Java 8的这套API.Java对日期, ...
-
验证码示例代码演示——以php为例
运行 · 修改index.php(图片验证码的生成示例) [html] view plain copy initNECaptcha({ captchaId: 'YOUR_CAPTCHA_ID', // ...
随机推荐
-
redis连接超时报错
应用程序连接redis超时,报错如下: ERROR DubboServerHandler-xxx.xx.xx.52:20880-thread-172 2016-12-21 15:25:20,429 c ...
-
java内部类以及匿名类
内部类 一个类内部定义的类称为内部类. 内部类允许把逻辑相关的类组织在一起,并控制内部代码的可视性. 内部类与外部类的结构层次如下. 顶层类:最外层的类 外部类:内部类所在的类 内部类:类内部定义的类 ...
-
noip2014-day1-t2
题目描述:无向连通图G 有n 个点,n - 1 条边.点从1 到n 依次编号,编号为 i 的点的权值为W i ,每条边的长度均为1 .图上两点( u , v ) 的距离定义为u 点到v 点的最短距离. ...
-
什么是purge操作
要明白什么清空(purge)操作,你得明白什么是事务的多版本控制,即MVCC(multi-version concurrency control).Innodb为了实现MVCC, 需要在表空间内保存老 ...
-
Jni中C++和Java的参数传递
Jni中C++和Java的参数传递 如何使用JNI的一些基本方法和过程在网上多如牛毛,如果你对Jni不甚了解,不知道Jni是做什么的,如何建立一个基本的jni程序,或许可以参考下面下面这些文章:利用V ...
-
Ubuntu 12.04 Desktop安装XAMPP
1/打开终端 在Dash里搜索.打开Dash,在里面搜索“gnome-terminal”,就可以找到终端应用序.快捷键Ctrl+Alt+L也可以,不过如果是虚拟机的话可能会有问题. 如果想以后快捷打开 ...
-
Java比较器对数组,集合排序一
数组排序非常简单,有前辈们的各种排序算法,再加上Java中强大的数组辅助类Arrays与集合辅助类Collections,使得排序变得非常简单,如果说结合比较器Comparator接口和Collato ...
-
c语言复杂声明解析
这是个好东西,接触c语言好几年了,第一次看到这东西,惊喜万分. 先提供个分析案例,以后看方便 vector <int> * (*seq_array[]) (int )={func1,fun ...
-
Spring 框架的优点及缺点
首先Spring 是一个框架,使用Spring并不代表代码质量的提高,就像盖房子选择用上海的地皮还是北京的地皮一样,房子质量与土地所在的城市无关,与房子的具体设计方案和选料有关. 使用Spring 等 ...
-
MySQL入门,了解下、
本人菜鸡一个,一份简单MySQL笔记送给大家,希望大家喜欢.(●'◡'●) Ⅰ. 数据备份与导入导出 1.1.备份基本概念介绍 1.2.mysqldump详解 1.3.mydumper浅析 1.4.M ...