看哪，一个具有美好前景的好工具即将出现在您的眼前。 快速，流畅。 它可以渲染3D，并通过集成进行动画处理，猜猜它是什么？ HTML5 ？ CSS3 ？ 不，它称为WebGL，是一个软件库，可扩展JavaScript的功能以生成交互式3D图形，是的，没有任何插件！

在此展示厅中，我们不想向您展示常规内容。 我们想向您展示由专业开发人员精心制作的30个WebGL实验 ，以见证WebGL的真正威力，这不仅鼓舞人心，而且让您瞥见了网络的未来。 单击后跳入未来！

强烈建议您使用Google Chrome开发人员版本的最新版本查看这些演示。 不过，大多数演示都支持最新版本的Firefox ， Google Chrome和Safari 。

由Google数据艺术团队创作的《黑色的三个梦》将您带入3个梦幻世界，这些梦幻世界是由丰富的2D绘图和动画与交互式3D序列交织而成的。 查看奇妙的奇妙体验！

这是一种真正的艺术作品-由3D粒子使用浮动纹理和帧缓冲对象构建的动画动物。 如果您移动鼠标，将带来更多惊喜！

模拟水下环境？ 对于WebGL而言，这不是问题。 该演示以具有高质量纹理，场景动画，像素着色器动画，反射，折射和焦散的3D模型为特色，而所有这些都可以构成真实的水下场景！

足够说，这可能是最史诗般的WebGL演示。 向作者Jochen Wilhelmy致谢。

如果您想体验3D，这是最适合您的演示，还可以使用Martin's Hopalong公式沉思WebGL生成的图形的无穷魅力。

“使用Side FX Houdini完成了过程建模。 使用Python导出器导出为json格式。 使用Autodesk Mudbox绘制的纹理。 使用顶点着色器进行动画处理。”

这不是常规的动画演示，但具有动态仿真的骨骼，与WebSocket进行部分服务器端仿真和同步，面向相机的粒子系统，体积光效果以及VladimirVukićević的mjs矩阵库的功能。 简而言之，这是一项令人惊叹的复杂工程实验。

介绍HelloEnjoy独家为您带来的高端交互式汽车仿真。

您浏览器中的布加迪威龙，兰博基尼加拉多，法拉利F50和雪佛兰科迈罗。 搭便车，欣赏美景。 哎呀，您甚至可以选择它们的颜色。

“极品飞车”系列的未来将出现在网络浏览器中。 太野心了吗？ 如果您访问过这些具有动态立方体贴图，阴影贴图和后处理效果的汽车，当然可以。

好吧，如果人物不是您的最爱，则尝试构建酷炫迷人的机器人，并向您的朋友炫耀！ 您甚至可以花大钱使它成为现实。

3D吃豆人游戏怎么样？ 图形和游戏玩法很好，最重要的是，它很有趣！

现在这是一个可爱的……或血腥的。 这只不过是一款有趣的游戏，向您展示WebGL在开发为自上而下的射击游戏时的功能。 有趣而有趣。

您猜对了，这是一款有趣的坦克射击游戏，可以使用武器和地图进行探索，甚至在某些级别上，您甚至可以购买直升机来探索世界！ 它确实不只是常规游戏，而且图形看起来很舒服！

简单的图形和动画如何在正确完成时给人留下深刻印象的最佳示例。

看看由保罗·刘易斯（Paul Lewis）进行的优雅而启发性的实验“表面”。 您不仅可以更改演示中的幅度，弹性，自动轨道，线框和雨滴，还可以将自己的图像拖放到其中以感受到不同的效果。

只需将您喜欢的图像放到此演示中，并欣赏它爆炸成大量的粒子并与某种形式的磁力相互作用即可。 该实验是四种技术的组合：HTML5的拖放，File API，Canvas和WebGL。

Rutt-Etra-Izer是经典Rutt-Etra视频合成器的WebGL仿真。 该演示使您可以将自己的图像放入其中并进行操作。 有了这些东西，2D图像甚至可以看起来像3D！

一个简单但值得注意的演示，展示了WebGL的液体状态，各向异性的光着色器和摆动的顶点变形。

另一个出色的实验展示了WebGL的潜力。 Nouvelle Vague提供了基于Twitter的富有诗意和互动的实时3D体验，您将看到的是在不同飞行物体上进行的推文。 当然是欣赏推文的艺术方式。

“这次，我只是想做一个测试，看看我可以直接在JavaScript中更新多少个顶点位置和法线。 原来2,000就可以了:)我还添加了一些环境映射。 和怪异。 总是增加怪异。”

Daniel Pettersson制作的令人印象深刻的应用程序，使您可以将多个同时的后处理效果应用于Happy Feet 2预告片。 尝试并玩得开心！

经典2D水效果算法的3D表示形式，还向您展示了WebGL的交互方式。

使用由Google数据艺术团队开发的WebGL书柜，浏览10,000本书的封面。 您还可以按主题搜索，通过单击每个主题打开3D模型，然后使用QR码在手机上下载书籍。

酷炫的Google团队实验，通过其美丽，优雅和未来派的数据可视化效果 ，使您仿佛置身于未来。

另一个可视化的数据可视化应用程序，可以可视化主要航空公司的飞行路线，看起来很有前途！

WebGL图形编辑器应用程序？ 从来没有不可能。 最重要的是，它既快速又流畅！

“反射，折射，焦散和环境光遮挡的水池。” 水池是用高度场模拟的，包含一个可以与水表面相互作用的球体。”

反射

WebGL面临的最大问题可能是其安全性。 根据Wikipedia的说法，美国计算机应急准备小组（US-CERT）发出警告，即WebGL包含多个可能的安全问题，这些问题可能导致任意代码执行，拒绝服务甚至跨域攻击。 这对网站所有者来说非常非常重要。

但是，包括Mozilla和Google在内的Khronos集团一直在建议可能的解决方案和未来的开发方法，以增强安全性，以应对可能的安全威胁。 希望该问题可以减少，甚至在将来解决，因为WebGL具有众多才华横溢的专业开发人员所展示的可能性！

让我们知道哪个实验让您最惊讶，当然，如果您有一个实验，请向我们炫耀！

• HTML5网站：48个潜在的杀害演示
• HTML5网站：另外15个实验
• 鼓舞人心CSS3动画演示

翻译自: https://www.hongkiat.com/blog/webgl-chrome-experiments/