webgl1到webgl2_30个令人惊叹的WebGL实验!

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

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

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

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

3个黑梦

3个黑梦

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

动画体积粒子

动画体积粒子

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

水族馆

水族馆

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

硫唑嘌呤

硫唑嘌呤

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

吸引者之旅

吸引者之旅

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

海蜇

海蜇

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

金藻

金藻

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

狂人

狂人

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

材料:汽车

材料:汽车

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

webgl汽车

webgl汽车

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

我的机器人国家

我的机器人国家

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

pac药

pac药

现在这是一个可爱的……或血腥的。 这只不过是一款有趣的游戏,向您展示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码在手机上下载书籍。

webgl书架

webgl书架

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

webgl地球

webgl地球

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

世界航班

世界航班

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

webgl图像过滤器

webgl图像过滤器

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

Webgl水

Webgl水

反射

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

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

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


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

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值